jqueryAPI使用之選擇器

来源:http://www.cnblogs.com/46ly/archive/2016/09/23/5898876.html
-Advertisement-
Play Games

好一段時間沒有更新博文了。剛學習完JS基礎知識後，也進入到了JQ的學習。為了能熟練掌握JQ的使用，最好的方法就是反覆多練，講JQ中的API的每個知識點都練習一遍。如果能做到這個，那麼對JQ就沒那麼陌生了。這一天，先將JQ中的選擇器的每個點熟悉一遍。註：記得先將JQ庫引入，並且<script></sc ...


好一段時間沒有更新博文了。剛學習完JS基礎知識後，也進入到了JQ的學習。為了能熟練掌握JQ的使用，最好的方法就是反覆多練，講JQ中的API的每個知識點都練習一遍。如果能做到這個，那麼對JQ就沒那麼陌生了。這一天，先將JQ中的選擇器的每個點熟悉一遍。註：記得先將JQ庫引入，並且<script></script>里的代碼需要用$(function(){jq代碼});在這裡，我是沒有添加這個。

一、基本：

HTML代碼：

<p class="p1">p段落</p>
<h class="h1">h標簽</h>
<div id="div1">
<p class="p2">hehehe</p>
</div>

1、jQuery( "*" )查找文檔中的每一個元素（包括 head, body 等）。

$("*").css('background-color','red');

2、jQuery( ".class" )選擇給定樣式類名的所有元素。

$('.h1').css('background-color','yellow');

3、jQuery( "element" )根據給定（html）標記名稱選擇所有的元素。

$('h').css('border','1px solid blue');

4、jQuery( "selector1, selector2, selectorN" )將每一個選擇器匹配到的元素合併後一起返回。

$('.h1,.p1,#div1').css('color','blue');

5、jQuery( "#id" )選擇一個具有給定id屬性的單個元素。

$('#div1').css({                    
width:20,                    
height:30,                    
border:'1px solid #ccc',                
background:'blue'                
});

二、層級

HTML代碼：

<ul class="topnav">
<li class="item1">Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
</li>
<li>Item 3</li>
</ul>
<label>lll:</label>
<input name="name" value="123"/>

1、jQuery( "parent > child" )選擇所有指定“parent”元素中指定的"child"的直接子元素

$("ul.topnav > li").css("border", "3px double red");

2、jQuery( "ancestor descendant" 選擇給定的祖先元素的所有後代元素。一個元素的後代可能是該元素的一個孩子，孫子，曾孫 

等。

$('ul li').css('background-color','aquamarine');

3、jQuery( "prev + next" )選擇所有緊接在 “prev” 元素後的 “next” 元素

$("label + input").css("color", "blue");

4、jQuery( "prev ~ siblings" )匹配 “prev” 元素之後的所有 兄弟元素。具有相同的父元素，並匹配過濾“siblings”選擇器

$('ul ~ label').css('color','yellow');

三、基本篩選：

HTML代碼：

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
<table border="1">
<tr><td>123</td><td>123</td><td>456</td></tr>
<tr><td>123</td><td>123</td><td>456</td></tr>
<tr><td>123</td><td>123</td><td>456</td></tr>
<div lang="en-us"></div>
</table>

1、jQuery( ":animated" )選擇所有正在執行動畫效果的元素.

 $("#run").click(function(){
 $("div:animated").toggleClass("colored");
    });
   function animateIt(){
   $("#mover").slideToggle("slow", animateIt);
     }
    animateIt();

2、jQuery(":eq(index)"),jQuery( ":eq(-index)" )在匹配的集合中選擇索引值為index的元素。

   index: index為正數時要匹配元素的索引值（從0開始計數），index為負數從最後一個元素開始
  倒計數.-1匹配倒數第一個元素

 $("td:eq(2)").css("color", "red");

3、jQuery( ":even" ) 選擇所引值為偶數的元素，從 0 開始計數。

  $("td:even").css("background-color", "#bbbbff");

4、jQuery( ":first" )選擇第一個匹配的DOM元素。:first偽類選擇器相當於:eq(0)

 $("tr:first").css("font-style", "italic");

5、jQuery( ":gt(index)" )選擇匹配集合中所有大於給定index（索引值）的元素。

 $( "td:gt(4)" ).css( "backgroundColor", "yellow" );

6、jQuery( ":header" )選擇所有標題元素，像h1, h2, h3 等.

$(":header").css({ background:'#CCC', color:'blue' });

7、jQuery( ":lang(language)" )選擇指定語言的所有元素。

$( "div:lang(en-us)" ).addClass( "usa" );

8、jQuery( ":last" )選擇最後一個匹配的元素。

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

9、jQuery( ":lt(index)" )選擇匹配集合中所有索引值小於給定index參數的元素。

 $("td:lt(4)").css("color", "red");

10、jQuery( ":not(selector)" )選擇所有元素去除不匹配給定的選擇器的元素。

$("div:not(#mover)").css('background','red');

11、jQuery( ":odd" 選擇索引值為奇數元素，從 0 開始計數

$("tr:odd").css("background-color", "#bbbbff");

12、jQuery( ":root" )選擇該文檔的根元素。

console.log($('p:root'));

四、內容篩選：

1、jQuery( ":contains(text)" ) 選擇所有包含指定文本的元素。

<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
$("div:contains('John')").css("text-decoration", "underline");

2、jQuery( ":empty" )選擇所有沒有子元素的元素（包括文本節點）。需要註意的一件重要的事情是:empty(和 :parent)的子元素包括文本節點。

<tr><td>TD #0</td><td></td></tr>
<tr><td>TD #2</td><td></td></tr>
<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>

3、jQuery( ":has(selector)" )選擇元素其中至少包含指定選擇器匹配的一個種元素。

<div><p>Hello in a paragraph</p></div>
<script>$("div:has(p)").addClass("test");</script>

4、jQuery( ":parent" )選擇所有含有子元素或者文本的父級元素。

<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
$("td:parent").css('background', 'red');

五、可見性篩選：

1、jQuery( ":hidden" )選擇所有隱藏的元素。
元素可以被認為是隱藏的幾個情況：
他們的CSS display值是none。
他們是type="hidden"的表單元素。
它們的寬度和高度都顯式設置為0。
一個祖先元素是隱藏的，因此該元素是不會在頁面上顯示。

<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
$("div:hidden").show(3000);

2、jQuery( ":visible" )選擇所有可見的元素。
如果元素中占據文檔中一定的空間,元素被認為是可見的。可見元素的寬度或高度，是大於零。

元素的visibility: hidden 或 opacity: 0被認為是可見的，因為他們仍然占用空間佈局。

<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>

<div></div>
<div style="display:none;"></div>
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});

六、屬性：
1、jQuery( "[attribute|='value']" )選擇指定屬性值等於給定字元串或以該字元串為首碼（該字元串後跟一個連字元“-” ）的
元素。
attribute: 一個屬性名.
value: 一個屬性值，引號是可選的.可以是一個有效標識符或帶一個引號的字元串。

<div id="mover">123</div>
$('div[id|=mover]').css('color','red');

2、jQuery( "[attribute*='value']" )選擇指定屬性具有包含一個給定的子字元串的元素。（選擇給定的屬性是以包含某些值的元
素）

<input name="milkman" />
<input name="letterman2" />
$('input[name*="man"]').val('has man in it!');

3、jQuery( "[attribute~='value']" )選擇指定屬性用空格分隔的值中包含一個給定值的元素。

<input name="milk man" />
<input name="letterman2" />
$('input[name~="man"]').val('mr. man is in it!');

4、jQuery( "[attribute$='value']" )選擇指定屬性是以給定值結尾的元素。這個比較是區分大小寫的。

<input name="newsletter" />
$('input[name$="letter"]').val('a letter');

5、jQuery( "[attribute='value']" )選擇指定屬性是給定值的元素。

<input type="radio" name="newsletter" value="Hot Fuzz" />
$('input[value="Hot Fuzz"]').css('background','red');

6、jQuery( "[attribute!='value']" )選擇不存在指定屬性，或者指定的屬性值不等於給定值的元素。

<span>name is newsletter</span>
<span>name</span>
$('span[name!="newsletter"]').css（'color','red');

7、jQuery( "[attribute^='value']" )選擇指定屬性是以給定字元串開始的元素

<input name="newsletter" /> 
<input name="milkman" />
<input name="newsboy" />
$('input[name^="news"]').val('news here!');

8、jQuery( "[attribute]" )選擇所有具有指定屬性的元素，該屬性可以是任何值

<div id="mover">123456</div>
$('div[id]').css（'color','red');

9、jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )選擇匹配所有指定的屬性篩選器的元素
attributeFilter1: 一個屬性過濾器.
attributeFilter2: 另一個屬性過濾器, 用於進一步減少被選擇的元素。
attributeFilterN: 根據需要有更多的屬性過濾器

<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
$('input[id][name$="man"]').val('only this one');

七、子元素篩選：
1、jQuery( ":first-child" )選擇所有父級元素下的第一個子元素。

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
$("div span:first-child").css("text-decoration", "underline")；

2、jQuery( ":first-of-type" )選擇所有相同的元素名稱的第一個兄弟元素。

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
<script>
$("span:first-of-type").addClass("fot");

3、jQuery( ":last-child" )選擇所有父級元素下的最後一個子元素。

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
$("div span:last-child")
.css({color:"red", fontSize:"80%"})；

4、jQuery( ":last-of-type" )選擇的所有元素之間具有相同元素名稱的最後一個兄弟元素。

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
$("div span:last-of-type")
.css({color:"red", fontSize:"80%"})；

5、jQuery( ":nth-child(index/even/odd/equation)" )選擇的他們所有父元素的第n個子元素。

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

6、jQuery( ":nth-last-child(index/even/odd/equation)" )選擇所有他們父元素的第n個子元素。計數從最後一個元素開始到第
一個

<ul>
<li>Dave</li>
<li>Rick</li>
<li>Timmy</li>
<li>Gibson</li>
</ul>
$("ul li:nth-last-child(2)").css（'color','red');

7、jQuery( ":nth-last-of-type(index/even/odd/equation)" )選擇所有他們父級兄弟元素下具有相同的元素名（愚人碼頭註：標
簽名，比如<li>）的倒數第n個子元素，計數從最後一個元素開始到第一個。

<ul>
<li>Dave</li>
<li>Rick</li>
<li>Timmy</li>
<li>Gibson</li>
</ul>
$("ul li:nth-last-of-type(2)").css（'color','red');

8、jQuery( ":nth-of-type(index/even/odd/equation)" )選擇同屬於一個父元素之下，並且標簽名相同的子元素中的第n個。

<div>
<span>John</span>,
<b>Kim</b>,
<span>Adam</span>,
<b>Rafael</b>,
<span>Oleg</span>
</div>
$("ul li:nth-of-type(2)").css（'color','red');

9、jQuery( ":only-child" )如果某個元素是其父元素的唯一子元素，那麼它就會被選中。若父元素有其他子元素，就不會被匹配 

<div>
<button>Sibling!</button>
</div>
$("div button:only-child")css("border", "2px blue solid");

10、jQuery( ":only-of-type" )選擇所有沒有兄弟元素，且具有相同的元素名稱的元素。如果父元素有相同的元素名稱的其他子元
素，那麼沒有元素會被匹配。

<div>
<button>Sibling!</button>
</div>
<div>
<button>Sibling!</button>
<button>Sibling!</button>
</div>
$("button:only-of-type").css("border", "2px blue solid");

八、表單：
1、jQuery( ":button" )選擇所有按鈕元素和類型為按鈕的元素。

<input type="button" value="Input Button"/>
<input type="checkbox" />
$(':button').css('background-color','red');

2、jQuery( "input:checkbox" )選擇所有類型為覆選框的元素。

<input type="button" value="Input Button"/>
<input type="checkbox" />
$('input:button').css('background-color','red');

3、jQuery( ":checked" )匹配所有選中的元素。

<input type="checkbox" name="newsletter" value="Hourly" checked="checked">
<input type="checkbox" name="newsletter" value="Daily">
 $('input:checked').css('background-color','red');

4、jQuery( ":disabled" )選擇所有被禁用的元素。

<input name="email" disabled="disabled" />
<input name="id" />
$("input:disabled").css('background-color','red');

5、jQuery( ":enabled" )選擇所有可用的（未被禁用的）

<input name="email" disabled="enabled" />
<input name="id" />
$("input:enabled").css('background-color','red');

6、jQuery( ":file" )選擇所有類型為文件（file）的元素

<input type="file" />
<input type="hidden" />
$("input:file").css('background-color','red');

7、jQuery( ":image" )選擇所有圖像類型的元素

<input type="image" />
$("input:image").css('width','200');

8、jQuery( ":input" )選擇所有 input, textarea, select 和 button 元素.

<input type="password" />
<input type="radio" />
<input type="reset" />
$(":input").css('width','200')

9、jQuery( ":password" )選擇所有類型為密碼的元素。

<input type="password" />
$("input:password").css('bordr-color','green');

10、jQuery( ":radio" )選擇所有類型為radio的元素。

<input type="radio" />
$("input:radio").css('bordr-color','green');

11、jQuery( ":reset" )選擇所有類型為reset的元素。

<input type="reset" />
$("input:reset").css('bordr-color','green');

12、jQuery( ":selected" )選擇所有selected的元素。

<input type="radio" selected />
<input type="radio" />
$("input:selected").css('bordr-color','green');

13、jQuery( ":submit" )選擇所有類型為sumbit的元素。

<input type="submit" selected />
<input type="radio" />
$("input:submit").css('bordr-color','green');

14、jQuery( ":text" )選擇所有類型為text的元素。

<input type="text" />
<input type="radio" />
$("input:text").css('bordr-color','green');

 

 

 

 


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

-Advertisement-
Play Games
更多相關文章
  • javascript動畫系列第四篇——拖拽改變元素大小
    [1]原理簡介 [2]範圍圈定 [3]大小改變 [4]代碼優化 ...
  • 基於fis3的組件可視化道路
    首先說明一下，即使不熟悉fis3，閱讀文本應該也會有所收穫。 本文以fis-parser-imweb-tplv2插件為模板插件，目的不在於使用哪個模板，而是組件可視化的實現思路，不必擔心。 先說說模板插件 首先說明一下，我們的項目使用的fis3自帶的mod.js做模塊化開發。 fis-parser- ...
  • 用canvas製作彩虹球噴槍（js面向對象小案例）
    前段時間在研究canvas，感覺還挺好玩的，就寫了一個小demo，效果如下： 第一次嘗試用js面向對象的方式來寫，經驗不足，還請大家多多包涵。 下麵開始簡單介紹代碼： canvas畫布： 彩虹球的隨機顏色是通過下麵兩個方法來實現的，在 "《js常用方法和一些封裝（2） 隨機數生成》" 中曾經提到過。 ...
  • H5新元素
    1.article元素(標簽) 用於定義一個獨立的內容區塊，比如一篇文章，一篇博客等。 article元素內可以嵌套其他元素，它可以有自己的頭、尾、主體等內容，是用時要特別註意內容的獨立性一般獨立完整的內容才使用article元素，如果只是一段內容的話應該是用section元素。 2.section ...
  • bootstrap-scrollspy && bootstrap-dropdown
    bootstrap scrollspy && bootstrap dropdown ...
  • 報文格式：xml 、定長報文、變長報文
    目前接觸到的報文格式有三種：xml 、定長報文、變長報文 。 此處只做簡單介紹，日後應該會深入學習到三者之間如何解析，再繼續更新。——2016.9.23 XML XML 被設計用來傳輸和存儲數據。 HTML 被設計用來顯示數據。 XML 僅僅是純文本 XML 沒什麼特別的。它僅僅是純文本而已。有能力 ...
  • ul+li標簽製作表格
    table標簽製作表格代碼繁瑣，且不方便後期代碼維護。 li標簽加上css的浮動樣式可以製作多種樣式的表格。 代碼如下： <ul id="ttttt" style="width:404px;text-align:center;line-height:30px;border-left:1px soli ...
  • 用瀑布流的方式在網頁上插入圖片
    當我們的網頁需要插入很多圖片的時候，為了美觀，我們可以選擇用瀑布流的方法插入圖片 首先我們在body裡面放入我們需要展示的圖片 <div id="box"> <div class="dinwei"> <div class="pic"> <img src="image/1.jpg"> </div> < ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類