您的位置：首页 > Web前端 > JQuery

jquery插件开发:

2015-09-17 14:18 573 查看

jquery插件开发:

新建jquery-my.js,文件内容如下:

[code](function($){

    /** 新增对象的属性和方法 */
    $.prototype.html2 = function(){
        return this.html();
    };
    $.prototype.age = 20;
    /** 批量添加对象的属性与方法 */
    $.fn.extend({
        html3 : function(){
            return this.html();
        },
        age2 : 30
    });

    /** 添加静态的属性与方法 */
    $.each5 = function(arr, callback){
        for (var i = 0; i < arr.length; i++)
        {
            callback.call(arr[i], i , arr[i]);
        }
    };
    $.extend({
        grep5 : function(arr, callback){
            var newArr = new Array();
            for (var i = 0; i < arr.length; i++)
            {
                var bool = callback.call(arr[i], i, arr[i]);
                if (bool)
                {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
    });

}(jQuery));

在插件开发.html上面调用:

//引入jquery的插件裤

[code]<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
//引入jquery-my.js
<script type="text/javascript" src="jquery-my.js"></script>

<html>
<head></head>
<script>
//文档加载完成再加载
$(function(){
    //新增加的方法
    alert($("#div").html3());
    alert($("#div").age);
    //for循环
    $.each5([10,20,30],function(i,item){
    alert(i+"=="item+"=="+this);
    //待条件的筛选
    var newArr = $.grep5([10,20,30],function(i,item){
    return item>10;
});
    alert(长度+"=="+newArr.length+"，元素=="+newArr);
})
});
</script>
<body>
<div id='div'>插件开发</div>
</body>
</html>

知识要点：

1.新增加jquery对象的属性和方法

—-单个添加

.prototype.属性名=属性值.prototype.属性名=属性值
.protetype.方法名=函数的应用

—-批量添加

$.fn.extend(

属性名:属性值,

方法名:函数的引用，

…..

);

2. 新增jquery静态的属性和方法

—-单个添加

.属性名=属性值.属性名=属性值
方法名=函数的引用

—-批量添加

$.extend(

属性名:属性值,

方法名:function(){},

……

);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航