JQuery CSS 选择符

CSS 选择符

$ 函数可以根据传入的 ID 取得元素，但对于结构复杂的页面，单传入一个 ID 难于精确取到相应的元素，myJSFrame 参考 CSS 2.0 选择符概念与 JQuery 框架中 CSS 选择符的引用形式，实现了自有的 CSS 选择符支持方式。支持大部分常见的 CSS 选择符。

由于符合 CSS 选择符的元素可能有多个，因此 $ 函数的返回值可能不止一个 DOM 元素，一般来说，其返回值是符合选择符的 DOM 元素组成的数组。但为保留并兼容 $ 函数的返回值类型，经典的 $(ID) 返回值仍为 DOM 元素，而 $(CSS Selectors) 返回值为元素数组。

$ 函数的 CSS 选择符功能够更方便、迅速、准确地找到页面元素。

目前 myJSFrame 已经支持的选择符有：

• 通配选择符
• 属性选择符
• 包含选择符
• ID 选择符
• 类选择符
• 选择符分组

不支持的通配符有：

• 子对象选择符
• 伪类及伪对象选择符

如果传入 $ 函数的参数中带有空格（两端的空格无效）、逗号或小数点都将被认作 CSS 选择符，空格是包含选择符，逗号是选择符分组，小数点是类选择符。除此之外，都被认作是元素 ID ，返回值是一个 DOM 元素。如果要获取页面中所有的 li 元素，$("li") 是错误的，因为 $ 函数会认为要获取 ID 为 li 的元素，正确的方法是 $("body li") 。

参数

通配选择符

获取某范围里的所有元素。通配符匹配到的元素范围广，取得的结果相对较大，效率略低，建议少用。

属性选择符

匹配元素的属性与其值都符合的元素。属性选择符的格式为：[属性名=属性值] 或者 [属性名!=属性值]。 属性选择符可以有多重，比如 input[type=text][className=username]。

包含选择符

一个选择符被另一选择符所包含。如 $("div a") 表示 div 元素中包含的 a 元素。

ID 选择符

根据ID属性匹配元素，$("id") 与 $("#id") 完全等效。返回类型都是 DOM 元素。$("body div #id") 是不必要的写法，其返回值是数组，但长度为 1。

类选择符

根据元素的类名查找元素。$("div.content") 表示查找页面中类名为 content 的元素。类选择符是属性选择符的特例，相当于 $("div[className=content]")，但不建议用属性选择符来查找类名，因为元素的类名可以有多个（类名间用空格分割）。

选择符分组

多个选择符组合在一起可以是一个复合选择符，多个复合选择符或多个单一选择符可以是多组选择符（用逗号分割）。如：$("div.content,a") 表示页面中所有类名为 content 的 div 元素与页面中所有的 a 元素组合在一起作返回值数组。

返回值

由 DOM 元素组成的一维数组。如果传入 $ 函数的选择符在页面中查找不到符合条件的元素，返回值为空数组（长度为0）。

示例

<div class="titleList" id="newsTitle">
<ul class="list black">
<li><a href="http://localhost/olympic.asp?id=2000">2000年悉尼奥运会</a></li>
<li><a href="http://localhost/olympic.asp?id=1996">1996年亚特兰大奥运会</a></li>
</ul>
<ul class="list gray">
<li><a href="http://localhost/olympic.asp?id=1992">1992巴塞罗那奥运会</a></li>
<li><a href="http://localhost/olympic.asp?id=1988">1988汉城奥运会</a></li>
</ul>
<div class="info">
<input type="checkbox" value="read" id="hasReadThsRule" />已阅读
<input type="checkbox" id="suggest">我有更好的建议
<input type="button" value="确定" />
</div>
</div>

选择符 示例代码 说明 返回值长度
（数组长度） 通配选择符 属性选择符 包含选择符 ID 选择符 类选择符 选择符分组

$("#newsTitle *")	#newsTitle 元素下面的所有元素	14 （ul*2 + li*4 + a*4 + div*1 + input*3）
$("#newsTitle input[type=checkbox][value!=read]")	#newsTitle 元素下面标签名为 input，其 type 为 checkbox，且其 value 不等于read的元素	1
$("ul li a")	返回页面中所有 ul 中的所有 li 里的所有 a 的数组	4
$("#newsTitle")	返回 #newsTitle 元素	1
$("ul.list")	页面中所有类名包含 list 的 ul 元素	2
$("a,input[type=checkbox]")	页面中所有 a 与勾选框的数组	6