JQuery常用選擇器功能與用法實例分析

更新時間：2019年12月23日 10:48:01 作者：theVicTory

這篇文章主要介紹了JQuery常用選擇器功能與用法,結合實例形式分析了jquery常見選擇器基本功能、使用方法及操作注意事項,需要的朋友可以參考下

本文實例講述了JQuery常用選擇器功能與用法。分享給大家供大家參考，具體如下：

JQuery基礎回顧

今天對JQuery內容進行了回顧，下面進行一些總結：

JQuery是javascript的一個庫，所以二者可以相互轉換，例如JQuery到Javascript，用$()獲取元素，傳給JS的var變量。反之JS的getElement方法獲取var變量后，可以通過$(var)轉化成JQuery對象。

JQuery的選擇器，

id選擇$("#id")，class選擇$(".class")，元素選擇$("elemrnt")，選擇所有$("*")。層級選擇器有：子選擇器$("parent>child")選中直接子代，后代選擇器$("ancensterdescendant")選中所有的后代元素，相鄰兄弟選擇器$("prev+next")選中prev之后的第一個next節(jié)點，一般兄弟選擇$("prev~siblings")選中prev之后所有siblings元素。Jquery常用屬性選擇器如下：

$(“:first”)	選中第一個元素
$(“:last”)	選中最后一個元素
$(“:eq(n-1)”)	選中第n個元素
$(“:gt(n-1)”)	選中n個以后的所有
$(“:lt(n-1)”)	選中n個以前的所有
$(“:even”)	選中偶數個元素
$(“:odd”)	選中奇數個的元素
$(“:not(selector)”)	選中除selector選擇外的所有
$(“:animated”)	選中執(zhí)行動畫的元素
$(“: header”)	選中標題元素，如h1、h2
$(“:visible”)	選中可見的元素
$(“:hidden”)	選中隱藏的元素

子元素選擇器

$(“:first-child”)	選擇第一個元素
$(“:last-child”)	選擇最后一個元素
$(“:only-child”)	選擇沒有兄弟的元素
$(“:nth-child(n)”)	選擇第n個元素
$(“:nth-last-child(n)”)	選擇倒數第n個元素

First與first-child區(qū)別：

<ul>
 <li>第1個ul的第1個li</li>
 <li>第1個ul的第2個li</li>
 <li>第1個ul的第3個li</li>
</ul>
<ul>
 <li>第2個ul的第1個li</li>
 <li>第2個ul的第2個li</li>
 <li>第2個ul的第3個li</li>
</ul>

first表示（所有父元素合并后的）第一個元素；first-child表示（每個父元素的）第一個

$('ul li:first') 返回"第1個ul的第1個li"。 查找所有ul下第一個li元素

$("ul li:first-child") 返回"第1個ul的第1個li"與"第2個ul的第1個li"。 查找每個ul下第一個元素是li元素dom元素。

常用內容選擇器如下：

$(“:contains(‘text')”)	選中包含文本text的元素
$(“:parent”)	選中包含內容（節(jié)點或文本）的元素
$(“empty”)	選中不包含任何內容的元素
$(“:has(selector)”)	選中包含selector選擇器的元素

屬性內容選擇器：

$(“[attribute]”)	選中包含指定屬性的元素
$(“[attribute='value']”)	選中屬性等于指定值的元素
$(“[attribute!='value']”)	選中屬性不等于指定值的元素
$(“[attribute^='value']”)	選中屬性以指定值開頭的元素
$(“[attribute$='value']”)	選中屬性以指定值結尾的元素
$(“[attribute*='value']”)	選中屬性包含指定值的元素
$(“[attribute\|='value']”)	選中屬性以指定值為前綴+'-‘的元素
$(“[attribute~='value']”)	選中屬性以指定值為前綴+空格的元素
$(“[attribute1] [attributeN]”)	多個屬性值括號可并列復選

例如：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>屬性篩選選擇器</title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
  <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
  <div class="left" testattr="true" >
    <div class="div" testattr="true" name='p1'>
      <a>[att=val]</a>
    </div>
    <div class="div" testattr="true" p2>
      <a>[att]</a>
    </div>
    <div class="div" testattr="true" name="t-est">
      <a>[att|=val]</a>
    </div>
    <div class="div" testattr="true" name="a b">
      <a>[att~=val]</a>
    </div>
  </div>
  <script type="text/javascript">
     //查找所有div中，屬性name=p1的div元素
     $('div[name=p1]').css("border", "3px groove red"); 
    //查找所有div中，有屬性p2的div元素
    $("div[p2]").css("border", "3px groove blue"); 
    //查找所有div中，屬性name中包含一個連字符"-"為前綴的div元素
    $('div[name|="t"]').css("border", "3px groove #00FF00"); 
    //查找所有div中，屬性name中包含一個連字符"空"和"a"的div元素
    $("div[name~='a']").css("border", "3px groove pink"); 
  </script>
  <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
  <div class="left" testattr="true" >
    <div class="div" testattr="true" name='start-name'>
      <a>[att^=val]</a>
    </div>
    <div class="div" testattr="true" name='name-end'>
      <a>[att$=val]</a>
    </div>
    <div class="div" testattr="true" name="attr-test-selector">
      <a>[att*=val]</a>
    </div>
    <div class="div" name="a b">
      <a>[att!=val]</a>
    </div>
  </div>
  <script type="text/javascript">
     //查找所有div中，屬性name的值是用start開頭的
     $("div[name^='start']").css("border", "3px groove red"); 
     //查找所有div中，屬性name的值是用end結尾的
     $("div[name$='end']").css("border", "3px groove blue"); 
    //查找所有div中，有屬性name中的值包含一個test字符串的div元素
    $("div[name*='test']").css("border", "3px groove #00FF00"); 
    //查找所有div中，有屬性testattr中的值沒有包含"true"的div
    $("div[testattr!='true']").css("border", "3px groove #668B8B"); 
  </script>
</body>
</html>

結果如下：

表單選擇器

$(“input:type”)	選擇類型為type的表單元素
$(“:enabled”)	選擇激活的表單元素
$(“:disabled”)	選擇不可用的表單元素
$(“:checked”)	選擇選中的表單元素
$(“:selected”)	選擇選中的option元素

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jquery實現簡單拖拽效果
這篇文章主要為大家詳細介紹了jquery實現簡單拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯誤
今天測試偶然發(fā)現jquery.bgiframe.js在IE9環(huán)境下提示錯誤，于是很是好奇，想辦法知道究竟，于是搜索了一下，現在與大家分享希望可以幫助你們
2013-01-01
jquery實現回車鍵觸發(fā)事件(實例講解)
下面小編就為大家分享一篇jquery實現回車鍵觸發(fā)事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-11-11
jQuery回調方法使用示例
這篇文章主要介紹了jQuery回調方法使用,結合具體實例形式分析了jQuery回調方法的原理、定義及使用方法,需要的朋友可以參考下
2017-06-06
jQuery基于ajax實現星星評論代碼
這篇文章主要介紹了jQuery基于ajax實現星星評論代碼,可實現實時顯示評論效果的功能,基于Ajax實現,非常具有實用價值,需要的朋友可以參考下
2015-08-08
jquery 插件實現瀑布流圖片展示實例
本文給大家分享的是使用jQuery的masonry庫和infinitescroll庫實現的瀑布流美女圖片展示的實例，效果非常不錯，這里推薦給大家，有需要的小火把可以參考下。
2015-04-04
jQuery實現左側導航模塊的顯示與隱藏效果
這篇文章主要介紹了jQuery實現左側導航模塊的顯示與隱藏效果,涉及jQuery相應鼠標事件動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下
2016-07-07
詳細介紹jQuery.outerWidth() 函數具體用法
這篇文章通過jQuery示例代碼演示outerWidth()函數的具體用法，介紹的非常詳細，有需要的朋友可以借鑒
2015-07-07
JQuery獲得內容和屬性方法解析
這篇文章主要介紹了JQuery獲得內容和屬性方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05
jQuery HTML設置內容和屬性操作實例分析
這篇文章主要介紹了jQuery HTML設置內容和屬性操作,結合實例形式分析了jQuery HTML設置內容和屬性相關函數與操作注意事項,需要的朋友可以參考下
2020-05-05