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