三、选择器
jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素
3.1 基本选择器
名称 |
用法 |
描述 |
ID选择器 |
$('#id'); |
获取指定ID的元素 |
类选择器 |
$('.class'); |
获取同一类class的元素 |
标签选择器 |
$('div'); |
获取同一类标签的所有元素 |
并集选择器 |
$('div,p,li'); |
使用逗号分隔，只要符合条件之一就可。 |
交集选择器 |
$('div.redClass'); |
获取class为redClass的div元素 |
属性选择器 |
$('input[name=username]') |
获取 input 标签中 name 属性为 username 的元素 |
注意：jQuery选择器返回的是jQuery对象。
<scripttype="text/javascript"> //常用选择器 //根据id获取元素 获取到的结果：类数组对象 console.log( $('#div0') ); console.log( $('#div0')[0] ); //根据class获取元素 console.log( $('.div_1') ); //根据标签名称来获取元素 console.log( $('div') ); //根据属性获取元素 console.log( $('input[name=username]') ); //根据表单元素属性获取元素 console.log( $(':checked') ); </script>
3.2 层级选择器
名称 |
用法 |
描述 |
子代选择器 |
$('ul > li'); |
使用 > 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
后代选择器 |
$('ul li'); |
使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
3.3 过滤选择器
这类选择器都带冒号:
名称 |
用法 |
描述 |
:eq（index） |
$('li:eq(2)').css('color', 'red'); |
获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
:odd |
$('li:odd').css('color', 'red'); |
获取到的li元素中，选择索引号为奇数的元素 |
:even |
$('li:even').css('color', 'red'); |
获取到的li元素中，选择索引号为偶数的元素 |
3.4 jQuery 筛选方法
- 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
3.5 this 和 当前索引
在对象的事件中，$(this) 表示当前操作的 jQuery 对象，$(this).index() 表示当前元素的索引号
$("li").click(function () { console.log($(this).index()); }
供各位猿友参考学习，有错误请私信，感谢指出！！！
