拓展你的jQuery!

作者: xujingguo | 来源:发表于2016-12-17 18:11 被阅读0次

    extend函数

    $.extend(target,[object1],[onjectN])

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

                var obj1={
                    height:100,
                    width:100,
                    length:100,
                    div:{x:100,y:100}
                }
                var obj2={
                    height:200,
                    width:200,
                    div:{x:200}
                }
                $.extend(obj1,obj2)
                console.log(obj1.height)
                console.log(obj1.div.y)
                //result:200,undefined
    

    当使用true参数时,

                var obj1={
                    height:100,
                    width:100,
                    length:100,
                    div:{x:100,y:100}
                }
                var obj2={
                    height:200,
                    width:200,
                    div:{x:200}
                }
                $.extend(true,obj1,obj2)
                console.log(obj1.height)
                console.log(obj1.div.y)
                //result:200,100
    

    拓展jQuery的公共函数

                $.extend({
                    minValue:function(a,b){
                        return a>b?a:b
                    }
                })
                var a = prompt("input a")
                var b = prompt("input b")
                console.log($.minValue(a,b))
    

    $.fn.extend()方法可以创建jQuery对象方法

                $.fn.extend({
                    test:function(){
                        alert("click "+$(this).html()+" this is test function")
                    }
                })
                $("#fnExtend").click(function(){
                    $(this).test()
                })
    

    自定义jQuery函数

    添加新的全局函数

                $.clickDiv=function(node){
                    console.log(node.text()+" click")
                }
                $("div").click(function(){
                    $.clickDiv($(this))  
                })
    

    通过extend函数添加全局函数

                $.extend({
                    foo:function(){
                        alert("this is a new function 'foo()'")
                    }
                })
                $.foo()
    

    使用命名空间

                $.myPluin={
                    ale:function(){
                        alert("function from myPluin")
                    }
                }
                $.nextPluin = {
                    ale:function(){
                        alert("function from nextPluin")
                    }
                }
                $.myPluin.ale()
                $.nextPluin.ale()
    

    自定义选择器

                index=-1  //定义全局变量index
                jQuery.expr[":"].le=function(elem,i,match){
                    //return i>match[3]-0||i==match[3]
                    console.log(index)
                    index++
                    return index>match[3]-0  //返回索引大于3的元素
                    
                }
                $("p:le(2)").css("color","red")
                //返回元素索引值大于等于2的元素
    

    相关文章

      网友评论

        本文标题:拓展你的jQuery!

        本文链接:https://www.haomeiwen.com/subject/rfxamttx.html