js选择器.doc

文档介绍：. 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. parent > child (直系子元素) $(document).ready( function () { // 选取 div 下的第一代 span 元素,将字体颜色设为红色$( 'div > span' ).css( 'color' , '#FF0000' ); }); 下面的代码,只有第一个 span 会变色,第二个 span 不属于 div 的一代子元素,颜色保持不变。< div >< span > 123 </ span > <p>< span > 456 </ span > </ p> </ div > 2. prev + next (下一个兄弟元素,等同于 next() 方法) $(document).ready( function () { // 选取 class 为 item 的下一个 div 兄弟元素$( '.item + div' ).css( 'color' , '#FF0000' ); . // 等价代码//$('.item').next('div').css('color', '#FF0000'); }); 下面的代码,只有 123 和 789 会变色<p class = "item" ></ p> < div > 123 </ div >< div > 456 </ div >< span class = "item" ></ span > < div > 789 </ div > 3. prev ~ siblings ( prev 元素的所有兄弟元素,等同于 nextAll() 方法) $(document).ready( function () { // 选取 class 为 inside 之后的所有 div 兄弟元素$( '.inside ~ div' ).css( 'color' , '#FF0000' ); // 等价代码//$('.inside').nextAll('div').css('color', '#FF0000'); }); 下面的代码, G2 和 G4 会变色< div class = "inside" > G1 </ div > < div > G2 </ div >< span > G3 </ span >< div > G4 </ div > 三、过滤选择器 1. 基本过滤选择器—— :first 和:last (取第一个元素或最后一个元素) . $(document).ready( function () { $( 'span:first' ).css( 'color' , '#FF0000' ); $( 'span:last' ).css( 'color' , '#FF0000' ); }); 下面的代码, G1 ( first 元素)和 G3 ( last 元素)会变色< span > G1 </ span >< span > G2 </ span >< span > G3 </ span > —— :not (取非元素) $(document).ready( function () { $( 'div:not(.wrap)' ).css( 'color' , '#FF0000' ); });