jQuery選擇器大全

jQuery選擇器,jQuery基本知識

1、核心:$是jquery類的一個別名,$()構造一個jquery對象,jQuery 的核心功能都是經過這個函數實現的。 jQuery中的一切都基於這個函數，或者說都是在以某種方式使用這個函數。

一、 ${表達式}：根據這個表達式來查找全部匹配的元素。

eg:$("div>p"); 查找全部p元素，且這些p元素都是div的子元素.

   $("input:radio",document.forms[0]); 查找文檔第一個表單中，全部的單選按鈕。

   $("div",xml.responseXML);在一個由ajax返回的xml文檔中，查找全部的div元素。

二、$(html標記字符串) :根據提供的html字符串，建立jquery對象包裝的dom元素。

eg: $("<div><p>Hello</p></div>").appendTo("body");

    建立一個 <input> 元素必須同時設定 type 屬性

    $("<input type='text'>")

、$(dom元素):將一個或多個dom元素轉換爲jquery對象。

eg: $(document.body).css( "background", "black" ); 設置頁面背景色

四、$(document).ready(function(){})==$(function(){})；在頁面加載完成後自動執行的代碼。

2、jquery對象訪問。eq返回的是jquery對象，只能使用jquery方法，get返回的是dom元素對象，只能使用dom方法.

一、$(dom元素).each(function(){}):以每個匹配的元素做爲上下文來執行一個函數

二、$(dom元素).size()==$(dom元素).length;對象中元素的個數。eg:<img src="test1.jpg"/> <img src="test2.jpg"/>,jquery代碼：$("img").size(); 返回2

三、context：返回傳給jQuery()的原始的DOM節點內容，即jQuery()的第二個參數。若是沒有指定，那麼context指向當前的文檔(document)。

四、$(dom元素).get()：取得全部匹配的dom元素的集合。若是你想要直接操做 DOM 對象而不是 jQuery 對象，這個函數很是有用。

五、$(dom元素).get(index)：取得其中一個匹配的元素.

六、$(dom元素).index():搜索與參數表示的對象匹配的元素，並返回相應元素的索引值。

3、插件機制:

一、jQuery.fn.extend(object);擴展 jQuery 元素集來提供新的方法,針對某一個dom元素。

eg:jQuery.fn.extend({

      check: function() { return this.each(function() { this.checked = true; });},

      uncheck: function() { return this.each(function() { this.checked = false; });}

     });

  調用：

     $("input[type=checkbox]").check();

     $("input[type=radio]").uncheck();

二、$.extend(object);用來在jQuery命名空間上增長新函數,針對全部dom元素。

$.extend({

   min:function(a,b){return a<b?a:b;},

   max:function(a,b){return a>b?a;b;}

 });

調用：$.max(10,20);

4、選擇器

基本：

一、$("#id"): 根據給定的ID匹配一個元素。

二、$("dom元素名")：根據給定的元素名匹配全部元素

三、$(".Class類名"): 根據給定的類匹配元素。

四、$("*") ：匹配全部元素。

五、$("dom元素.class類名")：選擇全部class屬性爲指定類名的dom元素。

六、$(".stripe tr"): 獲取class屬性爲stripe的table元素下的全部行

層級：

一、$("ancestor descendant"):在給定的祖先元素下匹配全部的後代元素

二、$("parent > child"):在給定的父元素下匹配全部的子元素

三、$("prev + next"):匹配全部緊接在 prev 元素後的 next 元素

四、$("prev ~ siblings"):匹配 prev 元素以後的全部 siblings(同級) 元素

簡單:

一、$("tr:first") 匹配找到的第一個元素

二、$("tr:last") 匹配找到的最後一個元素

三、$("input:not(:checked)") 去除全部與給定選擇器匹配的元素

四、$("tr:even") 匹配全部索引值爲偶數的元素，從 0 開始計數

五、$("tr:odd") 匹配全部索引值爲奇數的元素，從 0 開始計數

六、$("tr:eq(1)") 匹配一個給定索引值的元素

七、$("tr:gt(0)") 匹配全部大於給定索引值的元素

八、$("tr:lt(2)") 匹配全部小於給定索引值的元素

內容：

一、$("div:contains('John')") 匹配包含給定文本的元素

二、$("div:has(p)") 匹配全部包含 p 元素的 div 元素

三、$("td:empty") 查找全部不包含子元素或者文本的空元素

可見性：

一、$("tr:visible") 查找全部可見的 tr 元素

二、$("tr:hidden") 匹配全部的不可見元素，input 元素的 type 屬性爲 "hidden" 的話也會被匹配到

屬性：

一、$("div[id]") 查找全部含有 id 屬性的 div 元素

二、$("input[name='newsletter']") 查找全部 name 屬性是 newsletter 的 input 元素

三、$("input[name!='newsletter']") 查找全部 name 屬性不是 newsletter 的 input 元素

四、$("input[name^='news']") 查找全部 name 以 'news' 開始的 input 元素

五、$("input[name$='letter']") 查找全部 name 以 'letter' 結尾的 input 元素

六、$("input[name*='man']") 查找全部 name 包含 'man' 的 input 元素

七、$("input[id][name$='man']") 找到全部含有 id 屬性，而且它的 name 屬性是以 man 結尾的

子元素：

一、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N個子或奇偶元素

二、$("ul li:first-child") 在每一個 ul 中查找第一個 li

三、$("ul li:last-child") 在每一個 ul 中查找最後一個 li

四、$("ul li:only-child") 在 ul 中查找是惟一子元素的 li

表單：

一、$(":input") 查找全部的input元素

二、$("text") 匹配全部的單行文本框

三、$(":password") 匹配全部密碼框

四、$("radio") 匹配全部單選按鈕

五、$("checkbox") 匹配全部複選框

六、$("submit") 匹配全部提交按鈕

七、$("image") 匹配全部圖像域

八、$("button") 匹配全部按鈕

九、$("file") 匹配全部文件域

十、$("hidden") 匹配全部不可見元素，或者type爲hidden的元素

表單對象屬性：

一、$("input:checked") 匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option)

二、$("input:enabled") 匹配全部可用元素

三、$("input:disabled") 匹配全部不可用元素

0四、$("select option:selected") 匹配全部選中的option元素

5、屬性操做

操做屬性：

一、$("img").attr("src"); 返回文檔中第一個圖像的src屬性值。

二、$("img").attr("src","test.jpg"); 爲全部匹配的元素設置一個屬性值

三、$("img").attr("title", function() { return this.src }); 爲全部匹配的元素設置一個計算的屬性值

四、$("img").removeAttr("src"); 從每個匹配的元素中刪除一個屬性

五、$("img").attr({ src: "test.jpg", alt: "Test Image" }); 將一個「名/值」形式的對象設置爲全部匹配元素的屬性。

操做CSS:

一、$("p").addClass("selected"); 爲每一個匹配的元素添加指定的類名

二、$("p").removeClass("selected"); 從全部匹配的元素中刪除所有或者指定的類。一個或多個要刪除的CSS類名，請用空格分開

$("p").removeClass();刪除匹配元素的全部類

三、$("p").toggleClass("selected"); 若是存在（不存在）就刪除（添加）一個類

四、 var count = 0;

   $("p").click(function(){

  $(this).toggleClass("highlight", count++ % 3 == 0);

}); 每點擊三下加上一次 'selected' 類

HTML代碼:

一、$("div").html(); 取得第一個匹配元素的html內容

二、$("div").html("<p>Hello Again</p>"); 設置每個匹配元素的html內容

文本：

一、$("p").text(); 取得全部匹配元素的內容

二、$("p").text("Some new text."); 設置全部匹配元素的文本內容

值：

一、 $("#single").val() 得到第一個匹配元素的當前值。

二、$("input").val("hello world!"); 設置每個匹配元素的值

6、篩選

過濾：

一、$("p").eq(1) 獲取第N個元素，這個元素的位置是從0算起

二、 if ( $(this).hasClass("protected") ) 檢查當前的元素是否含有某個特定的類，若是有，則返回true。

三、$("p").filter(".selected") 篩選出與指定表達式匹配的元素集合

四、is(expr) 用一個表達式來檢查當前選擇的元素集合，若是其中至少有一個元素符合這個給定的表達式就返回true。

五、$("p").not( $("#selected")[0] ) 刪除與指定表達式匹配的元素

查找：

一、$("div").children();取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合。

二、$("p").find("span");搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

三、$("p").next();取得一個包含匹配的元素集合中每個元素緊鄰的後面同輩元素的元素集合

四、$("p").prev();取得一個包含匹配的元素集合中每個元素緊鄰的前一個同輩元素的元素集合。

五、$("div").parent;取得一個包含着全部匹配元素的惟一父元素的元素集合。

六、$("span").parents;找到每一個span元素的全部祖先元素

七、$("div").siblings();取得一個包含匹配的元素集合中每個元素的全部惟一同輩元素的元素集合

7、文檔處理

內部插入：

一、$("p").append("Hello"); 向每一個匹配的元素內部尾部追加內容

二、$("p").prepend("Hello"); 向每一個匹配的元素內部前部追加內容

二、$("p").appendTo("#foo"); 把全部段落追加到ID值爲foo的元素中。

外部插入：

一、$("p").after("Hello"); 在每一個匹配的元素以後插入內容

二、$("p").before("Hello"); 在每一個匹配的元素以前插入內容

包裹

一、$("p").wrap("<div class='wrap'></div>"); 把全部匹配的元素用其餘元素的結構化標記包裹起來。

替換：

一、$("p").replaceWith("Paragraph. "); 將全部匹配的元素替換成指定的HTML或DOM元素。

刪除：

一、$("p").empty(); 刪除匹配的元素集合中全部的子節點。

二、$("p").remove(); 從DOM中刪除全部匹配的元素

8、CSS操做

CSS:

一、$("p").css("color"); 取得第一個段落的color樣式屬性的值

二、$("p").css({ color: "#ff0011", background: "blue" }); 把一個「名/值對」對象設置爲全部匹配元素的樣式屬性。

三、$("p").css("color","red"); 在全部匹配的元素中，設置一個樣式屬性的值

位置：

一、var offset = p.offset();獲取匹配元素在當前視口的相對偏移，返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。

二、var position = p.position();獲取匹配元素相對父元素的偏移

尺寸：

一、$("p").height(); 取得第一個匹配元素當前計算的高度值（px）。

二、$("p").height(20); 爲每一個匹配的元素設置CSS高度(hidth)屬性的值

三、$("p").width(); 取得第一個匹配元素當前計算的寬度值（px）。$(window).width(); 獲取當前窗口的寬

四、$("p").width(20); 爲每一個匹配的元素設置CSS寬度(width)屬性的值

9、效果

基本：

一、$("p").show() 顯示隱藏的匹配元素

二、$("p").hide() 隱藏顯示的元素

三、$("p").show("slow"); 以優雅的動畫顯示全部匹配的元素，並在顯示完成後可選地觸發一個回調函數。

  speed (String,Number) : 三種預約速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

callback (Function) : (Optional) 在動畫完成時執行的函數，每一個元素執行一次。

用迅速的動畫將隱藏的段落顯示出來，歷時200毫秒。並在以後執行反饋！

<p style="display: none">Hello</p>

jQuery 代碼:

$("p").show("fast",function(){

$(this).text("Animation Done!");

});

四、$("p").hide("slow"); 以優雅的動畫隱藏全部匹配的元素，並在顯示完成後可選地觸發一個回調函數。

五、$("p").toggle() 切換元素的可見狀態

六、$("p").toggle("slow"); 以優雅的動畫切換全部匹配的元素，並在顯示完成後可選地觸發一個回調函數

淡入淡出:

一、$("p").fadeIn("slow"); 經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數

二、$("p").fadeOut("slow"); 經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。

三、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把全部匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回調函數

自定義：

一、$("#block").animate({

width: "90%",

height: "100%",

fontSize: "20em",

borderWidth: 10

}, 1000 );用於建立自定義動畫的函數。

10、事件

事件處理：

一、$("p").bind("click", function(){ alert( $(this).text() );}); 爲每個匹配元素的特定事件（像click）綁定一個事件處理器函數

二、$("p").one("click",function(){alert(${this}.text());}) 當全部段落被第一次點擊的時候，顯示全部其文本

三、trigger(type,[data])在每個匹配的元素上觸發某類事件

事件委派：$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});。給全部當前以及未來會匹配的元素綁定一個事件處理函數（好比click事件）。也能綁定自定義事件。與bind()不一樣的是，live()一次只能綁定一個事件

事件切換:一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法

$("td").hover(

function () {

$(this).addClass("hover");

},

function () {

$(this).removeClass("hover");

}

);鼠標懸停的表格加上特定的類

四、每次點擊後依次調用函數。

$("td").toggle(

function () {

$(this).addClass("selected");

},

function () {

$(this).removeClass("selected");

}

);

五、事件:

一、$("p").blur(); 觸發每個匹配元素的blur事件

二、$("p").blur( function () { alert("Hello World!"); } ); 在每個匹配元素的blur事件中綁定一個處理函數

三、change()；change事件會在元素失去焦點的時候觸發，也會當其值在得到焦點後改變時觸

四、change(fn);在每個匹配元素的change事件中綁定一個處理函數。

五、$("p").click(); 觸發每個匹配元素的click事件

六、$("p").click(function(){});在每個匹配元素的click事件中綁定一個處理函數

七、dblclick()；dblclick事件會在元素的同一點雙擊時觸發。

八、$("p").dblclick( function () { alert("Hello World!"); }); 在每個匹配元素的dblclick事件中綁定一個處理函數。

九、$(document).ready(function(){ $("#login").focus();}); 觸發每個匹配元素的focus事件。

十、$("input[type=text]").focus(function(){this.blur();}); 在每個匹配元素的focus事件中綁定一個處理函數。

十一、keydown()；keydown事件會在鍵盤按下時觸發。

十二、keydown(fn)；在每個匹配元素的keydown事件中綁定一個處理函數。

1三、keypress()；觸發每個匹配元素的keypress事件

1四、keypress(fn)；在每個匹配元素的keypress事件中綁定一個處理函數。

1五、keyup()；觸發每個匹配元素的keyup事件

1六、keyup(fn)；在每個匹配元素的keyup事件中綁定一個處理函數。

1七、mousedown();

1八、mouseup();

1九、mousemove();

20、mouseover();

2一、mouseout();

2二、$("form:first").submit();提交本頁的第一個表單。

2三、$("form").submit(function(){return false;});阻止頁面提交。

11、ajax

ajax請求：

   一、通有方式：$.ajax(prop);prop是一個hash表，它能夠傳遞的key/value有如下幾種:

     (String)type：數據傳遞方式(get或post)。

     ((String)url：數據請求頁面的url

     ((String)data：傳遞數據的參數字符串，只適合post方式

     ((String)dataType：期待數據返回的數據格式(例如 "xml", "html", "script",或 "json")

     ((Boolean)ifModified： 當最後一次請求的相應有變化是才成功返回，默認值是false

     ((Number)timeout:設置時間延遲請求的時間。能夠參考$.ajaxTimeout

     ((Boolean)global：是否爲當前請求觸發ajax全局事件，默認爲true

     ((Function)error：當請求失敗時觸發的函數。

     ((Function)success：當請求成功時觸發函數

     ((Function)complete：當請求完成後出發函數

  二、$.get(url, params, callback) 用get方式向遠程頁面傳遞參數，請求完成後處理函數，除了url外，其它參數任意選擇！

     eg:$.get(   "ajax.asp",

        { name: "young", age: "25" },

        function(data){ alert("Data Loaded: " + data); }

      )

  三、$.getJSON(url, params, callback) 用get方式向遠程json對象傳遞參數，請求完成後處理函數callback

  四、$.post(url, params, callback) 用post方式向遠程頁面傳遞參數，請求完成後處理函數callback

12、工具類

數組和對象操做：

   一、$.each(obj,callback); 通用例遍方法，可用於例遍對象和數組。回調函數擁有兩個參數：第一個爲對象的成員或數組的索引，第二個爲對應變量或內容。

   $.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});

 二、jQuery.grep(array,callback,[invert])；使用過濾函數過濾數組元素，此函數至少傳遞兩個參數：待過濾數組和過濾函數

 三、$.map(array,callback);將一個數組中的元素轉換到另外一個數組中

 四、$.inArray(value,array);肯定第一個參數在數組中的位置(若是沒有找到則返回 -1 ),從0開始。

 五、$.merge( [0,1,2], [2,3,4] ) ；合併兩個數組。返回的結果會修改第一個數組的內容——第一個數組的元素後面跟着第二個數組的元素，不去掉重複項。

 六、$.unique(array);刪除數組中重複元素

 七、$.trim(" hello, how are you? "); 去掉字符串起始和結尾的空格

 八、$.isArray(obj);測試對象是否爲數組。

 九、$.isFunction(obj); 測試對象是否爲函數

URL:

一、$.param(obj);將表單元素數組或者對象序列化。是.serialize()的核心方法。

eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params);

二、$("form").serialize() ；序列表單內容爲字符串，用於 Ajax 請求

十3、jquery操做單選框

if($("input[type='radio']:checked")){
 
     var tt=$("input[name='chk']:checked").val();
 
}

十4、jquery操做複選框

var chkArr="";
 
$(".cc:checked").each(function(){
 
       chkArr+=$(this).val()+"|";
 
});

十5、jquery實現複選框全選

var checked=$("#allchk").attr("checked");
 
$(".ww").each(function(){
 
   if($(this).attr("checked")!=checked){$(this).click();}
 
});