第三章 jQuery中的DOM操作
一、DOM操作的分类
DOM(document object model)是一种与浏览器、平台、语言无关的接口,使用该接口可以访问页面中的·所有组件。DOM的操作可以分为DOM Core、HTML-DOM和CSS-DOM。
- DOM Core:任意支持DOM的程序设计语言都可以使用。JS中getElementById(),getelementByTagName(),getAttribute()和setAttribute()都是它的组成部分。
- HTML-DOM:提供了一些更加简明的记号描述各种Html元素,只能用来处理web文档。eg:document.forms
- CSS-DOM:是针对CSS的操作,用于获取和设置style对象的各种属性。eg:element.style.color
二、jQueryDOM操作——节点操作
-
查找节点
- 查找元素节点
可以直接使用选择器进行查找。
1 var $li=$("ul li:eq(1)"); //获取ul中的第二个li节点 2 var li_text=$li.text(); //获取第二个li元素节点的文本内容 3 alert(li_text); //打印文本内容
2.查找属性节点
找到元素节点后,使用attr()方法获取设置元素的属性。attr()方法传入参数为一个时为获取该属性的值,传入2个参数是为为该属性设置值。
1 var $para=$("p"); //获取p节点 2 var pra_ti=$para.attr("class"); //获取p元素节点的class属性值 3 $para.attr("class","para"); //将p元素节点的class属性值设为para
-
创建节点
- 创建元素节点
创建元素节点需要两步:1)创建一个新的元素节点 2)将该节点插入文档。$(html)方法可以根据传入的HTML标记字符串,创建一个DOM对象,并将该DOM对象包装成一个jQuery对象后返回。
PS:动态创建的新元素节点默认保存在内存中,不会被自动添加到文档中,需要使用其他方法将其插入文档。
1 var $li=$("<li>我是新加的li节点</li>"); //创建一个新的元素节点 2 $("ul").append($li); //添加到ul使其在网页中显示
2.创建文本节点
创建文本节点也是使用$(html)方法,只需要将要添加的文本内容写入html字符串中即可。(无论html代码多复杂都可以使用$(html)方法)
3.创建属性节点
创建属性节点也是在创建元素节点时一起创建。
var $li=$("<li class='new_li'>我是新加的li节点</li>"); //创建一个新的li元素 包括元素节点、文本节点、属性节点 $("ul").append($li); //添加到ul使其在网页中显示
-
插入节点
方法 | 描述 | 实例 |
append() | 向元素内部追加内容 |
HTML代码: <p>我想说:</p> jQuery代码: $("p").apppend("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p> |
appendTo() | 将元素加到指定的元素内部,$(A).sppendTo(B)是将A追加到B中 |
HTML代码: <p>我想说:</p> jQuery代码: $("<b>你好</b>").apppendTo("p"); 结果: <p>我想说:<b>你好</b></p> |
prepend() | 向元素内部的前面加入内容 |
HTML代码: <p>我想说:</p> jQuery代码: $("p").prepend("<b>你好</b>"); 结果: <p><b>你好</b>我想说:</p> |
prependTo() | 将元素加到指定元素内部的前面,$(A).prependTo(B)是·将A插到B中的前面 |
HTML代码: <p>我想说:</p> jQuery代码: $("<b>你好</b>").prependTo("p"); 结果: <p><b>你好</b>我想说:</p> |
after() | 向元素后追加内容 |
HTML代码: <p>我想说:</p> jQuery代码: $("p").after("<b>你好</b>"); 结果: <p>我想说:</p><b>你好</b> |
insertAfter() | 将元素追加到指定元素后,$(A).insertAfter(B)是将A追加到B后面 |
HTML代码: <p>我想说:</p> jQuery代码: $("<b>你好</b>").insertAfter("p"); 结果: <p>我想说:</p><b>你好</b> |
before() | 向元素前追加内容 |
HTML代码: <p>我想说:</p> jQuery代码: $("p").before("<b>你好</b>"); 结果: <b>你好</b><p>我想说:</p> |
insertBefore() | 将元素加到指定元素内部的前面,$(A).insertBefore(B)是·将A插到B前 |
HTML代码: <p>我想说:</p> jQuery代码: $("<b>你好</b>").insertBefore("p"); 结果: <b>你好</b><p>我想说:</p> |
-
删除节点
- remove()方法
从DOM中删除所有匹配元素。使用remove()方法删除后,该节点所包含的所有后代元素将同时被删除。该方法返回值为一个指向已被删除节点的引用,可以在以后使用这些元素。
1 var $li=$("ul li:eq(1)").remove(); //获取第二个li节点后把它从网页删除 2 $li.appendTo("ul"); //把删除的元素重新加入ul
这段代码其实等效于:
$("ul li:eq(1)").appendTo("ul"); //appendTo()方法也可以用来移动元素,移动元素时首先从文档上删除此元素,然后将该元素插入文档的指定节点
remove()方法也可以传递参数进行选择删除。eg: $("ul li").remove("li[title!=菠萝]")
2.detach()方法
detach()与 remove()一样,也是从DOM中删除匹配的元素。但是这个方法不会把匹配的元素从jQuery对象中删除,所有绑定的事件、附加的数据都会被保留。
1 $("ul li").click(function(){ 2 alert($(this).html()); 3 }); 4 var $li=$("ul li:eq( 1)").detach(); //删除元素 5 $li.appendTo("ul"); //重新追加此元素,发现之前绑定的事件还在,如果使用remove()删除元素,之前绑定的事件将失效
3.empty()方法
严格来讲,他并不是删除节点的方法,而是清空节点,它能元素中的所有后代节点。
$("ul li:eq(1)").empty(); //获取第二个li节点后,清空此元素里的内容
-
复制节点
$("ul li").click(function(){ $(this).clone().appendTo("ul"); //复制当前点击的节点并追加到ul中 });
clone()方法复制节点后,也是被保存在内存中,需要追加到文档。被复制的元素不具有任何行为,想要它也具有点击事件,可以:
$(this).clone(true).appendTo("body"); //传入参数true
在clone()方法中传入参数true,可以复制元素的同时复制元素中的绑定事件。
-
替换节点
将所有匹配的元素都替换成指定的html或者DOM元素。
$("p").replaceWith("<strong>你不喜欢的水果是?</strong>");
2.replaceAll();
与replayWith()方法作用相同,只是操作颠倒。
$("<strong>你喜欢的水果是?</strong>").replayceAll("p");
-
包裹节点
- wrap()
将某个节点用其它标记包裹,不会破坏原始文档的语义,将所有的元素进行单独的包裹。
$(“strong”).wrap("<b></b>"); //用b标签把strong元素包裹
得到的HTML结果:
<b><strong>你最喜欢的水贵是/</strong></b> <b><strong>你最喜欢的水贵是/</strong></b> <b><strong>你最喜欢的水贵是/</strong></b>
2. wrapAll()
将匹配的元素用一个元素包裹。
$("strong").wrapAll("<b></b>");
得到的HTML结果:
<b> <strong>你最喜欢的水贵是/</strong> <strong>你最喜欢的水贵是/</strong> <strong>你最喜欢的水贵是/</strong> </b>
3. wrapInner()
将每一个匹配的元素的子内容(包括文本节点)用其它结构化标记包裹起来。
$("strong").wrapInner("<b></b>");
得到的HTML结果:
<strong><b>你最喜欢的水贵是?</b></strong>
三、jQueryDOM操作——属性操作
-
获取属性和设置属性
获取属性只需要给attr()传入一个参数,即属性名称。如果要设置属性值传入两个参数即属性名称和对应值。
var p_txt=$("p").attr("class"); //获取p的节点属性class $("p").attr("class","para"); //设置p的节点属性class为para $("p").attr({"class":"para","title":"test"}); //一次设置多个属性
-
删除属性
使用removeAttr()方法删除。
四、jQueryDOM操作——样式操作
-
获取和设置样式
可以使用attr()方法获取和设置样式。
-
追加样式
使用addClass()方法追加样式。如果一个元素被添加了多个class值,相当于合并样式。如果有不同的class设定了同一样式属性,后者覆盖前者。
-
移除样式
使用removeClass()从匹配元素中删除全部或指定class。可以以空格的方式删除多个class名。removeClass()不带参数时为删除所有class。
-
切换样式
使用toggle()方法实现类似元素如果是隐藏则显示元素,如果元素是显示则隐藏元素的重复切换。toggleClass()实现添加、删除类名的重复切换。
-
判断是否含有某个样式
hasClass()判断是否含有某个class,如果有返回true,没有返回false。
五、jQueryDOM操作——设置获取HTML、文本和值
-
html() 读取或设置某个元素的HTML内容。
- text() 读取或设置某个元素的文本内容。
- val() 设置和获取元素的值,如果元素为多选则返回包含有选择的值的数组。
也可以使用val()方法使select、checkbox、radio相应选项被选中。eg: $(":checkbox").val(["check2","check3"]);
五、jQueryDOM操作——遍历节点
- children() 获取匹配元素的子元素集合,只考虑子元素不考虑其他后代元素。
- next() 获取匹配元素后面紧邻的同辈元素。
- prev() 获取匹配元素前面紧邻的同辈元素。
- siblings() 获取匹配元素前后所有的同辈元素。
- closest() 取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,逐级向上直到找到匹配的元素。如果什么都没有则返回一个空的jQuery对象。
- parent()、parents()、closest()
方法 | 描述 | 示例 |
parent() | 获取每个匹配元素的父级元素 |
$(".item-1").parent().css("color","red"); 从指定类型的直接父节点开始查找。返回一个元素节点。 |
parents() | 获取每个匹配元素的祖先元素 |
$(".item-1").parents().css("color","red"); 从指定类型的直接父节点开始查找,找到第一个父节点继续查找。返回一个多个父节点。 |
closest() | 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素 |
$(".item-1").closest().css("color","red"); 从包含自身的节点开始查找。返回匹配的第一个元素节点。 |
六、CSS DOM操作
CSSDOM操作就是读取和设置style对象的各种属性。可以通过css()方法获取元素的样式属性,无论该属性是外部css还是内联css都可以获取到。该方法中如果传入的值是数字将会被自动转化成像素值。
当你想获取元素高度时可以使用$("p").css("height")获取,同时jQuery也分装了专门的方法来获取元素的宽高。$("p").height()也可以去的元素的高度。
PS: css()获取到的高度值与设置的值有关,可能会得到auto。而height()获取的是元素的实际高度,而且不带单位。
来源:https://www.cnblogs.com/liuyuanqdbk/p/4730376.html