锋利的jQuery（2）——jQuery选择器

1、jQuery选择器的优势：

• 简洁的写法
• 支持CSS1-CSS3选择器
• 完善的处理机制：在这里面有一个需要注意的地方就是当检查某个元素是否存在时不能能使用true或者false,而应该使用length

  //错误写法
  if($("#tt")){
        //do something
  }
  
  //正确写法
  if($("#tt").length > 0){
        //do something
  }
  

2、jQuery选择器

• 基本选择器
  • 

    其中除了#id选择器返回单个元素，其它返回集合元素

• 层次选择器

1. 返回的都是集合元素
2. element＋next 可以使用next方法代替 

   $(".one + div")
   //等于
   $(".one).next("div")　

3. nextAll方法代替 element ~ sibling 这个方法返回的是节点之后的元素，而sibling()方法与前后位置无关，只要是在同一级别都会返回

• 过滤选择器

1. 基本过滤选择器

   • 

     :first和:last返回的是单个元素

     

     eq(index)返回的是单个元素，其它返回的是集合元素

2. 内容过滤选择器
   • 

      

3. 可见性过滤选择器
   • 

      

4. 属性过滤选择器
   • 

      

5. 子元素过滤选择器
   • 

     :first-child和:first-of-type的区别是前者$("p:first-child")选取的是父元素的第一个子元素就是指定的p元素，如果第一个是li或者其它元素那么将不获取，而后者$("p:first-of-type")选取的是父元素中的第一个p元素，不论第一个子元素是什么，都只选取第一个p元素。其它同理

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

      

• 表单选择器
  • • • 

         

 3、选择器中应注意的事项

• 选择其中包含有“.”、“#”、“(”、“]”，需要用转义符\\来转义
• 选择器中包含空格意思是不同的例如：

  var $a = $("div.test :hidden");//带空格，表示选取的是class为test的div元素里面的隐藏元素。
  
  var $a = $（"div.test:hidden"）//不带空格，表示选取隐藏的class为test的div元素。