jQuery的扩展

扩展jq方法

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

语法：. $.extend([deep],target,boj1,boj2)
deep默认为false 不深度合并对象 true为深覆盖合并对象

小例子

  var object1 = {
        apple:0,
        banana:{weight:50,price:100},
        cherry:97
    };
    var object2 = {
        banana:{price:200},
        durian:100
    } 
    deep默认为false 不深度合并对象 banana的值会被直接覆盖
  console.log($.extend(false,object1,object2));   

 把deep改为true 深度合并对象
  console.log($.extend(true,object1,object2));   
 保留原来的属性值改变/覆盖相同的值

二、 $.fn.extend()方法：为jQuery插入一个或多个梳理属性和方法

例子：

   $.fn.extend({
         consoleFn:function(){
             console.log('我自己给jQuery对象实现的打印方法');
         }
     })
     $('body').consoleFn(); 

小案例： 全选/取消全选按钮

  <button id="btn1">全选</button>
 <h1>爱好</h1>
 1<input type="checkbox" name="" id="">
 2<input type="checkbox" name="" id="">
 3<input type="checkbox" name="" id="">
 
  <script>
     $.fn.extend({
     //为jq添加checked全选方法
         checked:function(){
            this.each(function(i,e){
                e.checked = true;
            })
         },
      //为jq添加checkeds取消全选方法
         checkeds:function(){
            this.each(function(i,e){
                e.checked = false;
            })
         }
     })
     
     //设置一个全局flag用于切换
     let flag = true;
     $('#btn1').click(function(){
         if(flag==true){
             $(this).text('取消全选')
             $('input').checked();
         }else{
            $(this).text('全选')
             $('input').checkeds();
         }
         flag=!flag;
         //每次点击都改变flag
     })
     
 </script>
 

js转原生方法

方法一：$(h1)[0]

方法二：$(h1).get(0) 只能是对象只有单个的时候使用