<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>Untitled Document</title><styletype="text/css">div, span, p{width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide{display: none;}</style><scripttype="text/javascript"src="../script/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){//1.选择 id 为 one 的元素 "background-color","#bbffaa"$("#btn1").click(function(){//css方法 可以设置和获取样式$("#one").css("background-color","#bbffaa");});//2.选择 class 为 mini 的所有元素$("#btn2").click(function(){$(".mini").css("background-color","#bbffaa");});//3.选择 元素名是 div 的所有元素$("#btn3").click(function(){$("div").css("background-color","#bbffaa");});//4.选择所有的元素$("#btn4").click(function(){$("*").css("background-color","#bbffaa");});//5.选择所有的 span 元素和id为two的元素$("#btn5").click(function(){$("span,#two").css("background-color","#bbffaa");});});</script></head><body><!-- <div>
<h1>基本选择器</h1>
</div> --><inputtype="button"value="选择 id 为 one 的元素"id="btn1"/><inputtype="button"value="选择 class 为 mini 的所有元素"id="btn2"/><inputtype="button"value="选择 元素名是 div 的所有元素"id="btn3"/><inputtype="button"value="选择 所有的元素"id="btn4"/><inputtype="button"value="选择 所有的 span 元素和id为two的元素"id="btn5"/><br><divclass="one"id="one">
id 为 one,class 为 one 的div
<divclass="mini">class为mini</div></div><divclass="one"id="two"title="test">
id为two,class为one,title为test的div
<divclass="mini"title="other">class为mini,title为other</div><divclass="mini"title="test">class为mini,title为test</div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"title="tesst">class为mini,title为tesst</div></div><divstyle="display:none;"class="none">style的display为"none"的div</div><divclass="hide">class为"hide"的div</div><div>
包含input的type为"hidden"的div<inputtype="hidden"size="8"></div><spanclass="one"id="span">^^span元素^^</span></body></html>
层次选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>Untitled Document</title><styletype="text/css">div, span, p{width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide{display: none;}</style><scripttype="text/javascript"src="../script/jquery-1.7.2.js"></script><scripttype="text/javascript">$(document).ready(function(){//$(function(){});的全写//1.选择 body 内的所有 div 元素$("#btn1").click(function(){$("body div").css("background","#bbffaa");});//2.在 body 内, 选择div子元素$("#btn2").click(function(){$("body > div").css("background","#bbffaa");});//3.选择 id 为 one 的下一个 div 元素$("#btn3").click(function(){$("#one+div").css("background","#bbffaa");});//4.选择 id 为 two 的元素后面的所有 div 兄弟元素$("#btn4").click(function(){$("#two~div").css("background","#bbffaa");});});</script></head><body><!-- <div>
<h1>层级选择器:根据元素的层级关系选择元素</h1>
ancestor descendant :
parent > child :
prev + next :
prev ~ siblings :
</div> --><inputtype="button"value="选择 body 内的所有 div 元素"id="btn1"/><inputtype="button"value="在 body 内, 选择div子元素"id="btn2"/><inputtype="button"value="选择 id 为 one 的下一个 div 元素"id="btn3"/><inputtype="button"value="选择 id 为 two 的元素后面的所有 div 兄弟元素"id="btn4"/><br><br><divclass="one"id="one">
id 为 one,class 为 one 的div
<divclass="mini">class为mini</div></div><divclass="one"id="two"title="test">
id为two,class为one,title为test的div
<divclass="mini"title="other">class为mini,title为other</div><divclass="mini"title="test">class为mini,title为test</div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"title="tesst">class为mini,title为tesst</div></div><divstyle="display:none;"class="none">style的display为"none"的div</div><divclass="hide">class为"hide"的div</div><div>
包含input的type为"hidden"的div<inputtype="hidden"size="8"></div><spanid="span">^^span元素^^</span></body></html>
基本的过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>Untitled Document</title><styletype="text/css">div, span, p{width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide{display: none;}</style><scripttype="text/javascript"src="../script/jquery-1.7.2.js"></script><scripttype="text/javascript">$(document).ready(function(){functionanmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();});$(document).ready(function(){//1.选择第一个 div 元素 $("#btn1").click(function(){$("div:first").css("background","#bbffaa");});//2.选择最后一个 div 元素$("#btn2").click(function(){$("div:last").css("background","#bbffaa");});//3.选择class不为 one 的所有 div 元素$("#btn3").click(function(){$("div:not(.one)").css("background","#bbffaa");});//4.选择索引值为偶数的 div 元素$("#btn4").click(function(){$("div:even").css("background","#bbffaa");});//5.选择索引值为奇数的 div 元素$("#btn5").click(function(){$("div:odd").css("background","#bbffaa");});//6.选择索引值为大于 3 的 div 元素$("#btn6").click(function(){$("div:gt(3)").css("background","#bbffaa");});//7.选择索引值为等于 3 的 div 元素$("#btn7").click(function(){$("div:eq(3)").css("background","#bbffaa");});//8.选择索引值为小于 3 的 div 元素$("#btn8").click(function(){$("div:lt(3)").css("background","#bbffaa");});//9.选择所有的标题元素$("#btn9").click(function(){$(":header").css("background","#bbffaa");});//10.选择当前正在执行动画的所有元素$("#btn10").click(function(){$(":animated").css("background","#bbffaa");});//11.选择没有执行动画的最后一个div$("#btn11").click(function(){$("div:not(:animated):last").css("background","#bbffaa");});});</script></head><body><inputtype="button"value="选择第一个 div 元素"id="btn1"/><inputtype="button"value="选择最后一个 div 元素"id="btn2"/><inputtype="button"value="选择class不为 one 的所有 div 元素"id="btn3"/><inputtype="button"value="选择索引值为偶数的 div 元素"id="btn4"/><inputtype="button"value="选择索引值为奇数的 div 元素"id="btn5"/><inputtype="button"value="选择索引值为大于 3 的 div 元素"id="btn6"/><inputtype="button"value="选择索引值为等于 3 的 div 元素"id="btn7"/><inputtype="button"value="选择索引值为小于 3 的 div 元素"id="btn8"/><inputtype="button"value="选择所有的标题元素"id="btn9"/><inputtype="button"value="选择当前正在执行动画的所有元素"id="btn10"/><inputtype="button"value="选择没有执行动画的最后一个div"id="btn11"/><h3>基本选择器.</h3><br><br><divclass="one"id="one">
id 为 one,class 为 one 的div
<divclass="mini">class为mini</div></div><divclass="one"id="two"title="test">
id为two,class为one,title为test的div
<divclass="mini"title="other">class为mini,title为other</div><divclass="mini"title="test">class为mini,title为test</div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"title="tesst">class为mini,title为tesst</div></div><divstyle="display:none;"class="none">style的display为"none"的div</div><divclass="hide">class为"hide"的div</div><div>
包含input的type为"hidden"的div<inputtype="hidden"size="8"></div><divid="mover">正在执行动画的div元素.</div></body></html>
内容过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>Untitled Document</title><styletype="text/css">div, span, p{width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide{display: none;}</style><scripttype="text/javascript"src="../script/jquery-1.7.2.js"></script><scripttype="text/javascript">$(document).ready(function(){functionanmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();});/**
:contains(text)
:empty
:has(selector)
:parent
*/$(document).ready(function(){//1.选择 含有文本 'di' 的 div 元素$("#btn1").click(function(){$("div:contains('di')").css("background","#bbffaa");});//2.选择不包含子元素(或者文本元素) 的 div 空元素$("#btn2").click(function(){$("div:empty").css("background","#bbffaa");});//3.选择含有 class 为 mini 元素的 div 元素$("#btn3").click(function(){$("div:has(.mini)").css("background","#bbffaa");});//4.选择含有子元素(或者文本元素)的div元素$("#btn4").click(function(){$("div:parent").css("background","#bbffaa");});});</script></head><body><inputtype="button"value="选择 含有文本 'di' 的 div 元素"id="btn1"/><inputtype="button"value="选择不包含子元素(或者文本元素) 的 div 空元素"id="btn2"/><inputtype="button"value="选择含有 class 为 mini 元素的 div 元素"id="btn3"/><inputtype="button"value="选择含有子元素(或者文本元素)的div元素"id="btn4"/><br><br><divclass="one"id="one">
id 为 one,class 为 one 的div
<divclass="mini">class为mini</div></div><divclass="one"id="two"title="test">
id为two,class为one,title为test的div
<divclass="mini"title="other">class为mini,title为other</div><divclass="mini"title="test">class为mini,title为test</div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"title="tesst">class为mini,title为tesst</div></div><divstyle="display:none;"class="none">style的display为"none"的div</div><divclass="hide">class为"hide"的div</div><div>
包含input的type为"hidden"的div<inputtype="hidden"size="8"></div><divid="mover">正在执行动画的div元素.</div></body></html>
可见性过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>Untitled Document</title><styletype="text/css">div, span, p{width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide{display: none;}</style><scripttype="text/javascript"src="../script/jquery-1.7.2.js"></script><scripttype="text/javascript">$(document).ready(function(){functionanmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();});/**
:hidden
:visible
*/$(document).ready(function(){//1.选取所有可见的 div 元素$("#btn1").click(function(){$().css("background","#bbffaa");});//2.选择所有不可见的 div 元素//不可见:display属性设置为none,或visible设置为hidden$("#btn2").click(function(){$().show("slow").css("background","#bbffaa");});//3.选择所有不可见的 input 元素$("#btn3").click(function(){alert($().attr("value"));});});</script></head><body><inputtype="button"value="选取所有可见的 div 元素"id="btn1"><inputtype="button"value="选择所有不可见的 div 元素"id="btn2"/><inputtype="button"value="选择所有不可见的 input 元素"id="btn3"/><br><divclass="one"id="one">
id 为 one,class 为 one 的div
<divclass="mini">class为mini</div></div><divclass="one"id="two"title="test">
id为two,class为one,title为test的div
<divclass="mini"title="other">class为mini,title为other</div><divclass="mini"title="test">class为mini,title为test</div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"title="tesst">class为mini,title为tesst</div></div><divstyle="display:none;"class="none">style的display为"none"的div</div><divclass="hide">class为"hide"的div</div><div>
包含input的type为"hidden"的div<inputtype="hidden"value="123456789"size="8"></div><divid="mover">正在执行动画的div元素.</div></body></html>
属性过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>Untitled Document</title><styletype="text/css">div,span,p{width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide{display: none;}</style><scripttype="text/javascript"src="../script/jquery-1.7.2.js"></script><scripttype="text/javascript">/**
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
*/$(function(){//1.选取含有 属性title 的div元素$("#btn1").click(function(){$("div[title]").css("background","#bbffaa");});//2.选取 属性title值等于'test'的div元素$("#btn2").click(function(){$("div[title='test']").css("background","#bbffaa");});//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)$("#btn3").click(function(){$("div[title!='test']").css("background","#bbffaa");});//4.选取 属性title值 以'te'开始 的div元素$("#btn4").click(function(){$("div[title^='te']").css("background","#bbffaa");});//5.选取 属性title值 以'est'结束 的div元素$("#btn5").click(function(){$("div[title$='est']").css("background","#bbffaa");});//6.选取 属性title值 含有'es'的div元素$("#btn6").click(function(){$("div[title*='es']").css("background","#bbffaa");});//7.首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素$("#btn7").click(function(){$("div[id][title*='es']").css("background","#bbffaa");});//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素$("#btn8").click(function(){$("div[title][title!='test']").css("background","#bbffaa");});});</script></head><body><inputtype="button"value="选取含有 属性title 的div元素."id="btn1"style="display: none;"/><inputtype="button"value="选取 属性title值等于'test'的div元素."id="btn2"/><inputtype="button"value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)."id="btn3"/><inputtype="button"value="选取 属性title值 以'te'开始 的div元素."id="btn4"/><inputtype="button"value="选取 属性title值 以'est'结束 的div元素."id="btn5"/><inputtype="button"value="选取 属性title值 含有'es'的div元素."id="btn6"/><inputtype="button"value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素."id="btn7"/><inputtype="button"value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素."id="btn8"/><br><br><divclass="one"id="one">
id 为 one,class 为 one 的div
<divclass="mini">class为mini</div></div><divclass="one"id="two"title="test">
id为two,class为one,title为test的div
<divclass="mini"title="other">class为mini,title为other</div><divclass="mini"title="test">class为mini,title为test</div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"></div></div><divclass="one"><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini">class为mini</div><divclass="mini"title="tesst">class为mini,title为tesst</div></div><divstyle="display: none;"class="none">style的display为"none"的div</div><divclass="hide">class为"hide"的div</div><div>
包含input的type为"hidden"的div<inputtype="hidden"value="123456789"size="8"></div><divid="mover">正在执行动画的div元素.</div></body></html>
基本选择器<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> .