jQuery

$.extend()方法

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

<script src="./jquery-1.12.4.js"></script>
    <script>
        var car1={
            color:{name:'水晶白',price:'1000W'}
        }
        var car2={
            carname:'保时捷',
            color:{name:'帅酷黑'}
        }
        console.log( $.extend(car1,car2) );
        ==> car1 = {
            carname:'保时捷',
            color:{name:'帅酷黑'}
            }
            
        console.log( $.extend(true,car1,car2) );
        ==> car1 = {
            carname:'保时捷',
            color:{name:'帅酷黑',price:'1000W'}
            }
    </script>

$.fn.extend()方法

$.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。

<button>全选</button>
    <h1>爱好</h1>
    睡觉： <input type="checkbox" name="" id="">
    游戏： <input type="checkbox" name="" id="">
    熬夜： <input type="checkbox" name="" id="">
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $.fn.extend({
            checked: function () {
                this.each(function (i, e) {
                    e.checked = true;
                })
            },
            unchecked: function () {
                this.each(function (i, e) {
                    e.checked = false;
                })
            }
        })
        let flag = true;
        $('button').click(function () {
            if (flag) {
                $('input').checked();
                $('button').html('取消全选')
            } else {
                $('input').unchecked();
                $('button').html('全选')
            }
            flag = !flag;
        })
    </script>

jQuery源码分析

<style>
        .div1{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .red{
            background: red;
        }
    </style>
    
<button>点击切换</button>
    <div class="div1"></div>
    <script src="./kw47jquery.js"></script>
    <script>
        document.querySelector('button').onclick=function(){
            $('.div1').toggle()
        }
        /* $('.div1').css('background','red'); */
        // $('.div1').hide();
        // $('.div1').show()
        $('.div1').addClass('red');
        $('.div1').removeClass('red');
        // let div=document.querySelector('.div1');
        // console.log(div.class);
        $('.div1').click(function(){
            alert('1')
        })
    </script>
    
 /* kw47jquery.js */  
(function () {
    function $(element) {
        let ele = document.querySelector(element);
        ele.css = function (key, value) {
            this.style[key] = value
        }
        ele.show = function () {
            this.style.display = 'block'
        }
        ele.hide = function () {
            this.style.display = 'none'
        }
        ele.toggle = function () {
            if (this.style.display == 'block') {
                this.hide()
            } else {
                this.show()
            }
        }
        ele.addClass = function (className) {
            this.className = this.className + ' ' + className
        }
        ele.removeClass = function (className) {
            this.className = this.className.replace(className, '')
        }
        ele.click = function (callback) {
            this.onclick = callback;
        }
        return ele
    }
    /* 把局部的方法$ 挂载到window上变成全局的就可以使用了 */
    window.$ = $;
})();