`
这些年
  • 浏览: 399794 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQ 选择器大全(转)

    博客分类:
  • js
 
阅读更多

一、基本选择器

 选择器  描 述  返回  示例
 #id  根据给定id匹配一个元素  单个元素  $("#test") 选取id为test的元素
 .class  根据给定类名匹配一个元素  集合元素  $(".test") 选取class为test的元素
 element  根据给定元素名匹配一个元素  集合元素  $("p") 选取p元素
 selector1,selector2...selectorN  将每一个选择器匹配到元素合成后一起返回  集合元素  $("div , span ,p , myClass")选取所在div span 和拥有class为myClass的标签的一组元素
 *  匹配所有元素  集合元素  $("*") 选取所在的元素

 

 

二、层次选择器

 选择器  描 述  返回  示例
 $("ancestor descendant")  选取ancestor元素里的所有descendant(后代)元素  集合元素  $("div span")选取div里面的所有span元素
 $("parent > child")  选取parent元素下的child(子)元素。  集合元素  $("div > span")选取div元素下的元素名是span的子元素
 $("prev + next")  选取紧接在prev元素后的next元素  集合元素  $(.one + div)选取class为one的下一个div元素
 $("prev~siblings")  选取 prev 元素之后的所有siblings元素  集合元素  $("#one~div")选取id为two的元素后面的所有div兄弟元素

 

可以用next()方法来代替$("prev + next")

$(".one+div") <==> $(".one").next("div");

 

可用nextAll()代替$("prev~siblings")

$("#prev~div") <==> $("#prev").nextAll("div");

 

siblings()方法与前后位置无关,只要是同辈节点就能匹配。

 

三、过滤选择器

1、基本过滤选择器

 选择器  描 述  返回  示例
 :first  选取第1个元素  单个元素  $("div:first")
 :last  选取最后一个元素  单个元素  $("div:last")
 :not(selector)  去除所有与给定选择器匹配的元素  集合元素  $("input:not(.myClass)")
 :even  选取索引是偶数的所有元素,索引从0开始  集合元素  $("ul li:even")
 :odd  选取索引是奇数的所有元素,索引从1开始  集合元素  $("ul li:odd")
 :eq(index)  选取索引等于index的元素,index从0开始  单个元素  $("ul:eq(3)")
 :gt(index)  选取索引大于index的元素,index从0开始,不包括index  集合元素  $("ul li:gt(3)")
 :lt(index)  选取索引小于index的元素,index从0开始,不包括index  集合元素  $("ul li:lt(3)")
 :header  选取所有标题元素,如:h1 h2 h3...  集合元素 $(":header") 
 :animated  选取当前正在执行动画的所有元素  集合元素  $("div:animated")

 

 

2、内容过滤选择器

 选择器  描述  返回  示例
 :contains(text)  选取含有文本内容text的元素  集合元素  $("div:contains('我')")
 :empty  选取不包含子元素或文本的空元素  集合元素  $("div:empty")
 :has(selector)  选取含有选择器所匹配元素的元素  集合元素  $("div:has(p)")
 :parent  选取含有子元素或文本的元素  集合元素  $("div:parent")

 

 

3、可见性过滤选择器

 选择器  描述  返回  示例
 :hidden  选取所有不可见元素  集合元素  $(":hidden")
 :visible  选取所有可见元素  集合元素  $("div:visible")

 

$(":hidden")==》选取所有不可见元素。包括:<input type="hidden"/>  、 <div style="display:none;"> 、<div style="visibility=hidden">等元素。

 

4、属性过滤选择器

 选择器  描述  返回  示例
 [attribute]  选取拥有此属性的元素  集合元素  $("div[id]")
 [attribute = value]  选取属性值为value的元素  集合元素  $("div[title=test]")
 [attribute != value]  选取属性值不等于value的元素  集合元素  $("div[titil!=test]")
 [attribute ^= value]  选取属性值以value开始的元素  集合元素  $("div[titil^=test]")
 [attribute $= value]  选取属性值以value结束的元素  集合元素  $("div[titil$=test]")
 [attribute *= value]  选取属性值含有value值的元素  集合元素  $("div[titil*=test]")
 [selector][selector2][selectorN]

 用属性选择器合并成一个复合属性选择器,满足多个条件。

 集合元素

 $("div[id][title=test]")

选取拥有属性id , 并且属性title 等于test的div元素

 

5、子元素过滤选择器

 

 选择器  描述  返回  示例
 :nth-child(index/even/odd)

 选取每个父元素下的第index个子元素或奇偶元素

   index从1开始

 集合元素  $("ul li:nth-child(3)")
 :first-child  选取每个父元素的第1个子元素  集合元素  $("ul li:first-child")
 :last-child  选取第个父元素下的最后一个子元素  集合元素  $("ul li:last-child")
 :only-child

 如果某个元素是它父元素中惟一的子元素,那么将会

被匹配。如果父元素中含有其它元素,刚不会匹配

 集合元素  $("div:only-child")

 

:nth-child(even) =>选取每个父元素下的偶子元素

:nth-child(odd) =>选取每个父元素下的奇子元素

:nth-child(3n) =>选取每个父元素下的索引值是3倍数的元素(n从0开始)

 

6、表单对象属性过滤选择器

 

 选择器  描述  返回值  示例
 :enabled  选取所有可用元素  集合元素  $("#form1:enabled")
 :disabled  选取所有不可用元素  集合元素  $("#form1:disabled")
 :checked

 选取所有被选中的元素

(单选框、复选框)

 集合元素  $("input:checked")
 :selected

 选取所有被选中的选项元素

(下拉列表)

 集合元素  $("select:selected")

 

 

四、表单选择器

 

 选择器  描述  返回  示例
 :input  选取所有input 、textarea 、select 、button元素  集合元素  $(":input")
 :text  选取所有的单行文本框  集合元素  $(":text")
 :password  选取所有的密码框  集合元素  $(":password")
 :radio  选取所有的单选框  集合元素  $(":radio")
 :checkbox  选取所有的多选框  集合元素  $(":checkbox")
 :submit  选取所有的提交按钮  集合元素  $(":submit")
 :image  选取所有的图像按钮  集合元素  $(":image")
 :reset  选取所有的重置按钮  集合元素  $(":reset")
 :button  选取所有的按钮  集合元素  $(":button")
 :file  选取所有的上传域  集合元素  $(":file")
 :hidden  选取所有的不可见元素  集合元素  $(":hidden")
分享到:
评论

相关推荐

    JQ 层次选择器

    本文将深入探讨JQ中的层次选择器,这是一种强大的工具,帮助开发者快速定位页面上的特定元素。 层次选择器是jQuery的核心功能之一,它允许我们根据元素在HTML文档结构中的位置来选取元素。下面我们将详细讲解几种...

    JQ 内容过滤选择器

    本文将深入探讨"JQ内容过滤选择器"这一关键知识点,它是jQuery选择器体系中的一个重要组成部分,用于从DOM树中筛选出符合特定条件的元素。 一、JQ内容过滤选择器概述 内容过滤选择器允许我们根据元素内部的文本或...

    JQ 子元素过滤选择器

    本文将深入探讨“JQ子元素过滤选择器”,这是一个强大的功能,可以帮助开发者精确地定位到DOM树中的特定子元素,进而进行进一步的操作。通过学习和掌握这些选择器,可以提高开发效率,使代码更加简洁易读。 首先,...

    JQ 属性选择器

    **jQuery 属性选择器详解** 在前端开发中,jQuery 是一个强大的 JavaScript 库,它极大地简化了 DOM 操作,其中包括选择元素。属性选择器是 jQuery 提供的一种高级选择器,用于根据元素的属性及其值来定位和操作...

    jQuery选择器大全(48个代码片段 21幅图演示)

    **jQuery选择器大全** jQuery库以其易用性和强大的选择器功能而闻名,使得JavaScript开发者能够更轻松地操作DOM(文档对象模型)。以下是一份详细的知识点概述,涵盖了jQuery中的主要选择器及其应用。 1. **基本...

    jquery 选择器 大全

    在jQuery中,选择器分为多种类型,包括基本选择器、层次选择器、过滤器选择器以及内容和属性过滤器。下面我们将详细探讨这些选择器的用法和实例。 1. **基本选择器**: - `#id`:通过ID选择器选取具有特定ID的元素...

    JQ选择时间插件

    "JQ选择时间插件"就是这样一个工具,它专注于时间选择的便捷性和灵活性,特别适合用于表单输入或者日程管理等场景。这个插件名为laydate,是一个基于jQuery的轻量级组件,它提供了丰富的选择类型和强大的自定义能力...

    jq时间选择器jq时间选择器jq时间选择器

    "jq时间选择器"是指利用jQuery实现的一个功能,允许用户在网页上方便地选取日期或时间。这个功能在网页表单、日程安排、预订系统等场景中非常常见。 jQuery时间选择器通常基于插件实现,例如jQuery UI中的...

    jq 双日历插件

    jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件...

    jq表单验证大全.rar jq表单验证大全.rar

    1. jQuery的选择器:jQuery提供了丰富的选择器用于选取DOM元素,如ID选择器(#id)、类选择器(.class)和标签选择器(input)等,这些选择器在表单验证中用于定位需要验证的输入字段。 2. DOM操作:jQuery提供了`.val()`...

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

    例如,在一个国家/地区选择器之后,可能会有一个相应的城市选择器,城市列表根据之前选择的国家动态加载。级联选择器提高了数据输入的效率,减少了用户输入的复杂性,同时也能够有效地管理大量数据。 自定义HTML...

    JQ.地址选择器.rar

    省市县(区)三级选择, 含UI, 可用与移动端web开发 ----------------构造函数--------------------- fnBdAdCode({ test:false,//开启测试输出 depth:3, //选择级别,1 省, 2省市, &gt;=3省市县(区) fn:function(name,...

    jq高校联动下拉选择器

    "jq高校联动下拉选择器"是一个专门针对这种情况设计的解决方案,它利用JavaScript库jQuery(简称jq)来实现高效、便捷的交互体验。这个工具集成了全国省市大学的数据,为用户提供了一种方便的方式来选择他们所在的...

    JQ 表单对象属性过滤选择器

    本文将深入探讨“JQ表单对象属性过滤选择器”的概念,以及如何在实际开发中有效地利用它们。 一、jQuery选择器概述 jQuery选择器是其强大功能的核心之一,它允许开发者通过简洁的语法来选取DOM元素。选择器分为基本...

    jquery周历选择器

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

    基于jquery实现的地址选择器

    【基于jQuery实现的地址选择器】是一种常用的前端交互组件,常用于用户在填写表单时选择他们的居住地或发货地址。这种组件通过级联下拉菜单的形式,展示省、市、区、乡镇、社区等多级行政区域,使得用户能够方便快捷...

    jQuery时间选择器点击选择小时分钟代码

    在网页开发中,jQuery时间选择器是一个非常实用的工具,它允许用户通过点击来选取特定的小时和分钟,为表单输入提供了便利。这个“jQuery时间选择器点击选择小时分钟代码”很可能是一个实现这一功能的代码示例或者...

    jq垂直水平翻转效果

    综上所述,这个“jq垂直水平翻转效果”涉及到jQuery的选择器、事件处理、CSS3的`transform`属性以及jQuery插件的应用。掌握这些知识点有助于提升网页交互设计的能力,为用户提供更加生动和有趣的视觉体验。

    jq 日期控件 可选择时间,日期,星期等等

    1. **日期选择器的基本功能**: - **日期选择**:用户可以选择特定的日期,例如生日或截止日期。 - **时间选择**:除了日期,还可以选择具体的时间,如会议的开始和结束时间。 - **星期选择**:允许用户选择一周...

    jQuery选择器速查表

    ### jQuery选择器速查表知识点 jQuery选择器是jQuery库中用于选取HTML元素的强大工具。通过不同的选择器,我们可以轻松地选中页面中的元素并进行操作。本速查表将介绍几种不同类型的选择器,以供查询和参考。 ####...

Global site tag (gtag.js) - Google Analytics