jQuery基础（五）—— jQuery选择器

jQuery选择器的写法和CSS选择器的写法类似，我觉得不同的就是CSS是在选择到元素以后为其添加样式， jQuery选择器是在找到元素以后为其添加行为。主要包含以下几种：

（1）基本选择器

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$("#imok")选取id为imok的元素
.class	根据给定的class匹配元素	元素集合	$(".imok")选取class值为imok的元素
element	根据给定的元素名匹配	元素集合	$("p")选取所有的<p>元素
*	匹配所有元素	元素集合	$("*")选取所有元素

（2）层次选择器

选择器	描述	返回	示例
$("ancestor descendant")	选择ancestor元素里所有的descendant（后代）元素	元素集合	$("div span")选择<div>中所有的<span>元素
$("parent > child")	选择parent下的直属child元素，直属就是第一级子元素，不是所有	元素集合	$("div > span")选取<div>下元素名为<span>且是直属关系的元素
$("prev + next")	选取紧接在prev后的next元素	元素集合	$(".imok + div")选取class为imok元素的下一个同辈的<div>元素
$("prev + siblings")	选取prev元素之后的所有siblings元素	元素集合	$("#imok ~ div")选取id为imok的元素后面的所有同辈<div>元素

还有几点需要注意的，就是后面两种层次选择器和next()和nextAll()的等价关系,以下两种方式是等价的：

$("#imok + div")	$("#imok").next("div")
$("prev + div")	$("#imok").nextAll("div")

（3）过滤选择器

过滤选择器是按照一定的过滤规则来筛选出所要的DOM元素

选择器（基础）	描述	返回	示例
：first	选取第一个元素	单个元素	$("div:first")选取所有的<div>元素中的第一个<div>元素
：last	选取最后一个元素	单个元素	$("div:first")选取所有的<div>元素中的最后一个<div>元素
：not（selector）	去除selector的其他元素	元素集合	$("div:not（.myClass）")选取class不是myClass的<div>元素
：even	选取索引是偶数的所有元素，索引从0开始	元素集合	$("input:even")选取索引是偶数的<input>元素
：odd	选取索引是奇数的所有元素，索引从0开始	元素集合	$("input:odd")选取索引是奇数的<input>元素
：eq（index）：gt（index）：lt（index）	选取索引等于/大于/小于index的元素，索引从0开始	单个元素	$("input:eq（1）")选取索引等于1的<input>元素 $("input:gt（1）")选取索引大于1的<input>元素 $("input:lt（1）")选取索引小于1的<input>元素
：header	选取所有的标题元素，例如<h1>,<h2>等	元素集合	$(":header")选取网页中所有的<h1>,<h2>
：animated	选择当前正在执行动画的所有元素	元素集合	$("div：animated")选取正在执行动画的<div>元素
：focus	选取当前获得焦点的元素	元素集合	$(':focus')选取当前获取焦点的元素

选择器（内容）	描述	返回	示例
：contains（next）	选取含有文本内容为“text”的元素	集合元素	$("div:contains（‘我’）")选取含有文本“我”的<div>元素
：empty	选取不包含子元素或文本的空元素	元素集合	$("div:empty")选取不包含子元素或文本的空的<div>元素
：has（selector）	选取含有selector匹配元素的元素	元素集合	$("div:has（p）")选取含有<p>的<div>元素
：parent	选取含有子元素或子文本的元素	元素集合	$("div:parent")选取有的子元素或子文本的<div>元素

选择器（可见性）	描述	返回	示例
：hidden	选取所有不可见的元素	集合元素	$(":hidden")选取含有文本“我”的<div>元素
：visible	选取所有可见的元素	元素集合	$(":visible")选取不包含子元素或文本的空的<div>元素

选择器（表单）	描述	返回	示例
：enabled	选取所有可用的元素	集合元素	$("#imok:enabled")选取id为imok的表单内的所有可用元素
：disabled	选取所有不可用的元素	元素集合	$("#imok:disabled")选取id为imok的表单内的所有不可用元素
：checked	选取所有被选中的元素（单选框、复选框）	元素集合	$("input:checked")选取所有被选中的<input>元素
：selected	选取所有被选中的选项元素（下拉列表）	元素集合	$("select option：selected")选取所有被选中的选项元素

jQuery基础（五）—— jQuery选择器相关推荐

day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)
今日内容 1.JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例 JQuery 基础: 1.概念: 一个JavaScript框架.简化JS开发 jQu ...
[jQuery基础] 初识jQuery
为什么要使用jQuery? 强大选择器: 方便快速查找DOM元素链式调用: 可以通过.不断调用jQuery对象的方法隐式遍历(迭代): 一次操作多个元素读写合一: 读数据/写数据使用是一个函数 ...
（转）jquery基础教程七选择器(selectors 的xpath语法应用)
我们根据实例来解释jquery选择器(selectors)中xpath几种常用的用法比如下面html代码 <ul> <li class="aaaa" title ...
第三章：JQuery基础---核心函数选择器、工具方法
一:是什么?以及作用定义:有特定语法规则(css选择器)的字符串作用:用来查找某个/些DOM元素: $(selector) 二:基本选择器(最基本最常用的选择器) id选择器:#id ...
JQuery 基础 || 目前 jQuery 有三个大版本||JQuery快速入门
1. 概念: 一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScrip ...
jQuery基础--使用jQuery美化英雄联盟简介页
需求: 实现代码:
jQuery基础-01
jQuery基础-01 jQuery 1. 初识jQuery 1.1 使用JavaScript的方式去实现 1.2 使用jQuery的方式去实现 2. 什么是jQuery? 3. 使用的步骤 4. 版 ...
JQuery基础快速入门（超级详细）
JQuery基础学习 JQuery概念快速入门 JQuery对象和JS对象区别与转换选择器 1.基本操作的学习 2.分类 2.1基本选择器 2.2 层级选择器 2.3属性选择器 2.4过滤选择器 ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...

jQuery基础（五）—— jQuery选择器

（1）基本选择器

（2）层次选择器

（3）过滤选择器

jQuery基础（五）—— jQuery选择器相关推荐

最新文章

热门文章