jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
我们这里主要介绍一下jQuery的选择器:
jQuery选择器:用来选取网页中的元素。与JavaScript选取网页中的元素不同,jQuery的选取方式更简单,功能更强大。
js的选取方式:document.getElementById()、document.getElementsByClassName()… …
jQuery选取方式大致可以分为5大类
-
基本选择器
## 标签选择器
* 语法: ( " h t m l 标 签 名 " ) 获 得 所 有 匹 配 标 签 名 称 的 元 素 ∗ 例 : ("html标签名") 获得所有匹配标签名称的元素 * 例: ("html标签名")获得所有匹配标签名称的元素∗例:(“p”)
## id选择器
* 语法: KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id的属性值") 获得与指定i…("#id")
## 类选择器
* 语法: ( " . c l a s s 的 属 性 值 " ) 获 得 与 指 定 的 c l a s s 属 性 值 匹 配 的 元 素 ∗ 例 : (".class的属性值") 获得与指定的class属性值匹配的元素 * 例: (".class的属性值")获得与指定的class属性值匹配的元素∗例:(".class")
## 并集选择器
* 语法: ( " 选 择 器 1 , 选 择 器 2.... " ) 获 取 多 个 选 择 器 选 中 的 所 有 元 素 ∗ 例 : ("选择器1,选择器2....") 获取多个选择器选中的所有元素 * 例: ("选择器1,选择器2....")获取多个选择器选中的所有元素∗例:(“ul li”) -
层级选择器
## 后代选择器
* 语法: ( " A B " ) 选 择 A 元 素 内 部 的 所 有 B 元 素 ∗ 例 : ("A B ") 选择A元素内部的所有B元素 * 例: ("AB")选择A元素内部的所有B元素∗例:(“body div”)
## 子选择器
* 语法: ( " A > B " ) 选 择 A 元 素 内 部 的 所 有 B 子 元 素 ∗ 例 : ("A > B") 选择A元素内部的所有B子元素 * 例: ("A>B")选择A元素内部的所有B子元素∗例:(“body>div”) -
属性选择器
## 属性名称选择器
* 语法: $(“A[属性名]”) 包含指定属性的选择器
* 例: $(“div[title]”)//含有属性title 的div元素
## 属性选择器
* 语法: ( " A [ 属 性 名 = ′ 值 ′ ] " ) 包 含 指 定 属 性 等 于 指 定 值 的 选 择 器 ∗ 例 : ("A[属性名='值']") 包含指定属性等于指定值的选择器 * 例: ("A[属性名=′值′]")包含指定属性等于指定值的选择器∗例:(“div[title = ‘test’]”)//属性title值等于test的div元素
* $(“div[title != ‘test’]”)//属性title值不等于test的div元素
* $(“div[title ^= ‘te’]”)//属性title值 以te开始 的div元素
* $(“div[title $= ‘est’]”)//属性title值 以est结束 的div元素
* $(“div[title *= ‘es’]”)//属性title值 含有es的div元素
## 复合属性选择器
* 语法: ( " A [ 属 性 名 = ′ 值 ′ ] [ ] . . . " ) 包 含 多 个 属 性 条 件 的 选 择 器 ∗ 例 : ("A[属性名='值'][]...") 包含多个属性条件的选择器 * 例: ("A[属性名=′值′][]...")包含多个属性条件的选择器∗例:(“div[id][title *= ‘es’]”)//选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素 -
过滤选择器
## 首元素选择器
* 语法: :first 获得选择的元素中的第一个元素
* 例: KaTeX parse error: Expected 'EOF', got '#' at position 28: …)//第一个 div 元素 #̲# 尾元素选择器 * 语法…(“div:last”)//最后一个 div 元素
## 非元素选择器
* 语法: :not(selector) 不包括指定内容的元素
* 例:KaTeX parse error: Expected 'EOF', got '#' at position 44: …ne 的所有 div 元素 #̲# 偶数选择器 * 语法: …(“div:even”)//索引值为偶数的 div 元素
## 奇数选择器
* 语法: :odd 奇数,从 0 开始计数
* 例:KaTeX parse error: Expected 'EOF', got '#' at position 30: …引值为奇数的 div 元素 #̲# 等于索引选择器 * 语法…(“div:eq(3)”)//索引值为等于 3 的 div 元素
## 大于索引选择器
* 语法: :gt(index) 大于指定索引元素
* 例:KaTeX parse error: Expected 'EOF', got '#' at position 35: …大于 3 的 div 元素 #̲# 小于索引选择器 * 语法…(“div:lt(3)”)//索引值为小于 3 的 div 元素
## 标题选择器
* 语法: :header 获得标题(h1~h6)元素,固定写法
* 例:$(":header")//所有的标题元素 -
表单过滤选择器
## 可用元素选择器
* 语法: :enabled 获得可用元素
* 例:KaTeX parse error: Expected 'EOF', got '#' at position 53: …可用 <input> 元素 #̲# 不可用元素选择器 * …(“input[type = ‘text’]:disabled”)//表单内不可用 元素
## 选中选择器
* 语法: :checked 获得单选/复选框选中的元素
* 例:KaTeX parse error: Expected 'EOF', got '#' at position 49: …d")//获取选中的复选框 #̲# 选中选择器 * 语法: …(“option:selected”)//获取选中的下拉框
更多的jQuery选择器可以参见jQuery的API文档。