摘要:为了更方便对元素操作,提供了完整的选择符体系,可以分为选择符属性选择符以及自定选择符。选择符几乎支持到规范中的所有选择符。介绍个比较有用的自定义选择符选择符。
为了更方便对 DOM 元素操作,jQuery 提供了完整的选择符体系,可以分为 CSS 选择符、属性选择符以及自定选择符。
CSS 选择符jQuery 几乎支持 CSS1 到 CSS3 规范中的所有选择符。举例如下:
为了给 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 中的伪类,即先使用一个冒号 (:),然后再写详细的内容。同样举例说明:
此时,我们希望取得内容为 A 的 li 元素,我们可以这样操作:
$("li:eq(0)")
由于 Javascript 的数组是从0开始计数,所以第一个元素用0取。
介绍个比较有用的自定义选择符 - contain 选择符。
依然是上例,现在我们希望取得内容中含有 C 的元素,可以这样写:
$("li:contains(C)")参考
http://book.douban.com/subject/24669823/
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78148.html
摘要:最强大的特性之一就是简化了对元素的操作。从图中,我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地,隐式地循环遍历。访问从上可知,返回的是对象,但是我们有时也希望直接对元素进行操作。 DOM - Document Object Model,即文档对象模型,它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。 DOM...
摘要:此时,点击新建的将会触发。设置元素内容的方法则使用上述两种方法,将新内容作为参数传递即可,例如修改上例中的文本内容方法同理。 我们知道通过 $() 函数可以访问文档中的元素,并返回一个 jQuery 对象,并且通过一系列方法,我们可以修改元素的样式和内容,实际上,我们还可以通过该函数做更多的事情,例如添加、删除、复制等操作来改变 DOM 树的结构。 创建元素 我们可以通过 $() ...
摘要:我们可以利用可以对用户发起的事件进行处理,这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法,将处理事件的程序绑定到同名事件上面。 我们可以利用 jQuery 可以对用户发起的事件进行处理,这里以样式转换为例来说明。 增添样式 基于用户的事件,对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形,举例说明,当用户点击输入框后,会增添 highli...
摘要:前一篇介绍可以通过添加全局函数来开发插件,实际上全局函数就是对对象进行扩展,而添加实例方法就是对对象进行扩展,我们可以使用别名。添加实例方法此时页面内只有一个元素,添加新增的实例方法进入页面后实例方法添加成功。 前一篇介绍可以通过添加全局函数来开发 jQuery 插件,实际上全局函数就是对 jQuery 对象进行扩展,而添加实例方法就是对 jQuery.prototype 对象进行扩展...
摘要:创建一个有背景色的添加方法如下当页面载入后,会逐渐消失,动画效果如同直接使用方法。动画并发效果当对多个元素应用动画效果时,这些效果是同时发生的,即并发的。 除了使用 jQuery 内置的 hide,show,toggle 等方法来展现效果,还可以使用更为强大的 animate 方法来展现动画效果。 创建一个有背景色的 div: div { width: 100px; hei...
阅读 1785·2021-10-12 10:12
阅读 2540·2021-09-29 09:42
阅读 2717·2021-09-03 10:28
阅读 2254·2019-08-30 15:54
阅读 1160·2019-08-30 15:53
阅读 1393·2019-08-30 11:26
阅读 3361·2019-08-30 11:02
阅读 2142·2019-08-30 11:02