jQuery（选择器）

• • JQuery 对象和 DOM 对象
  
  
  jQuery 对象转为 DOM 对象
  注意：JQuery 对象是一个数组，既然是数组，那么就可以通过下标来转换为 DOM 对象
  var $btn = $("button");  获取一个 JQuery 对象，前面有个$

  alert($btn.length);      输出 btn 长度
  
  
  DOM 对象转换为 jQuery 对象
  只需要将 DOM 对象用括号括起来，用 $ 进行包装，就可以转换为 JQuery 对象
  
  
  $(btn)
  
  
• 基本选择器

window.onload 的 jQuery 形式：

$( function () {

  //这就是 window.onload 功能了

})

 

#id 通过 id 来选择元素，click 叫做事件

$("#btn1").click(function () {

    alert();

})

下面这句可以使 id 为 one 的 元素变色

$( "#one"). css( "background", "#ffbbaa");

class 为 mini 的元素 变色

$( ".mini"). css( "background",  "#ffbbaa");

使所有的 元素 变色

$( "*"). css( "background",  "#ffbbaa");

使所有的 div 元素 变色

$( "div"). css( "background",  "#ffbbaa");

使 span 元素 且 id 为 one 的元素变色

$( " span ,#one"). css( "background",  "#ffbbaa");

• 层次选择器

选择  body  内的所有  div  元素

$( " body div "). css( "background",  "#ffbbaa")

在  body  内 ,  选择子元素是  div  的

$( " body  >  div "). css( "background",  "#ffbbaa");

选择  id  为  one  的下一个  div  元素

$( "#one +  div "). css( "background",  "#ffbbaa");

选择  id  为  two  的元素后面的所有  div  兄弟元素

$( "#two ~  div "). css( "background",  "#ffbbaa");

选择  id  为  two  的元素所有  div  兄弟元素

$( "#two"). siblings( "div"). css( "background",  "#ffbbaa");

选择  id  为  one  的下一个  span  元素

$( "#one"). nextAll( " span :first"). css( "background",  "#ffbbaa");

" 选择  id  为  two  的元素前边的所有的  div  兄弟元素

$( "#two"). prevAll( "div"). css( "background",  "#ffbbaa");

• 过滤选择器

：first 选取第一个元素 

表示选取 第一个 div

$( "div：first"). css( "background", "#ffbbaa");

• 内容过滤选择器

选择 含有文本  'di'  的  div  元素

$( " div :contains('di')"). css( "background",  "#ffbbaa");

选择不包含子元素 ( 或者文本元素 )  的  div  空元素

$( " div :empty"). css( "background",  "#ffbbaa");

选择含有  class  为  mini  元素的  div  元素

$( " div :has(.mini)"). css( "background",  "#ffbbaa");

选择含有子元素 ( 或者文本元素 ) 的 div 元素

$( " div :parent"). css( "background",  "#ffbbaa");

$( " div :not(:empty)"). css( "background",  "#ffbbaa");

tips：jQuery 支持方法的连缀，即一个方法返回了一个 jQuery 对象，可以继续调用该对象的其他方法。

• 属性过滤选择器

< input  type= "button"  value= " 选取含有 属性 title  的 div 元素 ."  id= "btn1" />
< input  type= "button"  value= " 选取 属性 title 值等于 'test' 的 div 元素 ."  id= "btn2" />
< input  type= "button"  value= " 选取 属性 title 值不等于 'test' 的 div 元素 ( 没有属性 title 的也将被选中 )."  id= "btn3" />
< input  type= "button"  value= " 选取 属性 title 值 以 'te' 开始 的 div 元素 ."  id= "btn4" />

< input  type= "button"  value= " 选取 属性 title 值 以 'est' 结束 的 div 元素 ."  id= "btn5" />
< input  type= "button"  value= " 选取 属性 title 值 含有 'es' 的 div 元素 ."  id= "btn6" />
< input  type= "button"  value= " 组合属性选择器 , 首先选取有属性 id 的 div 元素，然后在结果中 选取属性 title 值 含有 'es' 的  div  元素 ."  id= "btn7" />

<input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>

$( "#btn1"). click( function(){
    $( " div [title]"). css( "background",  "#ffbbaa");
});
$( "#btn2"). click( function(){
    $( " div [title='test']"). css( "background",  "#ffbbaa");
});
$( "#btn3"). click( function(){
    // 选取的元素中包含没有  title  的  div  元素 . 
    $( " div [title!='test']"). css( "background",  "#ffbbaa");
});

$( "#btn4"). click( function(){
    $( " div [title^='te']"). css( "background",  "#ffbbaa");
});

$( "#btn5"). click( function(){
    $( " div [title$='est']"). css( "background",  "#ffbbaa");
});
$( "#btn6"). click( function(){
    $( " div [title*='es']"). css( "background",  "#ffbbaa");
});
$( "#btn7"). click( function(){
    $( " div [id][title*='es']"). css( "background",  "#ffbbaa");
});

$( "#btn8"). click( function(){
    $( " div [title][title!='test']"). css( "background",  "#ffbbaa");

});

• 子元素过滤选择器

< input  type= "button"  value= " 选取每个 class 为 one 的 div 父元素下的第 2 个子元素 ."  id= "btn1" />
< input  type= "button"  value= " 选取每个 class 为 one 的 div 父元素下的第一个子元素 ."  id= "btn2" />
< input  type= "button"  value= " 选取每个 class 为 one 的 div 父元素下的最后一个子元素 ."  id= "btn3" />

<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>

$( document). ready( function(){
     
      $( "#btn1"). click( function(){
          // 选取子元素 ,  需要在选择器前添加一个空格 . 
          $( " div .one :nth-child(2)"). css( "background",  "#ffbbaa");
      });
      $( "#btn2"). click( function(){
          $( " div .one :first-child"). css( "background",  "#ffbbaa");
      });
      $( "#btn3"). click( function(){
          $( " div .one :last-child"). css( "background",  "#ffbbaa");
      });
     
      $( "#btn4"). click( function(){
          $( " div .one :only-child"). css( "background",  "#ffbbaa");
      });
     
   });
</ script >

• 表单对象属性过滤选择器

对表单内 可用 input 赋值操作

$( " input :enabled"). val( "free");

对表单内 不可用 input 赋值操作

$( ":text:disabled"). val( "free");

获取多选框选中的个数 .

$( ":checkbox[name='newsletter']:checked"). length;

获取多选框选中的内容

$( ":checkbox:checked"). each( function () {
    alert( this. value);

});

$( " select  :selected"). each( function () {
    alert( this. value);
});