Demo-jQuery常用选择过滤器

来源：互联网发布：通用电气公司人事知乎编辑：程序博客网时间：2024/05/21 07:14
<!DOCTYPE html><html><head><title>test</title><script type="text/javascript" src="./jquery-1.7.2.min.js"></script><style type = "text/css">div,span,p {width: 140px;background: #aaa;height: 140px;margin:5px;border:#000 1px solid;float:left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript">$(function(){$("#one").css("background", 'red');$("div").css("background","green");$("span,#two").css("background","yellow");$("div div").css("background","black");$("#one > .mini").css("background","white");$("div:last").css("background","blue");//选取最后一个div$("div:not(.mini)").css("background","red");//选取class不为mini的所有div$("div:odd").css("background","blue");//选取所有奇数索引的div$("div:eq(4)").css("background","red");//选取指定索引下的div$("div:gt(2)").css("background","white");//选取大于指定div$(":header").css("color","yellow");//选取所有h元素$(":focus").css("background","black");$("div:contains('one')").css("background","white");//获取包含‘one’内容的div$("div:empty").css("background","red");//获取空div$("div:has('.mini')").css("background","yellow");//获取div下minidiv$(":hidden").show(5000);//获取所有隐藏的元素，并show出来$(":animated").css("background","green");//改变执行动画的颜色});</script></head><body><h1>32</h1><div class="one" id="one">class one id one<div class="mini">div1_1</div></div><div class="one" id="two" title="test">class one id two<div class="mini" title="other">div2_1</div><div class="mini" title="test">div2_2</div></div><div class="one">class one<div class="mini">div3_1</div><div class="mini">div3_2</div><div class="mini">div3_3</div><div class="mini"></div></div><div class="one">class one<div class="mini">div4_1</div><div class="mini">div4_2</div><div class="mini">div4_3</div><div class="mini" title="tesst">title tesst</div></div><div style="display: none" class="none">display为none的div</div><div class="hide">class hide</div><div><input type="hidden" size="8"></input></div><span id="mover">mover</span></body></html>
0 0