jQuery中的DOM操作——《锋利的JQuery》

　　jQuery封装了大量DOM操作的API，极大提高了操作DOM节点的效率。

 

1、查找节点

　　通过我们上一节介绍了JQuery选择器，可以非常轻松地查找节点元素。不过，这时得到的是jQuery对象，只能使用jQuery的API。

　　1.1  查找属性节点：attr()方法，可以接受一个参数，也可以接受两个。当参数是一个时，则是要查询的属性的名字，这里接受的是标签固有属性，非样式属性！

 

2、创建节点

　　利用jQuery的 工厂函数$()，我们可以随意创建任何元素节点、文本节点、属性节点，然后赋值给一个（以$开头的）变量，最后通过jQuery元素节点的append()方法插入到文档中。例如：

1 var $li = $("<li title='香蕉'>香蕉</li>");   //创建一个<li>元素
2 $("ul").append($li);   //插入到文档中

 

3、插入节点

　　前面使用了一个插入节点的方法append()，它会在元素内部追加新创建的内容。其实，插入节点的方法还有很多：

方法	描述	示例
append	向每个匹配的元素内部追加内容	HTML代码：<p>我想说：</p> jQuery代码：$("p").append("<b>你好</b>"); 结果：<p>我想说：<b>你好</b></p>
appendTo	将所有匹配的元素追加到指定的元素中。实际上，使用该方法颠倒了常规的$(A).append(B)。	参考上面的，结果相同，用法：$("<b>你好</b>").appendTo("p");
prepend	向每个匹配的元素内部前置内容	HTML代码：<p>我想说：</p> jQuery代码：$("p").prepend("<b>你好</b>"); 结果：<p><b>你好</b>我想说：<p>
prependTo	将所有匹配的元素前置到指定的元素中。实际上，使用该方法颠倒了常规的$(A).prepend(B)。	参考上面的，结果相同，用法：$("<b>你好</b>").prependTo("p");
after	在每个匹配的元素之后插入内容	HTML代码：<p>我想说：</p> jQuery代码：$("p").after("<b>你好</b>"); 结果：<p>我想说：<p><b>你好</b>
insertAfter	将所有匹配的元素插入到指定的元素后面。实际上，使用该方法颠倒了常规的$(A).after(B)。	参考上面的，结果相同，用法：$("<b>你好</b>").insertAfter("p");
before	在每个匹配的元素之前插入内容	HTML代码：<p>我想说：</p> jQuery代码：$("p").before("<b>你好</b>"); 结果：<b>你好</b><p>我想说：</p>
insertBefore	将所有匹配的元素插入到指定的元素前面。实际上，使用该方法颠倒了常规的$(A).before(B)。	参考上面的，结果相同，用法：$("<b>你好</b>").insertBefore("p");

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4、删除元素

　　如果文档中某一个元素多余，那么应该将其删除。jQuery提供了三种删除节点的方法，即remove()、detach()和empty()。

 

　　4.1  remove()方法

　　作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式筛选元素。例如：

1 var $li = $("ul li:eq(1)").remove();  //获取第2个<li>元素节点后，将其移除
2 $li.appendTo("ul");    //把刚才删除的节点又重新添加到<ul>元素中
3 /*相当于下面的*/
4 $("ul li:eq(1)").appendTo("ul");   //appendTo()也可以用来移动元素
5
6 /*带参数的移除*/
7 $("ul li").remove("li[title != '菠萝']");  //将<li>中属性title不等于“菠萝”的移除

　　

　　4.2  detach()方法

　　detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但需要注意的是，这个方法不会匹配的元素从jQuery对象中删除，因而可以在将来使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据都会保留下来。

 

　　4.3  empty()方法

严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点，包括自身的文本节点。

 

5、复制节点

　　复制节点也是常用的DOM操作之一，利用clone()函数，我们就可以克隆一个同样的节点。例如：

1 $("ul li").click(function(){
2     $(this).clone().appendTo("ul");  //复制当前单击的节点，并将它追加到<ul>元素中
3 })

　　上面复制节点后，被复制的新节点不具有任何行为。如果需要新元素也具有同样的行为（这里指单击复制功能）。可以这样改：

$(this).clone(true).appendTo("body");  //注意参数true

 

6、替换节点

　　如果要替换某个节点，jQuery提供了相应的方法：replaceWith()和replaceAll()。

　　replaceWith()方法是将所有匹配的元素都替换成指定的HTML或者DOM元素。例如要将网页中"<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>"替换成"<strong>你最不喜欢的水果是？</strong>",可以这样做：

$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");

　　也可以使用另一种方法replaceAll()来实现，该方法与replaceWith()方法作用相同，只是颠倒了replaceWith的操作。

$("<strong>你最不喜欢的水果是？</strong>" ).replaceAll("p");

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

 

7、包裹节点

　　如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。

1 $("strong").wrap("<b></b>");  // 用<b>标签把<strong>元素包裹起来
2 /* 结果如下 */
3 <b><strong title="选择你最喜欢的水果.">你最喜欢的水果是？</strong></b>

 

　　包裹节点操作还有其他俩个方法，即wrapAll()和wrapInner()。

　　

　　7.1  wrapAll()方法

　　该方法将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。

1 <strong title="选择你最喜欢的水果.">你最喜欢的水果是？</strong>
2 <strong title="选择你最喜欢的水果.">你最喜欢的水果是？</strong>
3
4 $("strong").wrap("<b></b>");
5
6 /*  结果如下  */
7 <b>
8 <strong title="选择你最喜欢的水果.">你最喜欢的水果是？</strong>
9 <strong title="选择你最喜欢的水果.">你最喜欢的水果是？</strong>
10 </b>

　　注意：如果被包裹的多个元素中间有其他元素，其他元素会被放到包裹元素之后。

 

　　7.2  wrapInner()方法

　　该方法将每一个匹配到的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

1 <strong title="选择你最喜欢的水果.">你最喜欢的水果是？</strong>
2
3 $("strong").wrapInner("<b></b>");
4
5 /* 结果如下  */
6 <strong title="选择你最喜欢的水果."><b>你最喜欢的水果是？</b></strong>

 

8、属性操作

　　在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

1 /*  获取<p>元素节点属性title  */
2 var p_txt = $("p").attr("title");
3
4 /*  设置属性值  */
5 $("p").attr("title,"your titlt");
6 $("p").attr({"name":"test","id":"id1"});  //名/值形式的对象设置属性
7
8 /*  删除属性  */
9 $("p").removeAttr("title");

 

9、样式操作

　　9.1  获取样式和设置样式

1 <p class="myClass">你最喜欢的水果是？</p>
2
3 var p_class = $("p").attr("class");   //获取p元素的class
4 $("p").attr("class","hign");   //设置<p>元素的class为"high"

　　

　　9.2  追加样式

　　jQuery提供一个专门的addClass()方法来追加样式，在原有的基础上添加class名。

　　

　　9.3  移除样式

1 /*  移除一个class */
2 $("p").removeClass("high");
3
4 /*  移除多个class，用空格隔开 */
5 $("p").removeClass("class1 class2 classN");
6
7 /*  移除所有class */
8 $("p").removeClass();

 

　　9.4  切换样式

1 $("p").toggleClass("another");   //重复切换类名"another"

 

　　9.5  判断是否含有某个样式

　　hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false.

1 /* 也可以用来判断多个class，用空格隔开  */
2 $("p").hasClass("class1 class2 classN");

注意：is()是一种更强大的方法，可以做hasClass()不能做的事。

 

10、设置和获取HTML、文本和值

　　10.1  html()方法：此方法类似于JavaScript的innerHTML属性，可以用来读取或设置元素中的HTML内容。

　　

　　10.2  text()方法：类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。

　　

　　10.3  val()方法：此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论是文本框、下拉框还是单选框，它都可以返回元素的值。如果元素是多选，则返回一个包含所有选择的值的数组。

 

11、遍历节点

　　11.1  chidren()方法

　　该方法用于取得匹配元素的子元素集合。只考虑子元素，不考虑后代元素！

 

　　11.2  next()方法

　　该方法用于去匹配元素后面紧邻的同辈元素。类似于层次选择器中的$("p + div").

 

　　11.3  prev()方法

　　该方法用于去匹配元素前面紧邻的同辈元素，与next()方法相反。

　　

　　11.4  sibling()方法

　　该方法用于取得匹配元素前后所有的同辈元素。

　　

　　11.5  closest()方法

　　该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，如果不匹配则向上查找父级。什么都匹配不到返回空jQuery对象。

 

　　11.6  parent()、parents()与closest()的区别

　　这里不过多的赘述，大家可以点击链接到w3c亲自操作，印象更深。

 

12、CSS-DOM操作

　　css()方法用来获取或设置元素的样式属性，用法同attr()。

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

 

　　12.1  offset()方法

　　它的作用是获取元素在当前浏览器视窗文档的相对偏移，其中返回的对象包含俩个属性，即top和left，它只对可见元素有效。

1 var offset = $("p").offset();  //获取<p>元素的offset()
2 var left = offset.left;   //获取左偏移
3 var top = offset.top;   //获取上偏移

 

　　12.2  position()方法

　　它的作用获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset一样,即top和left.

1 var position= $("p").position();  //获取<p>元素的position()
2 2 var left = position.left;   //获取左偏移
3 3 var top = position.top;   //获取上偏移

 

　　12.3  scrollTop()方法和scrollLeft()方法

　　这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离，即页面被卷走的部分高度或宽度。

 

　　jQuery提供了大量的DOM操作API，我们可以随意所欲的运用，不用再担心所谓的浏览器兼容问题。熟练掌握之后，一定要去研究一下源码，重新认识原生JavaScript的强大，同时提高自身水平！

 

　　下一期：jQuery中的事件

转载于:https://www.cnblogs.com/chenwenhao/p/7077968.html

• 点赞
• 收藏
• 分享
• 文章举报

anjiaoga2685 发布了0 篇原创文章 · 获赞 0 · 访问量 256 私信 关注