JQuery 笔记(二) - 页面元素选择器

1.选择器分类:

$("p"): html标签元素.

$("#lastname"): 标签 id

$(".intro"): 标签 class

$("[href]"): 包含任意属性,如$("[href='default.htm']"), $("[href!='default.htm']"), $("[href$='.jpg']")

1)        […] ：匹配包含给定属性的元素，例：

$("div[id]")

查找包含id属性的div元素

 2)        [attribute(=/!=/^=/$=/*=)value] ：匹配给定的属性值(等于、不等于、开头为、结束为、包含)给定的value值，例：

$("div[id='title']")

查找id等于title的div（注意：值应该用引号括起来，如’value’）

 3)        […][…][…] ：多属性联合使用，例：

$("div[id='txt'][class='title']")         查找id为txt且class为title的div

 $("input[type='checkbox'][checked='true']")      查找所有的被勾选了的复选框

$(":input"): 表单元素: $(":text").....

*，选取所有元素，例：$("星")

其他: 辅助筛选:

:first	$("p:first")	The first p element
:last	$("p:last")	The last p element
:even	$("tr:even")	All even tr elements
:odd	$("tr:odd")	All odd tr elements
:eq(index)	$("ul li:eq(3)")	The fourth element in a list (index starts at 0)
:gt(no)	$("ul li:gt(3)")	List elements with an index greater than 3
:lt(no)	$("ul li:lt(3)")	List elements with an index less than 3
:not(selector)	$("input:not(:empty)")	All input elements that are not empty
:header	$(":header")	All header elements h1, h2 ...
:animated	$(":animated")	All animated elements
:contains(text)	$(":contains('W3Schools')")	All elements which contains the text
:empty	$(":empty")	All elements with no child (elements) nodes
:hidden	$("p:hidden")	All hidden p elements
:visible	$("table:visible")	All visible tables

:enabled	$(":enabled")	All enabled input elements
:disabled	$(":disabled")	All disabled input elements
:selected	$(":selected")	All selected input elements
:checked	$(":checked")	All checked input elements

2. 选择器的联合使用

2.1 层级关系选择器  "空格"/">"

2.1 .1      在所有子孙元素中匹配(使用空格)，例：

$("body div")

查找body元素下的所有子孙节点中的div元素

 

2.1.2        在所有子元素中匹配（使用>号），例：

$("body>div");

查找body元素下所有儿子节点中的div元素

2.2 选择器集合 并集∪,"逗号":

xx,xx,xx多选择器，多个选择器一起使用（逗号分隔），例：

$("div,#txtname")

查找所有的div元素和id为txtName的元素

2.3 选择器同时满足 交集∩  ,连写

3  选择器+方法/选择器查找  = 新的选择器

3.1        $("...").children([…]) ：获取所有匹配元素的儿子节点的匹配元素，例：

$("body").children().length

获取body元素的所有儿子节点元素

 

$("body").children("div").length

获取body元素的所有儿子节点元素中的div元素

 

3.2        $("...").closest("...") : 从元素本身开始，逐级向上查找匹配的元素，并返回最新查找到的元素，例：

$("#dd").closest("div").html()

查找id为dd的元素的最近的上级div元素

 

3.3        $("...").find("...") ：查找元素下的匹配元素（所有子孙节点），例：

$("body").find("div").length

获取body节点下的所有div元素

 

3.4        $("...").parent() ：获取元素的父亲节点元素，例：

$("#yy").parent().html()

获取id为yy的节点的父亲节点

 

3.5        $("...").parents("...") ：获取元素的所有祖先节点或其中的匹配节点，例：

$("#yy").parents().length

获取id为yy的节点的所有祖先节点

 

$("#yy").parents("body").html()

获取id为yy的节点的祖先节点为body标签的元素

3.6       $("select[id='catPkgTO.categoryId']").val(): 两个选择器"select" + "[id='catPkgTO.categoryId']"

表示, select元素,并且属性为 id=***