jQuery 3 DOM操作

来源：互联网发布：网络歌手小右个人编辑：程序博客网时间：2024/05/28 15:56

一．jQuery的HTML操作

1.获取

①三个简单实用的用于获得内容的 DOM 操作的 jQuery 方法：

·text() - 设置或返回所选元素的文本内容

·html() - 设置或返回所选元素的内容（包括HTML标记）

·val() - 设置或返回返返表单字段的值

实例：

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){    alert("Text: " + $("#test1").text());  });  $("#btn2").click(function(){    alert("HTML: " + $("#test1").html());  });  $("#btn3").click(function(){    alert("HTML: " + $("#test2").val());  });});</script></head> <body><p id="test1">这是段落中的<b>粗体</b>文本。</p><button id="btn1">显示文本</button><button id="btn2">显示 HTML</button><p>姓名：<input type="text" id="test2" value="米老鼠" /></p><button id="btn3">显示值</button></body> </html>

结果：

②attr() 方法用于设置或返回(获取)属性值。

用于获取属性值时：attr("属性名")，例如：

//HTML中：<a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a>//JavaScript：$("#w3s").attr("href")   //结果：http://www.w3school.com.cn

2.设置

text()、html()、val() 以及attr()

格式：text/html/val("内容值")

设置单个属性：attr("属性名" , "属性值")

设置多个属性：attr( {"属性名" : "属性值" , "属性名" : "属性值"···})

例如：

<p id="text1">这是<b>粗体</b>文本<p><button id="btn1">修改文本</button><button id="btn2">修改html</button> <p><input type="text" id="text2" value="米老鼠" /></p><button id="btn3">点击</button><br /> <a href="#">这是一个链接</a> <br /><button id="btn4">点击</button> $("#btn1").click(function(){  $("#text1").text("Hello world!");});$("#btn2").click(function(){  $("#text1").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#text2").val("Dolly Duck");});$("#btn4").click(function(){  $("a").attr("href","http://www.w3school.com.cn/jquery");});

注1：通过设置，如果元素有内容，会覆盖。attr()也是一样的，例如：

这是一个段落。

$("p").attr("class","myclass"); //结果若想追加类，可用addclass()方法。

注2：jQuery中很多方法都是同一个函数实现获取(getter)和设置(setter)的，有：text()，html()，val()，attr()，css()，height()，width()等

3.创建

jQuery创建元素节点，文本节点，属性节点，使用工厂函数$()来完成。

格式：$( html标记字符串)

例如：

$( "<li></li>" )  //只创建元素节点$( "<li>苹果</li>" )  //包含文本节点的元素节点$( "<a href="#" id="aaa" class="bbb"></li>" )  //包含属性节点的元素节点$( "<li><em>这是</em>一个<a href="#">复杂的组合</a></li>" )  //无论$()中的html代码多复杂，都使用同样的方法来创建

4.添加

新创建的节点没有实际用处，还需要将他添加到文档中。

HTML代码：我想说：

JS代码：var $text = $("你好");

append()

插入内容到被选元素内部的结尾

$("p").append("你好")

结果：我想说：你好

appendTo()

与append()顺序相反

$($text).appendTo("p")

结果：同上

prepend()

插入内容到被选元素内部的开头

$("p").prepend("你好")

结果：你好我想说：

prependTo()

与prepend()顺序相反

$($text).prependTo("p")

结果：同上

after()

插入内容到被选元素之后

$("p").after("你好")

结果：我想说：你好

insertAfter()

与after()顺序相反

$($text).insertAfter("p")

结果：同上

before()

插入内容到被选元素之前

$("p").before("你好")

结果：你好我想说：

insertBefore()

与before()顺序相反

$($text).insertBefore("p")

结果：同上

注1：用变量与用字符串的区别？？？？

HTML代码：我想说：

JS代码：

var $text = $("你好你好。"); //不可以

$("p").append("你好你好。") //可以

注2：添加操作还能对原DOM元素进行移动。

var $one_li = $("ul li:eq(0)"); //获取第1个li

var $two_li = $("ul li:eq(1)"); //获取第2个li

$one_li.before($two_li); //移动节点，插入内容$two_li到被选元素$one_li之前。

5.删除

①remove()：删除该节点及其所有后代节点。

例如：

$("ul li:eq(2)").remove(); //获取第3个li后，将他从网页中删除

注：返回值为指向被删节点的引用，因此可以在以后再使用被删掉的节点。

var $li = $("ul li:eq(2)").remove(); //获取第3个li后，将他从网页中删除

$li.dependTo("ul"); //把刚删除的节点又添加到ul中

//上述代码可简化为：

$("ul li:eq(2)").dependTo("ul"); //移动元素时，会先将他删除，在添加到指定节点。

注2：可带参数，选择性删除

$("p").remove(".classname"); //删除class=classname的所有元素

$("ul li").remove("[title!=苹果]"); //删除title！=苹果的所有<li>元素

②empty()：不删除该节点，删除节点里的所有后代节点(包括文本节点)

这是一个<a href="#">链接</a>

$("li").empty(); //结果：<li></li>

$("p").empty(); //结果：

6.复制

clone()：复制的元素不具有任何行为，若想同时复制元素所绑定的事件，加参数true。

实例：

$(ul li).click(function(){

$(this).clone().appendTo("#shopping");

}); //当点击li时，将他添加到购物车

若：$(this).clone(true).appendTo("#shopping"); //同时复制<li>的点击事件click

7.替换

replaceWith()和replaceAll()，将节点完全替换，而不是替换内容html(),text(),val()

例如：

将你最喜欢的水果？替换成你最喜欢的水果？

$("p").replaceWith("你最喜欢的水果？");

$("你最喜欢的水果？").replaceAll("p");

注：如果替换前，已为元素绑定事件，替换后事件与元素一起消失。需要在新元素上重新绑定事件。

8.包裹

1<ul>

</ul>

①wrap()，对所有匹配的元素单独包裹

$("li").wrap("");

结果：

②wrapAll()，对所有匹配的元素用一个元素包裹

$("li").wrapAll("");

结果：

③wrapInner(),对所有匹配的元素的子内容(包括文本节点)单独包裹

$("li").wrapInner("");

结果：

9.jQuery 文档操作方法

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法

描述

获取及设置

html()

设置或返回匹配的元素集合中的 HTML 内容。

text()

设置或返回匹配元素的内容。

val()

设置或返回匹配元素的值。

attr()

设置或返回匹配元素的属性和值。

添加

append()

向匹配元素集合中的每个元素结尾插入由参数指定的内容。

appendTo()

向目标结尾插入匹配元素集合中的每个元素。

prepend()

向匹配元素集合中的每个元素开头插入由参数指定的内容。

prependTo()

向目标开头插入匹配元素集合中的每个元素。

after()

在匹配的元素之后插入内容。

insertAfter()

把匹配的元素插入到另一个指定的元素集合的后面。

before()

在每个匹配的元素之前插入内容。

insertBefore()

把匹配的元素插入到另一个指定的元素集合的前面。

删除

remove()

移除所有匹配的元素。

empty()

删除匹配的元素集合中所有的子节点。

复制

clone()

创建匹配元素集合的副本。

替换

replaceAll()

用匹配的元素替换所有匹配到的元素。

replaceWith()

用新内容替换匹配的元素。

包裹

wrap()

把匹配的元素用指定的内容或元素包裹起来。

wrapAll()

把所有匹配的元素用指定的内容或元素包裹起来。

wrapInner()

将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

其他

addClass()

向匹配的元素添加一个或多个的类名。多个时空格隔开

$("p:first").addClass("intro"); $("p:first").addClass("intro note");

hasClass()

检查匹配的元素是否拥有指定的类。

$("p:first").hasClass("intro"); //结果：true/false

toggleClass()

对匹配的元素中类切换。不存在则添加，存在则删除。

$("p").toggleClass("main");

removeClass()

从所有匹配的元素中删除全部或者指定的类。

$("p:first").removeClass(); //删除全部类

$("p:first").removeClass("intro"); //删除类intro

removeAttr()

从所有匹配的元素中移除一个或多个属性。多个时空格隔开

$("p").removeAttr("id class");

detach()

从 DOM 中移除匹配元素集合。类似于remove()，但会保留所有绑定的事件、附加的数据。

unwrap()

移除指定元素的父元素。

$(selector).unwrap();

二．jQuery的CSS操作

使用JavaScript改变css操作有两种方式：

1.style方法：document.getElementById( id ).style.属性名=值;

2.class方法：改变class属性值，使他调用另外的css

但最大的不足是：无法提取外部css信息。但在jQuery中，这些都是很简单的。

1.获取样式属性值

$("p").css("color");

注：无论color是外部css导入到，还是style内联的，都可以获取

2.设置样式属性值

$("p").css("color" , "red");

$("p").css({"color" : "red" , "font-size" : "30px"}); //设置多个

$("p").css({color : "red" , fontSize : "30px"}); //不带引号是，有-的要采取驼峰写法，最好带引号

3.其他jQuery CSS操作函数

CSS 属性

描述

css()

设置或返回匹配元素的样式属性。

height()

设置或返回匹配元素的高度。

width()

设置或返回匹配元素的宽度。

offset()

返回第一个匹配元素相对于文档的位置。

offsetParent()

返回最近的定位祖先元素。

position()

返回第一个匹配元素相对于父元素的位置。

scrollLeft()

设置或返回匹配元素相对滚动条左侧的偏移。

scrollTop()

设置或返回匹配元素相对滚动条顶部的偏移。

三．jQuery的遍历操作

函数

描述

祖先

.parent()

获得匹配元素中每个元素的父元素。不带参。

.parents()

获得匹配元素中每个元素的祖先元素。可带参。

.parentsUntil()

获得匹配元素中每个元素的一部分祖先元素。带参，介于父 - 参之间的所有祖先，不算参。

后代

.children()

获得匹配元素中每个元素的子元素。可带参。

.find()

获得匹配元素中每个元素的后代。可带参。

兄弟

.siblings()

获得匹配元素中元素的兄弟元素。可带参。

.next()

获得匹配元素下一个兄弟元素。不带参。

.nextAll()

获得匹配元素之后的所有兄弟元素。可带参。

.nextUntil()

获得每个元素之后的一部分兄弟元素。带参，介于下一个 - 参之间的所有兄弟，不算参。

.prev()

获得匹配元素上一个兄弟元素。不带参。

.prevAll()

获得匹配元素之前的所有兄弟元素。可带参。

.prevUntil()

获得每个元素之前的一部分兄弟元素。带参，介于上一个 - 参之间的所有兄弟，不算参。

过滤

.first()

将匹配元素内的第一个元素。

.last()

将匹配元素内的最后一个元素。

.eq(n)

将匹配元素内的第n个元素。n从0开始

.filter()

返回匹配标准的所有元素。 $("p").filter(".intro");返回class=intro的所有

.not()

返回不匹配标准的所有元素。 $("p").not(".intro");返回class!=intro的所有

其他

.add()

将元素添加到匹配元素的集合中。

.andSelf()

把堆栈中之前的元素集添加到当前集合中。

.closest()

从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。带参数

.closest()

.parents()

从当前元素开始

从父元素开始

沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。

沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。

返回包含零个或一个元素的 jQuery 对象

返回包含零个、一个或多个元素的 jQuery 对象

.contents()

获得匹配元素集合中每个元素的子元素，包括文本和注释节点。

而children()结果是子元素，不包括文本和注释节点。

.each()

参数为函数，为每个匹配元素规定运行的函数。

.end()

结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。

.has()

将匹配元素集合缩减为包含特定元素的后代的集合。

.is()

根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。否则，false

例如is("p") is(".intro") is("#id") is(":input") is(":text") is("[class!=outer]")

.map()

参数函数，把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。

map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。

each()返回的是原来的数组，并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。

.offsetParent()

获得被定位的最近祖先元素。

.slice()

将匹配元素集合缩减为指定范围的子集。格式：.slice(selector,end) //从0开始

$("p").slice(0, 2); //选择第0，1段落

$('li').slice(2); //缺省end，选择2，3，4···直到最后。

如果是负数，加上集合的个数，例如：

$('li').slice(-2); //li集合5个子集，即slice(3)，即3,4

范例：var a = $("#p").css("font-size"); var b = a.slice(-2);//取得单位px

0 0