Jquery 选择器

一、jquery对象转换为DOM对象

1、用数组下标

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

2、用get(0)方法

var $div = $('div') //jQuery对象

var div = $div.get(0) //通过get方法，转化成DOM对象

div.style.color = 'red' //操作dom对象的属性

二、层级选择器

1、相邻兄弟选择器

选取prev后面的第一个的div兄弟节点
 $(".prev + div").css("border", "3px groove blue");

2、一般相邻选择器

选取prev后面的所有的div兄弟节点
$(".prev ~ div").css("border", "3px groove blue");

三、基本筛选选择器

1、：first  第一个元素

2、：last  最后一个

3、：eq(index)  索引为index的元素

4、：gt(index)  大于index的元素

5、：lt(index) 小于index的元素

6、：even  索引值为偶数的元素

7、：odd  索引值为奇数的元素

8、：not(select)   除了select的其他元素   

例如$("input:not(:checked) + p")  选中input中除了选中状态的input当中的p元素

9、：animated   选择所有正在执行动画的元素

四、内容筛选选择器

1、：contains(text)  选择包含指定文本的元素

例如：查找所有class='div'中DOM元素中包含"aaa"的元素节点

$(".div:contains('aaa')").css("color", "red");

2、：has(selector)  选择包含指定选择器的元素

例如：查找所有class='div'中DOM元素中包含"span"的元素节点

$(".div:has('span')").css("color", "blue");

3、：parent  选择所有包含子元素的元素

例如：选择所有包含子元素或者文本的a元素

$("a:parent").css("border", "3px groove blue");

4、：empty 选择所有没有子元素（包括文本）的元素

例如:找到a元素下面的所有空节点(没有子元素)

$("a:empty").css("border", "3px groove red"); 

五、可见性筛选选择器

1、：visible  选择所有显示的元素

2、：hidden  选择所有隐藏的元素

六、属性选择器

1、arrt[value]  选择属性值为value的元素

$('div[p2]')  属性中含有p2的div

2、[attribute=value]

$("input[name='newsletter']")

3、 查找所有 name 属性不是 newsletter 的 input 元素

$("input[name!='newsletter']").attr("checked", true);

4、查找所有 name 以 'news' 开始的 input 元素

$("input[name^='news']")

5、查找所有 name 以 'letter' 结尾的 input 元素

$("input[name$='letter']")

 6、查找所有 name 包含 'man' 的 input 元素

$("input[name*='man']")

七、子元素选择器 

1、：first-child   ：last-child   nth-child(2) nth-last-child(2)   所有父级下第一个、最后一个、某一个（第三个）、倒数第二个

2、：only-child  某元素是父级下唯一的子元素，就被选中

例如：查找class="first-div"下的只有一个子元素的a元素

$('.first-div a:only-child')

八、表单元素选择器

例如   

$('input:text')   

但是也可以用属性代替

$('input[type='text']')

九、单对象属性筛选选择器

1、：enabled  :disabled     选取可用和不可用的表单元素

2、：checked    选取被选中的input元素

3、 :selected    选取被选中的option元素

在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素