返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
jquery教程当前位置:首页 > HTML教程 > jquery教程 > 正文

【jQuery教程】JQueryCSS选择符

发布时间:2013-08-30 22:31:00   来源:   点击:

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)。

示例

  1. <div class="titleList" id="newsTitle"> 
  2.      <ul class="list black"> 
  3.             <li><a href="http://localhost/olympic.asp?id=2000">2000年悉尼奥运会</a></li> 
  4.             <li><a href="http://localhost/olympic.asp?id=1996">1996年亚特兰大奥运会</a></li>   
  5.      </ul> 
  6.      <ul class="list gray"> 
  7.             <li><a href="http://localhost/olympic.asp?id=1992">1992巴塞罗那奥运会</a></li> 
  8.             <li><a href="http://localhost/olympic.asp?id=1988">1988汉城奥运会</a></li>   
  9.      </ul> 
  10.      <div class="info"> 
  11.             <input type="checkbox" value="read" id="hasReadThsRule" />已阅读  
  12.             <input type="checkbox" id="suggest">我有更好的建议   
  13.             <input type="button" value="确定" />   
  14.      </div>   
  15. </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
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814