2. 程式人生 > >jQuery選擇器詳細介紹：基本選擇器，層次選擇器，屬性選擇器

jQuery選擇器詳細介紹：基本選擇器，層次選擇器，屬性選擇器

阿新 • • 發佈：2019-01-01

jQuery選擇器的格式： $("選擇器")                                                                                                                                  

一、基礎選擇器

1、基本選擇器                                                                                                                                                                 

使用範圍：在jQuery中，基本選擇器是使用最頻繁的選擇器。

  • （1）元素選擇器；
  • （2）id選擇器；
  • （3）class選擇器；
  • （4）群組選擇器；
  • （5）*選擇器

  • （1）元素選擇器；
  • 語法：$("元素名")
  • <span style="font-family:Arial;"><span style="color:#1a1a1a;"><pre name="code" class="java"><!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
          </span><strong style="background-color: rgb(255, 255, 255);"><span style="color:#1a1a1a;"> </span><span style="color:#ff0000;"> </span>$("div").css("color","red");   $("span").css("color","yello"); </strong><span style="background-color: rgb(255, 255, 255);"><strong>  </strong> //方法是jQuery操作CSS樣式的方法因此使用點運算子來呼叫:$("div").css()</span><span style="color:#1a1a1a;">
        })
    </script>
</head>
<body>
    <div>我愛簡簡單單的</div>
    <span>我愛簡簡單單的</span>
</body>
</html></span></span>
    在瀏覽器預覽效果如下：
  • 注意：CSS選擇器和jQuery選擇器的轉換關係：只需要把CSS選擇器的寫法套進$("")中，就變成了jQuery選擇器
  • （2）id選擇器；
    • 語法：$("#id名")
    • 說明：id名前面必須加上字首“#”，否則該選擇器無法生效
    <span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
                        $("div").css("color","red");
			$("span").css("color","yello");
			</span><span style="color:#ff0000;">$("#a").css("color","blue");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
    <div>我愛簡簡單單的</div>
 </span><span style="color:#ff0000;">   <div id="a">我愛簡簡單單的</div></span><span style="color:#1a1a1a;">
    <span>我愛簡簡單單的</span>
</body></span></span>
    在瀏覽器預覽效果如下：

  • （3）class選擇器；
  • 語法：$(".類名")
  • 說明：id名前面必須加上字首“.”，否則該選擇器無法生效
  • <span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            $("div").css("color","red");
			$("span").css("color","yello");
			$("#a").css("color","blue");
			</span><span style="color:#ff0000;">$(".b").css("color","green");</span><span style="color:#1a1a1a;">
        })
	</script></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei; font-size: 15px;">
</span><span style="font-size:12px;"><span style="color: rgb(26, 26, 26); font-family: SimHei;"></head>
<body>
    <div>我愛簡簡單單的</div>
    <div id="a">我愛簡簡單單的</div>
    <span>我愛簡簡單單的</span>
    </span><span style="font-family: SimHei;"><span style="color:#ff0000;"><div class="b">我愛簡簡單單的</div></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei;">
</body>
</html></span></span>
    在瀏覽器預覽效果如下：



  • （4）群組選擇器；
  • 語法：$("選擇器1,選擇器2,...,選擇器n")
  • 說明：選擇器之間必須用英文逗號“,”隔開，否則該選擇器無法生效
<span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            </span><span style="color:#ff0000;">$("div,span,#a,.b").css("color","green");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
    <div>我愛簡簡單單的</div>
    <div id="a">我愛簡簡單單的</div>
    <span>我愛簡簡單單的</span>
    <div class="b">我愛簡簡單單的</div>
</body>
</html></span></span>
在瀏覽器預覽效果如下：

  • （5）*選擇器
  • 語法：*{padding:0;margin:0;}
  • 說明：*選擇器，也稱為全選選擇器，用於選擇所有的元素。在CSS中，常用*選擇器去除預設的padding和margin的值
<span style="font-family:Arial;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
           <span style="color:#ff0000;"> $("#c *").css("color","green");</span>
        })
	</script>

</head>
<body>
<span style="color:#ff0000;"><div id="c"></span>
    <div>我愛簡簡單單的</div>
    <div id="a">我愛簡簡單單的</div>
    <span>我愛簡簡單單的</span>
    <div class="b">我愛簡簡單單的</div>
<span style="color:#ff0000;"></div></span>
</body>
</html></span>

在瀏覽器預覽效果如下：


CSS規定了如下優先順序：

行內樣式->id樣式->class樣式->標記樣式

2、層次選擇器                                                                                                                                                                 

  • （1）後代選擇器
  • 語法：$("M N")
  • 說明：選擇M元素內部後代N元素，包括所有後代元素。
  • （2）子代選擇器
    • 語法：$("M>N")
    • 說明：選擇M元素內部某一個子元素，只限子元素。

  • （3）兄弟選擇器
    • 語法：$("M～N")
    • 說明：選擇M元素後面（不包括前面）的（所有的）某一類兄弟元素N。

  • （4）相鄰選擇器
    • 語法：$("M+N")
    • 說明：選擇M元素後面（不包括前面）的（相鄰的）某一類兄弟元素N。
    <span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <style type="text/css">
		*{padding:0;margin:0}/*去除所有元素預設的padding和margin*/
        ul{list-style-type:none;}/*去除列表項預設符號*/
		li{height:30px;}/*去除列表項預設符號*/
	</style>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            </span><span style="color:#ff0000;">$("li*li").css("border-top","3px solid green");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
	<ul>
    	<li>我愛簡簡單單的</li>
        <li>我愛簡簡單單的</li>
        <li>我愛簡簡單單的</li>
        <li>我愛簡簡單單的</li>
        <li>我愛簡簡單單的</li>
        <li>我愛簡簡單單的</li>
        <li>我愛簡簡單單的</li>
    </ul>
</body>
</html></span></span>
    在瀏覽器預覽效果如下：

分析：

     $("li+li")使用的是相鄰選擇器，表示“選擇li元素相鄰的下一個li元素”。由於最後一個li元素沒有相鄰的下一個li元素，所以對於最後一個li元素，它是沒有下一個li元素可以選取的。$("li+li").css("border-top", "2px solid red")達到在兩兩li元素之間新增一個邊框的效果。這是一個非常棒的技巧，在實際開發中如果我們想要在兩兩元素之間實現什麼效果，我們經常會用到這個技巧！大家請一定不要浪費這個強大的技巧！

3、屬性選擇器                                                                                                                                                                 

使用範圍：在jQuery中，屬性選擇器最常見於表單操作。

選擇器 說明
$("selector[attr]") 選擇包含給定屬性的元素
$("selector[attr='value']") 選擇給定的屬性是某個特定值的元素
$("selector[attr != 'value']") 選擇所有含有指定的屬性，但屬性不等於特定值的元素
$("selector[attr *= 'value']") 選擇給定的屬性是以包含某些值的元素
$("selector[attr ^= 'value']") 選擇給定的屬性是以某些值開始的元素（比較少用）
$("selector[attr $= 'value']") 選擇給定的屬性是以某些值結尾的元素（比較少用）
$("selector[selector1][selector2]…[selectorN]") 複合屬性選擇器，需要同時滿足多個條件時使用

注：selector指的是選擇器，attr指的是屬性（attribute），value指的是屬性值。

<span style="font-family:Arial;font-size:12px;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <style type="text/css">
		*{padding:0;margin:0}/*去除所有元素預設的padding和margin*/
        ul{list-style-type:none;}/*去除列表項預設符號*/
		li{height:30px;}/*去除列表項預設符號*/
	</style>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
           <span style="color:#ff0000;"> $("input[type='checkbox']").attr("checked","checked");</span>//<span style="color: rgb(26, 26, 26); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 27px; text-indent: 30px;">表示把所有複選框的checked屬性值設定為checked（即被選中）。</span>
        })
	</script>

</head>
<body>
<br>
	<h3>請選擇以下需要購買的蔬菜</h3><br>
    <div id="list">
    	<input type="checkbox" />黃瓜
        <input type="checkbox" />西紅柿
        <input type="checkbox" />土豆
        <input type="checkbox" />茄子
    </div>
</body>
</html></span>
在瀏覽器預覽效果如下：

拓展：

$("#a")等價於$("[id='a']")

$(".a")等價於$("[class='a']")

相關推薦

jQuery選擇器詳細介紹：基本選擇器，層次選擇器，屬性選擇器

jQuery選擇器的格式： $("選擇器")                                                                            

jquery的each()詳細介紹

　　each()方法能使DOM迴圈結構簡潔，不容易出錯。 　　each()函式封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維陣列、多維陣列、DOM, JSON 等等 　　在javaScript開發過程中使用$each可以大大的減輕我們的工作量。 【each

組合語言之暫存器(詳細介紹)

 1、暫存器 32位暫存器有16個，分別是： 4個數據暫存器（EAX、EBX、ECX、EDX）。 2個變址和指標暫存器（ESI和EDI）；2個指標暫存器（ESP和EBP）。 6個段暫存器（ES、CS、SS、DS、FS、GS）。 1個指令指標暫存器（EIP）；1個標誌暫

應用層管理器詳細介紹

/** * 獲取應用層視窗管理器 * @param mContext * @return */ public static WindowManager getWindowManager(Context mContext) { WindowMana

深度學習中Attention Mechanism詳細介紹：原理、分類及應用

Attention是一種用於提升基於RNN（LSTM或GRU）的Encoder + Decoder模型的效果的的機制（Mechanism），一般稱為Attention Mechanism。Attention Mechanism目前非常流行，廣泛應用於機器翻譯、語音識別、影象標

詳細介紹：怎麽用github展示自己的前端項目頁面

9.png ads csdn 使用 下載 HERE 分享圖片 http art 之前一直想著把自己做的一些頁面怎麽用github展示出來，因為我看到有人用的是github來展示自己做的一些項目。用github來展示就不用去折騰搭建自己的網站等一系列復雜的東西了，後面在網上搜

詳細介紹scrollTo、scrollBy、Scroller方法的作用，從原始碼分析其區別

· 介紹     今天，我們來講講自定義View的基本功，那就是對我們螢幕座標系的理解。本人畫了一張圖，咋們湊合看吧，應該不難看懂。     這裡做略微的說明，黑色（ViewGroup、父容器）、藍色（包含的子View）、橙色為手指觸控式螢幕幕的一點。為什麼要清楚這張

二叉樹遞迴非遞迴遍歷，層次遍歷，反轉，輸出路徑等常見操作詳細總結

1.序言 在實際工作中，很多業務場景其實也需要一些比較巧妙的演算法來支撐，並不是業務邏輯就全是複製貼上或者說重複的程式碼寫一百遍。越是隨著演算法研究的深入，越是發現數據結構的重要性。或者說，資料結構中就蘊藏著無數精妙演算法的思想，很多演算法的思想在資料結構中體現得非常突出。而作為一種

機器學習筆記六：K-Means聚類，層次聚類，譜聚類

前面的筆記搞了那麼多的數學，這篇來一點輕鬆的，提前適應一下除了監督問題以外的非監督學習。這篇筆記有沒有前面那麼多的數學了，要講的聚類算是無監督的學習方式。 一.一般問題 聚類分析的目標是,建立滿足於同一組內的物件相似,不同組的物件相異的物件分組.它作為一種無

jQuery -- 光陰似箭（一）：初見 jQuery -- 基本用法，語法，選擇器

jQuery -- 知識點回顧篇（一）：初見jQuery -- 基本用法，語法，選擇器 1. 使用方法 　　jQuery 庫位於一個 JavaScript 檔案中，其中包含了所有的 jQuery 函式。 　　網頁需要使用到 jQuery 時，需要先在網頁中引入 jQuery 的 js檔案。

jQuery介紹與基本語法，選擇器

1.jQuery介紹 1.1JS類庫 JavaScript 庫封裝了很多預定義的物件和實用函式。能幫助使用者建立有高難度互動客戶端頁面, 並且相容各大瀏覽器。 1.2當前流行的 JavaScript 庫有： jQuery ，最流行 EXT_JS，2.0

jQuery選擇器使用介紹

1.jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同， 使用length屬性判斷是否選擇成功。 $('#myId') //選擇id為myId的網頁元素 $('.myClass') // 選擇class為myClass的元素 $('

jquery知識點總結（1）---基本用法+選擇器

瞭解jQuery 是什麼: What? 一個JS函式庫: write less, do more 封裝簡化DOM操作(CRUD) / Ajax 為什麼用它: why? 強大選擇器: 方便快

CSS基礎：基本選擇器分類和使用

1、萬用字元選擇器（＊） *{ marigin: 0; padding: 0; } //ul元素下的所有元素 ul *{border:1px solid blue;} 2、元素選擇器(Element) li {backgrou

CSS：基本語法及派生選擇器

本文介紹css基本語法及派生選擇器。 程式碼整理自w3school：http://www.w3school.com.cn (一)基礎部分： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

Jquery選擇器分類(基本選擇器，層次選擇器，過濾選擇器，表單選擇器)

Jquery選擇器分類：基本選擇器，層次選擇器，過濾選擇器，表單選擇器。 基本選擇器 說明：通過元素id、class和標籤名等來查詢DOM元素 1.id選擇器：$("#test");//選取id為test的元素 2.類選擇器：$(".test");//選取所有class

JQuery入門學習之簡介及基本選擇器的使用

一、概述 1.JQuery是一套簡潔、快速、靈活的JavaScript指令碼庫，它能讓使用者在網頁上簡單的操作文件、處理事件、執行動畫效果以及新增非同步互動。注意，它是指令碼庫，並不是框架。 2.特點 a.程式碼精緻小巧； b.強大的功能函式； c.跨瀏覽器； d

jquery的基礎知識復習(基礎選擇器，屬性選擇器，層級選擇器)

兩個 不包含 註意 空格 如果 頁面 pre log cnblogs 　　 　　1.基礎選擇器 　　　　　　　　 　　　　　　id選擇器： $("#id"), 樣式選擇器：$(".className"),元素選擇器：$("div"),$("*") 選擇頁面所有的元素　　　

CSS知識點整理（1）：CSS語法，層疊次序，選擇器，其他重要方面。

屬性。 偽類選擇器 css語法 wid cape image 整理 樣式 以及 1. css的全稱 2. CSS的層疊次序：優先級由低到高 ·瀏覽器設置 ·外部樣式表 ·內部樣式表 ·內聯樣式 3. CSS的3種形式，以及每種形式的語法格式 ——註意樣式表的為什麽常

css備忘：id選擇器的權重>class選擇器的權重=屬性選擇器的權重>元素選擇器

基本 分享 bubuko col clas AS -c 測試 com 最近的項目要自己寫前端了，重新學習下前端的一下基本知識。 一般在css樣式表中，上面的會被下面的覆蓋，如下圖，文字會顯示藍色： 所以按照正常的來說，下面的css樣式，測試的文字應該還是藍色 但結果，測