细说 jQuery 元素篇（二） - 选择符

104828720 发布于2019-08-19 14:51 / 280人阅读

摘要：为了更方便对元素操作，提供了完整的选择符体系，可以分为选择符属性选择符以及自定选择符。选择符几乎支持到规范中的所有选择符。介绍个比较有用的自定义选择符选择符。

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

CSS 选择符

jQuery 几乎支持 CSS1 到 CSS3 规范中的所有选择符。举例如下：


  A
  B
  C
  D

为了给 id 为 myUl 的 ul 元素下直接 li 元素添加样式，我们可以这样写：

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

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

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

属性选择符

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

Segmentfault
Baidu

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

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

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

^ 表示值在字符串的开始

$ 表示值在字符串的结尾

* 表示要匹配的值可以出现在字符串中的任意位置

! 表示对值取反

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

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

同样可以取得链接为 segmentfault 的 a 标签。

自定义选择符

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

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

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


  ALI
  BLI
  CLI

此时，我们希望取得内容为 A 的 li 元素，我们可以这样操作：

$("li:eq(0)")

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

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

$("li:contains(C)")

参考

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

超融合服务器服务器托管自定义选择符 jquery遍历元素 jquery表单元素 jQuery元素取值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78148.html

细说 jQuery 元素篇（一） - 理解 DOM

摘要：最强大的特性之一就是简化了对元素的操作。从图中，我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地，隐式地循环遍历。访问从上可知，返回的是对象，但是我们有时也希望直接对元素进行操作。 DOM - Document Object Model，即文档对象模型，它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 评论0 收藏0
细说 jQuery DOM操作篇（二） - DOM 树操作

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。创建元素我们可以通过 $() ...

Anchorer 2019-08-21 12:20 评论0 收藏0
细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
细说 jQuery 插件篇（二） - 添加实例方法

摘要：前一篇介绍可以通过添加全局函数来开发插件，实际上全局函数就是对对象进行扩展，而添加实例方法就是对对象进行扩展，我们可以使用别名。添加实例方法此时页面内只有一个元素，添加新增的实例方法进入页面后实例方法添加成功。前一篇介绍可以通过添加全局函数来开发 jQuery 插件，实际上全局函数就是对 jQuery 对象进行扩展，而添加实例方法就是对 jQuery.prototype 对象进行扩展...

chanjarster 2019-08-19 14:55 评论0 收藏0
细说 jQuery 样式篇（二） - 动画效果

摘要：创建一个有背景色的添加方法如下当页面载入后，会逐渐消失，动画效果如同直接使用方法。动画并发效果当对多个元素应用动画效果时，这些效果是同时发生的，即并发的。除了使用 jQuery 内置的 hide,show,toggle 等方法来展现效果，还可以使用更为强大的 animate 方法来展现动画效果。创建一个有背景色的 div： div { width: 100px; hei...

PiscesYE 2019-08-19 14:53 评论0 收藏0