jQuery选择符基础知识点有哪些-创新互联

这篇文章主要为大家展示了“jQuery选择符基础知识点有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery选择符基础知识点有哪些”这篇文章吧。

创新互联公司是专业的长海网站建设公司，长海接单;提供网站制作、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行长海网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

其实 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选择符基础知识点有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：jQuery选择符基础知识点有哪些-创新互联
网页网址：https://www.cdcxhl.com/article2/ccococ.html

成都网站建设公司_创新互联，为您提供网站排名、建站公司、网站设计公司、用户体验、外贸建站、网站改版

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容