jQuery的extend扩展、$.fn.extend()扩展、jQuery的框架分析、jQuery转原生对象

1.jQuery的extend扩展：

   

jQuery的extend扩展练习：

   

2.$.fn.extend()扩展一个或多个实例属性和方法：

    全选

   

   

爱好

    睡觉：

    吃：

    喝：

   

   

   

3.jQuery的框架分析：

   

点我

   

   

   

jQuery的js源码：

/* ()括起来的目的是 把()内部的代码解释成一个表达式 */

        //JQ框架源代码

        (function(){

            /* console.log('Hellow 你好'); */

            /* var a = '你好 同学'

            $ = function $ (){

                document.write(a)

            } */

            function $(element){

                let ele = document.querySelector(element)

                console.log(ele);

                ele.css = function(key,value){

                    ele.style[key] = value

                }

                /* 实现show和hide的方法 */

                ele.hide = function(){

                    this.style.display = 'none'

                }

                ele.show = function(){

                    this.style.display = 'block'

                }

                /* 实现jq的removeClass 和 addClass */

                ele.removeClass = function(className){

                    console.log(this.className);

                    /* let str = this.className.replace(className,'')

                    console.log(str); */

                    this.className = this.className.replace(className,'')

                }

                ele.addClass = function(className){

                    /* 原生的className会覆盖之前的类名 */

                    this.className = this.className + ' ' +className

                }

                ele.click = function(callback){

                    this.onclick = callback

                }

                console.log(ele);

                return ele

            }

            /* 思路:$('.div1')返回一个元素对象，元素对象里面有一个css方法 可以传参

           改变$('.div1')的样式 */

            /* 把局部的方法$ 挂载到window上变成全局的就可以使用了 */

            window.$ = $

        })()

4.jQuery转原生对象：

   

你真棒