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>

1.4 可见选择器

  • $("div:visible") 匹配所有显示的div (display 属性none)

  • $("div:hidden") 匹配所有隐藏的div

隐藏显示相关的方法

  • $("#abc").show() 让隐藏的元素显示

  • $("#abc").hide() 让显示的元素隐藏

  • $("#abc").toggle() 隐藏显示状态切换

1.5 内容选择器

  • $("div:has(p)") 匹配包含p子元素的div

  • $("div:empty") 匹配空的div

  • $("div:parent") 匹配非空的div

  • $("div:contains('xxx')") 匹配包含xxx文本的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() {
         /* ---------内容选择器--------- */
         //改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347 id="b1" <div>xxidxx</div>
         $("#b1").click(function () {
             $("div:contains('id')").css("background-color","#FF6347");
         });
 ​
         //改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32 id="b2"
         $("#b2").click(function () {
             $("div:empty").css("background-color","#9ACD32");
         });
 ​
         //改变包含div子元素的div元素的背景色为 #FF0033 id="b3"
         $("#b3").click(function () {
             $("div:has(div)").css("background-color","#FF0033");
         });
 ​
         //改变非空div元素的背景色为 #006400 id="b4"
         $("#b4").click(function () {
             $("div:parent").css("background-color","#006400");
         });
 ​
         //====================================================
 ​
         /* ---------可见选择器练习--------- */
         //改变所有可见 div 元素背景色为 #F08080 id="b5"
         $("#b5").click(function () {
             $("div:visible").css("background-color","#F08080");
         });
 ​
         //让所有隐藏的div元素显示, 并改变背景色为 #FF69B4 id="b6"
         $("#b6").click(function () {
             $("div:hidden").css("background-color","#FF69B4").show();
         });
 ​
     })
 </script>
 </head>
 ​
 <body>
   <input type="button" value=" 改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347"
     id="b1" />
   <input type="button" value=" 改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32"
     id="b2" />
   <input type="button" value=" 改变包含div子元素的div元素的背景色为 #FF0033" id="b3" />
 ​
   <input type="button" value=" 改变非空div元素的背景色为 #006400" id="b4" />
 ​
   <hr />
   <hr />
 ​
   <input type="button" value=" 改变所有可见 div 元素背景色为 #F08080" id="b5" />
   <input type="button" value=" 让所有隐藏元素显示, 并改变背景色为 #FF69B4" id="b6" />
 ​
   <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"></div>
     <div class="mini">class是 mini</div>
   </div>
 ​
   <br>
   <div id="mover"></div>
   <br>
   <div style="display: none">看不见我...,看不见我....</div>
 </body>
 </html>

1.6 属性选择器

  • $("div[属性名]") 匹配包含某个属性的所有div

  • $("div[属性名='值']") 匹配某个属性名=值的所有div

  • $("div[属性名!='值']") 匹配某个属性名不等于值的所有div

1.7 子元素选择器

  • $("div:first-child") 匹配是div并且是第一个并且是子元素

  • $("div:last-child") 匹配是div并且是最后一个并且是子元素

  • $("div:nth-child(n)") 匹配是div并且是第n个并且是子元素 n从1开始 

 <!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() {
         /* ---------属性选择器练习--------- */
         //改变包含id属性的 div 元素的背景色为 #FF6347 id="b1"
     $("#b1").click(function () {
       $("div[id]").css("background-color","#FF6347");
     });
 ​
         //改变包含属性title='aa' 的div 元素的背景色为 #9ACD32 id="b2"
     $("#b2").click(function () {
       $("div[title='aa']").css("background-color","#9ACD32");
     });
 ​
         //改变type属性不等于button的input 元素的背景色为 #FF0033 id="b3" 
     $("#b3").click(function () {
       $("input[type!='button']").css("background-color","#FF0033");
     });
 ​
         //=================================================
 ​
         /* ---------子元素选择器练习--------- */
         //改变div 第二个子元素的背景色为 #006400  id="b4"
     $("#b4").click(function () {
       $("div:nth-child(2)").css("background-color","#006400");
     });
         //改变div 第一个子元素的背景色为 #FF69B4  id="b5"
     $("#b5").click(function () {
       $("div:first-child").css("background-color","#FF69B4");
     });
 ​
     })
 </script>
 </head>
 ​
 <body>
   <input type="button" value=" 改变包含id属性的 div 元素的背景色为 #FF6347" id="b1" />
   <input type="button" value=" 改变包含属性title='aa' 的div 元素的背景色为 #9ACD32"
     id="b2" />
   <input type="button" value=" 改变type属性不等于button的input 元素的背景色为 #FF0033"
     id="b3" />
 ​
   <hr />
   <hr />
 ​
 ​
   <input type="button" value=" 改变div 第二个子元素的背景色为 #006400" id="b4" />
   <input type="button" value=" 改变div 第一个子元素的背景色为 #FF69B4" 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" title="aa">
     class是 one title为aa
     <div class="mini">class是 mini</div>
     <div class="mini">class是 mini</div>
   </div>
   <div class="one" title="bb">
     class是 one title为bb
     <div class="mini01">class是 mini01</div>
     <div class="mini">class是 mini</div>
   </div>
 ​
   <br>
   <div id="mover">id为mover 动画</div>
   <br>
   <input type="submit" />
 </body>
 </html>

1.8 表单选择器

  • $(":input") 匹配所有的控件 还包括 select 和 textarea文本域

  • $(":password") 匹配所有的密码框

  • $(":radio") 匹配所有的单选

  • $(":checkbox") 匹配所有的多选

  • $(":checked") 匹配所有选中的单选、多选和下拉选

  • $("input:checked") 匹配所有选中的单选和多选

  • $(":selected") 匹配所有选中的下拉选 

 <!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() {
         /* ---------表单选择器练习--------- */
         //改变所有:input 元素的背景色为 #F08080 id="b1"
     $("#b1").click(function () {
       $(":input").css("background-color","#F08080");
     });
 ​
         //改变:password 元素的背景色为 #9ACD32 id="b2" 
     $("#b2").click(function () {
       $(":password").css("background-color","#9ACD32");
     });
 ​
         //弹出 :radio 元素的个数     id="b3"
     $("#b3").click(function () {
       alert($(":radio").length);
     });
 ​
         //弹出所有 :checked 元素的value值 id="b4"
     $("#b4").click(function () {
       $(":checked").each(function () {
         //取出当前遍历的每一个对象
         alert($(this).val());
         
       });
     });
 ​
         //弹出所有 :selected 元素的value值 id="b5"
     $("#b5").click(function () {
       alert($(":selected").val());
     });
 ​
     })
 </script>
 </head>
 ​
 <body>
   <input type="button" value=" 改变所有input 元素的背景色为 #F08080" id="b1" />
   <input type="button" value=" 改变:password 元素的背景色为 #9ACD32" id="b2" />
   <input type="button" value=" 打印 :radio 元素的个数" id="b3" />
   <input type="button" value=" 打印所有 :checked 元素的value值" id="b4" />
   <input type="button" value=" 打印所有 :selected 元素的value值" id="b5" />
 ​
   <h1>天气冷了</h1>
   用户名：
   <input type="text" disabled="disabled" name="username" value="被禁用了" />
   密码：
   <input type="password" name="password" value="123" /> 性别：
   <input type="radio" name="gender" value="man" /> 男
   <input type="radio" name="gender" value="woman" checked="checked" />女
   <br>
   <br> 爱好：
   <input type="checkbox" name="like" value="lanqiu" checked="checked" />
   篮球
   <input type="checkbox" name="like" value="taiqiu" /> 台球
   <input type="checkbox" name="like" value="zuqiu" /> 足球 出生地：
   <select name="city">
     <option value="beijing">北京</option>
     <option value="shanghai" selected="selected">上海</option> 
    <option value="guangzhou">广州</option> 
  </select> 简介： 
  <textarea name="discription" rows="2" cols="10">请求输入个人描述...</textarea> 
​ 
</body> 
</html>

 

posted @ 2021-08-19 23:47  Coder_Cui  阅读(125)  评论(0)  编辑  收藏  举报