jQuery选择器大全(48个代码片段+21幅图演示)

文档不收费，希望下载一、基本选择器1.id选择器（指定id元素）将id=one的元素背景色设置为黑色。（id选择器返单个元素）$(document).ready(function(){$('#one').css('background','#000');});2.class选择器（遍历css类元素）将class=cube的元素背景色设为黑色$(document).ready(function(){$('.cube').css('background','#000');});3.element选择器（遍历html元素）将p元素的文字大小设置为12px$(document).ready(function(){$('p').css('font-size','12px');});4.*选择器（遍历所有元素）$(document).ready(function(){//遍历form下的所有元素，将字体颜色设置为红色$('form*').css('color','#FF0000');});5.并列选择器$(document).ready(function(){//将p元素和div元素的margin设为0$('p,div').css('margin','0');});二、层次选择器1.parentchild（直系子元素）$(document).ready(function(){//选取div下的第一代span元素，将字体颜色设为红色$('divspan').css('color','#FF0000');});下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。divspan123/spanpspan456/span/p/div2.prev+next（下一个兄弟元素，等同于next()方法）$(document).ready(function(){//选取class为item的下一个div兄弟元素$('.item+div').css('color','#FF0000');//等价代码//$('.item').next('div').css('color','#FF0000');});下面的代码，只有123和789会变色pclass=item/pdiv123/divdiv456/divspanclass=item/spandiv789/div3.prev~siblings（prev元素的所有兄弟元素，等同于nextAll()方法）$(document).ready(function(){//选取class为inside之后的所有div兄弟元素$('.inside~div').css('color','#FF0000');//等价代码//$('.inside').nextAll('div').css('color','#FF0000');});下面的代码，G2和G4会变色divclass=insideG1/divdivG2/divspanG3/spandivG4/div三、过滤选择器1.基本过滤选择器——1.1:first和:last（取第一个元素或最后一个元素）$(document).ready(function(){$('span:first').css('color','#FF0000');$('span:last').css('color','#FF0000');});下面的代码，G1（first元素）和G3（last元素）会变色spanG1/spanspanG2/spanspanG3/span——1.2:not（取非元素）$(document).ready(function(){$('div:not(.wrap)').css('color','#FF0000');});下面的代码，G1会变色divG1/divdivclass=wrapG2/div但是，请注意下面的代码：divG1divclass=wrapG2/div/div当G1所在div和G2所在div是父子关系时，G1和G2都会变色。——1.3:even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）$(document).ready(function(){$('tr:even').css('background','#EEE');//偶数行颜色$('tr:odd').css('background','#DADADA');//奇数行颜色});A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADAtablewidth=200cellpadding=0cellspacing=0tbodytrtdA/td/trtrtdB/td/trtrtdC/td/trtrtdD/td/tr/tbody/table——1.4:eq(x)（取指定索引的元素）$(document).ready(function(){$('tr:eq(2)').css('background','#FF0000');});更改第三行的背景色，在上面的代码中C的背景会变色。——1.5:gt(x)和:lt(x)（取大于x索引或小于x索引的元素）$(document).ready(function(){$('ulli:gt(2)').css('color','#FF0000');$('ulli:lt(2)').css('color','#0000FF');});L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色ulliL1/liliL2/liliL3/liliL4/liliL5/li/ul——1.6:header（取H1~H6标题元素）$(document).ready(function(){$(':header').css('background','#EFEFEF');});下面的代码，H1~H6的背景色都会变h1H1/h1h2H2/h2h3H3/h3h4H4/h4h5H5/h5h6H6/h62.内容过滤选择器——2.1:contains(text)（取包含text文本的元素）$(document).ready(function(){//dd元素中包含jQuery文本的会变色$('dd:contains(jQuery)').css('color','#FF0000');});下面的代码，第一个dd会变色dldt技术/dtddjQuery,.NET,CLR/dddtSEO/dtdd关键字排名/dddt其他/dtdd/dd/dl——2.2:empty（取不包含子元素或文本为空的元素）$(document).ready(function(){$('dd:empty').html('没有内容');});上面第三个dd会显示没有内容文本——2.3:has(selector)（取选择器匹配的元素）$(document).ready(function(){//为包含span元素的div添加边框$('div:has(span)').css('border','1pxsolid#000');});即使span不是div的直系子元素，也会生效divh2AspanB/span/h2/div——2.4:parent（取包含子元素或文本的元素）$(document).ready(function(){$('olli:parent').css('border','1pxsolid#000');});下面的代码，A和D所在的li会有边框olli/liliA/lili/liliD/li/ol3.可见性过滤选择器——3.1:hidden（取不可见的元素）jQuery至1.3.2之后的:hidden选择器仅匹配display:none或inputtype=hidden/的元素，而不匹配visibility:hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。参照：下面的代码，先弹出hello对话框，然后hid-1会显示，hid-2仍然是不可见的。htmlxmlns==servertitle/titlestyletype=text/cssdiv{margin:10px;width:200px;height:40px;border:1pxsolid#FF0000;display:block;}.hid-1{display:none;}.hid-2{visibility:hidden;}/stylescripttype=text/javascriptsrc=js/jquery.min.js/scriptscripttype=text/javascript$(document).ready(function(){$('div:hidden').show(500);alert($('input:hidden').val());});/script/headbodydivclass=hid-1display:none/divdivclass=hid-2visibility:hidden/divinputtype=hiddenvalue=hello//body/html——3.2:visible（取可见的元素）下面的代码，最后一个div会有背景色scripttype=text/javascript$(document).ready(function(){$('div:visible').css('background','#EEADBB');});/scriptdivclass=hid-1display:none/divdivclass=hid-2visibility:hidden/divinputtype=hiddenvalue=hello/divjQuery选择器大全/div4.属性过滤选择器——4.1[attribute]（取拥有attribute属性的元素）下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线scripttype=text/javascript$(document).ready(function(){$('a[title]').css('text-decoration','none');});/scriptulliahref=#title=DOM对象和jQuery对象class=itemDOM对象和jQuery对象/a/liliahref=#title=jQuery选择器大全class=item-selectedjQuery选择器大全/a/liliahref=#title=jQuery事件大全class=itemjQuery事件大全/a/liliahref=#title=基于jQuery的插件开发class=item基于jQuery的插件开发/a/liliahref=#title=Wordpress&jQueryclass=itemWordpress&jQuery/a/li