强大的JQuery选择器!(jquery选择器有哪些类型)

boyanx1周前技术教程2

JQuery这个JS框架有多强大想必大家也是深有体会,在平常的工作当中我们用到的可能只有三分之一,但基本也是已经够用的了。现在我们来温习一下JQuery万能的选择器~~

在JavaScript中,我们可以使用

1、根据id获取DOM对象:

document.getElementById("id")

2、根据name属性获取一个DOM数组:

document.getElementsByName("name")

3、根据tag获取一个DOM数组:

document.getElementsByTagName("tag")

在JQuery中,我们则可以使用简单的:

$("#id")、$(".class")、$("tag")

来根据元素的ID、类名和html标签名进行DOM操作。

JQuery强大的选择器有以下这些:

1、匹配找到的第一个元素:$("div:first")

2、匹配找到的最后一个元素:$("div:last")

3、匹配一个给定索引值的元素,索引从0开始:$("div:eq(1)")

4、查找第1个以后的元素:$("div:gt(0)")

5、查找第一、二、三行的元素:$("div:lt(3)")

6、匹配所有索引值为奇数的元素,从 0 开始计数:$("div:odd")

7、找带有段落字样的p元素:$("p:contains('段落')")

8、匹配所有不包含子元素或者文本的空元素:$("div:empty")

9、匹配含有选择器所匹配的元素的元素:$("div:has('p')")

10、匹配含有子元素或者文本的元素:$("div:parent")

11、在每个div中查找第一个p:$("div p:first-child")

12、在每个div中查找最后一个p:$("div p:last-child")

13、在每个div中查找第二个p:$("div p:nth-child(2)")

14、匹配所有的不可见元素:$("div:hidden")

15、匹配所有的可见元素:$("div:visible")

当然,强大的JQuery当然不止有这些选择器,还有很多更高级的,有需要的朋友可以看一下JQuery的API文档,上面有更多更详细的说明。

相关文章

Chrome DevTools 终极技巧指南(devtools工具如何使用)

Chrome DevTools 功能强大、门类繁多。以下按照面板与使用场景,逐项详解常用与进阶技巧,涵盖快捷键、隐藏功能、调试利器等,帮助你成为 DevTools 高手。---## 一、快速打开与命令...

“把 if 往上提,for 往下放!”(if语句是从上往下判断)

很多程序员写代码的时候都会遇到这种情况:一个判断条件到底该放在函数里面还是外面?循环里是不是可以加个 if?这些看起来无关紧要的小选择,实际会影响代码的清晰度、性能。最近,一位热爱简单代码和编程语言的...

快速理解析语言及解析工具(快速理解析语言及解析工具的方法)

基础定义1、CSS选择器 和 XPath 本质是独立于具体工具的查询语言(Query Language),定义了如何定位文档中元素的语法规则。标准定义: W3C 的 CSS Selectors Lev...

每天一个 Python 库:BeautifulSoup4 优雅地解析HTML

网页解析神器BeautifulSoup4,它让你轻松处理 HTML 页面,提取你想要的数据,是网页爬虫入门的第一步!beautifulsoup4 是一个用于 HTML 和 XML 解析的 Python...

程序猿看小说还要去找TXT?自己动手爬一个TXT才是正确的打开方式

前言在贴吧看了个小说追了几天被删帖了,于是自己找书名,打算下载下来看,结果要么是需要充值,要么不提供下载。作为一个猿类,怎么能忍。 好在小说网站多入牛毛,有的采用js加载文字来防采集,有的用css图片...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。