Unity开发者联盟收藏本站
发帖教程新人必读切换到宽版

 找回密码
 立即注册
Unity开发者联盟»论坛 › 3D Dev Asset 开发资源大全 › 学术研究 Scholarly › JQuery选择器超级详细
返回列表 发新帖
查看: 326|回复: 0

JQuery选择器超级详细

[复制链接]
发表于 2022-6-27 11:44 | 显示全部楼层 |阅读模式
基本选择器
id选择器：$("#id的属性值")
类选择器：$(".class的属性值")
标签选择器：$("标签名")
并集选择器：$("选择器1，选择器2")
层级选择器
后代选择器：$("选择器1   选择器2")
子选择器：$("选择器1 > 选择器2")
属性选择器
属性名称选择器：$("选择器[属性名]")
属性选择器：
$("选择器[属性名='值']")
$("选择器[属性名!='值']")
$("选择器[属性名^='值']")
$("选择器[属性名$='值']")
$("选择器[属性名*='值']")
复合属性选择器：$("选择器[属性名='值'][]...")
过滤选择器
首元素选择器：${选择器：first}
尾元素选择器：${选择器：last}
非元素选择器：${选择器1：not(选择器2)}
偶数选择器：${选择器：even}
奇数选择器：${选择器：odd}
等于索引选择器：${选择器：eq(index)}
大于索引选择器：${选择器：gt(index)}
小于索引选择器：${选择器：lt(index)}
标题选择器：${：header}
表单过滤选择器
可用元素选择器：${:enabled}
不可用元素选择器：${:disabled}
选中选择器
单复选框：${:checked}
下拉框：${:selected}
基本选择器

id选择器：$("#id的属性值")

获取与指定id属性值匹配的元素
单击按钮，将id为myid的元素背景为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 50px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width: 100%;
  15.             height: 20px;
  16.         }
  17.     </style>
  18.     <script>
  19.         $(function () {
  20.             $("#id1").click(function () {
  21.                 $("#mydivid").css("backgroundColor","green");
  22.             });
  23.         });
  24.     </script>
  26. </head>
  27. <body>
  28.     <input id="id1" type="button" value="改变id为mydivid的元素为绿色">
  29.     <hr><hr>
  30.     <div id="mydivid">
  31.         这是div,id为mydivid
  32.     </div>
  33.     <span id="myspanid">
  34.         这是span,id为myspanid
  35.     </span>
  36. </body>
  37. </html>
复制代码
单击前


单击后


类选择器：$(".class的属性值")

获取与指定的class属性值匹配的元素
单击按钮，将类名为myClassName的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 50px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width: 100%;
  15.             height: 20px;
  16.         }
  17.     </style>
  18.     <script>
  19.         $(function () {
  20.             $("#id1").click(function () {
  21.                 $(".myClassName").css("backgroundColor","green");
  22.             });
  23.         });
  24.     </script>
  26. </head>
  27. <body>
  28.     <input id="id1" type="button" value="改变class为myClassName的元素为绿色">
  29.     <hr><hr>
  30.     <div id="mydivid" class="myClassName">
  31.         这是div,id为mydivid，calss为myClassName
  32.         <span >
  33.         这是span
  34.         </span>
  35.     </div>
  36.     <br>
  37.     <div  class="myClassName">
  38.         这是div,calss为myClassName
  39.     </div>
  40.     <br>
  41.     <span id="myspanid" class="myClassName">
  42.         这是span,id为myspanid，calss为myClassName
  43.     </span>
  44. </body>
  45. </html>
复制代码
单击前


单击后


标签选择器：$("标签名")

获取所有匹配标签名称的元素
单击按钮，将标签为div的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 50px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width: 100%;
  15.             height: 20px;
  16.         }
  17.     </style>
  18.     <script>
  19.         $(function () {
  20.             $("#id1").click(function () {
  21.                 $("div").css("backgroundColor","green");
  22.             });
  23.         });
  24.     </script>
  26. </head>
  27. <body>
  28.     <input id="id1" type="button" value="改变标签为div的元素为绿色">
  29.     <hr><hr>
  30.     <div id="mydivid" class="myClassName">
  31.         这是div,id为mydivid，calss为myClassName
  32.         <span >
  33.         这是span
  34.         </span>
  35.     </div>
  36.     <br>
  37.     <div  class="myClassName">
  38.         这是div,calss为myClassName
  39.     </div>
  40.     <br>
  41.     <span id="myspanid" class="myClassName">
  42.         这是span,id为myspanid，calss为myClassName
  43.     </span>
  44. </body>
  45. </html>
复制代码
单击前


单击后


并集选择器：$("选择器1，选择器2")

获取多个选择器选中的所有元素
单击按钮，将标签为span的元素，或者id为myDivId的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 50px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width: 100%;
  15.             height: 20px;
  16.         }
  17.     </style>
  18.     <script>
  19.         $(function () {
  20.             $("#id1").click(function () {
  21.                 $("span,#myDivId").css("backgroundColor","green");
  22.             });
  23.         });
  24.     </script>
  26. </head>
  27. <body>
  28.     <input id="id1" type="button" value="改变标签为span的元素，或者id为myDivId的元素背景变为绿色">
  29.     <hr><hr>
  30.     <div >
  31.         这是div
  32.         <span >
  33.         这是span
  34.         </span>
  35.     </div>
  36.     <br>
  37.     <div id="myDivId">
  38.         这是div,id为myDivId
  39.     </div>
  40.     <br>
  41.     <span id="myspanid">
  42.         这是span,id为myspanid
  43.     </span>
  44. </body>
  45. </html>
复制代码
单击前


单击后


层级选择器

后代选择器：$("选择器1   选择器2")

选择选择器1内部的所有选择器2
改变id为myDivId的元素下的，所有span元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width: 100px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $("#myDivId   span").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29.     <input id="id1" type="button" value="改变id为myDivId的元素下的，所有span元素背景变为绿色">
  30.     <hr><hr>
  31.     <div id="myDivId">
  32.         这是div,id为myDivId
  33.         <br>
  34.         <span >
  35.             这是span
  36.         </span>
  37.         <br>
  38.         <span  style="background-color: pink">
  39.             这是span
  40.             <br>
  41.             <br>
  42.             <span style="background-color: deeppink;height: 20px">
  43.                 这是span
  44.             </span>
  45.             <br>
  46.         </span>
  47.     </div>
  48.     <br>
  49.     <div >
  50.         这是div
  51.         <br>
  52.         <span >
  53.             这是span
  54.         </span>
  55.     </div>
  56.     <br>
  57.     <span id="myspanid">
  58.         这是span,id为myspanid
  59.     </span>
  60. </body>
  61. </html>
复制代码
单击前


单击后


子选择器：$("选择器1 > 选择器2")

选择选择器1内部的所有子选择器2
改变div元素下的，所有子span元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width: 100px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $("div  > span").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29.     <input id="id1" type="button" value="改变div元素下的，所有子span元素背景变为绿色">
  30.     <hr><hr>
  31.     <div id="myDivId">
  32.         这是div,id为myDivId
  33.         <br>
  34.         <span >
  35.             这是span
  36.         </span>
  37.         <br>
  38.         <span  style="background-color: pink">
  39.             这是span
  40.             <br>
  41.             <br>
  42.             <span style="background-color: deeppink;height: 20px">
  43.                 这是span
  44.             </span>
  45.             <br>
  46.         </span>
  47.     </div>
  48.     <br>
  49.     <div >
  50.         这是div
  51.         <br>
  52.         <span >
  53.             这是span
  54.         </span>
  55.     </div>
  56.     <br>
  57.     <span id="myspanid">
  58.         这是span,id为myspanid
  59.     </span>
  60. </body>
  61. </html>
复制代码
单击前


单击后


属性选择器

属性名称选择器：$("选择器[属性名]")

包含指定属性的选择器
改变类名为myCalss并且含有id属性的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass[id]").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29.     <input id="id1" type="button" value="改变类名为myCalss并且含有id属性的元素背景变为绿色">
  30.     <hr><hr>
  31.     <div class="myClass" id="divId1">
  32.         这是div,calss为myClass，id为divId1
  33.     </div>
  34.     <br>
  35.     <div class="myClass">
  36.         这是div,calss为myClass
  37.     </div>
  38.     <br>
  39.     <span class="myClass" id="myspanid">
  40.         这是span,calss为myClass,id为myspanid
  41.     </span>
  42. </body>
  43. </html>
复制代码
单击前


单击后


属性选择器：

$("选择器[属性名='值']")

包含指定属性等于指定值的选择器
改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass[id='myDivId1']").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 ">
  30. <hr><hr>
  31. <div class="myClass" id="myDivId1">
  32.     这是div,calss为myClass，id为myDivId1
  33. </div>
  34. <br>
  35. <div class="myClass" id="myDivId2">
  36.     这是div,calss为myClass，id为myDivId2
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" id="mySpanId1">
  44.         这是span,calss为myClass,mySpanId1
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


$("选择器[属性名!='值']")

包含指定属性不等于指定值的选择器
改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass[id!='myDivId1']").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色">
  30. <hr><hr>
  31. <div class="myClass" id="myDivId1">
  32.     这是div,calss为myClass，id为myDivId1
  33. </div>
  34. <br>
  35. <div class="myClass" id="myDivId2">
  36.     这是div,calss为myClass，id为myDivId2
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" id="mySpanId1">
  44.         这是span,calss为myClass,mySpanId1
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


$("选择器[属性名^='值']")

包含指定属性以指定值开头的选择器
改变类名为myCalss并且id属性以my开头的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass[id^='my']").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myCalss并且id属性以my开头的元素背景变为绿色">
  30. <hr><hr>
  31. <div class="myClass" id="myDivId1">
  32.     这是div,calss为myClass，id为myDivId1
  33. </div>
  34. <br>
  35. <div class="myClass" id="myDivId2">
  36.     这是div,calss为myClass，id为myDivId2
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" id="mySpanId1">
  44.         这是span,calss为myClass,mySpanId1
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


$("选择器[属性名$='值']")

包含指定属性以指定值结尾的选择器
改变类名为myCalss并且id属性以Id1的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass[id$='Id1']").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myCalss并且id属性以Id1的元素背景变为绿色">
  30. <hr><hr>
  31. <div class="myClass" id="myDivId1">
  32.     这是div,calss为myClass，id为myDivId1
  33. </div>
  34. <br>
  35. <div class="myClass" id="myDivId2">
  36.     这是div,calss为myClass，id为myDivId2
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" id="mySpanId1">
  44.         这是span,calss为myClass,mySpanId1
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


$("选择器[属性名*='值']")

包含指定属性含有指定值的选择器
改变类名为myCalss并且id属性值含有Div的元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass[id*='Div']").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myCalss并且id属性值含有Div的元素背景变为绿色">
  30. <hr><hr>
  31. <div class="myClass" id="myDivId1">
  32.     这是div,calss为myClass，id为myDivId1
  33. </div>
  34. <br>
  35. <div class="myClass" id="myDivId2">
  36.     这是div,calss为myClass，id为myDivId2
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" id="mySpanId1">
  44.         这是span,calss为myClass,mySpanId1
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


复合属性选择器：$("选择器[属性名='值'][]...")

包含多个属性条件的选择器
改变calss为myClas并且存在属性id的div元素背景变为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $("div[class='myClass'][id]").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29.     <input id="id1" type="button" value="改变calss为myClas并且存在属性id的div元素背景变为绿色">
  30.     <hr><hr>
  31.     <div class="myClass" id="divId1">
  32.         这是div,calss为myClass，id为divId1
  33.     </div>
  34.     <br>
  35.     <div class="myClass" id="divId2">
  36.         这是div,calss为myClass，id为divId2
  37.     </div>
  38.     <br>
  39.     <span class="myClass" id="myspanid">
  40.         这是span,calss为myClass,id为myspanid
  41.     </span>
  42. </body>
  43. </html>
复制代码
单击前


单击后


过滤选择器

首元素选择器：${选择器：first}

获得指定选择器的元素中的第一个元素
改变类名为myClass的第一个元素的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass:first").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的第一个元素的背景颜色为绿色">
  30. <hr><hr>
  31. <div class="myClass" >
  32.     这是div,calss为myClass
  33. </div>
  34. <br>
  35. <div class="myClass" >
  36.     这是div,calss为myClass
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" >
  44.         这是span,calss为myClass
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


尾元素选择器：${选择器：last}

获得指定选择器的元素中的最后一个元素
改变类名为myClass的最后一个元素的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass:last").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的最后一个元素的背景颜色为绿色">
  30. <hr><hr>
  31. <div class="myClass" >
  32.     这是div,calss为myClass
  33. </div>
  34. <br>
  35. <div class="myClass" >
  36.     这是div,calss为myClass
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" >
  44.         这是span,calss为myClass
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


非元素选择器：${选择器1：not(选择器2)}

获得指定选择器1的元素中不包含选择器2的元素
改变类名为myClass的元素中不包含span元素的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass:not(span)").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的元素中不包含span元素的背景颜色为绿色">
  30. <hr><hr>
  31. <div class="myClass" >
  32.     这是div,calss为myClass
  33. </div>
  34. <br>
  35. <div class="myClass" >
  36.     这是div,calss为myClass
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" >
  44.         这是span,calss为myClass
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


偶数选择器：${选择器：even}

获得指定选择器的元素中索引为偶数的元素，索引从0开始计数
改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass:even").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色">
  30. <hr><hr>
  31. <div class="myClass" >
  32.     这是div,calss为myClass
  33. </div>
  34. <br>
  35. <div class="myClass" >
  36.     这是div,calss为myClass
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" >
  44.         这是span,calss为myClass
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


奇数选择器：${选择器：odd}

获得指定选择器的元素中索引为奇数的元素，索引从0开始计数
改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass:odd").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色">
  30. <hr><hr>
  31. <div class="myClass" >
  32.     这是div,calss为myClass
  33. </div>
  34. <br>
  35. <div class="myClass" >
  36.     这是div,calss为myClass
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" >
  44.         这是span,calss为myClass
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


等于索引选择器：${选择器：eq(index)}

获得指定选择器的元素中等于指定索引的元素，索引从0开始计数
改变类名为myClass的元素中索引为2的元素的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass:eq(2)").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的元素中索引为2的元素的背景颜色为绿色">
  30. <hr><hr>
  31. <div class="myClass" >
  32.     这是div,calss为myClass
  33. </div>
  34. <br>
  35. <div class="myClass" >
  36.     这是div,calss为myClass
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" >
  44.         这是span,calss为myClass
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


大于索引选择器：${选择器：gt(index)}

获得指定选择器的元素中大于指定索引的元素，索引从0开始计数
改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass:gt(2)").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色">
  30. <hr><hr>
  31. <div class="myClass" >
  32.     这是div,calss为myClass
  33. </div>
  34. <br>
  35. <div class="myClass" >
  36.     这是div,calss为myClass
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" >
  44.         这是span,calss为myClass
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


小于索引选择器：${选择器：lt(index)}

获得指定选择器的元素中小于指定索引的元素，索引从0开始计数
改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass:lt(2)").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色">
  30. <hr><hr>
  31. <div class="myClass" >
  32.     这是div,calss为myClass
  33. </div>
  34. <br>
  35. <div class="myClass" >
  36.     这是div,calss为myClass
  37. </div>
  38. <br>
  39. <div class="myClass">
  40.     这是div,calss为myClass
  41. </div>
  42. <br>
  43. <span class="myClass" >
  44.         这是span,calss为myClass
  45.     </span>
  46. </body>
  47. </html>
复制代码
单击前


单击后


标题选择器：${：header}

获得标题元素，固定写法
改变所有标题的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(":header").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变所有标题的背景颜色为绿色">
  30. <hr><hr>
  31. <h1>标题1</h1>
  32. <h3>标题3</h3>
  33. <div class="myClass" >
  34.     这是div,calss为myClass
  35. </div>
  36. <br>
  37. <div class="myClass" >
  38.     <h2>标题2</h2>
  39.     这是div,calss为myClass
  40.     <h4>标题4</h4>
  41. </div>
  42. <br>
  43. <div class="myClass">
  44.     这是div,calss为myClass
  45. </div>
  46. <br>
  47. <span class="myClass" >
  48.     <h6>标题6</h6>
  49.     这是span,calss为myClass
  50. </span>
  51. </body>
  52. </html>
复制代码
单击前


单击后


改变类名为myClass的元素下所有标题的背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         div{
  8.             background-color:dodgerblue ;
  9.             width: 100%;
  10.             height: 200px;
  11.         }
  12.         span{
  13.             background-color:pink ;
  14.             width:400px;
  15.             height: 70px;
  16.             display: block;
  17.         }
  18.     </style>
  19.     <script>
  20.         $(function () {
  21.             $("#id1").click(function () {
  22.                 $(".myClass :header").css("backgroundColor","green");
  23.             });
  24.         });
  25.     </script>
  27. </head>
  28. <body>
  29. <input id="id1" type="button" value="改变类名为myClass的元素下所有标题的背景颜色为绿色">
  30. <hr><hr>
  31. <h1>标题1</h1>
  32. <h3>标题3</h3>
  33. <div class="myClass" >
  34.     这是div,calss为myClass
  35. </div>
  36. <br>
  37. <div class="myClass" >
  38.     <h2>标题2</h2>
  39.     这是div,calss为myClass
  40.     <h4>标题4</h4>
  41. </div>
  42. <br>
  43. <div class="myClass">
  44.     这是div,calss为myClass
  45. </div>
  46. <br>
  47. <span class="myClass" >
  48.     <h6>标题6</h6>
  49.     这是span,calss为myClass
  50. </span>
  51. </body>
  52. </html>
复制代码
单击前


单击后


表单过滤选择器

可用元素选择器：${:enabled}

获得满足选择器中可用的元素
单击改变from表单内可用的input背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         input{
  8.             background-color:dodgerblue ;
  9.             width: 700px;
  10.             height: 50px;
  11.             font-size: 30px;
  12.         }
  13.     </style>
  14.     <script>
  15.         $(function () {
  16.             $("#id1").click(function () {
  17.                 $("form input:enabled").css("backgroundColor","green");
  18.             });
  19.         });
  20.     </script>
  22. </head>
  23. <body>
  24. <input id="id1" type="button" value="单击改变from表单内可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
  25. <input value="这是表单外的input，disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
  26. <form>
  27.     <input value="这是表单内的input，disabled=disabled" type="text" name="iName1" disabled="disabled"><br>
  28.     <input value="这是表单内的input" type="text" name="iName2" ><br>
  29.     <input value="这是表单内的input，disabled=disabled" type="text" name="iName3" disabled="disabled"><br>
  30.     <input value="这是表单内的input" type="text" name="iName4" ><br>
  31. </form>
  32. </body>
  33. </html>
复制代码
单击前


单击后


不可用元素选择器：${:disabled}

获得满足选择器不可用的元素
单击改变from表单内不可用的input背景颜色为绿色
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         input{
  8.             background-color:dodgerblue ;
  9.             width: 700px;
  10.             height: 50px;
  11.             font-size: 30px;
  12.         }
  13.     </style>
  14.     <script>
  15.         $(function () {
  16.             $("#id1").click(function () {
  17.                 $("form input:disabled").css("backgroundColor","green");
  18.             });
  19.         });
  20.     </script>
  22. </head>
  23. <body>
  24. <input id="id1" type="button" value="单击改变from表单不可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
  25. <input value="这是表单外的input，disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
  26. <form>
  27.     <input value="这是表单内的input，disabled=disabled" type="text" name="iName1" disabled="disabled"><br>
  28.     <input value="这是表单内的input" type="text" name="iName2" ><br>
  29.     <input value="这是表单内的input，disabled=disabled" type="text" name="iName3" disabled="disabled"><br>
  30.     <input value="这是表单内的input" type="text" name="iName4" ><br>
  31. </form>
  32. </body>
  33. </html>
复制代码
单击前


单击后


选中选择器

单复选框：${:checked}

获得单选/复选框选中的元素
单击选中复选框选中的值
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         #id1{
  8.             background-color:dodgerblue ;
  9.             width: 700px;
  10.             height: 50px;
  11.             font-size: 30px;
  12.         }
  13.     </style>
  14.     <script>
  15.         $(function () {
  16.             $("#id1").click(function () {
  17.                 var $input = $("input[type='checkbox']:checked");;
  18.                 for(i=0;i<$input.length;i++){
  19.                     console.log($input[i].value)
  20.                 }
  22.             });
  23.         });
  24.     </script>
  26. </head>
  27. <body>
  28. <input id="id1" type="button" value="单击输出复选框选中的值" style="background-color: burlywood"><br><br><br>
  30.     <form>
  31.         选择性质，单选<br>
  32.         <input type="radio" name="nature" value="渣男">渣男<br>
  33.         <input type="radio" name="nature" value="极品">极品<br><br><br>
  34.         选择爱好，多选<br>
  35.         <input type="checkbox" name="like" value="编程">编程<br>
  36.         <input type="checkbox" name="like" value="打游戏">打游戏<br>
  37.         <input type="checkbox" name="like" value="学习">学习<br>
  38.         <input type="checkbox" name="like" value="游泳">游泳<br>
  39.     </form>
  40. </body>
  41. </html>
复制代码
单击前


勾选


单击后，打印了复选框勾选的值


下拉框：${:selected}

获得下拉框选中的元素
单击输出复选选择框的选中的值
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>JQuery选择器</title>
  5.     <script src="js/jquery-3.3.1.min.js"></script>
  6.     <style>
  7.         #id1{
  8.             width: 700px;
  9.             height: 50px;
  10.             font-size: 30px;
  11.         }
  12.         select{
  13.             width: 300px;
  14.             height: 500px;
  15.             font-size: 30px;
  16.         }
  17.     </style>
  18.     <script>
  19.         $(function () {
  20.             $("#id1").click(function () {
  21.                 var $select = $("select > option:selected");
  22.                 for(i=0;i<$select.length;i++){
  23.                    console.log($select[i].value)
  24.                 }
  25.             });
  26.         });
  27.     </script>
  29. </head>
  30. <body>
  31. <input id="id1" type="button" value="单击输出复选选择框的选中的值" style="background-color: burlywood"><br><br><br>
  32.     <form>
  33.         <select name="like" multiple="multiple">
  34.             <option >编程</option>
  35.             <option >打游戏</option>
  36.             <option >学习</option>
  37.             <option >游泳</option>
  38.         </select>
  39.     </form>
  40. </body>
  41. </html>
复制代码
单击前


复选选择框选中值


单击后



<div id="marketingBox" class="marketing-box"><div class="marketing-content">


CSDN 社区图书馆，开张营业！


深读计划，写书评领图书福利~

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2025-5-1 19:56 , Processed in 0.144703 second(s), 26 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表