有了选择器筛选出来的元素集合,我们在其基础上能对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" //没有选中时,没有这个属性,为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>