JQuery扩展

最新推荐文章于 2022-04-14 10:17:06 发布

星灭233

最新推荐文章于 2022-04-14 10:17:06 发布

阅读量160

点赞数

分类专栏： jQuery 文章标签： js jquery 前端

本文链接：https://blog.csdn.net/ksx2333/article/details/115431552

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1 扩展插件

jquery满足不了项目需求但是我又想用jquery,依托于jquery 自己造轮子

1.1 扩展jQuery的工具方法

    $.extend(object)

/*扩展jQuery的工具方法: $.extend(object)
    * min(a,b) 返回较小的值
    * max(a,b) 返回较大的值
    * leftTrim() 去除字符串左边的空格
    * rightTrim() 去除字符串右边的空格
*/ 
/*
//正则(了解)
^  匹配字符串开始
\s 匹配空格
+  匹配一次或者多次
$  匹配字符串末尾
*/ 
//扩展$
$.extend({
    min:function(a,b){
        return a >b ? b:a;
    },
    max:function(a,b){
        return a>b?a:b;
    },
    leftTrim:function(str){
        // "     abc"
        return str.replace(/^\s+/,"")
    },
    rightTrim:function(str){
        //"abc          "
        return str.replace(/\s+$/,"")
    }
})

1.2 扩展jQuery对象的方法

    $.fn.extend(object)

//扩展 $("#id").xxxx
//  * checkAll()  全选
//  * unCheckAll() 全不选
//  * reverseCheck() 反选
$.fn.extend({
    checkAll:function(){
        //效果的实现  说明一下 this可以执行prop方法
        this.prop("checked",true)
    },
    uncheckAll:function(){
        this.prop("checked",false)
    },
    reverseCheck(){
        this.each(function(){
            //静静想想
            this.checked = !this.checked
        })
    }
})

1.3 调用扩展

<body>
     <input type="checkbox" name="items" value="足球">足球
     <input type="checkbox" name="items" value="乒乓球">乒乓球
     <input type="checkbox" name="items" value="篮球">篮球
     <input type="checkbox" name="items"  value="羽毛球" >羽毛球
     <br/>
     <input type="button" id="checkAllBtn" value="全选">
     <input type="button" id="checkNoBtn" value="全不选">
     <input type="button" id="reverseCheckedBtn" value="反选">
</body>
<script src="js/jquery-1.10.1.js"></script>
<script src="my_jQuery_plugin.js"></script>
<script>
//min(a,b) 返回较小的值
console.log($.min(0,1))  
//max()返回较大的值
console.log($.max(0,1))
//leftTrim() 去除字符串左边的空格
console.log("--------------"+$.leftTrim("   asfdssdfsfd")+"----------------")
//rightTrim() 去除右边的空格
console.log("----------"+$.rightTrim("adfsdfsdf      "+"--------------"))

//全选
$("#checkAllBtn").click(function(){
   $(":checkbox").checkAll()
})
//全不选
$("#checkNoBtn").click(function(){
   $(":checkbox").uncheckAll()
})
//反选
$("#reverseCheckedBtn").click(function(){
    $(":checkbox").reverseCheck()
})

</script>

2 自调用的函数

2.1 命名函数

<script>
    //01 命名函数
    function add(a, b) {
        return a + b
    }
    console.log(add(1, 2));
</script>

2.2 匿名函数赋值给一个变量

<script>
    //02 匿名函数赋值给一个变量
    var j = function (a, b) {
        return a - b
    }
    console.log(j(3, 2));  //1
</script>

2.3 自调用函数

<script>
    //03 自调用函数
    (function (a, b) {
        console.log(a * b)
    })(3, 2)
</script>

3 多库共存

问题: 如果有2个库都有$ 就存在冲突
解决: jQuery库可以释放$的使用权让另一个库可以正常使用此时jQuery就只能使用jQuery了。
API: jQuery.noConflict()。

<script src="js/jquery-1.10.1.js"></script>
<script src="myLib.js"></script>
<script>
    jQuery.noConflict();  //释放$的使用权
    jQuery(function(){
        console.log("我jQuery又可以使用了")
    })

    $();
    console.log($)
    console.log(typeof $)  //function
</script>

4 onload和ready

4.1 onload和ready的区别

 区别: window.onload于 $(document).ready() [$(function(){})]
   * window.onLoad
   * 包括页面的图片加载完毕后才会回调(晚)
   * 只有一个监听回调

   * $(document).ready()
   * 等同于 $(function(){})
   * 页面加载完毕就回调(不等图片加载了)
   * 可以有多个监听回调

4.2 源码展示

<script src="js/jquery-1.10.1.js"></script>
<script>
    window.onload=function(){
        console.log("我是第一个onload")
    }
    //第二个onload会把第一个onload覆盖掉
    window.onload=function(){
        console.log("我是第二个onload")
    }

    $(function(){
        console.log("我是第一个$(document).ready()")
    })
    $(function(){
        console.log("我是第二个$(document).ready()")
    })
</script>