jQuery之DOM操作

一、创建节点

eg: //用三种方式创建三个段落（包括标签节点、属性节点和文本节点）并添加到文档中去

$("<p></p>").attr({title:"p1",id:"p1"}).html("这是第一个段落").appendTo("body");

$("<p></p>",{title:"p2",id:"p2"}).html("这是第二个段落").appendTo("body");

$("这是第三个段落 ").appendTo("body");

二、查找节点

eg: //采用上面已经创建的节点，下面进行查找标签节点、属性节点和文本节点的操作

var p1 = $("p:first");//获取第一个段落节点

console.log(p1);//打印标签节点 result: Object[p#p1]

console.log(p1.attr("title"));//打印属性节点 result: p1

console.log(p1.text());//打印文本节点 result: 这是第一个段落 

 

 三、插入节点

 $(target).append(content)/$(content).appendTo(target) - 在被选元素的内部的结尾插入内容

 $(target).prepend(content)/$(content).prependTo(target) - 在被选元素的内部的开头插入内容

 $(target).after(content)/$(content).insertAfter(target) - 在被选元的素外部之后插入内容

 $(target).before(content)/$(content).insertBefore(target) - 在被选元素的外部之前插入内容 

 

四、替换节点

 　$(target).replaceWith(content)/$(content).replaceAll(target)-将目标元素替换为内容

　 eg: $("<ul><li>html</li><li>css</li></ul>").appendTo("body");

　　　　console.log($("ul").html()); //result: <li>html</li><li>css</li>

　　　 $("<li>html5</li>").replaceAll($("ul li:eq(0)"));

　　　　 console.log($("ul").html()); //result: <li>html5</li><li>css</li>

　　　$("ul li:eq(1)").replaceWith("<li>css3</li>");

　　　　 console.log($("ul").html()); //result: <li>html5</li><li>css3</li>

 

　 2.如果替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件 

 五、复制节点

　　eg: $(this).clone(); //仅复制节点，不复制元素所绑定的事件 $(this).clone(true); //既复制节点，也复制元素所绑定的事件

　　如果不理解上面的两句话，自己打一下下面的具体代码，运行一次，应该就能明白了:

　　　　1)html代码：

　　　　2）引入jQuery库（根据自己的情况自行引入）

　　　　3）script代码： $(function(){

　　　　　　　　　　　　　　$("input:eq(0)").click(function(){

　　　　　　　　　　　　　　　　 $(this).clone().appendTo("body");

　　　　　　　　　　　　});

　　　　　　　　　　　　$("input:eq(1)").click(function(){

　　　　　　　　　　　　　　 $(this).clone(true).appendTo("body");

　　　　　　　　　　　　});

　　　　　　　　　　});

六、删除节点

　　$(element).remove()返回值是一个指向删除的节点的引用，因此可以在以后再使用这些元素，但是它绑定的事件、附加的数据无法再次使用了

　　$(element).detach()使用之后，重新追加该元素，所有绑定的事件、附加的数据都能够使用

　   $(element).empty()严格来说并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

　　eg://下面两个例子意在解释empty()

　　　　1）$("<div><p><span>啦啦啦</span></p></div>").appendTo("body");

　　　　　　 console.log($("div").html()); //result: <p><span>啦啦啦</span></p>

　　　　 $("p").empty();

　　　　 console.log($("div").html()); //result:<p></p>

　　　　2）$(element).empty()类比：

　　　　 你可以把element看做电脑的回收站，把$(element).empty()看做是清空回收站的操作，把包含在element中的标签节点看做回收 站中的文件夹，把包含在element中的文本节点看做是回收站中的文件，而清空回收站就是把回收站里的所有文件夹和文件都彻底删除，并且回收站自身并不 会被删除，这就类似于清空节点，该操作把某节点里的所有后代标签节点包括文本节点都彻底删除，但该节点本身没有被删除。 

 七、包裹节点

  　　wrap()将所有匹配的元素进行单独的包裹,在原来的元素的外部实施包裹

　　  wrapAll()将匹配的元素集合当做一个整体来包裹，在元素的外部实施包裹

　　  wrapInner()经所有匹配的元素进行单独的包裹，在原来的元素额内部实施包裹  

 

 八、遍历节点

　　1.往上遍历

　　　　1)parent() 方法返回被选元素的直接祖先元素，即父元素。

　　　　2)parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()

　　　　3)parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

　　　　4)closest()方法从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

　　2.往下遍历

　　　　1)children() 方法返回被选元素的所有直接后代元素，即子元素。（跟parent（）方向恰好相反，一个是往上找，一个是往下查）

　　　　2)find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。（跟parents（）方向恰好相反）

　　3.同级遍历

　　　　1)siblings() 方法返回被选元素的所有同辈元素。

　　　　2)next() 方法返回被选元素的下一个同辈元素。 nextAll() 方法返回被选元素的后面所有的同辈元素。 nextUntil() 方法返回介于两个给定参数之间的所有的同辈元素。

　　　　3)prev(), prevAll() 以及 prevUntil() 方法的跟上面三个方法的原理是一样的（都是找同辈元素），但是方向恰好相反（next()/ nextAll()/nextUntil() 是往后找，而prev()/ prevAll() / prevUntil() 则是往前找）。

　　4.过滤（相当于基本过滤选择器）

　　　　1)first() 方法返回被选元素的首个元素。 last() 方法返回被选元素的最后一个元素。 eq() 方法返回被选元素中带有指定索引号的元素。

　　　　2)filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

　　　　3)not() 方法返回不匹配标准的所有元素。（not() 方法与 filter() 相反。）

九、cssDOM

　　1).在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不 带引号，那么就要用驼峰命名法，例如： $("p").css({ fontSize:"30px",backgroundColor:"#888888"}); 如果带上了引号，既可以写成"font-size",也可以写成“fontSize"。 总之，带上引号是一个好习惯。

　　2).获取高度值用css()和height()的差别： css()方法获取的高度值与样式的设置有关，可能得到"auto",也可能得到“10px”之类的字符串；而height()方法获取的高度值则是元素 在页面中的实际高度，与样式的设置无关，并且不带单位

　　3).css ()与addClass()设置样式的区别

　　　　1）可维护性：addClass()优于css()

　　　　2）灵活性：css()优于addClass()

　　　　3）样式值:css()可以获取到指定的样式值，而addClass()无法获取指定的属性的值。

　　　　4）样式优先级：css()的样式优先级高于addClass()。（理由：addClass()方法是通过增加class名的方式，那么这个样式是在外 部文件或者内部样式中先定义好的，等到需要的时候附加到元素上；css()处理的是内联样式，直接通过元素的style属性附加到元素上） 总结：两个方法各有利弊，一般是静态的结果，都确定了布局的规则，可以用addClass的方法，增加统一的类规则；如果是动态的HTML结构，在不确定 规则，或者经常变化的情况下，一般多考虑css()方式。

　　4).总结样式操作：

　　　　js中：

　　　　　　1）通过类名： element.className = theClassName或者element.setAttribute("class",theClassName) eg: document.getElementById("p1").className = "active"; 或document.getElementById("p1").setAttribute("class","active");

　　　　　　2）通过element.style eg: document.getElementById("p1").style.color="blue";

　　　　jquery中：

　　　　　　1）通过类名： $(element).addClass(theClassName)或者$(element).attr("class",theClassName) eg: $("p1").addClass("active"); 或$("p1").attr("class","active");

　　　　　　2）通过css() eg: $("p1").css("color","blue"); 

 十、jQuery-尺寸

　　width()/height() 方法设置或返回元素的宽度/高度（不包括内边距、边框或外边距）。

　　　　　　innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）。

　　　　　　outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。

　　　　　　outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。

　　attentions:

　　　　1)根据盒子模型，可知：

　　　　　　 width()/height()获得的是盒子模型最内层（content)的宽、高

　　　　　　 innerWidth()/innerHeight()获取的是盒子模型内两层(content、padding)的宽、高

　　　　　　 outerWidth()/outerHeight()获取的是盒子模型内三层的(content、padding、border)宽、高

　　　　　　 outerWidth(true)/outerHeight(true)获取的是盒子模型的整个盒子（content、padding、border、 margin）的宽、高