【JQuery学习历程】2.JQuery选择器
基本选择器
选择器 | 描述 | 返回 | 示例 |
#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选择器的更多相关文章
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jquery学习笔记(一):选择器
内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...
- jQuery学习之二 jQuery选择器
一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制 传统js选择器假如要操作的元素不存 ...
- 【JQuery学习历程】1.初识JQuery
1.JQuery简介: JQuery是用js写的JavaScript库,是为了简化js对HTML元素的操作.实现动画效果并方便为网站提供ajax交互: 2.ready()方法: ready()方法和j ...
- jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器
1. 什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...
- jquery学习(2)--选择器
jquery-李炎恢学习视频学习笔记.自己手写. 简单的选择器 css 写 法: #box{ color:#f00;} //id选择器 jquery获取:$('#box').css( ...
- jQuery学习之旅 Item1 选择器【一】
点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...
随机推荐
- Linux学习笔记30——套接字
一 什么是套接字 套接字是一种通信机制,凭借这种机制,客户/服务器系统的开发既可以在本地单机上进行,也可以跨网络进行. 二 套接字属性 套接字的特性由3个属性确定,它们是:域,类型和协议 1 套接 ...
- poj 2068 Nim(博弈树)
Nim Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1501 Accepted: 845 Description Le ...
- JavaScript 兼容 Array.prototype.slice.call
IE9之前的IE版本的HTMLCollection以及NodeList不是Object的子类. 在通过Array.prototype.slice.call进行数组化的时候,IE9之前的IE版本会抛出异 ...
- win2008 ent r2 开启端口
你好.win2008r2 ent 可以用以下命令行来实现,当然也可以用防火墙来配置 比如打开8080端口方法如下: netsh firewall add portopening TCP 8080 My ...
- Navicat for MySQL之MySQL客户端的下载、安装和使用
前期工作 若需使用Navicat for MySQL,则需要先安装MySQL,在此就不叙述了.具体可见我的博客: mysql-5.7.11-winx64.zip 的下载.安装.配置和使用(window ...
- FastDfs 说明、安装、配置
fastdfs是一个开源的,高性能的的分布式文件系统,他主要的功能包括:文件存储,同步和访问,设计基于高可用和负载均衡,fastfd非常适用于基于文件服务的站点,例如图片分享和视频分享网站 fastf ...
- hdoj 1950 Bridging signals【二分求最大上升子序列长度】【LIS】
Bridging signals Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- The Boost C++ Libraries
" ...one of the most highly regarded and expertly designed C++ library projects in the world.&q ...
- java中经常使用的日期格式化(全)
import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...
- spring mvc DispatcherServlet详解之四---视图渲染过程
整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程 ...