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

发布时间:2019-05-24 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了细说 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/"]')

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

@H_512_202@
  • ^ 表示值在字符串的开始
  • $ 表示值在字符串的结尾
  • * 表示要匹配的值可以出现在字符串中的任意位置
  • ! 表示对值取反
  • 那么上述的属性选择符的操作我们就可以简化为:

    $('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 元素篇(二) - 选择符所遇到的问题。

    如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。