WEB01_Day05(下)-jQuery选择器

Posted 越努力，越幸运，2021，小崔，加油！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WEB01_Day05(下)-jQuery选择器相关的知识，希望对你有一定的参考价值。

一、jQuery 选择器

1.1 基础选择器

  • 标签选择器 $("div")

  • id 选择器 $("#id")

  • 类选择器 $(".class")

  • 分组选择器 $("div,#id,.class")

  • 任意选择器 $("*")

不存在优先级,此处是选择器，CSS 样式是有优先级的

 <!DOCTYPE>
 <html>
 <head>
 <title>基本选择器练习</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css">
 body{
     font-family: "微软雅黑"
 }
 div,span {
     width: 140px;
     height: 140px;
     margin: 20px;
     background: #9999CC;
     border: #000 1px solid;
     float: left;
     font-size: 17px;
     font-family: Roman;
 }
 ​
 div.mini {
     width: 40px;
     height: 43px;
     background: #CC66FF;
     border: #000 1px solid;
     font-size: 12px;
     font-family: Roman;
 }
 input{ margin: 5px 5px; }
 </style>
 <!--引入jquery的js库-->
 <script src="../js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
     //页面加载完毕以后执行的事件 
     //window.onload = function () {}
 ​
     //$(function () {})
     //$().ready(function () {})
     $(document).ready(function() {
         /* ---------基本选择器练习--------- */
         //改变元素名为 <div> 的所有元素的背景色为 #FF69B4  id="b1"
         $("#b1").click(function () {
             //标签选择器
             $("div").css("background-color","#FF69B4");
         });
     
         //改变 id 为 one 的元素的背景色为 #9ACD32  id="b2"
         $("#b2").click(function () {
             //id选择器
             $("#one").css("background-color","#9ACD32");
         });
 ​
         //改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"
         $("#b3").click(function () {
             //类选择器
             $(".mini").css("background-color","#FF0033");
         })
 ​
         //改变所有元素的背景色为 #FDF5E6  id="b4"
         $("#b4").click(function () {
             //任意选择器
             $("*").css("background-color","#FDF5E6");
         })      
 ​
         //改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493  id="b5"
         $("#b5").click(function () {
             //组合选择器
             $("span,#two").css("background-color","#FF1493");
         })  
         
         //改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400  id="b6"
         $("#b6").click(function () {
             $("span,#two,#one,.mini").css("background-color","#006400");
             
         })  
     });
 </script>
 </head>
 ​
 <body>
     <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
     <input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
     <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
     <input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" />
     <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"
         id="b5" />
     <input type="button"
         value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"
         id="b6" />
 ​
 ​
     <h1>天气冷了</h1>
     <h2>天气又冷了</h2>
 ​
     <div id="one">id为one</div>
 ​
     <div id="two" class="mini">
         id为two class是 mini
         <div class="mini"> class是 mini</div>
     </div>
 ​
     <div class="one">
     class是 one 
<div class="mini"> class是 mini</div> 
<div class="mini"> class是 mini</div> 
</div> 
<div class="one"> 
    class是 one 
<div class="mini01"> class是 mini01</div> 
<div class="mini"> class是 mini</div> 
</div> 
​ 
<br> 
<div id="mover">动画</div> 
<br> 
<span class="spanone"> span </span> 
<span class="mini"> span class是mini </span> 
</body> 
</html>

1.2 层级选择器

  • $("div span") 匹配div里面的所有span元素包括子孙后代

  • $("div>span") 匹配div里面所有的span子元素

  • $("div+span") 匹配div的弟弟span

  • $("div~span") 匹配div的弟弟们span

层级相关的方法:

  • $("#abc").siblings("div") 匹配id为abc元素的所有兄弟

  • $("#abc").prev() 匹配id为abc元素的哥哥元素

  • $("#abc").prevAll() 匹配id为abc元素的哥哥们元素

  • $("#abc").next () 匹配id为abc元素的弟弟元素

  • $("#abc").nextAll() 匹配id为abc元素的弟弟们元素

  • $("#abc").parent() 匹配id为abc元素的父元素

  • $("#abc").children() 匹配id为abc元素的子元素们 

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>层级选择器</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css">
 div,span {
     width: 140px;
     height: 140px;
     margin: 20px;
     background: #9999CC;
     border: #000 1px solid;
     float: left;
     font-size: 17px;
     font-family: Roman;
 }
 ​
 div.mini {
     font-size: 14px;
     height: 53px;
     width: 47px;
     background: #CC66FF;
     border: #000 1px solid;
     font-family: Roman;
 }
 input{ margin: 5px 5px; }
 </style>
 ​
 <!--引入jquery的js库-->
 <script src="../js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 ​
     $().ready(function() {
         /* ---------层级选择器练习--------- */
         //改变 <body> 内所有 <div> 的背景色为 #F08080  id="b1"
         $("#b1").click(function () {
             $("body div").css("background-color","#F08080");
         });
 ​
         //改变 <body> 内子 <div> 的背景色为 #FF0033  id="b2"
         $("#b2").click(function () {
             $("body>div").css("background-color","#FF0033");
         });
         //改变 id 为 one 的下一个 <div> 的背景色为 #0000FF  id="b3"
         $("#b3").click(function () {
             $("#one+div").css("background-color","#0000FF");
             //$("#one").next("div").css("background-color","#0000FF");
         });
 ​
         //改变 id 为 two 的元素后面的所有兄弟<div>的元素（所有弟弟元素）的背景色为 #9ACD32  id="b4"
         $("#b4").click(function () {
             $("#two").nextAll("div").css("background-color","#9ACD32");
             //$("#two~div").css("background-color","#9ACD32");
         });
         
         //改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347  id="b5"
         $("#b5").click(function () {
             $("#two").siblings("div").css("background-color","#FF6347");
         }); 
     })
 </script>
 </head>
 ​
 <body>
     <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" />
     <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" />
     <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"
         id="b3" />
     <input type="button"
         value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" />
     <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"
         id="b5" />
 ​
     <h1>天气冷了</h1>
 ​
     <div id="one">id为one</div>
 ​
     <div id="two">
         id为two
         <div class="mini"> class是 mini</div>
     </div>
 ​
     <div class="one">
         class是 one
         <div class="mini"> class是 mini</div>
         <div class="mini"> class是 mini</div>
     </div> 
<div class="one"> 
class是 one 
<div class="mini01"> class是 mini01</div> 
<div class="mini"> class是 mini</div> 
</div> 
​ 
<br> 
<div id="mover">动画</div> 
<br> 
</body> 
</html>

1.3 过滤选择器

  • $("div:first") 匹配所有div中的第一个

  • $("div:last") 匹配所有div中的最后一个

  • $("div:eq(n)") 匹配所有div中下标等于n的

  • $("div:lt(n)") 匹配所有div中下标小于n的 n从0开始

  • $("div:gt(n)") 匹配所有div中下标大于n的

  • $("div:not(.abc)") 匹配所有div中class值不等于abc的

  • $("div:even") 匹配所有div中下标为偶数的

  • $("div:odd") 匹配所有div中下标为奇数的

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>基本过滤选择器</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css">
 div,span {
     width: 140px;
     height: 140px;
     margin: 20px;
     background: #9999CC;
     border: #000 1px solid;
     float: left;
     font-size: 17px;
     font-family: Roman;
 }
 ​
 div.mini {
     font-size: 14px;
     height: 53px;
     width: 47px;
     background: #CC66FF;
     border: #000 1px solid;
     font-family: Roman;
 }
 input{ margin: 5px 5px; }
 </style>
 ​
 <!--引入jquery的js库-->
 <script src="../js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 ​
     //在页面加载完毕之后运行
     $(function(){
         /* ---------基本过滤选择器练习--------- */
         //改变第一个 div 元素的背景色为 #FF6347  id="b1"
         $("#b1").click(function () {
             $("div:first").css("background-color","#FF6347");
         });
         
         //改变最后一个 div 元素的背景色为 #9ACD32 id="b2" 
         $("#b2").click(function () {
             $("div:last").css("background-color","#9ACD32");
         });
 ​
         //改变class不为 one 的所有 div 元素的背景色为 #FF0033 id="b3" 
         $("#b3").click(function () {
             $("div:not(.one)").css("background-color","#FF0033");
         });
 ​
         //改变索引值为等于 3 的 div 元素的背景色为 #006400  id="b4" 
         $("#b4").click(function () {
             $("div:eq(3)").css("background-color","#006400");
         });
 ​
         //改变索引值为小于 3 的 div 元素的背景色为 #FF69B4  id="b5"/>
         $("#b5").click(function () {
             $("div:lt(3)").css("background-color","#FF69B4");
         });
         
         //改变索引值为大于 3 的 div 元素的背景色为 #F08080  id="b6"
         $("#b6").click(function () {
             $("div:gt(3)").css("background-color","#F08080");
         });
         
         //改变索引值为偶数的 div 元素的背景色为 #FF6347 id="b7"
         $("#b7").click(function () {
             $("div:even").css("background-color","#FF6347");
         });
         
         //改变索引值为奇数的 div 元素的背景色为 #FF1493 id="b8"
         $("#b8").click(function () {
             $("div:odd").css("background-color","#FF1493");
         });
     })
 </script>
 </head>
 ​
 <body>
     <input type="button" value=" 改变第一个 div 元素的背景色为 #FF6347" id="b1" />
     <input type="button" value=" 改变最后一个 div 元素的背景色为 #9ACD32" id="b2" />
     <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" />
     <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4" />
     <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5" />
     <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6" />
     <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7" />
     <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8" />
 ​
     <h1>天气冷了</h1>
 ​
     <div id="one">id为one</div>
 ​
     <div id="two">
         id为two
         <div class="mini"> class是 mini</div>
     </div>
 ​
     <div class="one" title="aa">
         class是 one
 <div class="mini"> class是 mini</div> 
<div class="mini"> class是 mini</div> 
</div> 
<div class="one"> 
    class是 one 
<div class="mini01"> class是 mini01</div> 
<div class="mini"> class是 mini</div> 
</div> 
​ 
<br> 
<div id="mover">动画</div> 
<br> 
</body> 
</html>以上是关于WEB01_Day05(下)-jQuery选择器的主要内容，如果未能解决你的问题，请参考以下文章
 

 jQuery学习 day01


 day01_05.数学运算符


 day01jQuery节点操作


 python_day15_jquery


 JavaSE01_Day05(中)


 Web开发