jQuery选择器
1.
JS
中选择DOM元素的方法
考虑兼容性的话,js里面提供的选择DOM的方法只有两个:
JavaScript选择元素的方法 |
document.getElementById(); | 通过id属性获取指定元素 返回唯一的DOM对象 |
document.getElementsByTagName(); | 通过标签名获取指定元素 返回DOM对象数组(即使只有一个元素) |
JS
提供的选择DOM的方法太少,无法满足开发的需要,所以我们使用jQuery选择器来弥补这方面的不足
2.
什么是jQuery选择器
jQuery
选择器非常强大,它提供了一组方法,让我们更方便地获取页面中的元素(类比CSS的选择器)
强大的原因:jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器
各种选择器之间可以相互代替,所以,平时真正用到的只是最常用的选择器
3.
基本选择器
符号(名称) | 说明 | 用法 |
# | Id选择器 | $(“#btnShow”).css(“color”, “red”); 选择id为btnShow的一个元素(返回值为jQuery对象,下同) |
. | 类选择器 | $(“.liItem”).css(“color”, “red”); 选择含有类liItem的所有元素 |
element | 标签选择器 | $(“li”).css(“color”, “red”); 选择标签名为li的所有元素 |
4.
层级选择器、过滤选择器
符号(名称) | 说明 | 用法 |
层级选择器 |
空格 | 后代选择器 | $(“#j_wrap li”).css(“color”,“red”); 选择id为j_wrap的元素的所有后代元素li |
> | 子代选择器 | $(“#j_wrap > ul > li”).css(“color”, “red”); 选择id为j_wrap的元素的所有子元素ul的所有子元素li |
常用的过滤选择器 |
:eq(index) | 选择匹配元素中索引号为index的一个元素,index从0开始 | $(“li:eq(2)”).css(“color”, ”red”); 选择li元素中索引号为2的一个元素 |
:odd | 选择匹配元素中索引号为奇数的所有元素,index从0开始 | $(“li:odd”).css(“color”, “red”); 选择li元素中索引号为奇数的所有元素 |
:even | 选择匹配元素中索引号为偶数的所有元素,index从0开始 | $(“li:even”).css(“color”, “red”); 选择li元素中索引号为偶数的所有元素 |
5.
筛选选择器(注:都是方法)
符号(名称) | 说明 | 用法 |
find(selector) | 查找指定元素的所有后代元素(子子孙孙) | $(“#j_wrap”).find(“li”).css(“color”, “red”); 选择id为j_wrap的所有后代元素li |
children() | 查找指定元素的直接子元素(亲儿子元素) | $(“#j_wrap”).children(“ul”).css(“color”, “red”); 选择id为j_wrap的所有子代元素ul |
siblings() | 查找所有兄弟元素(不包括自己) | $(“#j_liItem”).siblings().css(“color”, “red”); 选择id为j_liItem的所有兄弟元素 |
parent() | 查找父元素(亲的) | $(“#j_liItem”).parent(“ul”).css(“color”, “red”); 选择id为j_liItem的父元素 |
eq(index) | 查找指定元素的第index个元素,index是索引号,从0开始 | $(“li”).eq(2).css(“color”, “red”); 选择所有li元素中的第二个 |
next() | 获取当前元素的下一个兄弟元素 | $(“#add”).next().css(“color”, “red”); 选择id为add的元素中的下一个兄弟元素 |
prev() | 获取当前元素的上一个兄弟元素 | $(“#add”).prev().css(“color”, “red”); 选择id为add的元素中的上一个兄弟元素 |