皮肤科医生刘军连 https://wapjbk.39.net/yiyuanfengcai/ys_bjzkbdfyy/793/
JS选取DOM元素的方法
注意：原生JS选取DOM元素比使用jQuery类库选取要快很多
1、通过ID选取元素document.getElementById(myid);2、通过CLASS选取元素document.getElementsByClassName(myclass)[0];3、通过标签选取元素document.getElementsByTagName(mydiv)[0];4、通过NAME属性选取元素（常用于表单）document.getElementsByName(myname)[0];
JS修改CSS样式
document.getElementById(myid).style.display=none;
class操作：
JS修改CLASS属性document.getElementById(myid).className=active;如果有多个CLASS属性，即用空格隔开document.getElementById(myid).className=activediv-1;移除该元素上的所有CLASSdocument.getElementById(myid).className=;注意：使用classList会优于使用classNamedocument.getElementById(myid).classList.item(0);//item为类名的索引document.getElementById(myid).classList.length;//只读属性document.getElementById(myid).classList.add(newClass);//添加classdocument.getElementById(myid).classList.remove(newClass);//移除classdocument.getElementById(myid).classList.toggle(newClass);//切换，有则移除，没有则添加document.getElementById(myid).classList.contains(newClass);//判断是否存在该class
补充：add和remove方法不允许链式操作，因为返回的都是undefined，其次，也不允许同时添加或删除多个class，可以自行扩展一下
DOMTokenList.prototype.adds=function(tokens){tokens.split().forEach(function(token){this.add(token);}).bind(this));returnthis;};varclList=document.body.classList;clList.adds(abc).toString();//abc
JS修改文本
document.getElementById(myid).innerHTML=;
JS创建元素并向其中追加文本
varnewdiv=document.createElement(div);varnewtext=document.createTextNode();newdiv.appendChild(newtext);document.body.appendChild(newdiv);
同理：removeChild()移除节点，并返回节点
cloneNode()复制节点
insertBefore()插入节点（父节点内容的最前面）
注意：insertBefore()有两个参数，第一个是插入的节点，第二个是插入的位置
例子：
varlist=document.getElementById(myList);list.insertBefore(newItem,list.childNodes[1]);//插入新节点newItem到list的第二个子节点
JS返回所有子节点对象childNodes
varmylist=document.getElementById(myid);for(vari=0,imylist.childNodes.length;i++){console.log(mylist.childNodes[i]);}firstChild返回第一个子节点lastChild返回最后一个子节点parentNode返回父节点对象nextSibling返回下一个兄弟节点对象previousSibling返回前一个兄弟节点对象nodeName返回节点的HTML标记名称
原生JS汇总：
一、节点1.1节点属性Node.nodeName//返回节点名称，只读Node.nodeType//返回节点类型的常数值，只读Node.nodeValue//返回Text或Comment节点的文本值，只读Node.textContent//返回当前节点和它的所有后代节点的文本内容，可读写Node.baseURI//返回当前网页的绝对路径Node.ownerDocument//返回当前节点所在的顶层文档对象，即documentNode.nextSibling//返回紧跟在当前节点后面的第一个兄弟节点Node.previousSibling//返回当前节点前面的、距离最近的一个兄弟节点Node.parentNode//返回当前节点的父节点Node.parentElement//返回当前节点的父Element节点Node.childNodes//返回当前节点的所有子节点Node.firstChild//返回当前节点的第一个子节点Node.lastChild//返回当前节点的最后一个子节点//parentNode接口Node.children//返回指定节点的所有Element子节点Node.firstElementChild//返回当前节点的第一个Element子节点Node.lastElementChild//返回当前节点的最后一个Element子节点Node.childElementCount//返回当前节点所有Element子节点的数目。1.2操作Node.appendChild(node)//向节点添加最后一个子节点Node.hasChildNodes()//返回布尔值，表示当前节点是否有子节点Node.cloneNode(true);//默认为false(克隆节点),true(克隆节点及其属性，以及后代)Node.insertBefore(newNode,oldNode)//在指定子节点之前插入新的子节点Node.removeChild(node)//删除节点，在要删除节点的父节点上操作Node.replaceChild(newChild,oldChild)//替换节点Node.contains(node)//返回一个布尔值，表示参数节点是否为当前节点的后代节点。Node.
//紧邻p节点后的一个同辈节点$("p").nextAll()//p节点之后所有的同辈节点$("#node").nextUntil("#node2")//id为"#node"节点之后到id为#node2之间所有的同辈节点,掐头去尾$("p").prev()//紧邻p节点前的一个同辈节点$("p").prevAll()//p节点之前所有的同辈节点$("#node").prevUntil("#node2")//id为"#node"节点之前到id为#node2之间所有的同辈节点,掐头去尾$("p").parent()//每个p节点的父节点$("p").parents()//每个p节点的所有祖先节点,body,html$("#node").parentsUntil("#node2")//id为"#node"节点到id为#node2之间所有的父级节点,掐头去尾$("div").siblings()//所有的同辈节点,不包括自己5、属性操作$("img").attr("src");
//返回文档中所有图像的src属性值$("img").attr("src","node.jpg");//设置所有图像的src属性$("img").removeAttr("src");
//将文档中图像的src属性删除$("input[type=checkbox]").prop("checked",true);//选中复选框$("input[type=checkbox]").prop("checked",false);//不选中复选框$("img").removeProp("src");
//删除img的src属性6、样式操作$("p").addClass("selected");
//为p节点加上selected类$("p").removeClass("selected");//从p节点中删除selected类$("p").toggleClass("selected");//如果存在就删除,否则就添加HTML代码/文本/值7、内容操作$(p).html();
//返回p节点的html内容$("p").html("Hellobhello/b!");//设置p节点的html内容$(p).text();
//返回p节点的文本内容$("p").text("hello");
//设置p节点的文本内容$("input").val();
//获取文本框中的值$("input").val("hello");
//设置文本框中的内容8、CSS操作$("p").css("color");//访问查看p节点的color属性$("p").css("color","red");//设置p节点的color属性为red$("p").css({"color":"red","background":"yellow"});//设置p节点的color为red，background属性为yellow（设置多个属性要用{}字典形式）9、定位与偏移$(p).offset()//节点在当前视口的相对偏移,对象{top:5,left:9}$(p).offset().top$(p).offset().left$("p").position()//节点相对父节点的偏移,对可见节点有效，Object{top:5,left:8}$(window).scrollTop()//获取滚轮滑的高度$(window).scrollLeft()//获取滚轮滑的宽度$(window).scrollTop(25)//设置滚轮滑的高度为、尺寸$("p").height();//获取p节点的高度$("p").width();//获取p节点的宽度$("p:first").innerHeight()//获取第一个匹配节点内部区域高度(包括补白、不包括边框)$("p:first").innerWidth()//获取第一个匹配节点内部区域宽度(包括补白、不包括边框)$("p:first").outerHeight()//匹配节点外部高度(默认包括补白和边框)$("p:first").outerWidth()//匹配节点外部宽度(默认包括补白和边框)$("p:first").outerHeight(true)//为true时包括边距11、DOM内部插入$("p").append("bhello/b");//每个p节点内后面追加内容$("p").appendTo("div");
//p节点追加到div内后$("p").prepend("bHello/b");//每个p节点内前面追加内容$("p").prependTo("div"); //p节点追加到div内前12、DOM外部插入$("p").after("bhello/b");//每个p节点同级之后插入内容$("p").before("bhello/b");//在每个p节点同级之前插入内容$("p").insertAfter("#node");//所有p节点插入到id为node节点的后面$("p").insertBefore("#node");//所有p节点插入到id为node节点的前面13、DOM替换$("p").replaceWith("bParagraph./b");//将所有匹配的节点替换成指定的HTML或DOM节点$("bParagraph./b").replaceAll("p");//用匹配的节点替换掉所有selector匹配到的节点14、DOM删除$("p").empty();//删除匹配的节点集合中所有的子节点，不包括本身$("p").remove();//删除所有匹配的节点,包括本身$("p").detach();//删除所有匹配的节点(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)15、DOM复制$("p").clone()
//克隆节点并选中克隆的副本$("p").clone(true)//布尔值指事件处理函数是否会被复制16、DOM加载完成事件$(document).ready(function(){您的代码...});//缩写$(function($){您的代码...});17、绑定事件//bind为每个匹配节点绑定事件处理函数，绑定多个用{}。$("p").bind("click",function(){alert($(this).text());});$(#div1).bind({"mouseover":function(){$(#div1).parent().removeClass("hide");},"mouseout":function(){$(#div1).parent().addClass("hide");}});$("p").one("click",function(){})//事件绑定后只会执行一次$("p").unbind("click")//反绑一个事件//与bind不同的是当时间发生时才去临时绑定。$("p").delegate("click",function(){您的代码});$("p").undelegate();
//p节点删除由delegate()方法添加的所有事件$("p").undelegate("click")//从p节点删除由delegate()方法添加的所有click事件$("p").click();
//单击事件$("p").dblclick();//双击事件$("input[type=text]").focus()//节点获得焦点时,触发focus事件$("input[type=text]").blur()//节点失去焦点时,触发blur事件$("button").mousedown()//当按下鼠标时触发事件$("button").mouseup()//节点上放松鼠标按钮时触发事件$("p").mousemove()//当鼠标指针在指定的节点中移动时触发事件$("p").mouseover()//当鼠标指针位于节点上方时触发事件$("p").mouseout() //当鼠标指针从节点上移开时触发事件$(window).keydown()//当键盘或按钮被按下时触发事件$(window).keypress()//当键盘或按钮被按下时触发事件,每输入一个字符都触发一次$("input").keyup()//当按钮被松开时触发事件$(window).scroll()//当用户滚动时触发事件$(window).resize()//当调整浏览器窗口的大小时触发事件$("input[type=text]").change()//当节点的值发生改变时触发事件$("input").select()//当input节点中的文本被选择时触发事件$("form").submit()//当提交表单时触发事件$(window).unload()//用户离开页面时18、事件对象$("p").click(function(event){alert(event.type);//"click"});(evnetobject)属性方法：event.pageX //事件发生时，鼠标距离网页左上角的水平距离event.pageY //事件发生时，鼠标距离网页左上角的垂直距离event.type
//事件的类型event.which //按下了哪一个键event.data
//在事件对象上绑定数据，然后传入事件处理函数event.target //事件针对的网页节点event.preventDefault() //阻止事件的默认行为(比如点击链接，会自动打开新页面)event.stopPropagation()//停止事件向上层节点冒泡19、动态事件绑定$("p").on("click",span,function(){alert($(this).text());});//当p中增加span时仍然有效20、动画效果$("p").show()
//显示隐藏的匹配节点$("p").show("slow");//参数表示速度,("slow","normal","fast"),也可为毫秒$("p").hide()
//隐藏显示的节点$("p").toggle();
//切换显示/隐藏$("p").slideDown("");//用毫秒时间将段落滑下$("p").slideUp(""); //用毫秒时间将段落滑上$("p").slideToggle("");//用毫秒时间将段落滑上，滑下淡入淡出$("p").fadeIn("");
//用毫秒时间将段落淡入$("p").fadeOut("");
//用毫秒时间将段落淡出$("p").fadeToggle(""); //用毫秒时间将段落淡入,淡出$("p").fadeTo("slow",0.6);//用毫秒时间将段落的透明度调整到0.、工具方法$("#form1").serialize()//序列表表格内容为字符串。$("select,:radio").serializeArray();//序列化表单元素为数组返回JSON数据结构数据$.trim()
//去除字符串两端的空格$.each()
//遍历一个数组或对象，for循环$.inArray()//返回一个值在数组中的索引位置，不存在返回-1$.grep() //返回数组中符合某种标准的节点$.extend({a:1,b:2},{b:3,c:4},{c:5:d:6})//将多个对象，合并到第一个对象{a:1,b:3,c:5,d:6}$.makeArray()//将对象转化为数组$.type()//判断对象的类别（函数对象、日期对象、数组对象、正则对象等等$.isArray()//判断某个参数是否为数组$.isEmptyObject()//判断某个对象是否为空(不含有任何属性)$.isFunction()//判断某个参数是否为函数$.isPlainObject()//判断某个参数是否为用"{}"或"newObject"建立的对象$.support()//判断浏览器是否支持某个特性22、AJAX//保存数据到服务器，成功时显示信息$.ajax({type:"POST",url:"some.php",data:"name=Johnlocation=Boston",success:function(msg){alert("DataSaved:"+msg);}});//加载feeds.html文件内容。$("#feeds").load("feeds.html");//请求test.php网页，传送2个参数，忽略返回值。$.get("test.php",{name:"John",time:"2pm"});//从FlickrJSONPAPI载入4张最新的关于猫的图片。$.getJSON("
转载请注明地址:http://www.shiquanren.net/hzzz/hzzz/27122.html
