第三章 JQuery的DOM操作
3.2 JQuery中的DOM操作
构造一个DOM如下:
<body>
<p title=”选择你最喜欢的水果.”>你最喜欢的水果是?</p>
<ul>
<li title=’苹果’>苹果</li>
<li title=’橘子’>橘子</li>
<li title=’菠萝’>菠萝</li>
</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标签,例如要创建一个<p>元素,<p></p>和<p />都是允许的,<p>和<P />都是不正确的。
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()。
作用是从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(“<b></b>”);//得到的结果是<b><strong></strong></b>
2.wrapAll()方法是用一个元素来包裹所有匹配的元素,其与wrap()的对比如下:
例如有:
<strong></strong>
<strong></strong>
则使用$(“strong”).wrap(“<b></b>”);得到
<b><strong></strong></b>
<b><strong></strong></b>
使用$(“strong”).wrapAll(“<b></b>”);得到
<b>
<strong></strong>
<strong></strong>
</b>
3. wrapInner()方法是将每一个匹配的元素的子内容用其他结构化的标记包裹起来。
例如:
$(“strong”).wrapInner(“<b></b>”);
得到
<strong><b></b></strong>
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内容
<p><strong>你最喜欢的水果是?</strong></p>
var p_html = $(“p”).html(); //值为:<strong>你最喜欢的水果是?</strong>
如果要设置元素的html值,只需要往html()方法中传入参数即可
注意:html()方法适用于xhtml,但是不适用于XML
2. text()方法
Text()方法用于读取或设置元素中的文本内容,特别注意,只要是元素内包含的文本内容都会被获取到,不管文本是直接出现在元素中,还是在该元素的子元素。
<p><strong>你最<b>喜欢</b>的水果是?</strong></p>
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>元素的样式颜色
$(“p”).css(“color”,”red”); //设置<p>元素的样式颜色为红色
与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()相同。
3. scrollTop()方法和scrollLeft()方法
这两个方法的作用分别获取元素的滚动条距顶端的距离和距左侧的距离:
var $p=$(“p”);
varscrollTop=$p.scrollTop();
varscrollLeft=$p.scrollLeft();
另外设置的方法如下:
$(“p”).scrollTop(300);
$(“p”).scrollLeft(300);