jQuey常用选择器(一)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="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> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script type="text/javascript"> $(document).ready( function() { //改变id为one的元素的背景色 必须是单引号 //$('#one').css('background','#bfa'); //改变class为mini的所有元素背景色 //$('.mini').css('background','red'); //改变标签为div的所有元素背景色 //$('div').css('background','red'); //改变所有元素背景色 //$('*').css('background','red'); //改变<span>元素和id为two的元素的所有元素背景色 //$('span,#two').css('background','red'); //层次选择器 //1.改变body里面所有<div>的背景色 //$('body div').css('background','red'); //2.改变body内子元素div的背景色 //$('body>div').css('background','green'); //3.改变id为one的元素的下一个兄弟div元素的背景色 //$('#one + div').css('background','yellow'); //4.改变id为two的元素后面所有div兄弟元素的背景色 //$('#two ~ div').css('background','blue'); //上面3的替代方法 //$('#one').next('div').css('background','gray'); //上面4的替代 //$('#two').nextAll('div').css('background','gray'); // 3过滤选择器 //3.1基本过滤选择器 //1改变第一个div的颜色 // $('div:first').css('background','red'); // // // 2改变最后一个div的颜色 // $('div:last').css('background','yellow'); //3改变所有class不为one的div的背景色 //$('div:not(.one)').css('background','yellow'); //4改变索引值为偶数的div的背景色 计数从0开始 //$('div:even').css('background','red'); //5改变索引值为奇数的div的背景色 //$('div:odd').css('background','red'); //6改变索引值为3的div的背景色 //$('div:eq(3)').css('background','red'); //7改变索引值大于3的div的背景色 //$('div:gt(3)').css('background','red'); //8改变索引值小于3的div的背景色 //$('div:lt(3)').css('background','red'); //9改变所有标题元素的 //$(':header').css('background','red'); //10改变所有标题元素的 //$(':animated').css('background','red'); //3.2内容过滤选择器 //1改变内容包含di的div元素的背景色 //$('div:contains(di)').css('background','red'); //2改变不包含子元素或者文本的空div元素的背景色 //$('div:empty').css('background','red'); //3改变含有class为mini的子元素的div元素的背景色 //$('div:has(.mini)').css('background','red'); //4改变含有子元素或者文本元素的元素的背景色 //$('div:parent').css('background','red'); //3.3可见性过滤选择器 //1改变所有可见元素的背景色 //$('div:visible').css('background','red'); //2将不可见元素3秒显示出来 //$('div:hidden').show(3000); //3.4 属性过滤选择器 //1改变含有title属性的div元素的背景色 //$('div[title]').css('background','red'); //2改变属性值等于test的div元素的背景色 //$('div[title=test]').css('background','red'); //3改变title值不等于tets的div元素的背景色 //$('div[title!=test]').css('background','red'); //4改变title以te开头的div元素的背景色 //$('div[title^=te]').css('background','red'); //5.改变title以est结尾的div元素的背景色 //$('div[title$=est]').css('background','red'); //6.改变title含有es的div元素的背景色 //$('div[title*=es]').css('background','red'); //7改变含有id属性,并且title属性含有es的div元素的背景色 //$('div[id][title*=es]').css('background','red'); //3.5子元素过滤选择器 //1改变每个class为one的div元素的第二个子元素的背景色 必须空格 //$('div.one :nth-child(2)').css('background','red'); //2改变每个class为one的div元素的第一个子元素的背景色 //$('div.one :first-child').css('background','red'); //3.改变每个class为one的div元素的最后一个子元素的背景色 //$('div :last-child').css('background','red'); //4.如果class为one的div元素只有一个子元素,那么改变这个子元素的背景色 //$('div :only-child').css('background','red'); } ); </script> </head> <body> <h1>jQuery选择器</h1> <div class="one" id="one"> id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为none的div</div> <div class="hide">class为hide的div</div> <div> 包含的input的type为hidden的div<input type="hidden" size="8"/> </div> <span id="mover">正在执行动画的span</span> </body> </html>
相关推荐
冰蝶 2020-04-26
zengni 2020-04-07
Ladyseven 2020-10-22
luofuIT成长记录 2020-09-22
Mynamezhuang 2020-09-18
李鴻耀 2020-08-17
yaodilu 2020-08-03
zhoujiyu 2020-06-28
89510194 2020-06-27
CaiKanXP 2020-06-13
MaureenChen 2020-06-12
Phoebe的学习天地 2020-06-07
淡风wisdon大大 2020-06-06
buttonChan 2020-06-06
xtuhcy 2020-05-20
AlisaClass 2020-05-18