立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › JQuery选择器超级详细

赞

评论

收藏

[jQuery] JQuery选择器超级详细

开发技术 开发技术 发布于：2021-07-13 23:34 | 阅读数：569 | 评论：0

基本选择器
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的元素背景为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 50px;
    }
    span{
      background-color:pink ;
      width: 100%;
      height: 20px;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $("#mydivid").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="改变id为mydivid的元素为绿色">
  <hr><hr>
  <div id="mydivid">
    这是div,id为mydivid
  </div>
  <span id="myspanid">
    这是span,id为myspanid
  </span>
</body>
</html>
单击前
DSC0000.png

单击后
DSC0001.png

  
类选择器：$(".class的属性值")
获取与指定的class属性值匹配的元素
单击按钮，将类名为myClassName的元素背景变为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 50px;
    }
    span{
      background-color:pink ;
      width: 100%;
      height: 20px;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClassName").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="改变class为myClassName的元素为绿色">
  <hr><hr>
  <div id="mydivid" class="myClassName">
    这是div,id为mydivid，calss为myClassName
    <span >
    这是span
    </span>
  </div>
  <br>
  <div  class="myClassName">
    这是div,calss为myClassName
  </div>
  <br>
  <span id="myspanid" class="myClassName">
    这是span,id为myspanid，calss为myClassName
  </span>
</body>
</html>
单击前
DSC0002.png

单击后
DSC0003.png

  
标签选择器：$("标签名")
获取所有匹配标签名称的元素
单击按钮，将标签为div的元素背景变为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 50px;
    }
    span{
      background-color:pink ;
      width: 100%;
      height: 20px;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $("div").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="改变标签为div的元素为绿色">
  <hr><hr>
  <div id="mydivid" class="myClassName">
    这是div,id为mydivid，calss为myClassName
    <span >
    这是span
    </span>
  </div>
  <br>
  <div  class="myClassName">
    这是div,calss为myClassName
  </div>
  <br>
  <span id="myspanid" class="myClassName">
    这是span,id为myspanid，calss为myClassName
  </span>
</body>
</html>
单击前
DSC0004.png

单击后
DSC0005.png

  
并集选择器：$("选择器1，选择器2")
获取多个选择器选中的所有元素 
单击按钮，将标签为span的元素，或者id为myDivId的元素背景变为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 50px;
    }
    span{
      background-color:pink ;
      width: 100%;
      height: 20px;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $("span,#myDivId").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="改变标签为span的元素，或者id为myDivId的元素背景变为绿色">
  <hr><hr>
  <div >
    这是div
    <span >
    这是span
    </span>
  </div>
  <br>
  <div id="myDivId">
    这是div,id为myDivId
  </div>
  <br>
  <span id="myspanid">
    这是span,id为myspanid
  </span>
</body>
</html>
单击前
DSC0006.png

单击后
DSC0007.png

  层级选择器
  
后代选择器：$("选择器1   选择器2")
选择选择器1内部的所有选择器2
改变id为myDivId的元素下的，所有span元素背景变为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width: 100px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $("#myDivId   span").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="改变id为myDivId的元素下的，所有span元素背景变为绿色">
  <hr><hr>
  <div id="myDivId">
    这是div,id为myDivId
    <br>
    <span >
      这是span
    </span>
    <br>
    <span  style="background-color: pink">
      这是span
      <br>
      <br>
      <span style="background-color: deeppink;height: 20px">
        这是span
      </span>
      <br>
    </span>
  </div>
  <br>
  <div >
    这是div
    <br>
    <span >
      这是span
    </span>
  </div>
  <br>
  <span id="myspanid">
    这是span,id为myspanid
  </span>
</body>
</html>
单击前
DSC0008.png

单击后
DSC0009.png

  
子选择器：$("选择器1 > 选择器2")
选择选择器1内部的所有子选择器2
改变div元素下的，所有子span元素背景变为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width: 100px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $("div  > span").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="改变div元素下的，所有子span元素背景变为绿色">
  <hr><hr>
  <div id="myDivId">
    这是div,id为myDivId
    <br>
    <span >
      这是span
    </span>
    <br>
    <span  style="background-color: pink">
      这是span
      <br>
      <br>
      <span style="background-color: deeppink;height: 20px">
        这是span
      </span>
      <br>
    </span>
  </div>
  <br>
  <div >
    这是div
    <br>
    <span >
      这是span
    </span>
  </div>
  <br>
  <span id="myspanid">
    这是span,id为myspanid
  </span>
</body>
</html>
单击前
DSC00010.png

单击后
DSC00011.png

  属性选择器
  
属性名称选择器：$("选择器[属性名]")
包含指定属性的选择器
改变类名为myCalss并且含有id属性的元素背景变为绿色 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass[id]").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="改变类名为myCalss并且含有id属性的元素背景变为绿色">
  <hr><hr>
  <div class="myClass" id="divId1">
    这是div,calss为myClass，id为divId1
  </div>
  <br>
  <div class="myClass">
    这是div,calss为myClass
  </div>
  <br>
  <span class="myClass" id="myspanid">
    这是span,calss为myClass,id为myspanid
  </span>
</body>
</html>
单击前
DSC00012.png

单击后
DSC00013.png

  
属性选择器：
  $("选择器[属性名='值']")
包含指定属性等于指定值的选择器
改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass[id='myDivId1']").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 ">
<hr><hr>
<div class="myClass" id="myDivId1">
  这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">
  这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">
    这是span,calss为myClass,mySpanId1
  </span>
</body>
</html>
单击前
DSC00014.png

单击后
DSC00015.png

  $("选择器[属性名!='值']")
包含指定属性不等于指定值的选择器
改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass[id!='myDivId1']").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色">
<hr><hr>
<div class="myClass" id="myDivId1">
  这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">
  这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">
    这是span,calss为myClass,mySpanId1
  </span>
</body>
</html>
单击前
DSC00016.png

单击后
DSC00017.png

  $("选择器[属性名^='值']") 
包含指定属性以指定值开头的选择器 
改变类名为myCalss并且id属性以my开头的元素背景变为绿色 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass[id^='my']").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且id属性以my开头的元素背景变为绿色">
<hr><hr>
<div class="myClass" id="myDivId1">
  这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">
  这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">
    这是span,calss为myClass,mySpanId1
  </span>
</body>
</html>
单击前
DSC00018.png

单击后
DSC00019.png

  $("选择器[属性名$='值']")
包含指定属性以指定值结尾的选择器 
改变类名为myCalss并且id属性以Id1的元素背景变为绿色 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass[id$='Id1']").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且id属性以Id1的元素背景变为绿色">
<hr><hr>
<div class="myClass" id="myDivId1">
  这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">
  这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">
    这是span,calss为myClass,mySpanId1
  </span>
</body>
</html>
单击前
DSC00020.png

单击后
DSC00021.png

  $("选择器[属性名*='值']")
包含指定属性含有指定值的选择器 
改变类名为myCalss并且id属性值含有Div的元素背景变为绿色 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass[id*='Div']").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且id属性值含有Div的元素背景变为绿色">
<hr><hr>
<div class="myClass" id="myDivId1">
  这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">
  这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">
    这是span,calss为myClass,mySpanId1
  </span>
</body>
</html>
单击前
DSC00022.png

单击后
DSC00023.png

  
复合属性选择器：$("选择器[属性名='值'][]...")
包含多个属性条件的选择器
改变calss为myClas并且存在属性id的div元素背景变为绿色 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $("div[class='myClass'][id]").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
  <input id="id1" type="button" value="改变calss为myClas并且存在属性id的div元素背景变为绿色">
  <hr><hr>
  <div class="myClass" id="divId1">
    这是div,calss为myClass，id为divId1
  </div>
  <br>
  <div class="myClass" id="divId2">
    这是div,calss为myClass，id为divId2
  </div>
  <br>
  <span class="myClass" id="myspanid">
    这是span,calss为myClass,id为myspanid
  </span>
</body>
</html>
单击前
DSC00024.png

单击后
DSC00025.png

  过滤选择器
  
首元素选择器：${选择器：first}
获得指定选择器的元素中的第一个元素
改变类名为myClass的第一个元素的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass:first").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的第一个元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
    这是span,calss为myClass
  </span>
</body>
</html>
单击前
DSC00026.png

单击后
DSC00027.png

  
尾元素选择器：${选择器：last}
获得指定选择器的元素中的最后一个元素
改变类名为myClass的最后一个元素的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass:last").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的最后一个元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
    这是span,calss为myClass
  </span>
</body>
</html>
单击前
DSC00028.png

单击后
DSC00029.png

  
非元素选择器：${选择器1：not(选择器2)}
获得指定选择器1的元素中不包含选择器2的元素
改变类名为myClass的元素中不包含span元素的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass:not(span)").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中不包含span元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
    这是span,calss为myClass
  </span>
</body>
</html>
单击前
DSC00030.png

单击后
DSC00031.png

  
偶数选择器：${选择器：even}
获得指定选择器的元素中索引为偶数的元素，索引从0开始计数
改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass:even").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
    这是span,calss为myClass
  </span>
</body>
</html>
单击前
DSC00032.png

单击后
DSC00033.png

  
奇数选择器：${选择器：odd}
获得指定选择器的元素中索引为奇数的元素，索引从0开始计数
改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass:odd").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
    这是span,calss为myClass
  </span>
</body>
</html>
单击前
DSC00034.png

单击后
DSC00035.png

  
等于索引选择器：${选择器：eq(index)}
获得指定选择器的元素中等于指定索引的元素，索引从0开始计数
改变类名为myClass的元素中索引为2的元素的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass:eq(2)").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引为2的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
    这是span,calss为myClass
  </span>
</body>
</html>
单击前
DSC00036.png

单击后
DSC00037.png

  
大于索引选择器：${选择器：gt(index)}
获得指定选择器的元素中大于指定索引的元素，索引从0开始计数
改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass:gt(2)").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
    这是span,calss为myClass
  </span>
</body>
</html>
单击前
DSC00038.png

单击后
DSC00039.png

  
小于索引选择器：${选择器：lt(index)}
获得指定选择器的元素中小于指定索引的元素，索引从0开始计数
改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass:lt(2)").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
    这是span,calss为myClass
  </span>
</body>
</html>
单击前
DSC00040.png

单击后
DSC00041.png

  
标题选择器：${：header}
获得标题元素，固定写法
改变所有标题的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(":header").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变所有标题的背景颜色为绿色">
<hr><hr>
<h1>标题1</h1>
<h3>标题3</h3>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  <h2>标题2</h2>
  这是div,calss为myClass
  <h4>标题4</h4>
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
  <h6>标题6</h6>
  这是span,calss为myClass
</span>
</body>
</html>
单击前
DSC00042.png

单击后
DSC00043.png

改变类名为myClass的元素下所有标题的背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    div{
      background-color:dodgerblue ;
      width: 100%;
      height: 200px;
    }
    span{
      background-color:pink ;
      width:400px;
      height: 70px;
      display: block;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $(".myClass :header").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素下所有标题的背景颜色为绿色">
<hr><hr>
<h1>标题1</h1>
<h3>标题3</h3>
<div class="myClass" >
  这是div,calss为myClass
</div>
<br>
<div class="myClass" >
  <h2>标题2</h2>
  这是div,calss为myClass
  <h4>标题4</h4>
</div>
<br>
<div class="myClass">
  这是div,calss为myClass
</div>
<br>
<span class="myClass" >
  <h6>标题6</h6>
  这是span,calss为myClass
</span>
</body>
</html>
单击前
DSC00044.png

单击后
DSC00045.png

  表单过滤选择器
  
可用元素选择器：${:enabled}
获得满足选择器中可用的元素
单击改变from表单内可用的input背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    input{
      background-color:dodgerblue ;
      width: 700px;
      height: 50px;
      font-size: 30px;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $("form input:enabled").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="单击改变from表单内可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
<input value="这是表单外的input，disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
<form>
  <input value="这是表单内的input，disabled=disabled" type="text" name="iName1" disabled="disabled"><br>
  <input value="这是表单内的input" type="text" name="iName2" ><br>
  <input value="这是表单内的input，disabled=disabled" type="text" name="iName3" disabled="disabled"><br>
  <input value="这是表单内的input" type="text" name="iName4" ><br>
</form>
</body>
</html>
单击前
DSC00046.png

单击后
DSC00047.png

  
不可用元素选择器：${:disabled}
获得满足选择器不可用的元素
单击改变from表单内不可用的input背景颜色为绿色
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    input{
      background-color:dodgerblue ;
      width: 700px;
      height: 50px;
      font-size: 30px;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        $("form input:disabled").css("backgroundColor","green");
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="单击改变from表单不可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
<input value="这是表单外的input，disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
<form>
  <input value="这是表单内的input，disabled=disabled" type="text" name="iName1" disabled="disabled"><br>
  <input value="这是表单内的input" type="text" name="iName2" ><br>
  <input value="这是表单内的input，disabled=disabled" type="text" name="iName3" disabled="disabled"><br>
  <input value="这是表单内的input" type="text" name="iName4" ><br>
</form>
</body>
</html>
单击前
DSC00048.png

单击后
DSC00049.png

  
选中选择器
  单复选框：${:checked}
获得单选/复选框选中的元素
单击选中复选框选中的值
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    #id1{
      background-color:dodgerblue ;
      width: 700px;
      height: 50px;
      font-size: 30px;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        var $input = $("input[type='checkbox']:checked");;
        for(i=0;i<$input.length;i++){
          console.log($input[i].value)
        }
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="单击输出复选框选中的值" style="background-color: burlywood"><br><br><br>
  <form>
    选择性质，单选<br>
    <input type="radio" name="nature" value="渣男">渣男<br>
    <input type="radio" name="nature" value="极品">极品<br><br><br>
    选择爱好，多选<br>
    <input type="checkbox" name="like" value="编程">编程<br>
    <input type="checkbox" name="like" value="打游戏">打游戏<br>
    <input type="checkbox" name="like" value="学习">学习<br>
    <input type="checkbox" name="like" value="游泳">游泳<br>
  </form>
</body>
</html>
单击前
DSC00050.png

勾选
DSC00051.png

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

  下拉框：${:selected}
获得下拉框选中的元素
单击输出复选选择框的选中的值
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JQuery选择器</title>
  <script src="js/jquery-3.3.1.min.js"></script>
  <style>
    #id1{
      width: 700px;
      height: 50px;
      font-size: 30px;
    }
    select{
      width: 300px;
      height: 500px;
      font-size: 30px;
    }
  </style>
  <script>
    $(function () {
      $("#id1").click(function () {
        var $select = $("select > option:selected");
        for(i=0;i<$select.length;i++){
           console.log($select[i].value)
        }
      });
    });
  </script>
</head>
<body>
<input id="id1" type="button" value="单击输出复选选择框的选中的值" style="background-color: burlywood"><br><br><br>
  <form>
    <select name="like" multiple="multiple">
      <option >编程</option>
      <option >打游戏</option>
      <option >学习</option>
      <option >游泳</option>
    </select>
  </form>
</body>
</html>
单击前
DSC00053.png

复选选择框选中值
DSC00054.png

单击后
DSC00055.png



关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
284 经验
1094 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2025  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2