jquery中常用的函數和屬性詳細解析

 本篇文章主要是對jquery中常用的函數和屬性進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助

Dom： Attribute：屬性 $("p").addClass(css中定義的樣式類型); 給某個元素添加樣式 $("img").attr({src:"test.jpg",title:"test Image"}); 給某個元素添加屬性/值，參數是map $("input").attr({"checked", "checked"});  $("img").attr("title", function() { return this.src }); 給某個元素添加屬性/值 $("元素名稱").html(); 獲得該元素內的內容（元素，文本等） $("元素名稱").html("<b>new stuff</b>"); 給某元素設置內容 $("元素名稱").removeAttr("屬性名稱") 給某元素刪除指定的屬性以及該屬性的值 $("元素名稱").removeClass("class") 給某元素刪除指定的樣式 $("元素名稱").text(); 獲得該元素的文本 $("元素名稱").text(value); 設置該元素的文本值為value $("元素名稱").toggleClass(class) 當元素存在參數中的樣式的時候取消,如果不存在就設置此樣式 $("input元素名稱").val(); 獲取input元素的值 $("input元素名稱").val(value); 設置input元素的值為value   Manipulation： $("元素名稱").after(content); 在匹配元素後面添加內容 $("元素名稱").append(content); 將content作為元素的內容插入到該元素的後面 $("元素名稱").appendTo(content); 在content後接元素 $("元素名稱").before(content); 與after方法相反 $("元素名稱").clone(布爾表達式) 當布爾表達式為真時，克隆元素（無參時，當作true處理） $("元素名稱").empty() 將該元素的內容設置為空 $("元素名稱").insertAfter(content); 將該元素插入到content之後 $("元素名稱").insertBefore(content); 將該元素插入到content之前 $("元素").prepend(content); 將content作為該元素的一部分，放到該元素的最前面 $("元素").prependTo(content); 將該元素作為content的一部分，放content的最前面 $("元素").remove(); 刪除所有的指定元素 $("元素").remove("exp"); 刪除所有含有exp的元素 $("元素").wrap("html"); 用html來包圍該元素 $("元素").wrap(element); 用element來包圍該元素   Traversing： add(expr)當前匹配元素集合增加新的匹配元素集合‘expr'，形成新的匹配元素集合;   例子：     復制代碼 代碼如下: $(document).ready(function(){        $("div").css("border", "2px solid red")                   .add("p")//文檔中的P元素會應用背景色為yellow的CSS樣式；                  .css("background", "yellow");       });    children(expr)從當前匹配元素集合中得到各個元素第一層子集集合，形成新的元素集合 contains(str) 匹配集合中包含str這個變量文本的元素集合，返回匹配元素集合 end()用於返回到調用 find() 或 parents() 函數（或者其它遍歷函數）之前的 jQuery 對象   例子 $("#div1").find("p").hide().end().hide() 第一個hide()是對於p標簽的 然後用end()結束對p標簽的引用而返回到#div1標簽 所以第二個hide()是對於#div1起作用的 如果不加end() 則兩個hide()都是對p標簽起作用   filter(expression) find(expr) filter和find的區別： filter將在一組已經選取的元素裡面選擇; find將在一組已經選取的元素的子節點裡面選擇; <html代碼> <div class="css">        <p class="rain">測試1</p> </div> <div class="rain">        <p>測試2</p> </div> </html> 如果我們使用find()方法： var $find =   $("div").find(".rain"); alert( $find.html() ) ; 將會輸出：測試1 如果使用filter（）方法： var $filter = $("div").filter(".rain"); alert( $filter.html() ); 將會輸出：測試2   區別在於： find()會在div元素內 尋找 class為rain 的元素。 而filter()則是篩選div的class為rain的元素。 一個是對它的子集操作，一個是對自身集合元素篩選。   is(expr)//判斷現有集合是否屬於‘expr'集合中的一部分或是相等。如果是則返回true，否則返回false   next(expr)//取得一個包含匹配的元素集合中每一個元素緊鄰的後面兄弟元素集合。 not(el)//匹配集合中沒有滿足過濾要求的元素集合   例子： $("div").not(".green, #blueone")    $("input:not(:checked) + span") $('tr:not([th]):odd')   parent(expr)取得一個包含著所有匹配元素的唯一父元素的元素集合 parents(expr)//得到匹配元素集合中各個元素的所有祖先元素集合 prev(expr)得到匹配元素集合中各個元素緊鄰的前一個兄弟元素集合 siblings(expr)得到所有匹配元素集合中各個元素的所有兄弟元素集合   Core： $(html).appendTo("body") 相當於在body中寫了一段html代碼 $(elems) 獲得DOM上的某個元素 $(function(){……..}); 執行一個函數 $("div > p").css("border", "1px solid gray"); 查找所有div的子節點p，添加樣式 $("input:radio", document.forms[0]) 在當前頁面的第一個表單中查找所有的單選按鈕 jQuery為開發插件提拱了兩個方法，分別是： jQuery.extend(object) 為擴展jQuery類本身.為類添加新的方法。   舉例 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); 引用jQuery：    代碼如下: $.min(3,4); //return 3 jQuery.fn.extend(object)給jQuery對象添加方法,是對jQuery.prototype進得擴展   jQuery.fn = jQuery.prototype = {  　　　init: function( selector, context ) {//....　 　　　//......  };      舉例  代碼如下: $.fn.extend({            alertWhileClick:function(){              $(this).click(function(){                   alert($(this).val());              });           }      });    引用jQuery： $("#input1").alertWhileClick();    jQuery( expression, [context] ) ---$( expression, [context]); 在默認情況下，$()查詢的是當前HTML文檔中的DOM元素。   each( callback ) 以每一個匹配的元素作為上下文來執行一個函數   舉例：1  代碼如下: $("span").click(function){ $("li").each(function(){ $(this).toggleClass("example"); }); });   舉例：2 代碼如下: $("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });   jQuery Event:事件   ready(fn); $(document).ready()注意在body中沒有onload事件，否則該函數不能執行。在每個頁面中可以有很多個函數被加載執行，按照fn的順序來執行。   例子： $(document).ready(function(){alert("aa");}   bind( type, [data], fn ) 為每一個匹配元素的特定事件（像click）綁定一個或多個事件處理器函數。可能的事件type屬性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error   例子1： $('#myBtn').bind("click",function(){     alert('click');  });    例子2： function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)    one( type, [data], fn ) 為每一個匹配元素的特定事件（像click）綁定一個或多個事件處理器函數。在每個對象上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同。 type(String) : 事件類型。 data(Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象。 fn(Function) : 綁定到每個匹配元素的事件上面的處理函數。   trigger( type, [data] ) 在每一個匹配的元素上觸發某類事件。 $("p").click( funct