这篇文章主要为大家展示了“jQuery选择符基础知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery选择符基础知识点有哪些”这篇文章吧。
其实 jQuery 的选择符主要是利用了 CSS 和 XPath 选择符的能力,当然还包括 jQuery的自定义选择符,从而让我们在 DOM 树中能够方便和灵活的 获取 各类元素 或者 元素组。
上面提到的三种选择符类型(CSS,XPath,自定义)在 jQuery 中使用时都是以 $() 函数开始和表示的,该函数称为 工厂函数。
放置于 $() 中的任何元素都会自动执行循环遍历,并保存至一个 jQuery 对象中。而$()函数可以使用的参数常用的有:
+ 标签名,如:$('p'),取得文档中的所有 段落;
+ ID,如:$('#some-id'),取得文档中具有对应的 some-id ID 的 一个 元素,如果你使用了同一 some-id 多次,只会取得第一个使用 id="some-id" 的元素;
+ class,如:$('.some-class'),取得文档中带有 some-class 的所有元素;
下面对几种类型的选择符的使用分别进行总结(主要是贴一些示例)。
1,CSS 选择符
// 给 id 为 selected-ul 的 ul 元素下的第一级列表元素添加 样式 horizontal $('#selected-ul > li').addClass('horizontal'); |
这里的:
+ > 为 子元素组合符,语法格式为 $('parent > child'),只选择 parent 的第一代子元素,注意 $('parent child')是包含 parent 下所有后代的子元素,如下;
// 给 id 为 selected-ul 的 ul 元素下得所有级别的 // 不包含 class=horizontal 的 列表元素 li添加样式 sub-level $('#selected-ul li:not(.horizontal)').addClass('sub-level'); |
+ 这里又涉及到一个 否定式伪类选择符 :not(selector),用于选择所有 去除不匹配 给定的选择器 的 元素;如:not(div a) 或 not(div, a)。其他相似的还有:
+ has(selector),选择含有 selector 所匹配的至少一个元素的 元素,如:
// 匹配一个 div,如果其后代中任何级别(不仅仅是直接子元素)的子元素为 p $('div:has(p)') |
+ addClass 用于为每个匹配的元素添加指定的 class 名,一般和 removeClass() 结合起来使用,如下:
$('p').removeClass('myClass noClass').addClass('yourClass'); |
从 jQuery 1.4 开始,addClass 开始支持通过 function 来设置样式名,如下示例:
// 给定一个有 5 个 li 元素的无需列表 ul 中,在最后一个 li 元素上加上 item-4 样式 $('ul li:last').addClass(function() { return 'item-' + $(this).index(); }); |
2,XPath 类型的选择符
XPath 全称 XML Path Language,XML 路径语言。是在 XML 文档中识别不同元素或元素值的语言。Wiki 上的描述如下( http://zh.wikipedia.org/zh-hans/XPath ):
XPath即为XML路径语言(XML Path Language),它是一种用来确定XML文档中某部分位置的语言。 XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力。起初 XPath 的提出的初衷是将其作为一个通用的、介于XPointer与XSL间的语法模型。但是 XPath 很快的被开发者采用来当作小型查询语言。 |
jQuery 库支持一组基本的 XPath 选择符。
+ 属性选择符(attribute selector),这个仍然沿用了 XPath 中的惯例,使用 @ 来标识属性,如下:
// 选择所有带 title 属性的链接 $('a[@title]') |
属性选择符也可以使用 ^,$,* 分别标识字符串的开始,结尾 以及 字符串中的任意位置。示例如下:
// 给所有属性 href 值以 mailto: 开头的链接添加 class = mailto $('a[@href^="mailto:"]').addClass('mailto'); // 给所有属性 href 值以 .pdf 结尾的链接添加 class = pdflink $('a[@href$=".pdf"]').addClass('pdflink'); // 给所有属性 href 值中含有 mysite.com 的链接添加 class = mysite $('a[@href*="mysite.com"]').addClass('mysite'); |
3,自定义选择符
自定义选择符是以冒号(:)开头,先看如下示例:
// 从匹配的带有 horizontal 类的 div 集合中,选择第 2 个项 $('div.horizontal:eq(1)'); // 另一种表示法 CSS 选择符 $('div:nth-child(2)'); |
第一个为自定义选择符方式,基于 JavaScript 的语法规则,而在 JavaScript 中数组的索引从 0 开始,而 CSS 规范中数组的索引从 1 开始。这两个我开始以为都是 自定义选择符呢,看了 API 文档才知道 :nth-child() 是严格来自 CSS 规范的 :(
与 :eq 类似的 索引相关 的 自定义选择符还有 :lt(),:gt(),:even(),:odd()。
以上是“jQuery选择符基础知识点有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。