Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 细说 jQuery 元素篇(二) – 选择符

细说 jQuery 元素篇(二) – 选择符

发布时间:2016-09-12   编辑:www.jquerycn.cn
jquery中文网为您提供细说 jQuery 元素篇(二) – 选择符等资源,欢迎您收藏本站,我们将为您提供最新的细说 jQuery 元素篇(二) – 选择符资源

为了更方便对 DOM 元素操作,jquery 提供了完整的选择符体系,可以分为 CSS 选择符、属性选择符以及自定选择符。

CSS 选择符

jQuery 几乎支持 CSS1CSS3 规范中的所有选择符。举例如下:

<ul id="myUl">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <div>D</div>
</ul>

为了给 idmyUlul 元素下直接 li 元素添加样式,我们可以这样写:

  $(document).ready(function() {
    $('#myUl > li').addClass('xxx');
  });

当在 jQuery 中使用 $(document).ready(function() {}) 时,位于其中的所有代码都会在 DOM 加载后立即执行。我们也可以简写为:$(function() {})

对于 CSS 选择符的内容,可以参考这个手册 – 《CSS 选择器参考手册》

属性选择符

属性选择符是 jQuery 中很有用的一类选择符,即通过 DOM 元素的属性来选择特定的元素。例如 a 标签的 href 属性。

<a href="http://segmentfault.com/">Segmentfault</a>
<a href="http://www.baidu.com/">Baidu</a>

对于上例两个 a 标签,我们希望选择 segmentfault 进行操作,而不是 baidu,那么我们可以通过属性选择符来操作:

$('a[href="http://segmentfault.com/"]')

为了简化操作,属性选择符还从正则里面借鉴了一些语法过来:

  • ^ 表示值在字符串的开始
  • $ 表示值在字符串的结尾
  • * 表示要匹配的值可以出现在字符串中的任意位置
  • ! 表示对值取反

那么上述的属性选择符的操作我们就可以简化为:

$('a[href*="segmentfault"]')

同样可以取得链接为 segmentfaulta 标签。

自定义选择符

除了上述的选择符外,jQuery 还添加了独有的自定义选择符,在介绍自定义选择符前,需要说明一点:

与原生的 DOM 选择符相比,自定义选择符在性能方面是表现较差的,因此如果能使用原生的方法,尽量不要频繁使用自定义选择符,从而保证性能。

自定义选择符的使用有点像 CSS 中的伪类,即先使用一个冒号 (:),然后再写详细的内容。同样举例说明:

<ul id="myUl">
  <li>ALI</li>
  <li>BLI</li>
  <li>CLI</li>
</ul>

此时,我们希望取得内容为 Ali 元素,我们可以这样操作:

$('li:eq(0)')

由于 Javascript 的数组是从0开始计数,所以第一个元素用0取。

介绍个比较有用的自定义选择符 – contain 选择符。
依然是上例,现在我们希望取得内容中含有 C 的元素,可以这样写:

$('li:contains(C)')

参考

http://book.douban.com/subject/24669823/

您可能感兴趣的文章:
细说 jQuery 元素篇(二) – 选择符
jQuery源码分析系列
细说 jQuery 元素篇(一) – 理解 DOM
jquery中的过滤操作详细解析
jquery获取css中的选择器(实例讲解)
细说 jQuery 插件篇(二) – 添加实例方法
css的选择器的详细介绍
jquery选择器大全详解
jquery选择器大全 全面详解jquery选择器
学习JQuery选择器

[关闭]