拓展你的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