jquery各种选择器
1.1.1基本选择器(重点)
符号(名称) |
说明 |
用法 |
# |
Id选择器 |
$(“#btnShow”).css(“color”, “red”); 选择id为btnShow的一个元素(返回值为jQuery对象,下同) |
. |
类选择器 |
$(“.liItem”).css(“color”, “red”); 选择含有类liItem的所有元素 |
element |
标签选择器 |
$(“li”).css(“color”, “red”); 选择标签名为li的所有元素 |
1.1.2层级选择器(重点)、基本过滤选择器
符号(名称) |
说明 |
用法 |
|
层级选择器 |
|||
空格 |
后代选择器 |
$(“#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:odd”).css(“color”, “red”); 选择li元素中索引号为偶数的所有元素 |
1.1.3筛选选择器(方法)(重点)
符号(名称) |
说明 |
用法 |
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元素中的第二个 |