【jQuery教程】JQueryCSS选择符

2016-02-22    编辑:jquery     点击(

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>

选择符 示例代码 说明 返回值长度
(数组长度)
通配选择符 $("#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
ID 选择符 $("#newsTitle") 返回 #newsTitle 元素 1
类选择符 $("ul.list") 页面中所有类名包含 list 的 ul 元素 2
选择符分组 $("a,input[type=checkbox]") 页面中所有 a 与勾选框的数组 6