【锋利的jQuery】学习笔记02

2022-10-01 11:51:13

第二章 jQuery选择器

由于这种机制，使用jQuery检查某个元素在网页中是否存在时不能使用：

if($(".demo")){

     // do something

}

而是应该根据获取到的长度来判断：

if($(".demo").length>0){

     // do something

}

或者是转为DOM判断。

最常用的选择器，通过元素id、class和标签名等查找DOM元素。


选择器	描述	返回	示例
#id	通过id匹配	单个元素	$("#id")
.class	通过类名匹配	集合元素	$(".class")
element	通过元素名匹配	集合元素	$("element")
*	匹配所有元素	集合元素	$("*")
selector1,selector2,……,selectorN	群组选择器	集合元素	$("div,span,p")

通过DOM元素之间的层次关系获取特定元素例如：后代元素、子元素、相邻元素和同辈元素等。


选择器	描述	返回	示例
$("ancestor descendant")	选ancestor元素里面所有的descendant	集合元素	$("div span")
$("parent>child")	选parent元素下的子元素	集合元素	$("div>span")
$("prev+next")	选取紧接在prev后的next元素	集合元素	$("p+div")
$("prev~siblings")	选取prev元素之后的所有siblings元素	集合元素	$("div~div")

对于$("prev+next")选择器一般用next()方法代替，对于$("prev~siblings")一般用nextAll()方法代替。

通过特定的过滤规则筛选所需的DOM元素，选择器已:开头（与css伪类选择器相似）。按照过滤原则可分为：

在使用:even、:odd、：eq()、:gt()、:lt()等选择器是一定要注意下标问题

2.内容过滤选择器过滤规则主要是它包含的子元素和文本

3.可见性过滤选择器根据元素的可见和不可见状态选择相应元素

对于:hidden选择器，不仅可以选择display:none的元素，也可以选择visibility:hidden和文本隐藏域等元素。

4.属性过滤选择器根据元素属性获取相应元素


选择器	描述	返回	示例
[attribute]	选取有此属性的元素	集合元素	$("div[id]")
[attribute=value]	选取属性值为value的元素	集合元素	$("div[id=test]")
[attribute!=value]	选取属性值不为value的元素	集合元素	$("div[id!=test]")
[attribute^=value]	选取属性值以value开头的元素	集合元素	$("div[id^=test]")
[attribute$=value]	选取属性值以value结束的元素	集合元素	$("div[id$=test]")
[attribute*=value]	选取属性值含有value的元素	集合元素	$("div[id*=test]")
[attribute\|=value]	选取属性值为等于value或者以value为前缀的元素	集合元素	$("div[id\|=test]")
[attribute~=value]	选取属性值空格分隔的值中有value的元素	集合元素	$("div[id~=test]")
[attribute1][attribute2][attributeN]	选取有给定的多个属性的元素	集合元素	$("div[id=test][class]")

5. 子元素过滤选择器

eq(index)只匹配一个元素，而nth-child将为每一个符合条件的父元素匹配子元素。同时nth-child()的index从1开始，eq()从0开始。同理，:first和:first-child、:last和last:child也类似。

6.表单对象属性过滤选择器

选择器	描述	返回	示例
:input	选取所有input、textarea、select、button元素	集合元素	$("input")
:text	选取单行文本框	集合元素	$(":text")
:password	选取密码框	集合元素	$(":password")
:radio	选取单选按钮	集合元素	$(":radio")
:checkbox	选取复选框	集合元素	$(":checkbox")
:submit	选取提交按钮	集合元素	$(":submit")
:image	选取图片按钮	集合元素	$(":image")
:reset	选取复位按钮	集合元素	$(":reset")
:button	选取按钮	集合元素	$(":button")
:file	选取上传域	集合元素	$("file")
:hidden	选取不可见元素	集合元素	$(":hidden")