03-jQuery核心函數

jQuery()

jQuery()是jQuery的核心函數這不難想象,難以想象的是在jQuery中jQuery()de 衆多用法,傳入不同的參數到jQuery() 衆多不一樣的作用,但是儘管作用千差萬別,返回的總是與jQuery對象相關的。

jQuery()在通常的使用中寫作$(),所以也可以說jQuery的核心函數是$(),因爲$()在書寫上簡便,所以在通常情況下使用$().

$(selector [, context ])

$()可傳入的參數很多,最基礎的就是selector選擇器,這裏的選擇器是css的選擇器。

當然默認情況下選擇器是從根節點開始搜索的,隨後指定的context的作用是設置選擇器搜索的範圍,可以是一一個DOM元素,文檔或者作爲上下文的jQuery對象,當你使用一個變量去承接這個函數的返回值時,你會發現,其返回的結果是一個jQuery對象,如果選擇器找到多個元素,這個jQuery對象,將會包含所有元素,如果沒有找到選擇器指定的元素,將會返回一個,.length爲0的“空”jQuery對象。

image-20200617024624603

<!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提供的方法方便快捷的操作。

image-20200617025216025

<!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 )

入口函數講解,這裏不做解釋。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章