jq的其他方法和自创Jquery.js文件

127 阅读1分钟

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

语法:$ .extend( [deep ], target, object1 [, objectN ] )

deep为true表示深度合并,为false为浅度合并

object1可选。 Object类型 第一个被合并的对象。

objectN 可选。 Object类型 第N个被合并的对象。

image.png

2.jQuery.fn.extend()方法

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

jQuery.fn是jQuery的原型对象,其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。

语法: $ .fn.extend( object )

object:Object类型 指定的对象,用来合并到jQuery的原型对象上。

 <button id="btn1">全选</button>
<!-- <button id="btn2">取消全选</button> -->
<h1>爱好</h1>
睡觉:<input type="checkbox" name="" id=""><br>
网吧<input type="checkbox" name="" id=""><br>
熬夜<input type="checkbox" name="" id=""><br>
<script src="./jquery-3.6.0.js"></script>
<script>
    $.fn.extend({
        checked: function () {
            this.each(function (i, e) {
                e.checked = true


            })

        },
        checkedIn: function () {
            this.each(function (i, e) {
                e.checked = false
                //  e.checked=''
            })

        }
    })

    /*   $("#btn1").click(function(){
          $('input').checked()
      })
 
      $("#btn2").click(function(){
          $('input').checkedIn()
      })  */
    var flag = true
    $("#btn1").click(function () {
        if (flag) {
            $(this).text("取消全选");
            $('input').checked();
        }
        else {
            $(this).text("全选");
            $('input').checkedIn();
        }
        flag = !flag;
    })

三:## 原生转成jq对象

           let h1=document.querySelector('h1') */

        /* jq对象转原生的方法 */

        /* 第一种 $(h1)[0] */

        /* 使用$(h1).get(0)方法,可以把单个的jq元素转成原生DOM元素. 

四:自创jq文件

自制jq

 <style>
 .div1{
       width: 150px    height: 100px;   border: 1px solid black; }
.bluebackground-color: blue;   }   </style>
</head>
 <body>

   

       

        /* $('div').css('background','red') */

        $('div').hide()

        $('div').show()

        $('div').addClass('blue')

        /* $('div').removeClass('blue') */

        $('div').click(function(){

            alert('成功')

        })

JS文件

(function(){

    function $(elem){

        let ele=document.querySelector(elem)

        ele.css=function(key,value){

            this.style[key]=value

        }

        ele.show=function(){

            this.style.display='block'

        }

        ele.hide=function(){

            this.style.display='none'

        }

        ele.addClass=function(className){

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

        }

        ele.removeClass=function(className){

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

        }

        ele.click=function(qq){

            this.onclick=qq

        }

        return ele

    }

    /* 把局部的方法$ 挂载到window上变成全局的 */

    window.==

})()