jQuery()
jQuery()
是jQuery的核心函數這不難想象,難以想象的是在jQuery中jQuery()
de 衆多用法,傳入不同的參數到jQuery()
衆多不一樣的作用,但是儘管作用千差萬別,返回的總是與jQuery對象相關的。
jQuery()
在通常的使用中寫作$()
,所以也可以說jQuery的核心函數是$()
,因爲$()
在書寫上簡便,所以在通常情況下使用$()
.
$(selector [, context ])
$()
可傳入的參數很多,最基礎的就是selector
選擇器,這裏的選擇器是css
的選擇器。
當然默認情況下選擇器是從根節點開始搜索的,隨後指定的context
的作用是設置選擇器搜索的範圍,可以是一一個DOM元素,文檔或者作爲上下文的jQuery對象,當你使用一個變量去承接這個函數的返回值時,你會發現,其返回的結果是一個jQuery對象,如果選擇器找到多個元素,這個jQuery對象,將會包含所有元素,如果沒有找到選擇器指定的元素,將會返回一個,.length
爲0的“空”jQuery對象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入口函數</title>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>
<body>
<div id="box">
box
<div class="box2">box2</div>
</div>
</body>
<script>
$(function() {
// 默認搜索起點
var box = $("#box");
console.log(box);
// 設置搜索起點
var box2 = $(".box2", "#box");
console.log(box2);
// 無效選擇器
var box3 = $("#box3");
console.log(box3);
});
</script>
</html>
$( element ) && $( elementArray )
我們可以說使用$(element)
和$(elementArray)
,將一個或者DOM元素或者我們用其他一些方式已找到的元素轉換爲jQuery對象,從而使用jQuery提供的方法方便快捷的操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入口函數</title>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>
<body>
<div id="box">
box
<div class="box2">box2</div>
</div>
</body>
<script>
$(function() {
var box = $("#box");
console.log(box);
box.click(function() {
// this 傳入本身(jQuery對象)爲 $() 參數
console.log($(this));
})
});
</script>
</html>
$( object ) (沒有看懂)
Working With Plain Objects(使用普通的對象)
目前,只支持包裹在jQuery中的普通的JavaScript對象是:.data()
,.prop()
,.bind()
, .unbind()
, .trigger()
和 .triggerHandler()
。使用.data()
(或者任何返回.data()
的方法),在一個普通的對象會產生一個新的屬性的名爲jQuery{randomNumber}(如jQuery123456789)。
// define a plain object
var foo = {foo: "bar", hello: "world"};
// Pass it to the jQuery function
var $foo = $( foo );
// test accessing property values
var test1 = $foo.prop( "foo" ); // bar
// test setting property values
$foo.prop( "foo", "foobar" );
var test2 = $foo.prop( "foo" ); // foobar
// test using .data() as summarized above
$foo.data( "keyName", "someValue");
console.log( $foo ); // will now contain a jQuery{randomNumber} property
// test binding an event name and triggering
$foo.bind( "eventName", function () {
console.log("eventName was called");
});
$foo.trigger( "eventName" ); // logs "eventName was called"
如果.trigger( "eventName" )
被使用,它會在這個對象上搜尋一個“eventName的”屬性,並且嘗試任何附加在jQuery上的處理器執行完成後執行。它不檢查該屬性是否是一個函數。爲了避免這種情況,.triggerHandler( "eventName" )
應代替使用。
$foo.triggerHandler( "eventName" ); // also logs "eventName was called"
$( jQuery object )
當一個jQuery對象作爲一個參數傳遞給$()
方法時,新的變量承接到$()
的結果是被克隆的jQuery對象。這個新的jQuery對象將引用被克隆jQuery對像包含DOM元素。
$()
在jQuery 1.4中,如果你傳遞給jQuery()
方法一個空參數,一個空的jQuery設置將被返回(.length
屬性爲0)。 在以前的jQuery版本中,一個包含整個文檔節點的集合將被返回。
$( html [, ownerDocument ] )(沒有看懂)
給$()
傳入一個字符串,jQuery會首先檢查他看上去是不是向HTML字符串,如果不是就會把它解釋爲選擇器,解釋上下文。
$( html, attributes )
在jQuery中,可以通過向$()
內傳入HTML的代碼片段,就會將傳入的代碼片段形成DOM元素追加到返回的jQuery對象中,也就是向$()
傳入HTML代碼,同意會返回jQuery對象,這個對象包含傳入的HTML代碼形成的DOM元素。
$()
形成HTML代碼的DOM元素是通過.innerHTML
機制,所以有一些標籤會被瀏覽器過濾(如:<html>
, <title>
, <head>
),這也就導致了被插入的元素可能不是,傳入的字符串。
只有傳入完整的代碼片段,可以包含其他標籤,但是代碼要包含結束標籤,因爲只有這也纔可以完好的兼容。
在jQuery 1.4 開始,第二個參數可是傳入一個簡單對象,這個對象是元素的屬性集合,但是如果傳入第二個參數,第一個參數講,不能包含任何屬性.
$( callback )
在入口函數講解,這裏不做解釋。