【JavaScript】jQuery选择器

基本选择器

1、id选择器

console.log($('#box'));

2、类选择器

console.log($('.box'));

3、标签选择器

console.log($('div'));

4、并集选择器

console.log($('.box,p'));

5、交集选择器

console.log($('div.box_1'));

层级选择器

1、子代选择器

console.log($('#list>li'));

2、后代选择器

console.log($('#list li'));

过滤选择器

1、：eq（index）索引从0开始

console.log($('li:eq(3)').css('color', 'green'));

2、：odd（） 选择li索引为奇数的

console.log($('li:odd').css('font-size', '30px'));

3、：even（） 选择li索引为偶数的

console.log($('li:even').css('background-color', 'grey'));

筛选选择器

1、children() 没有参数获取所有的子代

console.log($('#list').children('li'));

2、find() find 必须加参数

console.log($('#list').find('li'));

3、siblings() 查找兄弟节点，不包括自己本身。

console.log($('#list_3').siblings('li'));

4、parent() 查找父亲

console.log($('#list_3').parent());

5、eq(index) 相当于$(“li:eq(2)”), index从0开始

 console.log($('li').eq(4));

6、next() 找下一个兄弟

 console.log($('#list_3').next());

找下边所有兄弟

console.log($('#list_3').nextAll());

7、prev() 找上一个兄弟

console.log($('#list_3').prev());
console.log($('#list_3').prevAll());

8、Index() 获取当前的位置（索引）

console.log($('#list_3').index());
console.log($('li').eq($('#list_3').index()));

9、not() 返回不带有类名 “intro” 的所有

元素

console.log($('#list_3').siblings().not('li'));