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);
});