jQuery之核心函式與核心物件

阿新 • • 發佈：2020-07-13

jQuery核心函式

介紹：

　　簡稱jQuery函式，jQuery庫向外直接暴露的就是$/jQuery，引入jQuery庫後，直接使用$即可。

作為函式使用：$(param)

　　引數為函式：當DOM載入完成後，執行此回撥函式，相當於window.onload = function(文件載入完成的監聽)。

　　引數為選擇器字串：查詢所有匹配的DOM元素，返回包含所有DOM元素的jQuery物件。

　　引數為DOM物件：將DOM元素物件包裝為jQuery物件返回$(this)。

　　引數為html標籤字串 (用得少)：建立標籤物件並封裝成jQuery物件。

作為物件使用：$.xxx()

　　$.each()

：隱式遍歷陣列。

　　$.trim()：去除兩端的空格。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery核心函式</title>
</head>
<body>

<div>
    <button id="btn">測試</button>
    <br/>

    <input type="text" name="msg1" 
/><br/>
    <input type="text" name="msg2"/><br/>
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 需求：
     * 1.點選按鈕：顯示按鈕的文字，顯示一個新的輸入框
     * 2.遍歷輸出陣列中所有元素值
     * 3.去掉"  my atguigu  "兩端的空格
      
*/
    //點選按鈕：顯示按鈕的文字，顯示一個新的輸入框
    $(function () {
        var $btn = $("#btn");
        $btn.click(function () {
            var text = $(this).html();
            alert(text);
            $('<input type="text" name="msg3" /><br />').appendTo('div');
        })
    })

    //遍歷輸出陣列中所有元素值
    var arr = [123, 'atguigu', true];
    $.each(arr, function (index, item) {
        console.log('第' + (index + 1) + '個元素的值為' + item);
    });

    //去掉" my atguigu "兩端的空格
    var str = " my atguigu ";
    console.log(str.trim() === 'my atguigu');
    console.log($.trim(str) === 'my atguigu'); //true
</script>
</body>
</html>

jQuery核心物件

介紹：

　　簡稱jQuery物件，是一個包含所有匹配的任意多個dom元素的偽陣列物件，執行$()返回的就是jQuery物件。

　　得到jQuery物件：執行jQuery函式返回的就是jQuery物件。

　　使用jQuery物件：$obj.xxx()。

基本行為：

　　size()/length：包含的DOM元素個數。

　　[index]/get(index)：得到對應位置的DOM元素。

　　each()：遍歷包含的所有DOM元素。

　　index()：得到在所在兄弟元素中的下標。

示例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery物件</title>
</head>
<body>

<button>測試一</button>
<button>測試二</button>
<button id="btn3">測試三</button>
<button>測試四</button>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 需求：
     * 1.統計一共有多少個按鈕
     * 2.取出第2個button的文字
     * 3.輸出所有button標籤的文字
     * 4.輸出'測試三'按鈕是所有按鈕中的第幾個
     */
    $(function (){
        var $btns = $('button');
        console.log($btns);
        //1.統計一共有多少個按鈕
        console.log($btns.size(), $btns.length);
        //2.取出第2個button的文字
        console.log($btns[1].innerHTML, $btns.get(1).innerHTML);
        //3.輸出所有button標籤的文字
        $btns.each(function () {
            console.log(this.innerHTML);
        });
        //4.輸出'測試三'按鈕是所有按鈕中的第幾個
        console.log($('#btn3').index());
    });
</script>
</body>
</html>

示例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>核心函式與核心物件</title>
</head>
<body>

<button>測試</button>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    //$是一個function
    console.log(typeof $);
    //true，$與jQuery等同
    console.log($ === jQuery);
    //true，$是一個全域性函式
    console.log($ === window.$);
    //"object"，這個物件就是jQuery物件
    console.log(typeof $());
    $('button').click(function () {
        alert(this.innerHTML);
    });
</script>
</body>
</html>