選擇器 --- jQuery

阿新 • • 發佈：2020-07-14

選擇器：

　　基本選擇器：

　　　　$("#id值") $(".class值") $("標籤名")

　　　　瞭解：$("*")

　　　　理解：獲取多個選擇器

　　　　　　$("#id值,.class值")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" 
 content="text/html; charset=utf-8" />
 <title>01-基本選擇器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script  
type="text/javascript">
     $(function(){
         //選擇 id為 one 的元素
         $("#btn1").click(function(){
             $("#one").css("background-color","lightsteelblue");
         });
         //選擇 class 為 mini 的所有元素
         $("#btn2").click(function(){
             $(".mini").css("background-color" 
,"#BCD68D");
         });
         //選擇 元素名是 div 的所有元素
         $("#btn3").click(function(){
             $("div").css("background-color","blueviolet");
         })
         //選擇 所有的元素
         $("#btn4").click(function(){
             $("*").css("background-color","red");
         })
         //選擇 所有的span元素和id為two的元素
         $("#btn5").click(function(){
         $("span,#two").css("background-color","yellow");
         })
     })
 </script>
</head>
<body>
  <button id="reset">手動重置頁面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點選下列按鈕時先自動重置頁面</label><br /><br />
 <h3>基本選擇器.</h3>
 
 <!-- 控制按鈕 -->
  <input type="button" value="選擇 id為 one 的元素." id="btn1"/>  
  <input type="button" value="選擇 class 為 mini 的所有元素." id="btn2"/>
  <input type="button" value="選擇 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="選擇 所有的元素." id="btn4"/>
  <input type="button" value="選擇 所有的span元素和id為two的元素." id="btn5"/>

  <br /><br />

   <!-- 測試的元素 -->
  <div class="one" id="one" >
 id為one,class為one的div
      <div class="mini">class為mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id為two,class為one,title為test的div.
      <div class="mini"  title="other">class為mini,title為other</div>
      <div class="mini"  title="test">class為mini,title為test</div>
  </div>

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"  title="tesst">class為mini,title為tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display為"none"的div</div>
  
  <div class="hide">class為"hide"的div</div>
 
  <div>
  包含input的type為"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在執行動畫的span元素.</span>

</body>
</html>

基本選擇器

　　層次選擇器:

　　　　a b: a的所有b後代

　　　　a>b: a的所有b孩子

　　　　a+b: a的下一個兄弟(大弟弟)

　　　　a~b: a的所有弟弟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>02-層次選擇器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         //選擇 body內的所有div元素
         $("#btn1").click(function(){
             $("body div").css("background-color","violet");
         })
         //在body內,選擇子元素是div的
         $("#btn2").click(function(){
             $("body>div").css("background-color","violet");
         })
         //選擇 id為one 的下一個div元素
          $("#btn3").click(function(){
             $("#one+div").css("background-color","blue");
         })
          //選擇 id為two的元素後面的所有div兄弟元素
        $("#btn4").click(function(){
             $("#two~div").css("background-color","yellow");
         })
     })
 </script>
</head>
<body>
  <h3>層次選擇器.</h3>
  <button id="reset">手動重置頁面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點選下列按鈕時先自動重置頁面</label><br /><br />
 
  <input type="button" value="選擇 body內的所有div元素." id="btn1"/>
  <input type="button" value="在body內,選擇子元素是div的。" id="btn2"/>
  <input type="button" value="選擇 id為one 的下一個div元素." id="btn3"/>
  <input type="button" value="選擇 id為two的元素後面的所有div兄弟元素." id="btn4"/>
  
  <br />
  <br />
  
   <!-- 測試的元素 -->
  <div class="one" id="one" >
 id為one,class為one的div
      <div class="mini">class為mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id為two,class為one,title為test的div.
      <div class="mini"  title="other">class為mini,title為other</div>
      <div class="mini"  title="test">class為mini,title為test</div>
  </div>

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"  title="tesst">class為mini,title為tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display為"none"的div</div>
  
  <div class="hide">class為"hide"的div</div>
 
  <div>
  包含input的type為"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在執行動畫的span元素.</span>

</body>
</html>

層次選擇器

　　基本過濾選擇器：

　　　　:frist 第一個

　　　　:last 最後一個

　　　　:odd 索引奇數

　　　　:even 索引偶數

　　　　:eq(index) 指定索引

　　　　:gt(index) >

　　　　:lt(index) <

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>03-基本過濾選擇器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         //選擇第一個div元素
         $("#btn1").click(function(){
             $("div:first").css("background-color","violet");
         });
         //選擇最後一個div元素
          $("#btn2").click(function(){
             $("div:last").css("background-color","red");
         });
         //選擇索引值為偶數 的div元素
           $("#btn3").click(function(){
             $("div:even").css("background-color","yellow");
         });
         //選擇索引值為奇數 的div元素
           $("#btn4").click(function(){
             $("div:odd").css("background-color","blue");
         });
         //選擇索引值等於3的div元素
         $("#btn5").click(function(){
             $("div:eq(3)").css("background-color","green");
         });
         //選擇索引值大於3的div元素
         $("#btn6").click(function(){
             $("div:gt(3)").css("background-color","salmon");
         });
     });
 </script>
</head>
<body>
  <h3>基本過濾選擇器.</h3>
  <button id="reset">手動重置頁面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點選下列按鈕時先自動重置頁面</label><br /><br />

  <input type="button" value="選擇第一個div元素." id="btn1"/>
  <input type="button" value="選擇最後一個div元素." id="btn2"/>
  <input type="button" value="選擇索引值為偶數 的div元素." id="btn3"/>
  <input type="button" value="選擇索引值為奇數 的div元素." id="btn4"/>
  <input type="button" value="選擇索引值等於3的div元素." id="btn5"/>
  <input type="button" value="選擇索引值大於3的div元素." id="btn6"/>
 

<br /><br />
 
   <!-- 測試的元素 -->
  <div class="one" id="one" >
 id為one,class為one的div
      <div class="mini">class為mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id為two,class為one,title為test的div.
      <div class="mini"  title="other">class為mini,title為other</div>
      <div class="mini"  title="test">class為mini,title為test</div>
  </div>

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"  title="tesst">class為mini,title為tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display為"none"的div</div>
  
  <div class="hide">class為"hide"的div</div>
 
  <div>
  包含input的type為"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在執行動畫的span元素.</span>

</body>
</html>

基本過濾選擇器

　　內容過濾選擇器：

　　　　:hast("選擇器"):包含指定選擇器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>04-內容過濾選擇器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             $("div:has('.mini')").css("background-color","violet");
         })
     });
 </script>
</head>
<body>
  <h3>內容過濾選擇器.</h3>
  <button id="reset">手動重置頁面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點選下列按鈕時先自動重置頁面</label><br /><br />


  <input type="button" value="選取含有class為mini元素 的div元素." id="btn1"/>



<br /><br />

   <!-- 測試的元素 -->
  <div class="one" id="one" >
 id為one,class為one的div
      <div class="mini">class為mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id為two,class為one,title為test的div.
      <div class="mini"  title="other">class為mini,title為other</div>
      <div class="mini"  title="test">class為mini,title為test</div>
  </div>

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"  title="tesst">class為mini,title為tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display為"none"的div</div>
  
  <div class="hide">class為"hide"的div</div>
 
  <div>
  包含input的type為"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在執行動畫的span元素.</span>

</body>
</html>

內容過濾選擇器

　　可見過濾選擇器：

　　　　:hidden 在頁面不展示元素一般指 input type="hidden" 和樣式中display:none

　　　　:visible 在頁面展示元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可見性過濾選擇器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#b1").click(function(){
             $("div:visible").css("background-color","violet");
         })
         $("#b2").click(function(){
             $("div:hidden").css("background-color","violet").show();
         })
     });
 </script>
</head>
<body>
  <h3>可見性過濾選擇器.</h3>
  <button id="reset">手動重置頁面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點選下列按鈕時先自動重置頁面</label>
  <br/><br/>
  <input type="button" value=" 選取所有可見的div元素"  id="b1"/>
  <input type="button" value=" 選取所有不可見的div元素, 利用 jQuery 中的 show() 方法將它們顯示出來"  id="b2"/>
  
  <br /><br />

  
  <div class="one" id="one" >
 id為one,class為one的div
      <div class="mini">class為mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id為two,class為one,title為test的div.
      <div class="mini"  title="other">class為mini,title為other</div>
      <div class="mini"  title="test">class為mini,title為test</div>
  </div>

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"  title="tesst">class為mini,title為tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display為"none"的div</div>
  
  <div class="hide">class為"hide"的div</div>
  

</body>
</html>

可見過濾選擇器

　　屬性選擇器：

　　　　[屬性名]

　　　　[屬性名 = "值"]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>06-屬性選擇器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         //選取含有 屬性title 的div元素
         $("#btn1").click(function(){
             $("div[title]").css("background-color","violet");
         })
         //選取 屬性title值等於“test”的div元素
         $("#btn2").click(function(){
             $("div[title='test']").css("background-color","violet");
         })
     });
 </script>
<body>
  <button id="reset">手動重置頁面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點選下列按鈕時先自動重置頁面</label>    
  <h3> 屬性選擇器.</h3>
 

  <input type="button" value="選取含有 屬性title 的div元素." id="btn1"/>
  <input type="button" value="選取 屬性title值等於“test”的div元素." id="btn2"/>

    <br /><br />
   <div class="one" id="one" >
 id為one,class為one的div
      <div class="mini">class為mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id為two,class為one,title為test的div.
      <div class="mini"  title="other">class為mini,title為other</div>
      <div class="mini"  title="test">class為mini,title為test</div>
  </div>

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini">class為mini</div>
      <div class="mini"  title="tesst">class為mini,title為tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display為"none"的div</div>
  
  <div class="hide">class為"hide"的div</div>
 
  <div>
  包含input的type為"hidden"的div<input type="hidden" size="8"/>
  </div>

</body>
</html>

屬性過濾器

　　表單過濾選擇器：

　　　　:input 所有的表單子標籤 input select textarea button

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>09-表單選擇器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             alert($("#form1:input").size());
             alert($("#form1 input").length);
         })
     });
 </script>
</head>
<body>
  <input type="button" value="選取所有的表單子元素" id="btn1"/><br />
    
  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><br/>
    <input type="image" src="1.jpg"/><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>
 
  <div></div>
</body>
</html>

表單過濾選擇器

選擇器 --- jQuery

選擇器：　　基本選擇器：　　　　$(\"#id值\") $(\".class值\") $(\"標籤名\") 　　　　瞭解：$(\"*\")

jQuery 選擇器 jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery 選擇器 jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。 jQuery 選擇器基於元素的 id、類、型別、屬性、屬性值等\"查詢\"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此之外，它還有一些

jQuery 選擇器用法基礎入門示例

本文例項講述了jQuery 選擇器用法。分享給大家供大家參考，具體如下：今兒個開始學習jQuery，在學習jQuery之前我們應該掌握js，我之前也寫過幾篇筆記，但是隻是小部分的知識，js也不是很難可以自己簡單的看看。以後

jquery選擇器和屬性物件的操作例項分析

本文例項講述了jquery選擇器和屬性物件的操作。分享給大家供大家參考，具體如下：

jQuery 選擇器用法例項分析【prev + next】

本文例項講述了jQuery 選擇器用法。分享給大家供大家參考，具體如下： jQuery 選擇器 (prev + next)

jQuery之選擇器

概述說明：　　選擇器本身只是一個有特定語法規則的字串，沒有實質用處。它的基本語法規則使用的就是CSS的選擇器語法，並對其進行了擴充套件。只有呼叫$()，並將選擇器作為引數傳入才能起作用。

JQuery選擇器

轉:菜鳥教程,JQuery選擇器 1.基本選擇器 $(\"#id\")//ID選擇器 $(\"div\")//元素選擇器 $(\".classname\")//類選擇器

JQuery 04 選擇器1

Jquery有多達數十種選擇器，本章節把工作中會用到的常用選擇器列出來，並逐一解釋。

JQuery 04 選擇器2

示例8: 屬性 $(selector[attribute]) 滿足選擇器條件的有某屬性的元素$(selector[attribute=value]) 滿足選擇器條件的屬性等於value的元素$(selector[attribute!=value]) 滿足選擇器條件的屬性不等於value的元素$(se