《锋利的JQuery》读书笔记——第三章 JQuery的DOM操作

最新推荐文章于 2024-04-08 13:00:00 发布

zerg_ling

最新推荐文章于 2024-04-08 13:00:00 发布

阅读量526

点赞数

分类专栏：读书笔记

本文链接：https://blog.csdn.net/firstblood1/article/details/17956687

版权

读书笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第三章 JQuery的DOM操作

3.2 JQuery中的DOM操作

构造一个DOM如下：

<body>

你最喜欢的水果是？

<ul>

</ul>

</body>

3.2.1查找节点

1.查找元素节点

获取节点的文本内容，代码如下：

var $li = $(“ul li:eq(1)”); //获取<ul>里第二个<li>节点

var li_txt = $li.text(); //获取第二个<li>节点的文本内容

2.查找属性节点

在找到需要的元素后，可以使用attr()方法来获取元素的属性，当attr()方法的参数为一个时，参数为要查询的属性的名字，例如：

要获取节点的title属性

var $para =$(“p”);

var p_txt =$para.attr(“title”);

而当attr()方法有两个参数时，attr()方法的效果对元素的属性赋值，其中第一个参数为元素属性的名字，第二个参数为要赋予的值。

3.2.2 创建节点

1.创建元素节点

例如要创建两个<li>元素节点，添加到<ul>的子节点中。

1）创建两个<li>新元素

这个操作可以通过jQuery的工厂函数$()来实现，该方法会根据传入的html标签创建相应的DOM对象，这里要创建两个<li>元素节点，方法如下：

var $li_1 = $(“<li></li>”);

var $li_2 = $(“<li></li>”);

动态标签要特别注意闭合标签或者使用标准的XHTML标签，例如要创建一个元素，和都是允许的，和都是不正确的。

2）将元素插入目标元素当中

元素插入可以使用append()方法，要将创建出来的<li>元素插入<ul>元素中，则方法如下：

$(“ul”).append($li_1);

$(“ul”).append($li_2);

3) 创建属性节点

可以通过以下方式直接创建一个带属性的节点：

var $li_1 = $(“<li title=’香蕉’>香蕉</li>”);

3.2.3插入节点

jQuery提供的将动态创建的节点出入文档的方法有很多：

方法	描述	示例
append()	向每个匹配元素内部追加内容	<p>我想说：<p/> jQuery代码： $().append(“<b>你好</b>”); 结果： <p>我想说：<b>你好</b></p>
appendTo()	将所有匹配的元素追加到自定的元素中。其操作效果正好与append()相反，即$(A).append(B)等于$(B).appendTo(A)，将B添加到A元素中	略
prepend()	向每个匹配的元素内部前置内容	<p>我想说：<p/> jQuery代码： $().prepend(“<b>你好</b>”); 结果： <p><b>你好</b>我想说： </p>
prependTo()	将所有匹配的元素前置到指定的元素中。其操作效果正好与prepend()相反，即$(A). prepend (B)等于$(B). prependTo(A)。	略
after()	在每个匹配的元素之后插入内容	<p>我想说：<p/> jQuery代码： $().after(“<b>你好</b>”); 结果： <p>我想说： </p><b>你好</b>
insertAfter()	将所有匹配的元素插入到指定元素的后面。其操作效果正好与after()相反，即$(A). after(B)等于$(B). insertAfter(A)。	略
before()	在每个匹配的元素之前插入内容	<p>我想说：<p/> jQuery代码： $().before(“<b>你好</b>”); 结果： <b>你好</b><p>我想说： </p>
insertBefore()	将所有匹配的元素插入到指定的元素的前面。其操作效果正好与before()相反，即$(A). before(B)等于$(B). insertBefore(A)。	略

这些插入节点的方法不仅可以将新创建的DOM元素插入文档，也可以对原有的元素进行移动。用法与插入新对象相同。

3.2.4删除节点

jQuery提供两种删除节点的方法：remove()和empty()。

1. Remove()方法

作用是从DOM中删除所有匹配的元素，且该节点包含的后代节点会同时被删除，例：

$(“ulli:eq(1)”).remove()

另外remove()的返回值指向一个已被删除的元素，此时还可以继续对这个被删除的元素进行操作，例如，可以把刚刚删除的元素再加回去：

var $li = $(“ul li:eq(1)”).remove; //将ul中的第二个li元素删除

$li.appendTo(“ul”); //将删除的元素再加回到ul中。

另外remove()方法可以通过传递参数来选择性地删除元素

$(“ul li”).remove(“li[title!=菠萝]”); //将<li>元素中的属性title不等于萝卜的<li>元素删除

2. empty()方法

empty方法不是删除节点，是清空节点，清空元素中的所有后代节点，但是选中的元素依然会存在。

3.2.5复制节点

节点复制使用clone函数，例如：

$(this).clone();

但是仅依靠clone()复制的节点是不具有任何行为的，如果要让复制的节点同时也复制节点的行为，就需要向clone()传入参数true，例如：

$(this).clone(true);

3.2.6替换节点

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素，而replaceAll()方法则是replaceWith()方法的颠倒。

$(A).replaceWith(B); //将节点A替换作节点B

3.2.7包裹节点

1. wrap()方法是将指定的节点包裹在所有匹配的元素上

$(“strong”).wrap(“”);//得到的结果是

2.wrapAll()方法是用一个元素来包裹所有匹配的元素，其与wrap()的对比如下：

例如有：

则使用$(“strong”).wrap(“”);得到

使用$(“strong”).wrapAll(“”);得到

3. wrapInner()方法是将每一个匹配的元素的子内容用其他结构化的标记包裹起来。

例如：

$(“strong”).wrapInner(“”);

得到

3.2.8属性操作

jQuery使用attr方法来设置属性，使用removeAttr()方法来删除属性

1. attr()方法

该方法在前面已经叙述过。

2. removeAttr()

$(“p”).removeAttr(“title”);//删除p元素的title属性

3.2.9样式操作

1. 获取样式

var p_class = $(“p”).attr(“class”);

2. 设置样式和追加样式

方法	addClass()	attr()
用途	追加样式	设置样式
对同一网页元素	<p>test</p>
第1次使用方法	$(“p”).addClass(“high”);	$(“p”).attr(“class”,“high”);
第1次结果	<p class=”high”>test</p>
再次使用方法	$(“p”).addClass(“another”);	$(“p”).attr(“class”,“another”);
最终结果	<p class=”high another”>test</p>	<p class=”another”>test</p>

当一个元素同时拥有多个样式时，css规定如下：

1）如果给一个元素添加了多个class值，则多个class样式效果合并

2）如果有不同的class设置了同一样式属性，则后者覆盖前者

3. 移动样式

移除单个样式

$(“p”).removeClass(“high”);

移除多个样式时，每个样式用空格隔开

$(“p”).removeClass(“highanother”);

移除所有样式

$(“p”).removeClass();

4. 切换样式

toggleClass()方法：如果指定的类名不存在则添加它，如果存在则移除它，用法如下：

$(“p”).toggleClass(“another”);

5. 判断是否包含某个样式

$("p").hasClass("another"); //该方法等价于$(“p”).is(“.another”);

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

1.html()方法

Html()方法用于读取或设置元素中的html内容

你最喜欢的水果是？

var p_html = $(“p”).html(); //值为：你最喜欢的水果是？

如果要设置元素的html值，只需要往html()方法中传入参数即可

注意：html()方法适用于xhtml，但是不适用于XML

2. text()方法

Text()方法用于读取或设置元素中的文本内容，特别注意，只要是元素内包含的文本内容都会被获取到，不管文本是直接出现在元素中，还是在该元素的子元素。

你最喜欢的水果是？

var p_html = $(“p”).text(); //值为：你最喜欢的水果是？

如果要设置元素的文本内容，只需要往text()方法中传入参数即可

3.val()方法

val()方法类似于js的value属性，可以用来设置和获取元素的值，无论是文本框、下拉框还是单选框，它都返回元素的值。如果元素多选，返回一个包含所有选择的值的数组。val()方法跟前面提到的方法用法类似，可以取值也可以设置，设置只需要传入参数即可。

3.2.11遍历节点

1.children()方法

该方法用于取得匹配元素的子元素集合，注意，只取得直接子元素，间接子元素不会取到。对直接子元素的遍历可以使用以下的方法：

var $ul = $(“ul”).children();

for(var I=0, len=$ul.length; i<len; i++){

alert($ul[i].innerHTML);//循环输出ul下的li子元素的HTML内容

}

2.next()方法

取得匹配元素后面紧邻的同辈元素，例如$(“li”).next();可以取到紧邻的下一个同辈的<li>。

3.prev()方法

取得匹配元素后面紧邻的同辈元素，例如$(“li”).next();可以取到紧邻的上一个同辈的<li>。

4.siblings()方法

用于取到匹配元素前后所有的同辈元素。

5.closest()方法

用于取得最近的匹配元素，首先会检查当前元素是否匹配，如果匹配直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么也没找到就返回空。注意查找时沿DOM树向上查找，例：

$(document).bind(“click”, function(e) {

$(e.target).closest(“li”).css(“color”,”red”);

})

给点击的目标元素的最近的li元素添加颜色

3.2.12CSS-DOM操作

简单来说就是读取和设置style对象的各种属性。

可以直接使用css()方法来提取或者设置元素的样式属性，例如：

$(“p”).css(“color”); //获取元素的样式颜色

$(“p”).css(“color”,”red”); //设置元素的样式颜色为红色

与attr()方法一样，css()方法也可以同时设置多个样式属性

$(“p”).css({“font-size”:”30px”,”color”:”red”});

注意：

1）如果值是数字，将会被自动转化为像素

2）如果在css()方法中，如果属性中带有”-”，例如font-size属性，如果设置属性的值得时候不带引号，那么就要用驼峰式写法fontSize，如果架上了引号，那么两种写法都可以fontSize/ font-size，例如$(“p”).css({fontSize:”30px”,”color”:”red”});

3）设置透明度时，可以使用opacity属性，例如：

$(“p”).css(“opacity”,”0.5”);

2) 要获取元素的heigh属性，可以使用$(element).css(“height”);，也可以使用$(element).height();获取，width有一样的方法。

1. offset()方法

获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。方法如下：

var offset = $(“p”).offset();

var left = offset.left;

var top = offset.top;

offset()方法也可以用来设置元素在当前视窗的相对偏移，例如：

$(“p”).offset({top:100,left:0});

2. position()方法

它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left，用法同offset()。设置的用法也与offset()相同。