快捷導(dǎo)航

JQuery常用選擇器功能與用法實(shí)例分析

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

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

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

JQuery基礎(chǔ)回顧

今天對(duì)JQuery內(nèi)容進(jìn)行了回顧，下面進(jìn)行一些總結(jié)：

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

JQuery的選擇器，

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

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

子元素選擇器

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

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

<ul>
 <li>第1個(gè)ul的第1個(gè)li</li>
 <li>第1個(gè)ul的第2個(gè)li</li>
 <li>第1個(gè)ul的第3個(gè)li</li>
</ul>
<ul>
 <li>第2個(gè)ul的第1個(gè)li</li>
 <li>第2個(gè)ul的第2個(gè)li</li>
 <li>第2個(gè)ul的第3個(gè)li</li>
</ul>

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

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

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

常用內(nèi)容選擇器如下：

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

屬性內(nèi)容選擇器：

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

例如：

<!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中包含一個(gè)連字符"-"為前綴的div元素
    $('div[name|="t"]').css("border", "3px groove #00FF00"); 
    //查找所有div中，屬性name中包含一個(gè)連字符"空"和"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結(jié)尾的
     $("div[name$='end']").css("border", "3px groove blue"); 
    //查找所有div中，有屬性name中的值包含一個(gè)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>

結(jié)果如下：

表單選擇器

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