有了选择器筛选出来的元素集合，我们在其基础上能对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_5prependTo()：
子节点加入父节点，加入的位置在所有子节点的最前，这个函数是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_3insertAfter()：
节点作为一个兄弟节点添加到某节点后，这个函数是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_3clone(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设置为div1attr({"attribute1":"value1","attribute2":"value2"})：
设置元素的多个属性值。
$("#div_1").attr({"id":"div1","name":"div_1"}); //将div_1的id设置为div1，name设置为div_1removeAttr(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" //没有选中时，没有这个属性，为null hobbies[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>
虽然jQuery提供的各种DOM操纵函数能给我们带来许多强大的功能，比如修改样式、动态生成DOM元素等等，但是仍然缺少一个时机，一个可以执行这些操作的时机。这个时候，该轮到事件上场了，请看 《Web基础：jQuery 下篇：千变万化的事件》。<body> <div id="div1">div1</div> </body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
