第三章 jQuery中的DOM操作 - 王朝网络宽屏版

第三章 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.formsCSS-DOM:是针对CSS的操作，用于获取和设置style对象的各种属性。eg:element.style.color二、jQueryDOM操作——节点操作查找节点查找元素节点可以直接使用选择器进行查找。

1var$li=$("ul li:eq(1)");//获取ul中的第二个li节点2varli_text=$li.text();//获取第二个li元素节点的文本内容3alert(li_text);//打印文本内容

2.查找属性节点

找到元素节点后，使用attr()方法获取设置元素的属性。attr()方法传入参数为一个时为获取该属性的值，传入2个参数是为为该属性设置值。

1var$para=$("p");//获取p节点2varPRa_ti=$para.attr("class");//获取p元素节点的class属性值3$para.attr("class","para");//将p元素节点的class属性值设为para

创建节点创建元素节点创建元素节点需要两步：1）创建一个新的元素节点 2）将该节点插入文档。$(html)方法可以根据传入的HTML标记字符串，创建一个DOM对象，并将该DOM对象包装成一个jQuery对象后返回。

PS：动态创建的新元素节点默认保存在内存中，不会被自动添加到文档中，需要使用其他方法将其插入文档。

1var$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代码：

我想说：

jQuery代码：

$("p").apppend("你好");

结果：

我想说：你好

appendTo()

将元素加到指定的元素内部，$(A).sppendTo(B)是将A追加到B中

HTML代码：

我想说：

jQuery代码：

$("你好").apppendTo("p");

结果：

我想说：你好

prepend()

向元素内部的前面加入内容

HTML代码：

我想说：

jQuery代码：

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

结果：

你好我想说：

prependTo()

将元素加到指定元素内部的前面，$(A).prependTo(B)是·将A插到B中的前面

HTML代码：

我想说：

jQuery代码：

$("你好").prependTo("p");

结果：

你好我想说：

after()

向元素后追加内容

HTML代码：

我想说：

jQuery代码：

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

结果：

我想说：你好

insertAfter()

将元素追加到指定元素后，$(A).insertAfter(B)是将A追加到B后面

HTML代码：

我想说：

jQuery代码：

$("你好").insertAfter("p");

结果：

我想说：你好

before()

向元素前追加内容

HTML代码：

我想说：

jQuery代码：

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

结果：

你好我想说：

insertBefore()

将元素加到指定元素内部的前面，$(A).insertBefore(B)是·将A插到B前

HTML代码：

我想说：

jQuery代码：

$("你好").insertBefore("p");

结果：

你好我想说：

删除节点 remove()方法从DOM中删除所有匹配元素。使用remove()方法删除后，该节点所包含的所有后代元素将同时被删除。该方法返回值为一个指向已被删除节点的引用，可以在以后使用这些元素。

1var$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(){2alert($(this).html());3});4var$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("你不喜欢的水果是？");

2.replaceAll();

与replayWith()方法作用相同，只是操作颠倒。

$("你喜欢的水果是？").replayceAll("p");

包裹节点wrap()将某个节点用其它标记包裹，不会破坏原始文档的语义，将所有的元素进行单独的包裹。

$(“strong”).wrap("");//用b标签把strong元素包裹

得到的HTML结果：

你最喜欢的水贵是/你最喜欢的水贵是/你最喜欢的水贵是/

2. wrapAll()

将匹配的元素用一个元素包裹。

$("strong").wrapAll("");

得到的HTML结果：

你最喜欢的水贵是/你最喜欢的水贵是/你最喜欢的水贵是/

3. wrapInner()

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

$("strong").wrapInner("");

得到的HTML结果：

你最喜欢的水贵是?

三、jQueryDOM操作——属性操作获取属性和设置属性获取属性只需要给attr()传入一个参数，即属性名称。如果要设置属性值传入两个参数即属性名称和对应值。

varp_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()获取的是元素的实际高度，而且不带单位。