• Java基础之《Ajax+JQuery（JavaEE开发进阶Ⅱ）》—JQuery选择器

    jQuery常用选择器详解

    一、什么是jQuery选择器

    1、jQuery选择器完全继承了CSS风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。

    二、jQuery选择器的优势

    1、简洁的写法
    查找id为aa的元素：$("#aa")
    DOM写法，document.getElementById("aa")

    2、支持CSS1到CSS3

    3、完善的处理机制
    获取网页中不存在的元素不会报错，容错机制

    4、jQuery选择器是学习jQuery的基础。可见，jQuery选择器的重要性。当然想一下子掌握所有选择器也是困难的，这个得靠实践和积累。

    三、常用的基本选择器

    1、#id
    根据给定的id匹配一个元素
    例子：

    $("#test")  //选取id为test的那个元素

    2、.classname
    根据给定的类名匹配一个元素
    例子：

    $(".test")  //选取所有class为test的元素

    3、classname
    根据给定的元素名匹配元素
    例子：

    $("p")  //选取所有的p元素

    4、*
    匹配所有元素
    例子：

    $("*")  //选取页面上的所有元素

    5、select1,select2
    将每一个匹配到的元素合并后一起返回
    例子：

    $("div,span")  //查找页面里所有的div元素和所有的span元素，把找到的元素拼起来一起返回

    6、常用的基本选择器.html

    1. <html>
    2. 	<head>
    3. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    4. 		<script type="text/javascript">
    5. 			$(function() {
    6. 				alert($("#ID").val());  //根据id选择
    7. 				alert($("a").html());  //查找a标签
    8. 				alert($(".classname").val());  //查找class等于classname的所有元素
    9. 				alert($("*").length);  //查找页面上所有元素，共8个，所有开标签
    10. 				alert($("input,a").length);  //查找input元素和a元素，返回组合
    11. 				
    12. 			});
    13. 		script>
    14. 	head>
    15. 	<body>
    16. 		<input type="text" id="ID" value="根据ID选择" />
    17. 		<a>根据元素名称选择a>
    18. 		<input type="text" class="classname" value="根据元素css类名选择" />
    19. 	body>
    20. html>

    四、常用的层次选择器

    1、ancestor descendant
    元素之间用空格隔开
    选取ancestor元素里的所有descendant元素
    例子：

    $("div span")  //选取div标签里的所有span元素，包括它的后代元素（包括孙子、孙子的孙子。。。）

    2、parent>child
    元素之间用大于号隔开
    获取parent元素下的child元素
    例子：

    $("div>span")  //选取div元素下，元素名是span的子元素

    3、prev+next
    元素之间用加号隔开
    选取紧接在prev元素后next元素
    例子：

    $(".one+div")  //选取class属性为one的下一个div的同辈元素，紧挨着它后面的

    4、prev~siblings
    元素之间用波浪号隔开
    选取prev元素之后的所有siblings元素
    例子：

    $(".one~div")  //找之后的所有同辈元素

    5、常用的层次选择器.html

    1. <html>
    2. 	<head>
    3. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    4. 		<script type="text/javascript">
    5. 			$(function() {
    6. 				alert($("#ID").val());  //根据id选择
    7. 				alert($("a").html());  //查找a标签
    8. 				alert($(".classname").val());  //查找class等于classname的所有元素
    9. 				alert($("*").length);  //查找页面上所有元素，共8个，所有开标签
    10. 				alert($("input,a").length);  //查找input元素和a元素，返回组合
    11. 				
    12. 			});
    13. 		script>
    14. 	head>
    15. 	<body>
    16. 		<input type="text" id="ID" value="根据ID选择" />
    17. 		<a>根据元素名称选择a>
    18. 		<input type="text" class="classname" value="根据元素css类名选择" />
    19. 	body>
    20. html>

    五、常用的基本过滤选择器

    1、与css中伪类选择器类似
    a:hover

    2、:first
    选取第一个元素
    例子：

    $("div:first")  //找出所有的div，过滤取第一个

    3、:last
    选取最后一个元素

    4、:not(selector)
    去除所有与给定选择器匹配的元素
    例子：

    $("input:not(.myclass)")  //查找所有input元素，过滤出class属性不是myclass的元素

    5、:even
    选取索引值为偶数的所有元素，从0开始计数
    例子：

    $("div:even")  //把div元素都选出来，去除奇数的元素

    6、:odd
    选取索引值为奇数的所有元素，从0开始计数

    7、:eq(index)
    匹配一个给定索引值的元素，从0开始
    例子：

    $("div:eq(1)")  //找到所有div元素，取出下标为1的那个

    8、:gt(index)
    匹配大于给定索引值的元素，从0开始
    例子：

    $("div:gt(1)")  //找到所有div元素，取出索引值大于1的，去除了0和1

    9、:lt(index)
    匹配小于给定索引值的元素，从0开始

    10、:header
    选择h1，h2，h3一类的标签，就是标题标签

    11、:animated
    匹配正执行动画效果的元素

    12、常用的基本过滤选择器.html

    1. <html>
    2. 	<head>
    3. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    4. 		<script type="text/javascript">
    5. 			$(function() {
    6. 				alert($("li:first").html());  //查找所有li元素，过滤选择第一个
    7. 				alert($("li:last").html());  //查找所有li元素，过滤选择最后一个
    8. 				alert($("ul input:not(:checked)").val());  //查找ul里面所有input元素，过滤出没有checked的元素
    9. 				alert($("li:even").length);  //取出所有li元素的偶数项
    10. 				alert($("li:even").get(1).innerHTML); //打印成熟，取出数组下标0和2，然后再取第二个
    11. 				alert($("li:odd").get(1).innerHTML);  //打印担当
    12. 				alert($("li:eq(2)").html());  //打印成熟
    13. 				alert($("li:gt(1)").length);  //取出大于下标1的li元素
    14. 				alert($("li:lt(3)").length);
    15. 				alert($(":header").length);  //查找标题标签
    16. 				
    17. 			});
    18. 		script>
    19. 	head>
    20. 	<body>
    21. 		<div id="divTest">
    22. 			<ul>
    23. 				<li>投资li>
    24. 				<li>理财li>
    25. 				<li>成熟li>
    26. 				<li>担当li>
    27. 				<input type="radio" value="学习" checked="checked" />学习
    28. 				<input type="radio" value="不学习" />不学习
    29. 				<h1>Header 1h1>
    30. 				<h2>Header 2h2>
    31. 			ul>
    32. 		div>
    33. 	body>
    34. html>

    六、常用的内容过滤选择器

    1、内容过滤选择器，它的过滤规则主要体现在它所包含的子元素，或者文本内容上

    2、:contains(text)
    匹配包含给定文本的元素

    3、:empty
    匹配所有不包含子元素或者不包含文本的空元素

    4、:has(selector)
    匹配含有选择器所匹配元素的元素

    5、:parent
    选取含有子元素或者文本的元素
    我要查的元素内部，必须包含一个子元素或者一个文本元素

    七、常用的可见性过滤选择器

    1、:hidden
    选取所有不可见的元素

    2、:visible
    选取所有可见的元素

  • 相关阅读:
    电子电子架构——AUTOSAR信息安全机制有哪些（下）
    凛冬已至，程序员该怎么取暖
    Linux 操作系统原理 — Traffic Control 流量控制与 IP QoS 技术解析
    Qt 场景(QGraphicsScene)自绘可自由变换与移动的图元(QGraphicsObject)
    springboot之异步任务、邮件任务、定时任务
    链路聚合简述
    NumPY创建数组（ndarray）对象方法应用
    【华为OD机考B卷 | 100分】整数编码（JAVA题解——也许是全网最详）
    利用Doxygen生成代码文档
    Zookeeper - 本地安装与参数配置
  • 原文地址：https://blog.csdn.net/csj50/article/details/126385858