JQuery知識點

JQuery

jQuery是一個非常流行的快速、小巧、功能強大的開源JavaScript庫。就像官方所宣稱的那樣——"Write less，do more"，它使得我們常用的HTML文檔遍歷、DOM操作、事件處理、動畫效果、Ajax、工具方法等功能代碼的實現變得非常簡單。更重要的是，它還爲我們做了跨瀏覽器的兼容。絕大多數時候，不用擔心我的JS兼容問題了(由於瀏覽器bug等因素，jQuery也無法100%地實現跨瀏覽器兼容，官方對這些少數API一般也作了特殊說明，而且這種情況極少遇到，因此可以忽略不計)。

jQuery 理念: 寫得少, 做得多. 優勢如下:

• 輕量級
• 強大的選擇器
• 出色的 DOM 操作的封裝
• 可靠的事件處理機制
• 完善的 Ajax
• 出色的瀏覽器兼容性
• 鏈式操作方式
• …

1.jQuery 配置

在頁面頭部head中，添加js

1.1 語法

 <!-- 編寫JS代碼並使用jQuery -->
<script type="text/javascript">
// 以下代碼將把id爲username的元素的value值改爲"Hello CodePlayer!"。
jQuery("#username").val("Hello CodePlayer!");

//$是jQuery的別名，因爲JS支持使用$作爲變量名稱，而且$更加簡短、易於書寫.
$("#username").val("Hello CodePlayer!");
</script>

1.2 ready() 準備就緒時執行代碼

ready()函數的作用相當於window.onload，它用於在當前文檔加載準備就緒後執行對應的函數。

<script type="text/javascript">
  $(document).ready(function(){
  // 在這裏編寫我們希望在DOM準備就緒後執行的代碼
});
//如果你覺得這種寫法有點麻煩，你還可以使用下面這種簡寫的方法：
// $( function ) 是 $(document).ready( function ) 的簡寫形式

$( function(){
  // 在這裏編寫我們希望在DOM準備就緒後執行的代碼
} );
</script>

1.3 選取元素

使用jQuery 選擇器選取元素，並封裝爲jQuery對象

在JS原生DOM中，要對DOM元素進行操作，首先得獲取到對應的元素(getElementById()、 getElementsByTagName()等)，然後再對這些元素進行操作。

jQuery也需要先選取所需的DOM元素，然後再針對這些元素進行操作。如下:

<script type="text/javascript">
$("#uid"); // 選取id屬性爲"uid"的單個元素
$("p"); // 選取所有的p元素
$(".test"); // 選擇所有帶有CSS類名"test"的元素
$("[name=books]"); // 選擇所有name屬性爲"books"的元素

// 多個選擇器以空格或指定符號隔開，將匹配與前者具有指定關係的最後一個選擇器所表示的元素
$("#uid span"); // 選擇id爲"uid"的元素的所有後代span元素
$("p > span"); // 選擇p元素的所有子代span元素
$("div + p"); // 選擇div元素後面緊鄰的同輩p元素
$("div p span"); // 選擇div元素的所有後代p元素的後代span元素


// 多個選擇器之間沒有空格，將匹配同時滿足這些選擇器條件的元素
$("p#uid"); // 選擇id屬性爲"uid"的p元素
$("div.foo"); // 選擇所有帶有CSS類名"foo"的div元素
$(".foo.bar"); // 選擇所有同時帶有CSS類名"foo"和"bar"的元素
$("input[name=books][id]"); // 選擇所有name屬性爲"books"並且具備id屬性的元素

// jQuery特有的選擇器，當然也可以和其他選擇器任意組合使用
$(":checkbox"); // 選取所有的checkbox元素
$(":text"); // 選取所有type爲text的input元素
$(":password"); // 選取所有type爲password的input元素
$(":checked"); // 選取所有選中的radio、checkbox、option元素
$(":selected"); // 選取所有選中的option元素
$(":input"); // 選取所有的表單控件元素(所有input、textarea、select、button元素)
</script>

1.4 篩選

選取集合中符合某些條件的元素，刪除集合中符合某些條件的元素，查找當前匹配元素的子元素、父元素、同輩元素、上一個元素、下一個元素等與之具有特定關係的元素。

<script type="text/javascript">
  // 以下方法都返回一個新的jQuery對象，他們包含篩選到的元素
$("ul li").eq(1); // 選取ul li中匹配的索引順序爲1的元素(也就是第2個li元素)
$("ul li").first(); // 選取ul li中匹配的第一個元素
$("ul li").last(); // 選取ul li中匹配的最後一個元素
$("ul li").slice(1, 4); // 選取第2 ~ 4個元素
$("ul li").filter(":even"); // 選取ul li中所有奇數順序的元素
$("div").find("p"); // 選取所有div元素的所有後代p元素
$("div").children(); // 選取所有div元素的所有子代元素
$("div").children("p"); // 選取所有div元素的所有子代p元素
$("span").parent(); // 選取所有span元素的父元素
$("span").parent(".foo.bar"); // 選取所有span元素的帶有CSS類名"foo"和"bar"的父元素
$("#uid").prev(); // 選取id爲uid的元素之前緊鄰的同輩元素
$("#uid").next(); // 選取id爲uid的元素之後緊鄰的同輩元素

</script>

1.5 DOM操作實例

• get and set in one

<script type="text/javascript">
// 返回一個匹配id爲"username"的元素的jQuery對象
var  uid = $("#username");
// 沒有傳入value參數，返回第一個匹配元素的value屬性值
var value = uid.val();
// 傳入了value參數，設置所有匹配元素的value值爲"CodePlayer"
uid.val("CodePlayer");

// 返回匹配所有包含CSS類名"foo"的div元素的jQuery對象
var div = $("div.foo");
// 沒有傳入value參數，返回第一個匹配元素的value元素
var fontSize = div.css("font-size");
// 傳入了value參數，設置所有匹配元素的font-size樣式爲"14px"
div.css("font-size", "14px");

</script>

• get first set all

<script type="text/javascript">
var $lis = $("ul li"); // 匹配ul元素的所有後代li元素
var className = $lis.attr("class"); // 只獲取第一個匹配的li元素的class屬性
$lis.attr("class", "codeplayer"); // 將所有匹配的li元素的class屬性設爲"codeplayer"
</script>

• 鏈式編程

jQuery對象的所有實例方法，在沒有特殊的返回需求的情況下，一般都會返回該jQuery對象本身(或者其它jQuery對象)，因此可以繼續調用返回的jQuery對象上的方法。

<script type="text/javascript">
// jQuery的鏈式編程風格
$("div").find("ul").addClass("menu").children().css("margin", 0).hide();

// 以下是上述代碼的分解描述
$("div") // 返回一個匹配所有div元素的jQuery對象
.find("ul") // 返回匹配這些div元素中的所有後代ul元素的jQuery對象
.addClass("menu") // 爲這些ul元素添加CSS類名"menu"，並返回當前對象本身
.children() // 返回匹配這些ul元素中的所有子代元素的jQuery對象
.css("margin", 0) // 爲這些子代元素設置css樣式"margin: 0"，並返回當前對象本身
.hide(); // 隱藏這些子代元素，並返回當前對象本身
</script>

在JS原生DOM操作中，如果通過getElementById()、getElementsByName()等方式獲取不到對應的元素，那麼將返回null，在null上訪問屬性或方法，將會拋出異常。

jQuery在匹配不到對應元素時將返回一個空的jQuery對象，仍然可以調用jQuery對象的方法，而且並不會報錯。因爲jQuery會智能地處理這種情況。如果該方法用於獲取數據，則返回null或undefined；如果該方法用於設置數據，則忽略設置操作，並返回該空對象本身；如果該方法用於篩選元素，則同樣返回一個新的jQuery空對象。

<script type="text/javascript">
  // 沒有標籤爲abc的DOM元素，$("abc")是一個空的jQuery對象，調用其find()方法將返回一個新的jQuery空對象
var a = $("abc").find("p");

// 如果不存在id爲notFound的元素，$("#notFound")是一個空的jQuery對象，獲取其id屬性，將返回undefined。
var b = $("#notFound").attr("id");

// 如果不存在id爲notFound的元素，$("#notFound")是一個空的jQuery對象，獲取其高度值，將返回null。
var c = $("#notFound").height();

// 如果不存在id爲uname的元素，$("#uname")是一個空的jQuery對象，設置其value值，將忽略該設置操作，並返回該空對象本身
var d = $("#uname").val("xxxxx");

</script>

1.5.1 屬性操作

<script type="text/javascript">
// selector 表示具體的選擇器

$("selector").val(); // 獲取第一個匹配元素的value值(一般用於表單控件)
$("selector").val("Hello"); // 設置所有匹配元素的value值爲"Hello"

$("selector").html(); // 獲取第一個匹配元素的innerHTML值
$("selector").html("Hello"); // 設置所有匹配元素的innerHTML值爲"Hello"

$("selector").text(); // 獲取第一個匹配元素的innerText值(jQuery已進行兼容處理)
$("selector").text("Hello"); // 設置所有匹配元素的innerText值爲"Hello"

$("selector").attr("class"); // 獲取第一個匹配元素class屬性
$("selector").attr("class", "code"); // 設置所有匹配元素的class屬性爲"code"
$("selector").removeAttr("class"); // 移除所有匹配元素的class屬性

$("selector").prop("checked"); // 獲取第一個匹配元素的checked屬性值
$("selector").prop("checked", true); // 設置所有匹配元素的checked屬性值爲true(意即選中所有匹配的複選框或單選框)
$("selector").removeProp("className"); // 移除所有匹配元素的className屬性
</script>

attr()函數和prop()函數都用於設置或獲取指定的屬性，它們的參數和用法也幾乎完全相同。區別如下：

• 操作對象不同

attr和prop分別是單詞attribute和property的縮寫

attr()依賴的是Element對象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value )

prop()依賴的是JS原生的 element[property] 和 element[property] = value

• 應用版本不同

attr()是jQuery 1.0版本就有的函數

prop()是jQuery 1.6版本新增的函數。毫無疑問，在1.6之前，你只能使用attr()函數；1.6及以後版本

• 用於設置的屬性值類型不同

attr()函數操作的是文檔節點的屬性，因此設置的屬性值只能是字符串類型，如果不是字符串類型，也會調用其toString()方法，將其轉爲字符串類型。

prop()函數操作的是JS對象的屬性，因此設置的屬性值可以爲包括數組和對象在內的任意類型。

-其他細節

<script type="text/javascript">
  <input id="uid" type="checkbox" checked="checked" value="1">

<script type="text/javascript">
// 當前jQuery版本爲1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);

document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true

// 取消複選框uid的選中(將其設爲false即可)
// 相當於 uid.checked = false;
$uid.prop("checked", false);

// attr()獲取的是初始狀態的值，即使取消了選中，也不會改變
document.writeln( $uid.attr("checked") ); // checked
// prop()獲取的值已經發生變化
document.writeln( $uid.prop("checked") ); // false
</script>
</script>

1.5.2 文檔處理

插入、修改、移動、刪除指定的DOM元素。

<script type="text/javascript">
  // 以下$A均表示當前jQuery對象，$B可以是選擇器字符串、html字符串、DOM元素、jQuery對象
$A.before( $B ); // 在$A之前插入$B
$A.after( $B ); // 在$A之後插入$B

$A.insertBefore( $B ); // 將$A插入到$B之前的位置
$A.insertAfter( $B ); // 將$A插入到$B之後的位置

$A.append( $B ); // 在$A內部的末尾位置追加$B
$A.appendTo( $B ); // 將$A追加到$B內部的末尾位置

$A.prepend( $B ); // 在$A內部的開頭位置追加$B
$A.prependTo( $B ); // 將$A追加到$B內部的開頭位置

$A.replaceAll( $B ); // 用$A替換$B
$A.replaceWith( $B ); // 用$B替換$A

$A.wrap( $B ); // 在$A的外側包裹$B
$A.unwrap( ); // 只移除$A的父元素的標籤
$A.wrapAll( $B ); // 在整個$A的外側用單個$B將其包裹起來
$A.wrapInner( $B ); // 在$A的內側包裹$B

$A.empty(); // 清空$A的所有內容
$A.remove(); // 刪除$A及其綁定的事件、附加數據等
$A.detach(); // 刪除$A，但保留其綁定的事件、附加數據等

$A.clone(); // 克隆一個$A
</script>

除了wrap系列方法以及empty()、clone()方法外，當使用上述插入、追加、替換、刪除方法時，如果用於插入/追加/替換/刪除的元素是文檔中的元素，則這些元素將從原位置上消失。

1.5.3 CSS操作

<script type="text/javascript">
$("selector").css("margin-left"); // 獲取第一個匹配元素的margin-left的屬性值
$("selector").css("marginLeft"); // 與上一行代碼作用相同，css()支持這兩種寫法

$("selector").css("marginLeft", 15); // 設置所有匹配元素的margin-left爲15px(數字的默認單位均爲px)
$("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // 一次性設置所有匹配元素的多個樣式屬性

$("selector").css( "marginLeft", ""); // 設爲空字符串，則表示刪除該樣式屬性
</script>

1.5.3 動畫效果

<script type="text/javascript">
  $("selector").show(); // 顯示隱藏的元素，默認不帶過渡動畫效果
$("selector").show( 400 ); // 顯示隱藏的元素，帶有400毫秒的過渡動畫效果
$("selector").show( "fast" ); // 顯示隱藏的元素，帶有200毫秒的過渡動畫效果
$("selector").show( "slow" ); // 顯示隱藏的元素，帶有600毫秒的過渡動畫效果

$("selector").hide(); // 隱藏顯示的元素，其用法與show()相同
$("selector").toggle(); // 切換顯示/隱藏元素(如果顯示就隱藏，隱藏就顯示)，其用法與show()類似

/* 下面的slide*、fade*系列方法與上面的show()、hide()、toggle()等方法作用相同，
 * 用法也類似，只是帶有不同的動畫效果
 */

$("selector").slideDown(); // 顯示隱藏的元素，帶有向下滑動的過渡動畫效果
$("selector").slideUp(); // 隱藏顯示的元素，帶有向上滑動的過渡動畫效果
$("selector").slideToggle(); // 切換顯示/隱藏的元素，帶有向上/下滑動的過渡動畫效果

$("selector").fadeIn(); // 顯示隱藏的元素，帶有淡入的過渡動畫效果
$("selector").fadeOut(); // 隱藏顯示的元素，帶有淡出的過渡動畫效果
$("selector").fadeToggle(); // 隱藏顯示的元素，帶有淡出的過渡動畫效果

//animate()方法設置CSS樣式，並執行一個從當前樣式到指定樣式的過渡動畫效果。
// 設置所有匹配元素的css樣式"width: 200px; height: 100px"，並執行一個當前樣式到指定樣式的過渡動畫效果
// 動畫的執行時間爲 1000 毫秒
$("selector").animate( { width: "200px", height: "100px" }, 1000 );
</script>

1.6 事件處理

<script type="text/javascript">
  function handler( event ){
  // 事件處理函數的執行代碼
  // 參數event表示當前事件對象，該對象已經過jQuery封裝標準化處理
  // 函數內的this表示觸發事件的當前DOM元素(不是jQuery對象)


        // 如果函數的返回值爲false，可以阻止事件冒泡和元素的默認事件行爲。
        // 例如：a標籤的click事件的默認跳轉行爲；form標籤的submit事件的默認表單提交行爲
}

// 以下方法均可爲所有匹配元素的click事件綁定處理函數
$("selector").click( handler );
$("selector").bind( "click", handler );
$("selector").on( "click", handler );
$("selector").one( "click", handler ); // 用於綁定一次性事件，第一次觸發後就自動解除綁定


// bind()等事件方法均支持爲多個事件(以空格隔開)綁定同一個處理函數
$("selector").bind( "mouseenter mouseleve", function(event){
  if(event.type == "mouseenter"){
    // mouseenter事件的執行代碼
  }else if(event.type == "mouseleve"){
    // mouseleve事件的執行代碼
  }
} );

</script>

與click()方法類似，jQuery還提供絕大多數事件的綁定方法，例如:dblclick()、focus()、change()、hover()、submit()(僅限於form表單元素)、mousedown()、mouseover()、keydown()、keypress()等。

1.7 Ajax

$.ajax()是jQuery中Ajax的底層實現，其它Ajax請求方法都是基於該方法實現的。

• 在發送AJAX請求之前，序列化JS內容或表單內容，以便用作AJAX請求發送的數據。
• 快速發送AJAX請求，並處理響應數據(支持html、xml、text、json、jsonp、script等多種數據類型)。
• 監聽AJAX事件，綁定事件觸發時執行的處理函數。

<script type="text/javascript">
//發送並處理AJAX請求。這是jQuery底層的AJAX實現，包含處理AJAX請求所需的一切功能。其他發送AJAX請求的方法都是對該方法的進一步封裝。
  $.ajax({
  url: "sysUser?action=add",
  type: "post",
  data: "username=hello&password=123456", // 附加的請求數據，也可以爲對象格式
  dataType: "json",
  success: function(data){
    // 這是Ajax請求成功後執行的回調函數
    // 因爲dataType爲json，如果服務器返回的是JSON格式數據，jQuery會將其轉爲對應的JS對象

    // 假設data爲{ msg: "Ajax請求成功", uid: 2 }
    alert( data.msg );
  }
});

  //發送並處理GET方式的AJAX請求
$.get("sysUser", { username: "hello", password: "123456" }, function(data){
  // 這是Ajax請求成功後執行的回調函數，就是上面$.ajax中的success選項
});

// 發送並處理POST方式的AJAX請求。
$.post("sysUser", { username: "hello", password: "123456" }, function(data){
  // 這是Ajax請求成功後執行的回調函數，就是上面$.ajax中的success選項
});
</script>

ajax參數屬性彙總

名稱	類型	描述
url	字符串	請求的url
type	字符串	將要使用的HTTP方法。通常是POST或GET。如果省略，則爲GET
data	對象	一個對象，其屬性作爲查詢參數傳遞給請求。如果是“GET”請求，則把數據作爲查詢字符串傳遞；如果是“POST”請求，則把數據作爲請求體傳遞。在這兩種情況下，都是由$.ajax()方法來處理值的編碼
contentType	字符串	將要在請求上指定的內容類型。如果省略，默認爲application/x-www-form-urlencoded(與表單提交所使用默認類型相同)
dataType	字符串	一個關鍵字，用來標識響應返回數據的類型。這個值決定在把數據傳遞給回調函數之前（如果有）進行什麼後續處理。有效值如下：xml 、html、json、jsonp、script、text
timeout	數值	設置Ajax請求的超時值（毫秒）。如果請求這段時間內沒有完成，則中止請求並調用錯誤回調函數。
success	函數	如果請求處理成功，則這個函數被調用。響應體作爲第一個參數被返回給這個函數，並且根據指定的dataType屬性進行格式化。第二個參數是包含狀態碼的字符串。
error	函數	如果請求處理過程中產生錯誤，則這個函數被調用。三個實參被傳遞給這個函數：XMLHttpRequest對象、狀態消息字符串以及XMLHttpRequest對象所返回的異常對象（可選）。
complete	函數	在請求完成時被調用。兩個實參被傳遞：XHR實例和狀態消息字符串。如果制訂了success或error回調函數，則這個函數在success或error回調函數執行後被調用。
beforeSend	函數	在發起請求之前被調用，這個函數被傳遞XMLHttpReqeust實例，用來執行請求的預處理操作。
async	布爾型	如果指定爲false，則代表同步提交請求。在默認情況下，提交請求是異步（true）。

1.8 輔助方法

1.8.1 處理邏輯代碼

<script type="text/javascript">
  // 去除字符串兩端的空白字符
var str1 = $.trim( "  abc d  " ); // "abc d"
var str2 = $.trim( null ); // ""
// 判斷是否是數組
var isArray1 = $.isArray( [] ); // true
var isArray2 = $.isArray( new Array() ); // true
// 判斷是否是函數
var result1 = $.isFunction( function(){} ); // true
var result2 = $.isFunction( new Function() ); // true
// 檢索數組中是否存在指定值，並返回其第一次出現的索引
var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3
var index2 = $.inArray( 3, [ 2 ] ); // -1 (不存在返回-1)
// 將JSON字符串轉爲對應的JS對象
var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );
var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );
</script>

1.8.2 遍歷

<script type="text/javascript">
  // $.each()用於遍歷數組元素或對象屬性
var array = [ 12, "jQuery", true ];
$.each( array, function(i, value){
  // i 表示當前迭代元素的索引或對象的屬性名稱
  // value 表示當前迭代的數組元素或對象的屬性值
  // this 與  value 相同
  alert( i + " = " + value );

  // 如果函數return false，將終止遍歷
});


// $.map()用於遍歷數組元素或對象屬性，並將每次執行遍歷函數的返回值封裝爲數組返回
var obj = { name: "jQuery", age: 20, isAdmin: true };
var resultArray = $.map( obj, function(value, i){ // 注意參數順序與each()不同
  // value 表示當前迭代的數組元素或對象的屬性值
  // i 表示當前迭代元素的索引或對象的屬性名稱
  // this 指向全局對象(window)

  if( typeof value === "number"){
    return null; // 如果函數返回null或undefined，則不會添加到結果數組中
  }else{
    return value;
  }
} );
// resultArray 爲 [ "jQuery", true ]


//$.grep()用於遍歷數組元素，並根據函數的返回值(true/false)來過濾數組元素
var array2 = [ "Hello", 12, "jQuery", true ];
var resultArray2 = $.grep( array2, function(value, i){ // 注意參數順序與each()不同
  // value 表示當前迭代的數組元素
  // i 表示當前迭代元素的索引
  // this 指向全局對象(window)

  return i % 2 == 0; // 保留返回值不爲false的元素
} );
// resultArray2 爲 [ "Hello", "jQuery" ];
</script>

1.8.3 DOM元素和jQuery對象的相互轉換

實際上jQuery對象是一個類數組對象。它將匹配的所有DOM元素都依次存儲在數字索引形式的屬性中，並用length屬性存儲DOM元素的個數。

<script type="text/javascript">
var p = $("p"); // 返回一個包含所有p元素的jQuery對象
p[0]; // 第1個p元素
p[0].id ; // 返回第1個p元素的id
p[1]; // 第2個p元素
p[2]; // 第3個p元素
p.length; // p元素的個數

//jQuery提供了一個get()方法，用於獲取對應索引的DOM元素。
var p = $("p"); // 返回一個包含所有p元素的jQuery對象
p.get(0); // 第1個p元素
p.get(1); // 第2個p元素
p.get(2); // 第3個p元素
p.get( ); // 不傳入任何參數，將以數組形式返回包含的所有p元素
</script>

2. 選擇器列表

2.1根據id、class類名、標籤名等篩選元素

選擇器	起始版本	實例	選取
*	1.0	$("*")	所有元素
#id	1.0	$("#abc")	id="abc"的元素
.className	1.0	$(".resClass")	所有包含類名"resClass"的元素
tagName	1.0	$("p")	所有p元素

2.2 根據多個選擇器的組合篩選元素

選擇器	起始版本	實例	選取
s1,s2,sN	1.0	$("p,div,#abc")	所有的p元素、div元素和id="abc"的元素
s1s2sN	1.0	$(":radio[name=uid]:checked")	所有被選中的name="uid"的radio元素
ancestor escendant	1.0	$("p span")	p標籤內的所有span元素
parent > child	1.0	$("p > span")	所有作爲p標籤的直接子元素的span元素
prev + next	1.0	$("label + input")	所有緊跟在label元素後面的那個同輩input元素
prev ~ sibings	1.0	$("tr#L2 ~ tr")	在id="L2"的tr元素之後的所有同輩tr元素

2.3 屬性相關選擇器

選擇器	起始版本	實例	選取
[attribute]	1.0	$("[href]")	所有帶有href屬性的元素
[attribute=value]	1.0	$("[name=uid]")	所有name="uid"的元素
[attribute!=value]	1.0	$("[name!=uid]")	所有name屬性的值不等於"uid"的元素
[attribute^=value]	1.0	$("[name^=uid]")	所有name屬性的值以"uid"開頭的元素
[attribute$=value]	1.0	$("[src$='.gif']")	所有src屬性以".gif"結尾的元素
[attribute~=value]	1.0	$("[name~='uid']")	name屬性的值包含給定的單詞"uid"的所有元素("uid"與其他詞以空格分隔)
[attribute*=value]	1.0	$("[name*=uid]")	所有name屬性的值包含"uid"的元素

2.4僞類選擇器——表單相關

選擇器	起始版本	實例	選取
:input	1.0	$(":input")	所有input、select、textarea和button標籤
:text	1.0	$(":text")	所有type="text"的input元素
:password	1.0	$(":password")	所有type="password"的input元素
:radio	1.0	$(":radio")	所有type="radio"的input元素
:checkbox	1.0	$(":checkbox")	所有type="checkbox"的input元素
:submit	1.0	$(":submit")	所有type="submit"的input和button元素
:reset	1.0	$(":reset")	所有type="reset"的input元素和button元素
:button	1.0	$(":button")	所有button標籤(不區分type)和type="button"的input元素
:image	1.0	$(":image")	所有type="image"的input元素
:file	1.0	$(":file")	所有type="file"的input元素

2.5 僞類選擇器——表單狀態相關(表單控件是指input、select、textarea、button、option元素)

選擇器	起始版本	實例	選取
:enabled	1.0	$(":enabled")	所有可用(沒有disabled屬性)的表單控件元素
:disabled	1.0	$(":disabled")	所有禁用(帶有disabled屬性)的表單控件元素
:selected	1.0	$(":selected")	所有被選中的
:checked	1.0	$(":checked")	所有被選中的radio、checkbox和

4.6 僞類選擇器——根據元素在匹配到的所有元素中的特定次序篩選元素

選擇器	起始版本	實例	選取
:first	1.0	$("p:first")	第一個p標籤
:last	1.0	$("p:last")	最後一個p標籤
:even	1.0	$("tr:even")	所有偶數tr標籤
:odd	1.0	$("tr:odd")	所有奇數tr標籤
:eq(index)	1.0	$("li:eq(3)")	第4個li標籤(index從0開始算起)
:gt(index)	1.0	$("li:gt(2)")	所有index大於2的li標籤(第4、5、6……個li標籤)
:lt(index)	1.0	$("li:lt(2)")	所有index小於2的li標籤(第1、2個li標籤)

2.7 僞類選擇器——根據包含、排除、可見、動畫或其他關係篩選元素

選擇器	起始版本	實例	選取
:has(selector)	1.1.4	$("ul:has(li.abc)")	所有包含類名爲"abc"的li標籤的ul元素
:not(selector)	1.0	$("input:not(:text)")	所有不是文本框的input元素
:contains(text)	1.1.4	$(":contains(abc)")	所有包含文本"abc"的元素
:parent	1.0	$(":parent")	所有包含子元素或文本內容(哪怕是空格或換行)的元素
:empty	1.0	$(":empty")	所有沒有子元素和文本內容(哪怕是空格或換行)的元素
:visible	1.0	$(":visible")	所有可見的元素
:hidden	1.0	$(":hidden")	所有不可見的元素(包括type="hidden"的input元素)
:header	1.2	$(":header")	所有標題標籤：h1 ~ h6
:animated	1.2	$(":animated")	所有正在執行動畫效果的元素
:focus	1.6	$(":focus")	當前獲得焦點的元素
:root	1.9	$(":root")	當前文檔的根元素(html元素)
:target	1.9	$(":target")	id屬性等於當前頁面URI中的hash碼值的元素
:lang(language)	1.9	$(":lang(en)")	所有lang屬性以"en"爲前綴的元素