首页 > 编程笔记 > JavaScript笔记 > jQuery选择器
jQuery结构(位置)伪类选择器
“位置”伪类选择器,指的是根据页面中的位置来选取元素的一种伪类选择器。在 jQuery 中,常见的“位置”伪类选择器如表 1 所示。
图 1::first 和 :last 选择器的效果
$("li:first,li:last")表示选择第一个 li 元素和最后一个 li 元素。
图 2::odd 选择器的效果
$("li:odd") 表示选择序号为奇数的 li 元素。这里要注意的是,序号是从 0 开始,而不是从 1 开始的。也就是说“第 1 个选项”的 li 元素序号为 0,“第 2 个选项”的 li 元素序号为 1,依此类推。这个与数组下标是一样的道理。
图 3::eq(n) 选择器的效果
$("li:eq(3)") 表示选取序号为 3 的 li 元素,也就是第 4 个 li 元素,因为序号是从 0 开始的。
图 4::lt(n) 选择器的效果
$("li:lt(3)") 表示选取序号小于 3 的所有 li 元素,序号是从 0 开始的。此外,lt 表示 less than,gt 表示 greater than,了解这两个方法的英文意思可以让我们更好地理解和记忆。
选择器 | 说明 |
---|---|
:first | 选取某种元素的第一个元素 |
:last | 选取某种元素的取后一个元素 |
:odd | 选取某种元素中序号为“奇数”的所有元素,序号从 0 开始 |
:even | 选取某种元素中序号为“偶数”的所有元素,序号从 0 开始 |
:eq(n) | 选取某种元素的第 n 个元素,n 是个整数,从 0 开始 |
:lt(n) | 选取某种元素中小于 n 的所有元素,n 是个整数,从 0 开始 |
:gt(n) | 选取某种元素中大于 n 的所有元素,n 是个整数,从 0 开始 |
:first、:last选择器
举例:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("li:first,li:last").css("color", "red"); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> </body> </html>程序执行效果如图 1 所示:
图 1::first 和 :last 选择器的效果
$("li:first,li:last")表示选择第一个 li 元素和最后一个 li 元素。
:odd、:even选择器
举例:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("li:odd").css("color", "red"); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> </body> </html>程序执行效果如图 2 所示:
图 2::odd 选择器的效果
$("li:odd") 表示选择序号为奇数的 li 元素。这里要注意的是,序号是从 0 开始,而不是从 1 开始的。也就是说“第 1 个选项”的 li 元素序号为 0,“第 2 个选项”的 li 元素序号为 1,依此类推。这个与数组下标是一样的道理。
:eq(n)选择器
举例:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("li:eq(3)").css("color", "red"); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> </body> </html>程序执行效果如图 3 所示:
图 3::eq(n) 选择器的效果
$("li:eq(3)") 表示选取序号为 3 的 li 元素,也就是第 4 个 li 元素,因为序号是从 0 开始的。
:lt(n)、:gt(n)选择器
举例:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("li:lt(3)").css("color", "red"); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> </body> </html>程序执行效果如图 4 所示:
图 4::lt(n) 选择器的效果
$("li:lt(3)") 表示选取序号小于 3 的所有 li 元素,序号是从 0 开始的。此外,lt 表示 less than,gt 表示 greater than,了解这两个方法的英文意思可以让我们更好地理解和记忆。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算