锋利的Jquery【读书笔记】 – 第三章 jQuery中的DOM操作
jQuery中的DOM操作
查找节点
- 查找元素节点
var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点
var li_txt = $li.text(); //获取第2个<li>元素节点的文本内容
alert(li_txt); //打印文本内容
- 查找属性节点
使用attr()方法 来获取他的各种属性的值。attr()方法的参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的名字,例如:
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>节点属性"title"
alert(p_txt); //打印出title属性
创建节点
- 创建元素节点
$(html)方法
会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象返回。
创建两个<li>
元素:
var $li_1 = $("<li></li>"); //创建第一个<li>元素
var $li_2 = $("<li></li>"); //创建第二个<li>元素
将连个元素插入文档,使用 append()等方法:
$("ul").append($li_1); //添加到<ul>节点中,使之能在网页中显示
$("ul").append($li_2); //可以采用链式写法:$("ul").append($li_1).append($li_2)
- 创建文本节点
var $li_1 = $("<li>香蕉</li>"); //创建一个<li>元素,包括元素节点和文本节点
//香蕉就是文本节点
var $li_1 = $("<li>雪梨</li>"); //创建一个<li>元素,包括元素节点和文本节点
//雪梨就是文本节点
$("ul").append($li_1); //添加到<ul>节点中,使之显示
$("ul").append($li_1); //添加到<ul>节点中,使之显示
注意无论
$(html)
中的HTML多么复杂,都可以用相同的方式创建。
例如:$("<li><em>这是</em><b>一个</b><a href="#">复杂的组合</a></li>")
- 创建属性节点
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素,包括元素节点和文本节点
//香蕉就是文本节点
//其中title='香蕉' 就是创建的属性节点
var $li_1 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素,包括元素节点和文本节点
//雪梨就是文本节点
//其中title='雪梨',就是创建的属性节点
$("ul").append($li_1); //添加到<ul>节点中,使之显示
$("ul").append($li_1); //添加到<ul>节点中,使之显示
插入节点
插入节点的方法:
append()方法
向每个匹配的元素内部追加内容
HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").append("<b>你好</b>");
结果:
<p>我想说:<b>你好</b></p>
appendTo()方法
将所有匹配元素追加到指定的元素中。$(A).appendTo(B)
将A追加到B
HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好</b>")appendTo("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>
after()方法
在每个匹配的元素之后插入内容。
HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").after("<b>你好</b>")
结果:
<p>我想说:</p><b>你好</b>
insertAfter()方法
将所有匹配的元素插入到指定元素的后面。
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()方法
将所有匹配的元素插入到指定元素的前面。
HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好</b>").insertBefore("p")
结果:
<b>你好</b><p>我想说:</p>
删除节点
jQuery提供了3种删除节点的方法:remove(),detach()和 empty()。
remove()方法
作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素。
例如:
$("ul li:eq(1)").remove(); //获取第2个<li>标签,并删除
当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法返回值是一个指向已被删除的节点的引用,因此可以在以后使用这些元素。
比如:
var $li = $("ul li:eq(1)").remove(); //获取第2个<li>元素节点后,并删除
$li.appendTo("ul"); //把刚才删除的节点又重新添加到<ul>元素里
直接使用appendTo()方法可以简化以上代码:
$("ul li:eq(1)").appendTo("ul");
// appendTo()方法也可以用来移动元素
// 移动元素时首先从文档上删除这个元素,然后又将这个元素插入到文档中的指定节点
另外,remove()方法也可以通过传递参数来选择性得删除元素:
$("ul li").remove("li[title!=菠萝]");
// 将<li>中属性不等于“菠萝”的<li>元素删除
- detach()方法
detachf()方法和remove()一样,也是从DOM中去掉所有的元素。但是,这个方法不会把匹配的元素从jQuery对象中删除,因此将来可以再使用这些匹配元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
- empty()方法
该方法是清空节点,它能清空元素中所有的后代节点
复制节点
如果单击<li>
元素后需要再复制一个<li>
元素,可以使用clone()方法:
$("ul li").click(function(){
$(this).clone().appendTo("ul"); //复制当前单击的节点,并将它追加到<ul>元素中
})
复制节点后,被复制的节点并不具备任何行为。如果需要新元素也具有复制功能(如:单击事件),可以:
$(this).clone(true).appendTo("body"); //注意参数ture
在clone()方法中添加参数true,它的含义是复制元素的同时复制元素的绑定事件。
替换节点
replaceWith()方法和replaceAll()
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。比如
将<p title="请选择你喜欢的水果">你最喜欢的水果</p>
替换成
<strong>你最不喜欢的苹果是</strong>
$("p").replaceWith("<strong>你最不喜欢的苹果是</strong>");
replaceAll()方法与replaceWith()方法操作相反:
$("<strong>你最不喜欢的苹果是</strong>").replaceAll("p");
注意:如果在替换前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。
包裹节点
如果想要把某个节点用其它标记包裹起来,jQuery提供了相应的方法,wrap()方法:
$("strong").wrap("<b></b>"); //用<b></b>把<strong></strong>元素包裹起来
得到的结果:
<b><strong>你最喜欢的水果</strong></b>;
- wrapAll()方法
HTML元素如下:
<strong>你最欢的水果?</strong>
<strong>你最欢的水果?</strong>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</i>
</ul>
用wrap()方法包裹,代码:
$("strong").wrap("<b></b>");
得到的结果是:
<b><strong>你最欢的水果?</strong></b>
<b><strong>你最欢的水果?</strong></b>
使用 wrapAll()方法包裹元素:
$("strong").wrapAll("<b></b>");
得到的结果是:
<b>
<strong>你最欢的水果?</strong>
</b>
- wrapInner()方法
该方法将每个匹配的元素的子内容(包括文本节点)用其它结构化的标记包裹起来。比如:
$("strong").wrapInner("<b></b>");
结果:
<strong><b>你最喜欢的水果是?</b></strong>
属性操作
attr()方法来获取属性和设置元素属性,removeAttr()方法来删除元素属性。
- 获取属性和设置属性
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性title
设置属性,使用同样的方法,只是传递两个参数,即属性名和对应的值。
$("p").attr("title","your title"); //设置单个属性值
一次性为同一个元素设置多个属性,可以使用:
$("p").attr({
"title" : "your title" ,
"name" : "test"
}); //将一个“名/值”形式的对象设置为匹配元素的属性
- 删除属性
删除文档中某个元素的特定属性,可以使用removeAttr()方法来完成该任务。
删除<p>
元素的title属性:
$("p").removeAttr("title"); //删除<p>元素的属性title
样式操作
获取样式和设置样式
使用attr()方法来获取元素的class
var p_class = $("p").attr("class"); //获取<p>元素的class
设置p元素的class属性:
$("p").attr("class","high"); //设置<p>元素的class为"high"
- 追加样式
addClass()方法来追加样式
$("p").addClass("another"); //给<p>元素追加"another"类
CSS中有两条规定:
- 如果给一个元素添加多了class值,那么久相当于合并了他们的样式。
- 如果有不同的class设定了同一样式,在后者覆盖前者
移除样式
上面为<p>
追加了anther样式。此时代码变成:
<p class="high another">你最喜欢的水果是?</p>
移除其中的值为”high”的class
$("p").removeClass("high"); //移除其中的“high”class
输出结果为:
<p class="another">你最喜欢的水果是?</p>
两个class都删除,就要使用两次removeClass():
$("p").removeClass("high").removeClass("another");
或者:
$("p").removeClass("high another");
如果不带参数,就是将class的值全部移除
$("p").removeClass(); //移除<p>元素的所有class
切换样式
toggle()方法:
$toggleBtn.toggle(function(){ //toggle(),交替一组动作
//显示元素 代码③
},function(){
//隐藏元素 代码④
})
toggle()方法 的作用是交替执行代码③和代码④两个函数,
如果元素原来是显示的,则隐藏它;
如果原来是隐藏的,则显示它。
toggleClass()方法,控制样式上的重复切换。
如果类名存在则删除它,如果类名不存在则添加它。
判断是否含有某个样式
hasClass()方法可以判断元素中是否含有某个class,如果有,返回true,否则返回false。
$("p").hasClass("another");
等价于:
$("p").is(".another");
设置和获取HTML、文本和值
html()方法
此方法类似于JavaScript中的 innerHTML属性,可以用来读取或设置某个元素中的HTML内容。
<p><strong>你最喜欢的水果是?</strong></p>
用html()方法 对p元素进行操作:
var p_html = $("p").html();
alert(p_html);
也可以用html()方法 设置某元素的HTML代码,需要传递婴参数,参数为HTML代码:
$("p").html("<strong>你最喜欢的水果?</strong>")
text()方法
类似于JavaScript中的innerText属性,读取或者设置某个元素中的文本内容。
使用方法和 html()方法类似。
val()方法
类似JavaScript中的value属性,可以用来设置和获取元素的值。
无论是元素或者是文本框,下拉列表还是单选框,都是返回。
HTML代码:
<input type="text" id="address" value="请输入邮箱地址">
<input type="text" id="password" value="请输入邮箱密码">
<input type="button" value="登录">
当鼠标获取鼠标焦点时,如果地址框的值为“请输入邮箱地址”,则将地址框中的值清空:
$("#address").focus(function(){
var txt_value = $(this).val(); //获取文本框的值
if(txt_value == "请输入地址"){
$(this).val("");
}
})
当地址失去鼠标焦点时,如果地址为空,将地址框的值设为“请输入邮箱地址”:
$("#address").blur(function(){
var txt_value = $(this).val();
if(txt_value == ""){
$(this).val("请输入邮箱地址");
}
})
注意:focus() 相当于JavaScript中的 onfocus() 方法,作用是处理获得焦点时的事件。
blur() 相当于JavaScript中 的 onblur()方法,作用是处理失去焦点时的事件。
表单元素可以使用 defaultValue属性来实现同样的功能:
$("#address").focus(function(){
var txt_value = $(this).val()
if(txt_value == this.defaultValue){
$(this).val("");
}
})
this指向当前文本框,“this.defaultValue”就是当前文本框的默认值。
遍历节点
children()方法
获取匹配元素的子元素集合
只考虑子元素,不考虑其它后代元素
next()方法
获取匹配元素后面紧邻的同辈元素
prev()方法
取得匹配元素前面紧邻的同辈元素
siblings()方法
取得匹配元素前后所有的同辈元素
closest()
取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配直接返回元素本身,如果不匹配向上查找父元素,逐级向上直到找到匹配元素。
parent()方法和parents()方法
parent()方法 获取集合中每个匹配元素的父级元素
parent()方法从指定类型的直接父级节点开始寻找,返回一个元素节点
parents()方法 获取集合中每个匹配元素的祖先元素
parents()方法,找到第一个父节点时并没有停止,而是继续寻找,最后返回多个父节点
CSS-DOM操作
读取和设置style对象的各种属性。
获取元素的样式属性:
$("p").css("color"); //获取<p>元素的样式颜色
设置某个元素的单个样式,
$("p").css("color","red");
设置多个样式属性:
$("p").css({"fontSize" : "30px", "backgroundColor" : "#888888"});
透明度的设置:
$("p").css("opacity","0.5"); //设置为半透明
设置某个元素的 height属性:
$("element").css("height");
或者:
$("element").height();
height()方法,如果传递的值是一个数字,则默认单位为px;
如果要用其它单位,必须传递字符串:
$("p").height(100); //设置<p>元素的高度值为100px
$("p").height("10em"); //设置<p>元素的高度为 10em
width()方法和height()方法类似
$("p").width();
$("p").width("400px");
元素定位有以下几种常见的方法:
offenset()方法
他的作用是获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left
var offset = $("p").offset(); //获取offset值
var left = offset.left;
var right = offset.right;
position()方法
获取元素相对于最近一个position样式属性设置为 relative 或者absolute祖父节点的相对偏移,返回的对象也包含两个属性,top和left
var position = $("p").position(); //获取offset值
var left = position.left;
var right = position.right;
scrollTop()方法和scrollLeft()方法
两个方法分别获取元素的滚动条距顶端的距离和距离左侧的距离
var $p = $("p");
var scrollTop = $p.scrollTop(); //获取元素的滚动条距离顶端的距离
var scrollLeft = $p.scrollLeft(); //获取元素的滚动条距离左侧的距离
这两个方法可以指定一个参数,控制元素的滚动条滚动到指定位置。
$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);