`
andrew1024
  • 浏览: 74759 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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元素节点

经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

$("#prev ~ div")       同胞选择器

该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器:

$("tr:first")               选择所有tr元素的第一个

$("tr:last")                选择所有tr元素的最后一个

$("input:not(:checked) + span")  

过滤掉:checked的选择器的所有的input元素

$("tr:even")               选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)

$("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素

$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素   

$("td:gt(4)")             选择td元素中序号大于4的所有td元素

$("td:ll(4)")              选择td元素中序号小于4的所有的td元素

$(":header")

$("div:animated")

内容过滤选择器:

$("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结尾的元素

子元素过滤选择器:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("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的元素
分享到:
评论

相关推荐

    jQuery表单验证 转载

    jQuery的核心是选择器,通过选择器可以轻松地获取DOM元素并进行操作。对于表单验证,我们通常需要获取表单元素(如输入框、下拉框等),然后对这些元素的值进行检查。例如,我们可以使用`$("#elementId").val()`来...

    15天学会JQuery(转载)

    1. **选择器**: jQuery的选择器是其强大功能之一,它允许我们基于元素的ID、类名、属性等快速选取DOM元素。例如,`$("#elementID")`选取ID为`elementID`的元素,`$(".className")`选取所有类名为`className`的元素。...

    【转载】去掉jquery menu plugin 的“No back link”

    这可能涉及到对jQuery选择器、方法和事件的理解,如`$(selector).click()`用于绑定点击事件,`$(this).parent()`用于获取当前元素的父级等。 "工具"标签可能意味着博客中提到的解决方法可能涉及到使用其他辅助工具...

    《锋利的jQuery(第2版)》(清晰版).zip

    《锋利的jQuery》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧等知识点...

    04-javaWeb-jQuery.7z

    选择器——表单对象属性过滤选择器 案例5-左右移动 总结 ———————————————— 版权声明:本文为CSDN博主「oooola」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

    带收藏转载的jquery瀑布流.zip

    itemSelector: '.item', // 匹配的元素选择器 columnWidth: function(containerWidth) { // 列宽计算方法 return containerWidth / 4; // 假设每列4个元素 }, percentPosition: true // 使用百分比位置 }); }...

    (转载文章)jquery日期显示中文

    4. 使用jQuery操作DOM:将格式化后的日期插入到HTML元素中,可以使用jQuery的选择器找到对应的元素,并用`.html()`或`.text()`方法更新其内容。 5. 插件使用:也可以选择使用已有的jQuery日期插件,如jQuery UI的...

    JQuery应用实例学习(强烈推荐)转载.doc

    例如,通过 ID、类或者属性选择器,可以迅速定位到页面上的特定元素。jQuery 提供了一系列方法,如 `$(selector)` 用于选择元素,`.html()` 用于修改元素的内容,`.append()` 和 `.prepend()` 用于添加内容,`.hide...

    《锋利的jQuery》(高清扫描版).pdf

    《锋利的jQuery》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧等知识点...

    jquery的经典资料

    - **选择器**:jQuery提供了强大的选择器语法,类似于CSS选择器,用于定位DOM中的元素。 - **事件处理**:通过事件方法如`.click()`、`.hover()`等可以轻松绑定事件处理器。 ##### 4. 使用 AJAX - **异步请求**:...

    jQuery源码分析-04 选择器-Sizzle-工作原理分析

    在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: “div > p” 块表达式: “div” “p” 并列选择器表达式: “div, p” 块分割器: ...

    杨洋疯狂C#第一期 Jquery相关代码

    2. **ch1_24JqueryUI.html**:这可能涉及到jQuery UI库的应用,包括各种交互式组件和视觉效果的实现,如对话框、滑块、日期选择器等。 3. **ch1_4.html**:可能讲解了jQuery中的事件绑定,如$(element).click()或$...

    Jquery源码(包含Jq用到的所有函数体)

    根据这个基本流程,对于上面“更好用”的疑问,我们就有了一个初步的比较具体的答案了:“更好用”指的是“更好的元素选择器”和“更好的功能方法集”。好了,到了这里,我们的需求就更加清晰了: ————————...

    layui-progress+element+jquery+js设计一个动态进度条

    例如,可以设置定时器模拟任务的进度,然后使用jQuery选择器找到对应的layui-progress元素并调整其进度值。 在实际应用中,动态进度条可以用于文件上传、数据加载、计算过程等多种场景。例如,当用户发起一个大文件...

    jQuery学习笔记之入门

    最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下; 一、JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察。 不使用...

    暴风影音jQuery焦点图

    1. **jQuery选择器**:jQuery的选择器允许开发者轻松地选取页面上的HTML元素,如`$("#id")`选择ID为指定值的元素,`$(".class")`选择所有类名为指定值的元素。 2. **事件绑定**:`$(element).on("event", function...

    jQuery源码分析-03构造jQuery对象-源码结构和核心函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,... 构造jQuery对象 3.1 源码结构 先看看总体结构,再做分解: 代码如下: (function( window, undefined ) { var jQuery = (function() {

    Easyui 去除jquery-easui tab页div自带滚动条的方法

    具体的选择器是针对ID为“tabs”的Tabs容器下的子元素,其中包括面板(panel)以及面板内容区域(panel-body)。 其中,`.panel-body` 类代表了Tab内容区域的容器,通过设置它的`overflow`属性为`hidden`,隐藏了该...

Global site tag (gtag.js) - Google Analytics