jQuery的選擇器

来源:http://www.cnblogs.com/mamashoumingzichangyounanhaizixihuan-1/archive/2016/09/12/5866334.html
-Advertisement-
Play Games

選擇器是jQuery最基礎的東西,本文中列舉的選擇器基本上囊括了所有的jQuery選擇器,也許各位通過這篇文章能夠加深對jQuery選擇器 的理解,它們本身用法就非常簡單,我更希望的是它能夠提升個人編寫jQuery代碼的效率。本文配合截圖、代碼和簡單的概括對所有jQuery選擇器進行 了介紹,也列舉 ...


選擇器是jQuery最基礎的東西,本文中列舉的選擇器基本上囊括了所有的jQuery選擇器,也許各位通過這篇文章能夠加深對jQuery選擇器 的理解,它們本身用法就非常簡單,我更希望的是它能夠提升個人編寫jQuery代碼的效率。本文配合截圖、代碼和簡單的概括對所有jQuery選擇器進行 了介紹,也列舉出了一些需要註意和區分的地方。

一、基本選擇器

1. id選擇器(指定id元素)

將id="one"的元素背景色設置為黑色。(id選擇器返單個元素)

$(document).ready(function () {
        $('#one').css('background', '#000');
    });

2. class選擇器(遍歷css類元素)

將class="cube"的元素背景色設為黑色

$(document).ready(function () {
        $('.cube').css('background', '#000');
    });

3. element選擇器(遍歷html元素)

將p元素的文字大小設置為12px

$(document).ready(function () {
        $('p').css('font-size', '12px');
    });

4. * 選擇器(遍歷所有元素)

$(document).ready(function () {
        // 遍歷form下的所有元素,將字體顏色設置為紅色
        $('form *').css('color', '#FF0000');
    });

5. 併列選擇器

$(document).ready(function () {
    // 將p元素和div元素的margin設為0
    $('p, div').css('margin', '0');
  });


二、 層次選擇器

1. parent > child(直系子元素)

$(document).ready(function () {
    // 選取div下的第一代span元素,將字體顏色設為紅色
    $('div > span').css('color', '#FF0000');
  });

下麵的代碼,只有第一個span會變色,第二個span不屬於div的一代子元素,顏色保持不變。

<div>
    <span>123</span>
    <p>
      <span>456</span>
    </p>
</div>

2. prev + next(下一個兄弟元素,等同於next()方法)

$(document).ready(function () {
  // 選取class為item的下一個div兄弟元素
  $('.item + div').css('color', '#FF0000');
  // 等價代碼  
//$('.item').next('div').css('color', '#FF0000');});

下麵的代碼,只有123和789會變色

<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

3. prev ~ siblings(prev元素的所有兄弟元素,等同於nextAll()方法)

$(document).ready(function () {
    // 選取class為inside之後的所有div兄弟元素
    $('.inside ~ div').css('color', '#FF0000');
    // 等價代碼
    //$('.inside').nextAll('div').css('color', '#FF0000');});

下麵的代碼,G2和G4會變色

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

三、 過濾選擇器

1. 基本過濾選擇器

——1.1 :first和:last(取第一個元素或最後一個元素)

$(document).ready(function () {
            $('span:first').css('color', '#FF0000');
            $('span:last').css('color', '#FF0000');
        });

下麵的代碼,G1(first元素)和G3(last元素)會變色

<span>G1</span>
<span>G2</span>
<span>G3</span>

——1.2 :not(取非元素)

$(document).ready(function () {
            $('div:not(.wrap)').css('color', '#FF0000');
        });

下麵的代碼,G1會變色

<div>G1</div>
<div class="wrap">G2</div>

但是,請註意下麵的代碼:

<div>
    G1    <div class="wrap">G2</div>
</div>

當G1所在div和G2所在div是父子關係時,G1和G2都會變色。

——1.3 :even和:odd(取偶數索引或奇數索引元素,索引從0開始,even表示偶數,odd表示奇數)

$(document).ready(function () {
            $('tr:even').css('background', '#EEE'); // 偶數行顏色
            $('tr:odd').css('background', '#DADADA'); // 奇數行顏色
        });

A、C行顏色#EEE(第一行的索引為0),B、D行顏色#DADADA

image

<table width="200" cellpadding="0" cellspacing="0">
    <tbody>
        <tr><td>A</td></tr>
        <tr><td>B</td></tr>
        <tr><td>C</td></tr>
        <tr><td>D</td></tr>
    </tbody>
</table>

——1.4 :eq(x) (取指定索引的元素)

image

$(document).ready(function () {
            $('tr:eq(2)').css('background', '#FF0000');
        });

更改第三行的背景色,在上面的代碼中C的背景會變色。

——1.5 :gt(x)和:lt(x)(取大於x索引或小於x索引的元素)

$(document).ready(function () {
            $('ul li:gt(2)').css('color', '#FF0000');
            $('ul li:lt(2)').css('color', '#0000FF');
        });

L4和L5會是紅色,L1和L2會是藍色,L3是預設顏色

image

<ul>
    <li>L1</li>
    <li>L2</li>
    <li>L3</li>
    <li>L4</li>
    <li>L5</li>
</ul>

——1.6 :header(取H1~H6標題元素)

$(document).ready(function () {
            $(':header').css('background', '#EFEFEF');
        });

下麵的代碼,H1~H6的背景色都會變

image

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 位元組操作 buffer對象 構造函數 new Buffer(size) 參數為數值,表示分配空間的長度 new Buffer(string,[encoding]) 參數為字元串,表示存入Buffer的數據,編碼可選 new Buffer(array) 參數為數組,表示存入Buffer的數據 靜態方法 ...
  • 我們首先定義一個json數組對象如下: 一. 根據對象屬性值得到相應對象 二. 刪除其中一個對象 三. 修改其中一個對象的屬性值 四. 往數組中添加一個對象 ——註: 以上的所有操作都會對原數組產生直接影響。 ...
  • 前不久,做了一個H5項目,需要在橫豎屏變化時,做一些處理。毫無疑問,需要使用orientationchange來監聽橫豎屏的變化。 方案一: 代碼添加上後,就各種相容性問題。這裡相容性問題出現在兩個地方: orientationchange event.orientation|screen.orie ...
  • 函數 結構function 函數名([形參]){ return 某個值;} //調用 1》函數的幾種形式 函數的幾種形式: 無參數,無返回值的函數(函數中沒有return,括弧里沒有參數) 有參數,無返回值的函數(函數中沒有return,括弧里有參數) 無參數,有返回值的函數(函數中有return, ...
  • 1、設置頁面關鍵詞<meta name="keywords" content="輸入具體的關鍵詞">2、設置頁面的描述<meta name="description" content="設置頁面描述">3、定義頁面搜索方式<meta name="robots" content="搜索方式" all ...
  • 組件創建了,就有方法找到這些組件。在DOM、Jquery都有各自的方法查找元素/組件,ExtJS也有自己獨特的方式查找組件、元素。本次從全局查找、容器內查找、form表單查找、通用組件等4個方面介紹組件的查找方式。 ...
  • 1、弱類型:聲明無需指定數據類型,由值決定,查看變數數據類型:typeof(變數); 2、隱式轉換:任何數據類型與string類型相加,結果為string類型; 3、顯式(強制)轉換: ①toString():轉換為字元串; ②parseInt(value):將value轉換為整數;(* 碰到第一個 ...
  • 1、javascript組成: ①核心ECMAScript;②文檔對象模型DOM(Document Object Model);③瀏覽器對象模型BOM(Browser Object Model); 2、javascript特點: ①文本編輯;②無需編譯;③弱類型;④面向對象; 3、內核引擎: ①IE ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...