jQuery入門學習筆記1

時間 2019-11-08

原文原文鏈接

首先明確jQuery是一個JavaScript庫，它的類型是函數，這一點能夠經過typeOf查看。須要注意的是，script引入方式是本地文件引入，若是是CDN引入，typeOf返回的結果是undefinedhtml

<script src="./img/jquery-3.4.1.min.js"></script>
console.log(typeof jQuery);
function

jQuery的基本設計思想和主要用法，就是"選擇某個網頁元素，而後對其進行某種操做"

由於DOM選擇器使用起來比較麻煩，jQuery就是是經過封裝原生的DOM選擇器，讓咱們使用起來更加方便快捷。node

<script src="./script/jquery-3.4.1.min.js"></script>
<style>
   .red {
        color: red;
    }
</style>
<body>
<div id=div class="div">div</div>
<script>    

    console.log(typeof jQuery);
    window.jQuery = function (nodeOrTxt) {
        let nodes;
        if (typeof nodeOrTxt === "string") {
            nodes = document.querySelectorAll(nodeOrTxt);
        } else {
            nodes = nodeOrTxt;
        }
        //判斷傳入的參數是node仍是string
        return {
            addClass: function (classes) {
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(classes);
                }
                return nodes;
            },
            setText:function(text){
                for(var i=0;i<nodes.length;i++){
                    nodes[i].textContent=text;
                }
                return nodes;
            }
        }
        //返回具體的方法函數
    };

    window.$ = jQuery;
    var $div = $('div');
    $div.addClass('red'); // 可將全部 div 的 class 添加一個 red
    $div.setText('hi') // 可將全部 div 的 textContent 變爲 hi
</script>
</body>
</html>

一、全局聲明window.jQuery，它是一個函數，返回一個對象，對象內有不一樣的方法，本文例子有2個方法addClass（增長類名），setText修改節點內容。jquery

二、 jQuery 這個全局函數，接受一個參數，能夠是node名或者是選擇器均可以，由於jQuery函數內調用了原生的 document.querySelectorAll()函數

三、 jQuery函數已經return了addClass和setText，因此能夠直接訪問這兩個方法。$div.addClass('red')和 $div.setText('hi')設計

四、addClass函數增長類名的方式是原生的x.classList.add()，setText函數也是原生的x.textContent()方法，可是經過jQuery函數封裝後，增長類名和修改內容，咱們僅使用三四行代碼就能夠實現。相比原生方法簡單了許多。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。