jQuery选择器
基本选择器
层级选择器
过滤选择器
筛选选择器(方法)
基本选择器
ID选择器
类选择器
标签选择器
并集选择器
交集选择器
// 1、ID选择器
console.log($('#box'));
// 2、类选择器
console.log($('.box'));
$('.box').css('color', 'red')
// 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'));
过滤选择器
选择器 | 作用 |
---|---|
:eq(index) | 索引从0开始 |
:odd | 选择索引为奇数的 |
:even | 选择索引为偶数的 |
// 1、 :eq(index) 索引从0开始
console.log($('li:eq(3)').css('color', 'green'));
// 2、:odd 选择索引为奇数的
console.log($('li:odd').css('font-size', '30px'));
// 3、:even 选择索引为偶数的
console.log($('li:even').css('background-color', 'grey'));
筛选选择器
选择器 | 作用 |
---|---|
children(selector) | 没有参数获取所有的子代 |
find(selector) find | 必须加参数 |
siblings(selector) | 查找兄弟节点,不包括自己本身 |
parent() | 查找父亲 查找祖先( parents() ) |
eq(index) | 相当于$(“li:eq(2)”), index从0开始 |
next() | 找下一个兄弟 找下边所有兄弟( nextAll() ) |
prev() | 找上一个兄弟 找上边所有兄弟( prevAll() ) |
Index() | 获取当前的位置(索引) |
not() | 返回不带有类名 “intro” 的所有 元素 |
// 1、children(selector) 没有参数获取所有的子代
console.log($('#list').children());
console.log($('#list').children('li'));
console.log($('#list').children('p'));
// 2、find(selector) find 必须加参数
console.log($('#list').find('li'));
// 3、siblings(selector) 查找兄弟节点,不包括自己本身。
console.log($('#list_3').siblings());
console.log($('#list_3').siblings('li'));
console.log($('#list_3').siblings('ol'));
// 4、parent() 查找父亲
console.log($('#list_3').parent());
// 查找祖先
console.log($('#list_3').parents());
// 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());
// 9、not() 返回不带有类名 "intro" 的所有 <p> 元素
console.log($('#list_3').siblings().not('li'));