jQuery學習筆記之jQuery構建函數的7種方法

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery學習筆記之jQuery構建函數的7種方法

編輯：JQuery特效代碼

一:$(selectorStr[,限制范圍]),接受一個選擇器(符合jQuery規范的字符串),返回一個jQuery對象;

. 代碼如下:
//$(selector[,限制范圍])
         $(".guo").click(function () {//這裡沒有context參數
             $("a.aguo", this).css({"color":"red"});//this就是context參數,用於限定范圍
         });

二:$(htmlStr[,文檔對象]),$(html[,json對象])傳入html字符串,創建一個新的dom元素

當傳入的是字符串的時候,構造函數會判斷是選擇器字符串還是html字符串.,
如果是選擇器字符串:則遍歷dom,查找與之匹配的元素,如果沒有匹配元素,
會返回一個空的jQuery對象;否則會將這些匹配到的元素創建一個對一個jQuery對象.

. 代碼如下:
//$(htmlStr[,文檔對象])
$("<div>大家好</div>").append("body"); //簡單標簽:不帶子節點

三:$(dom元素),$(dom元素集合)將dom元素轉換成jQuery對象.

jQuery構造函數會使用js的原生態方法document.createElement()創建一個dom節點

. 代碼如下:
$("<div><a>大家好</a></div>").append("body"); //復雜標簽:含有子節點.

四:$(自定義對象)封裝普通對象為jQuery對象.

jQuery會使用文檔碎片buildFragment()的方法將所有子節點一次性的全部插入到[,文檔對象]中,如果這裡不指定的話,就是document; $(html[,json對象])

當html是簡單標簽時,那麼她的第二個參數可以是一個json對象,包含了這個dom元素的屬性或事件.

. 代碼如下:
//$(html[,json對象])
$("<div></div>", {
             "class": "gys", //因為class是js的關鍵字,所以要加引號
             text: "大家好",
             click: function () { alert("點我干嘛"); }
         }).append("body");

五:$(回調函數)綁定ready事件監聽函數,當Dom加載完成時執行.

$(element)或者$(elements)

傳入一個dom對象或者一組dom對象集合

. 代碼如下:
("div.guo").click(function () {
$(this).slideUp();
});

六:$(jQuery對象)接受一個jQuery對象,返回一個jQuery對象的拷貝副本

$(object);

傳入一個普通的對象

. 代碼如下:
var obj = { name: "guo", age: 24 };
var $obj = $(obj);
$obj.on("guo", function () {
alert("出發了一個自定義的事件");
});
$obj.trigger("guo");

七:$()創建一個空jQuery對象.

$(callback)傳入一個函數

. 代碼如下:
$(function () { })

這個表示在Dom加載完畢後執行函數中的.

$(jQuery Object);