JQuery的几种基本方法
1、prev
查找当前兄弟节点中的上一个节点
2、next
查找当前兄弟节点中的下一个节点
<script>$(function(){ $("h3").prev().css("backgroundColor", "red"); $("h3").next().css("backgroundColor", "blue");} </script>
<html><head></head><body> <h2>h2</h2><p>p</p><h3>h3</h3><em>em</em><div>div</div> </body></html>
图片展示
3、filter
过滤,已经获取到的网页元素进行过滤
4、not
filter的反义词
5、has
拥有,直接判定子节点中是否有符号条件的元素
<script>$(function(){ $("div").filter(".box").css("backgroundColor",'orange'); $("div").not(".box").css("backgroundColor",'red'); $("div").has(".box").css("backgroundColor",'blue'); })</script>
<html><head></head><body> <div class="box">div1</div> <div>div2<strong class="box"></strong></div> <div>div3</div> </body></html>
图片展示
6、find
查询子节点
<script>$(function(){ $("ul").find("li").css("backgroundColor",'blue'); $("ul").find(".box").css("backgroundColor",'red'); $("ul").find("[name=hello]").css("backgroundColor",'red'); })</script>
<html><head></head><body> <ul> <li class="box"></li> <li></li> <li name="hello"></li> <li></li> <li class="hello"></li> </ul> <ol> <li></li><li></li> <li></li></ol></body></html>
图片展示
7、index()
获取当前节点在兄弟节点中的下标
8、eq(下标)
通过下标获取指定的元素节点
<script>$(function(){ alert($("h3").index());//2 $("li").eq(3).css("backgroundColor",'orange'); $("li:eq(4)").css("backgroundColor",'yellow');}</script>
<html><head></head><body> <strong>strong</strong> <div id="div1"> <h2>h2</h2> <p>p</p> <h3>h3</h3> <em>em</em> <div>div</div> </div> <ul> <li class="box"></li> <li></li> <li name="hello"></li> <li></li> <li class="hello"></li></ul></body></html>
图片展示
9、attr
设置和修改行间样式
<script>$(function(){ $("#div1").attr("title",'world'); $("#div1").attr("class",'box2');})</script>
一次性修改多条属性
<script>$(function(){ $("#div1").attr({title:'world',class:'xxx',yyy:'zzz'}); });</script>
<html><head></head><body> <div id="div1" title="hello" class="box"></div> </body></html>
图片展示
浙公网安备 33010602011771号