基本选择器


选择器 描述  返回 示例
#id 根据给定的id匹配元素 单个元素 $("#myId")
.class 根据给定的class类匹配元素 集合元素 $(".myClass")
element 元素选择器,匹配给定标签的元素  集合元素 $("input")
* 匹配所有元素  集合元素 $("*")
selector1,selector2 组合选择器,取交集 集合元素 $("div,input")选取div和input元素

层次选择器


选择器  描述 返回 示例
ancestor descendant 选取ancestor所有的后代descendant元素 集合元素 $("div span")选取div下的所有span(子孙)
parent > children 选取parent直系孩子children元素 集合元素 $("div > span"选取div下的直系孩子span(子)
pre + next 选取紧接在pre后面的同辈next元素 集合元素 $("div + span")选取紧接在div后面的兄弟元素next
pre ~ siblings 选取紧接在pre、后面的兴地元素siblings 集合元素 $("div ~ span")选取div后面的span元素

过滤选择器


  基本过滤选择器

选择器 描述 返回 示例
:first 选取第一个元素 单个元素  $("div:first")选取第一个div元素
:last 选取最后一个元素 单个元素 $("div:last")选取最后一个div元素
:eq(index) 选取第index位置的元素,从0开始 单个元素  $("div:eq(0)")选取第0个元素
:gt(index) 选取下标大于index的元素,从0开始 集合元素 $("div:gt(1)")选取下标大于1的元素不包括1
:lt(index) 选取下标小于index的元素,从0开始 集合元素 $("div:lt(3)")选取下标小于3的元素不包括3
:not(selector) 去除selector选择器选择到的元素 集合元素 $("div:not('.lal')")选取class不是lal的div元素
:even 选取下标为偶数的元素,从0开始 集合元素 $("div:even")选取div的下标为偶数的元素
:animated  选取正在执行动画的元素 集合元素 $("div:animated")选取正在执行动画的div元素
:header 选取标题元素  集合元素 $(":header")选取网页中的所有标题元素
:focus 选取当前获取焦点的元素 集合元素 $("input:focus")选取获取焦点的input元素

  内容过滤选择器

选择器 描述 返回 示例
:contains(text) 匹配指定的文本 集合元素 $("div:contains('lal'))匹配div中有lal的文本元素
:has(selector) 匹配他的子元素有selector 集合元素 $("div:has('input')")匹配div中input的元素的div元素
:empty 选取没有子元素的元素 集合元素 $("div:empty")匹配div为空的元素
:parent 选取元素不为空的元素 集合元素 $("div:parent")匹配div元素不为空的元素

  可见性过滤选择器

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

  属性过滤选择器

选择器 描述 返回 示例
[attribute] 选取用此属性的元素 集合元素 $("div[id]")选取div中设置id的元素
[attribute=value] 选取属性值为value的元素 集合元素 $("div[id=myId]")选取id为myId的div元素
[attribute^=value] 选取属性值是以value为开头的元素 集合元素 $("div[id^=my]")选取id以my开头的div元素
[attribute$=value] 选取属性值是以value为结尾的元素 集合元素 $("div[id$=Id]")选取id以Id结尾的div元素
[attribute*=value] 选取属性值中包含value的元素 集合元素 $("div[id*=yI]")选取id中含有yI的div元素
[attribute!=value] 选取属性值不为value的元素 集合元素 $("div[id!=myId]")选取id不为myId的div元素
[attribute\=value] 选取属性值等于给定的字符或以该字符为前缀的元素(连字符-) 集合元素 $("div[id\=my]")选取id前缀为my的div元素  id=my-id被选中
[attribute~=value] 选取属性值以空格隔开中的一个值 集合元素

$("div[class=~=myClass]")选取class以空格隔开有myClass的div元素

class=myClass youClass

[attribute=value][attribute=value] 取交集 集合元素

$("div[id=myId][class=myClass]选取id为myId并且class为myClass的div元素

  子元素过滤选择器(选取的是子元素)

选择器 描述 返回  示例
:nth-child(index/even/odd)从1开始 选取每个父元素d第index子元素 集合元素 $("div:nth-child(1)")选取div中的第一个子元素
:first-child 选取每个父元素的第一个子元素 集合元素 $("div:first-child")选取div中的第一个子元素
:last-child 选取每个父元素的最后一个子元素 集合元素 $("div:last-child")选取div中的最后一个子元素
:only-child 选取每个父元素中只有一个子元素的子元素 集合元素 $("div:only-child")选取div中只有一个子元素的子元素

  表单对象过滤选择器

选择器 描述 返回 示例
:checked 选取被选中的元素 集合元素 $("#form1 input:checked")选取form1中被选中的input的元素
:selected 选取被选中的选项元素(下拉列表) 集合元素 $("select option:selelcted")选取select下被选中的选项
:enable 选取可用元素 集合元素

$("#form1 :enable)选取form1下所有可用元素

:disable 选取不可用元素 集合元素

$("#form1 :disable")选取form1下所有不可用元素

表单选择器


选择器 描述 返回 示例
:input 选取所有input,textarea,select,button元素 集合元素 $("#form1 :input")选取表单form1下的input元素
:password 选取所有密码框 集合元素 $("#form1 :password")选取表单form1下的密码输入框
:text 选取所有单行文本框 集合元素 $("#form1 :text")选取表单form1下的单行文本框
:radio 选取单选按钮框 集合元素 $("#form1 :radio")选取表单form1下的单选按钮框
:reset 选取重置按钮 集合元素 $("#form1 :reset")选取表单form1下的重置按钮
:submit 选取提交按钮 集合元素 $("#form1 :submit")选取表单form1下的提交按钮
:image 选取图像按钮 集合元素 $("#form1 :image")选取表单form1下的图像按钮
:checkbox 选取多选框 集合元素 $("#form1 :checkbox")选取表单form1下的多选框
:file 选取所有上传文件框 集合元素 $("#form1 :file")选取表单form1下的上传文件筐
:hidden 选取所有隐藏元素 集合元素 $("#form1 :hidden")选取表单form1 下的隐藏元素

【JQuery学习历程】2.JQuery选择器的更多相关文章

  1. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  2. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jquery学习笔记(一):选择器

    内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...

  5. jQuery学习之二 jQuery选择器

    一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制  传统js选择器假如要操作的元素不存 ...

  6. 【JQuery学习历程】1.初识JQuery

    1.JQuery简介: JQuery是用js写的JavaScript库,是为了简化js对HTML元素的操作.实现动画效果并方便为网站提供ajax交互: 2.ready()方法: ready()方法和j ...

  7. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

  8. jquery学习(2)--选择器

    jquery-李炎恢学习视频学习笔记.自己手写. 简单的选择器    css 写 法: #box{ color:#f00;}    //id选择器    jquery获取:$('#box').css( ...

  9. jQuery学习之旅 Item1 选择器【一】

    点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...

随机推荐

  1. 用Delphi制作仿每行带按钮的列表

    Delphi做程序开发在使用到列表控件时,一般是列表放文本内容,在列表以外放操作按钮,选中列表某项再点按钮进行操作.现在Web开发做列表的样式总是列表的每行都有操作按钮,如微博的列表风格: Web开发 ...

  2. vijosP1471 教主的游乐场

    vijosP1471 教主的游乐场 链接:https://vijos.org/p/1471 [思路] 递推. 首先找到最左边的可以一步跳到后方的L, 那么L之后的点有两种情况:要么a足以跳到后方步数为 ...

  3. A*寻路算法的探寻与改良(一)

    A*寻路算法的探寻与改良(一) by:田宇轩                                                                    第一部分:这里我们主 ...

  4. 短随机唯一id生成参考

    <?php function getRandOnlyId() { //新时间截定义,基于世界未日2012-12-21的时间戳. $endtime=1356019200;//2012-12-21时 ...

  5. nyoj 88 汉诺塔(一)【快速幂】

    汉诺塔(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度 ...

  6. list的三种遍历方法

    1.最简单的for循环遍历 for(int i = 0; i < list.size(); i++){        list.get(i);        } 2.最方便的foreach循环遍 ...

  7. JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误

    今天尝试使用JUnit,下载了最新的JUnit版本,是4.11,结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribi ...

  8. 【Android - V】之DrawerLayout的使用

    DrawerLayout是Android V4包中的一个布局控件,用来实现一个抽屉样式的布局. DrawerLayout通过设置子视图的layout_gravity来决定子视图停靠在屏幕的哪个边缘外侧 ...

  9. IAAS云计算产品畅想-云主机产品内涵

    这里所涉及的主要还是狭义的云主机产品. 主要还是谈云主机产品中公有云产品与私有云产品相比赋予更多的含义: 产品广义理解:公有云主机的最大特点就是基础资源按需支付 从这一句话中可以体现出来两个含义: 产 ...

  10. 简单的代码实现的炫酷navigationbar

    动图 技术原理: 当你下拉scrollview的时候,会监听scrollview的contentOffset来调整头部背景图片的位置,通过CGAffineTransformMakeTranslatio ...