Web基础：jQuery 中篇：操纵DOM

来源：互联网发布：女生一个人旅行知乎编辑：程序博客网时间：2024/05/16 15:32

承接《Web基础：jQuery 上篇：选择器》。

有了选择器筛选出来的元素集合，我们在其基础上能对DOM进行全方位随心所欲的操纵。

JQuery的DOM操作：

Dom操作分类：
jQuery对DOM元素的操作主要分为以下三类：

1.DOM Core
这一类是jQuery对DOM操作的主心骨，能够操纵DOM的节点，包括对节点的操作，如插入、删除、修改、遍历节点等。
还包括对节点属性的操作，如添加、删除、修改节点属性等。
2.HTML DOM
操作专属于HTML的DOM属性。
3.CSS-DOM
对DOM的CSS样式进行操作。
另外，需要注意的是jQuery对DOM的操作一般是在选择器选择后的元素集合中进行操作，从而影响整个页面。

操纵元素节点：

元素节点筛选函数：

这类函数在已通过选择器获得元素集合后调用，用于进一步过滤元素，选取元素子集，或做判断。

eq(index)：
从元素集合中选出索引为指定值的元素。
$("p").eq(2); //选取出第三个<p>元素
first：
从元素集合中选出第一个元素。
$("p").first(); //选取出第一个<p>元素
last：
从元素集合中选出最后一个元素。
$("p").first(); //选取出最后一个<p>元素
filter(表达式)：
从元素集合中选出满足指定表达式的子集。
$("p").filter(":first"); //选出所有p元素,再选出第一个$("p").filter(".someClass"); //选出所有p元素,再选出class属性为someClass的
is(表达式)：
如果元素集合中含有至少一个满足指定表达式的元素，则返回true，否则返回false。
注意，这个函数返回的不是元素或元素集合，而是boolean。
$("input[type='checkbox']").parent().is("#someId"); //返回true，父节点的ID为someId$("input[type='checkbox']").parent().is("div"); //返回true，父节点是一个<div>
<div id="someId"><input type="checkbox" /></div>
has(表达式)：
保留含有满足指定表达式的后代元素的元素。
$('tr').has('td'); //将返回tr_2
<body><table><tr id="tr_1"></tr><tr id="tr_2"><td>td2</td><td>td3</td></tr><tr id="tr_3"></tr></table></body>
not(表达式)：
从元素集合中去除不满足指定条件的元素。
$('tr').not($('tr').has('td')); //将去除tr_2，保留tr_1和tr_3
<body><table><tr id="tr_1"></tr><tr id="tr_2">   <td>td2</td><td>td3</td></tr><tr id="tr_3"></tr></table></body>
slice(start)：
从元素集合中选择索引从start开始的元素子集。
$('p').slice(3); //选择第4个到最后一个<p>元素
slice(start,end)：
选取选择器的结果中指定索引范围的元素。
$('p').slice(0,3); //选择第1个到第4个<p>元素
add()：
给当前的元素集合添加新元素。注意，是给选出来的元素集合添加元素，不是直接给页面添加元素。
$("div").add("p"); //相当于$("div,p");<div></div><p></p>

元素节点遍历函数：
children()：
从元素集合中查找所有子节点，只包含子节点，不包括后代节点。
$("div").children(); //选出所有div的子节点，包括p_1和p_2，不包括span_1
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p></div><div id="div_2"><p id="p_2"></p></div>
children(表达式)：
从元素集合中的所有子节点当中满足表达式的。
$("div").children(".someClass"); //将选出p_2
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p></div><div id="div_2"><p id="p_2" class=".someClass"></p></div>
find(表达式 / 元素名)：
从元素集合中查找所有匹配的后代节点。
$("p").find("span"); //与$("p span");等价<p><span>Hi</span>,how are you?</p>
next()：
选择下一个兄弟节点。
$("p").next();//首先选出所有<p>元素：p_1，p_2，p_3//p_1：没有下一个兄弟节点。//p_2：下一个兄弟节点是p_3//p_3：没有下一个兄弟节点
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p></div><div id="div_2"><p id="p_2" class=".someClass"></p><p id="p_3"></p></div>
next(表达式)：
下一个满足表达式的同辈节点，相当于在next();的基础上进一步筛选。
$("p").next(".someClass");//首先选出所有<p>元素：p_1，p_2，p_3，p_4//p_1：下一个兄弟节点是p_2，且含有CSS类someClass，保留//p_2：没有下一个兄弟节点//p_3：下一个兄弟节点是p_4，但不含有CSS类someClass，不保留//p_4：没有下一个兄弟节点
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p><p id="p_2" class=".someClass"></p></div><div id="div_2"><p id="p_3"></p><p id="p_4"></p></div>
nextAll([可选表达式])：
满足条件的后面的所有同辈节点，重复的节点将只保留一个。
$("p").nextAll(); //将选出p_2，p_4，p_5
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p><p id="p_2" class=".someClass"></p></div><div id="div_2"><p id="p_3"></p><p id="p_4"></p><p id="p_5"></p></div>
其中表达式可为空，也可以不为空，用法与next()及next(表达式)的区别一样。
prev([可选表达式])：
上一个满足条件的同辈节点。
$("p").prev();//首先选出所有<p>元素：p_1，p_2，p_3//p_1：没有上一个兄弟节点。//p_2：没有上一个兄弟节点//p_3：上一个兄弟节点是p_2
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p></div><div id="div_2"><p id="p_2" class=".someClass"></p><p id="p_3"></p></div>
其中表达式可为空，也可以不为空，用法与next()及next(表达式)的区别一样。
prevAll([可选表达式])：
所有满足条件的前面的同辈节点。
var allP = $("p").prevAll(); //将选出p_4，p_3，p_1//注意，是倒叙选出，即allP.eq(0) = p_4，allP.eq(1) = p_3，allP.eq(2) = p_1 
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p><p id="p_2" class=".someClass"></p></div><div id="div_2"><p id="p_3"></p><p id="p_4"></p><p id="p_5"></p></div>
其中表达式可为空，也可以不为空，用法与next()及next(表达式)的区别一样。
siblings([可选表达式])：
所有同辈节点。
$("p").siblings(); //将选出p_1，p_2，p_3，p_4，p_5//注意，选出后按节点位置顺序排序。
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p><p id="p_2" class=".someClass"></p></div><div id="div_2"><p id="p_3"></p><p id="p_4"></p><p id="p_5"></p></div>
其中表达式可为空，也可以不为空，用法与next()及next(表达式)的区别一样。
parent([可选表达式])：
所有满足条件的父节点，不包括祖先节点。
$("p").parent(); //将选出div_1，div_2_1，不选出div_2
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p><p id="p_2" class=".someClass"></p></div><div id="div_2"><div id="div_2_1"><p id="p_3"></p><p id="p_4"></p><p id="p_5"></p></div></div>
其中表达式可为空，也可以不为空，用法与next()及next(表达式)的区别一样。
parents([可选表达式])：
所有满足条件的祖先节点。
$("p").parents(); //将依序选出div_2_1，div_2，div_1
<div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p><p id="p_2" class=".someClass"></p></div><div id="div_2"><div id="div_2_1"><p id="p_3"></p><p id="p_4"></p><p id="p_5"></p></div></div>
其中表达式可为空，也可以不为空，用法与next()及next(表达式)的区别一样。

元素节点修改函数：
以下面这段html代码结构为基准来介绍元素节点修改函数。
<body><div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p><p id="p_2" class=".someClass"></p></div><div id="div_2"><div id="div_2_1"><p id="p_3"></p><p id="p_4"></p><p id="p_5"></p></div></div></body>

创建新节点：

$("<元素类型>");，创建一个新的DOM节点对象，并包装成jQuery对象返回。
var newNode = $("<p>"); //新建一个<p>元素

添加节点：

append()：
在父节点中新增子节点，新的子节点在所有子节点的最后。
由父节点调用。
var newP = $("<p>");$("#div_2_1").append(newP);//div_2_1中新增子节点<p>，子节点包括：p_3，p_4，p_5以及这个新的<p>节点
appendTo()：
子节点加入父节点，加入的位置在所有子节点的最后，这个函数是append的逆向操作。
由子节点调用。
var newP = $("<p>");newP.appendTo($("#div_2_1"));//新的子节点加入div_2_1中，div_2_1的子节点包括：p_3，p_4，p_5以及这个新的<p>节点//相当于$("#div_2_1").append(newP);
prepend()：
在父节点中新增子节点，新的子节点在所有子节点的最前。
由父节点调用。
var newP = $("<p>");$("#div_2_1").prepend(newP);//div_2_1中新增子节点<p>，子节点包括：这个新的<p>节点，p_3，p_4，p_5
prependTo()：
子节点加入父节点，加入的位置在所有子节点的最前，这个函数是prepend的逆向操作。
由子节点调用。
var newP = $("<p>");newP.prependTo($("#div_2_1"));//新的子节点加入div_2_1中，div_2_1的子节点包括：这个新的<p>节点，p_3，p_4，p_5//相当于$("#div_2_1").prepend(newP);
after()：
某节点添加一个紧随其后的兄弟节点。
var newDiv = $("<div>");$("#div_3").after(newDiv);//新的兄弟节点加在div_3后面，body里面的div包括：div_1，div_2，div_3以及这个新的<div>节点
before()：
某节点添加一个在其前面的兄弟节点。
var newDiv = $("<div>");$("#div_1").before(newDiv);//新的兄弟节点加在div_1前面，body里面的div包括：这个新的<div>节点，div_1，div_2，div_3
insertAfter()：
节点作为一个兄弟节点添加到某节点后，这个函数是after的逆向操作。
var newDiv = $("<div>");newDiv.insertAfter($("#div_3"));//新的兄弟节点加在div_3后面，body里面的div包括：div_1，div_2，div_3以及这个新的<div>节点//相当于$("div_3").after(newDiv);
insertBefore()：

节点作为一个兄弟节点添加到某节点前，这个函数是before的逆向操作。
var newDiv = $("<div>");newDiv.insertBefore($("#div_1"));//新的兄弟节点加在div_1前面，body里面的div包括：这个新的<div>节点，div_1，div_2，div_3//相当于$("#div_1").before(newDiv);

删除节点：

remove()：
删除元素节点，包括绑定的事件。
$("p").remove();//删除所有<p>元素，三个<div>节点都成了空节点
empty()：

删除节点中的所有子节点，使其变为一个空节点。
$("div").empty();//删除<div>元素中的所有子节点，三个<div>节点都成了空节点

复制节点：

clone：
克隆元素集合中的所有对象，并将克隆出来的新集合选中。不克隆绑定的事件。
$("div").clone().appendTo($("body"));//克隆所有的div，并插入到body当中，body有两份div_1，div_2，div_3
clone(true)：
克隆元素集合中的所有对象，并将克隆出来的新集合选中。克隆绑定的事件。
$("div").clone().appendTo($("body"));//克隆所有的div，并插入到body当中以及它们所绑定的事件，body有两份div_1，div_2，div_3

替换节点：

replaceWith()：
将元素集合中的所有对象替换成指定的元素。
$("p").replaceWith("<b></b>");//将所有<p>元素替换成<b>元素//用来替换的元素可以是自定义的html代码，也可以是选择器的结果，或者是由$("<元素名>")而来的新节点
replaceAll()：
用指定元素去替换某元素集合中的所有元素，是replaceWith的逆向操作。
$("<b>").replaceAll($("p"));//用<b>元素去替换所有<p>元素

包裹节点：

warp()
warpAll()
warpInner()

操纵元素属性：
仍然以这段html代码结构为基准来介绍jQuery对元素属性的操纵。
<body><div id="div_1"><p id="p_1"><span id="span_1">this is span 1</span></p><p id="p_2" class=".someClass"></p></div><div id="div_2"><div id="div_2_1"><p id="p_3"></p><p id="p_4"></p><p id="p_5"></p></div></div></body>

属性：

attr(attribute)：
获取元素某一个属性的值。
$("div").eq(0).attr("id");//获取第一个<div>元素div_1的id属性，将返回字符串“div_1”
attr(attribute,value)：
设置元素某一个属性的值。
$("#div_1").attr("id","div1");//将div_1的id设置为div1
attr({"attribute1":"value1","attribute2":"value2"})：
设置元素的多个属性值。
$("#div_1").attr({"id":"div1","name":"div_1"});//将div_1的id设置为div1，name设置为div_1
removeAttr(attribute)：
移除元素的某个属性。
$("#div_1").removeAttr("name");//移除div_1的name属性

html：

html()：
获取元素内部的html代码。
$("#p_1").html();//将返回字符串“<span id="span_1">this is span 1</span>”
html(html)：
设置元素内部的html代码，不能用于XML。
$("#p_1").html("");//p_1变成了空节点

文本：

text()：
获取元素内部的文本。
$("span").text();//将返回字符串“this is span 1”
text(text)：
设置元素内部的文本。
$("span").text("I am span 1");//span_1的文本从“this is span 1”变成了“I am span 1”

值：

val()：
获取元素的value，不能用于XML。
在处理方形勾选框时，返回同组多选框第一个value。

val(value)：

设置元素的value，不能用于XML。

取元素的值是一个十分重要的功能，下面用一个实例来说明如何取值和设值：

<script>$(function(){/*页面载入时，绑定form表单的提交事件，下文将详细介绍*/$("#userForm").submit(readAllInputs);//submit函数的参数传入的是函数的名字，不需要加()。这是函数绑定，下文将详细介绍});/*读取所有输入的函数*/function readAllInputs(){var userName = $("#userName").val();//获取用户名输入框的value，即框中的文本内容var userPwd = $("#userPwd").val();//获取用密码输入框的value，即框中的文本内容var userSex = $("input[name='userSex']").val();//获取用户性别单选按钮的value，即是否选中某个按钮var hobbies[4];for(var i=0;i<4;i++){if($("#hobbies_"+i).attr("checked")!=null){//选择器选出所有hobbies的方形勾选框元素//当选中时，勾选框的checked属性为"checked"//没有选中时，没有这个属性，为nullhobbies[i] = 1;}else{hobbies[i] = 0;}}}function resetAllInputs(){$("#userName").val("Please enter your name");//设置用户名输入框的value，即框中的文本内容$("#userPwd").val("");//清空密码输入框的内容$("input[name='userSex']").val("1");//设置用户性别单选按钮的value，即是否选中某个按钮$("input[type='checkbox']").val("0");//一个hobby也不选}</script>

<form action="someServlet" method="post" id="userForm" onReset="resetAllInputs()"><input type="text" id="userName"/><!-- 用户名输入框 --><input type="password" id="userPwd"/><!-- 密码输入框 --><input type="radio" id="userSex_male" name="userSex" value="1"/><!-- 性别单选框，男 --><input type="radio" id="userSex_female" name="userSex" value="2"/><!-- 性别单选框，女 --><input type="checkbox" name="hobbies" id="hobbies_0"/><!-- 爱好勾选框 --><input type="checkbox" name="hobbies" id="hobbies_1"/><!-- 爱好勾选框 --><input type="checkbox" name="hobbies" id="hobbies_2"/><!-- 爱好勾选框 --><input type="checkbox" name="hobbies" id="hobbies_3"/><!-- 爱好勾选框 --><input type="submitBtn" name="submitBtn" value="submit" /><!-- 提交按钮 --><input type="resetBtn" name="resetBtn" value="reset" /><!-- 重置按钮 --></form>

操纵元素样式：

css(style属性样式名)：
获取第一个匹配元素的style属性中指定样式的值。
$("#div_1").css("width");//将返回字符串“300px”
<div id="div_1" style="width:300px;height:400px"></div>

css(style属性样式名,value)：
设置style属性中某个样式的值。
$("#div_1").css("height","600px");//将高度设置为600px
<div id="div_1" style="width:300px;height:400px"></div>

css({"style-attr1":"value1","style-attr2":"value2"});
设置style属性中多个样式的值。
$("span").css({"color":"red","font-size":"24px"});//设置所有<span>元素的颜色及字体大小
offset()：

获取元素相对于当前窗口的位移。返回一个offset对象，包含两个属性top和left，用来表示顶部及左边相对位移量。

position()：
获取元素相对于父窗口的位移。返回一个position对象，包含两个属性top和left，用来表示顶部及左边相对位移量。

height()：
获取元素的高度。
height(h)：
设置元素的高度。
width()：
获取元素的宽度。
width(w)：
设置元素的宽度。

addClass(Class)：
为元素追加样式。

removeClass(Class)：
移除元素的某个样式。
removeClass()：
移除元素的所有样式。
toggleClass(Class)：
若元素已经套用指定样式，则移除样式，否则追加该样式。
hasClass(Class)：
判断是否已经套用某样式。

<head><script type="text/javascript">$(function(){$("#div1").addClass("myClass");//追加样式myClass$("#div1").hasClass("myClass");//是否套用样式myClass，返回true$("#div1").removeClass("myClass");//移除样式myClass$("#div1").toggleClass("myClass");//切换样式，没有套用则追加$("#div1").css("background-color");//获取样式的background-color属性值，返回字符串“#FF0000”$("#div1").css("background-color","red");//将样式的background-color属性设置为“red”$("#div1").removeClass();//移除所有样式});</script><style>.myClass{background-color:#FF0000;}</style></head>

<body><div id="div1">div1</div></body>

虽然jQuery提供的各种DOM操纵函数能给我们带来许多强大的功能，比如修改样式、动态生成DOM元素等等，但是仍然缺少一个时机，一个可以执行这些操作的时机。这个时候，该轮到事件上场了，请看《Web基础：jQuery 下篇：千变万化的事件》。