jQuery资料之选择器

◆ jQuery对象和DOM对象：

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

◆ jQuery对象和DOM对象转换：

DOM 对象与 jQuery 对象之间是可以相互转换的。实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

1、DOM对象转换成jQuery对象：

var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

2、jQuery对象转换为DOM对象：

//   方法一：jQuery对象[索引值]
var domObject1 = $('div')[0]

//   方法二：jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

◆ 元素选择器：

基于元素名选取元素。 $(“p”)

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

◆ #id 选择器：

通过 HTML 元素的 id 属性选取指定的元素。 $("#test")

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

◆ 类选择器：

通过指定的 class 查找元素。 $(".test")

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

◆ 并集选择器：

选取多个元素

$(document).ready(function(){
  $('div,p,li').click(function(){
    $(".test").hide();
  });
});

◆ 交集选择器：

选取符合所有条件的元素

$(document).ready(function(){
  $("div.current").click(function(){
    $(".test").hide();
  });
});

◆ 层级选择器：

1、子代选择器：

使用>号，获取亲儿子层级元素（不会获取孙子层级元素）

$(document).ready(function(){
  $("ul>li").click(function(){
    $(".test").hide();
  });
});

2、后代选择器：

使用空格，代表后代选择器，获取所有后代元素。

$(document).ready(function(){
  $("ul li").click(function(){
    $(".test").hide();
  });
});

◆ 其他选择器：

$("*")：选取所有元素
$(this)：选取当前 HTML 元素
$("p.intro")：选取 class 为 intro 的 <p> 元素
$("p:first")：选取第一个 <p> 元素
$("ul li:first")：选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")：选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")：选取带有 href 属性的元素 
$("a[target='_blank']")：选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")：选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")：选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")：选取偶数位置的 <tr> 元素
$("tr:odd") ：选取奇数位置的 <tr> 元素 

◆ 通过一个节点找另外一个节点：

语法	用法	说明
parent()	$(“li”).parent()	查找父级元素
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，最近一级
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)，后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前元素是否含有特定的类，如果有，返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)，index从0开始