`

强大的jQuery选择器

阅读更多

jQuery到底想干什么?
一句话:jQuery要做的事情就是你可以获得任何一个或者一组页面元素并对它或者它们进行操作.




用过jquery的朋友肯定会发现,jquery的选择器非常强大,在html页面进行DOM操作时,很容易的就能娶到我们要的元素。现在给大家展示一下jquery都提供了那些选择器:

基本选择器:
$(”#myELement”) —— 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 
$(”div”) —— 选择所有的div标签元素,返回div元素数组 
$(”.myClass”) —— 选择使用myClass类的css的所有元素 
$(”*”) —— 选择文档中的所有的元素,以运用多种的选择方式进行联合选择:例如$(”#myELement,div,.myclass”) 
层叠选择器:
$(”form input”) —— 选择所有的form元素中的input元素 
$(”#main > *”) —— 选择id值为main的所有的子元素 
$(”label + input”) —— 选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 
$(”#prev ~ div”) —— 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 
基本过滤选择器:
$(”tr:first”) —— 选择所有tr元素的第一个 
$(”tr:last”) —— 选择所有tr元素的最后一个 
$(”tr:even”) —— 选择所有的tr元素的第0,2,4… …个元素 
$(”tr:odd”) —— 选择所有的tr元素的第1,3,5… …个元素 
$(”td:eq(2)”) —— 选择所有的td元素中序号为2的那个td元素 
$(”td:gt(4)”) —— 选择td元素中序号大于4的所有td元素 
$(”td:ll(4)”) —— 选择td元素中序号小于4的所有的td元素 
内容过滤选择器:
$(”div:contains(’John’)”) —— 选择所有div中含有John文本的元素 
$(”td:empty”) —— 选择所有的为空(也不包括文本节点)的td元素的数组 
$(”div:has(p)”) —— 选择所有含有p标签的div元素 
$(”td:parent”) —— 选择所有的以td为父节点的元素数组 
可视化过滤选择器:
$(”div:hidden”) —— 选择所有的被hidden的div元素 
$(”div:visible”) —— 选择所有的可视化的div元素 
属性过滤选择器:
$(”div[id]“) —— 选择所有含有id属性的div元素 
$(”input[name='newsletter']“) —— 选择所有的name属性等于’newsletter’的input元素 
$(”input[name!='newsletter']“) —— 选择所有的name属性不等于’newsletter’的input元素 
$(”input[name^='news']“) —— 选择所有的name属性以’news’开头的input元素 
$(”input[name$='news']“) —— 选择所有的name属性以’news’结尾的input元素 
$(”input[name*='man']“) —— 选择所有的name属性包含’news’的input元素 
$(”input[id][name$='man']“) —— 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 
子元素过滤选择器:
$(”div span:first-child”) —— 返回所有的div元素的第一个子节点的数组 
$(”div span:last-child”) —— 返回所有的div元素的最后一个节点的数组 
$(”div button:only-child”) —— 返回所有的div中只有唯一一个子节点的所有子节点的数组 
表单元素选择器:
$(”:input”) —— 选择所有的表单输入元素,包括input, textarea, select 和 button 
$(”:text”) —— 选择所有的text input元素 
$(”:password”) —— 选择所有的password input元素 
$(”:radio”) —— 选择所有的radio input元素 
$(”:checkbox”) —— 选择所有的checkbox input元素 
$(”:submit”) —— 选择所有的submit input元素 
$(”:image”) —— 选择所有的image input元素 
$(”:reset”) —— 选择所有的reset input元素 
$(”:button”) —— 选择所有的button input元素 
$(”:file”) —— 选择所有的file input元素 
$(”:hidden”) —— 选择所有类型为hidden的input元素或表单的隐藏域 
表单元素过滤选择器:
$(”:enabled”) —— 选择所有的可操作的表单元素 
$(”:disabled”) —— 选择所有的不可操作的表单元素 
$(”:checked”) —— 选择所有的被checked的表单元素 
$(”select option:selected”) —— 选择所有的select 的子元素中被selected的元素 
还记的刚学Js的时候,为了取到自己想要的值,不得不给那个元素先添加一个id,之后再通过getElementById()来获取对应的value值,现在想起来真是汗啊。把上面介绍的jQuery的选择器进行组合,基本上HTML代码中,想取哪个标签马上能信手拈来了~~~





分享到:
评论

相关推荐

    jQuery选择器全解.

    jQuery选择器作为jQuery框架的核心功能之一,为开发者提供了强大的DOM元素检索和操作工具。通过本文的学习,相信你已经对jQuery选择器有了全面的了解。实践是检验真理的唯一标准,建议读者在实际项目中多多尝试,以...

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...

    jQuery选择器大全

    以上仅为jQuery选择器的冰山一角,其强大之处在于组合使用时能实现复杂而精准的DOM操作。理解并熟练掌握这些选择器,将极大提升开发者利用jQuery进行网页开发的能力和效率。无论是初学者还是资深开发者,都能从中...

    jQuery选择器基础知识

    jQuery选择器的强大在于其灵活性和高效性。在网页开发中,我们可以利用选择器快速定位到目标元素,进行样式修改、添加事件监听或执行其他DOM操作。例如,以下代码会选取所有class为"highlight"的元素,并改变它们的...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。...通过学习和使用像lay-picker这样的库,开发者可以快速实现功能强大的选择器,同时保持代码的简洁和高效。

    jquery选择器入门详解小案例

    本篇文章将深入探讨jQuery选择器的入门知识,并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分,它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器,包括基本选择...

    jQuery选择器.rar

    这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源,可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配,该书是jQuery学习的经典参考资料之...

    jQuery选择器的一个Bug

    然而,即便如此成熟的库,也难免存在一些已知的问题和限制,其中之一就是我们今天要探讨的"jQuery选择器的一个Bug"。 首先,我们要理解jQuery选择器的基本原理。jQuery基于CSS选择器,它允许开发者通过类似CSS的...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    PPT和案例\jQuery选择器

    jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供...无论是简单的元素选取还是复杂的DOM操作,jQuery选择器都能提供强大的支持。

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jquery选择器速查表

    jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

    jQuery选择器总结

    jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。

    Jquery实验室的选择器工具

    虽然jQuery选择器非常强大,但在处理大量元素时,应避免使用过于复杂的选择器,因为这可能影响性能。优先使用ID选择器,其次类选择器,再是属性选择器,尽量减少层级选择器的使用。 ### 实验室实践 在“jQuery实验...

    jquery日期选择器

    3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...

    jquery 城市选择器

    《jQuery城市选择器详解》 在网页开发中,经常需要实现一种功能,即用户可以选择他们的所在省份和城市,这在注册、填写地址等场景中尤为常见。jQuery城市选择器就是解决这一需求的有效工具,它利用JavaScript和...

    一个简单的jQuery时间选择器

    2. **选择器和DOM操作**:jQuery提供了一系列强大的选择器来定位DOM元素,如`$("#elementID")`用于选择ID为`elementID`的元素。然后,可以使用`.html()`, `.text()`, `.val()`等方法修改元素的内容或属性。 3. **...

    jquery双向选择器代码

    首先,理解jQuery选择器的基本概念是关键。jQuery提供了多种内置的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,它们用于定位HTML文档中的特定元素。双向选择器则在此基础上增加了更...

Global site tag (gtag.js) - Google Analytics