zoukankan      html  css  js  c++  java
  • jquery插件扩展的学习

    jquery插件的学习可以点击这里

    举个例子

    //首先先来一个插件
    (function($){
    $.fn.extent({
    bigfont:function(){
    return this.css('fontSize':"30px")
    }
    })
    })(jQuery)
    

    jquery的插件机制

    jquery.extent方法的重载,如$.each,$.ajax的功能

    举个例子

    
    
    
    

    关于extent的重载的深入学习

    $.extent([deep],obj1,obj2,obj3) //deep: 可选。如果设为true,则递归合并。 // target: 待修改对象。 // object1: 待合并到第一个对象的对象。 // objectN: 可选。待合并到第一个对象的对象。
    //举个例子
    
    //举个例子
    
    //举个例子
    

    插件的另外的写法

    //(1)
    !function($){
    //do something
    }(jQuery);
    (function($){
    //do something
    })(jQuery)
    

    插件实例

    //闭包限定命名空间
    (function ($) {
        $.fn.extend({
            "highLight": function (options) {
                var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
                this.each(function () {  //这里的this 就是 jQuery对象
                    //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                    var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
                    //根据参数来设置 dom的样式
                    $this.css({
                        backgroundColor: opts.background,
                        color: opts.foreground
                    });
                });
            }
        });
        //默认参数
        var defaluts = {
            foreground: 'red',
            background: 'yellow'
        };
    })(window.jQuery);
    
    //闭包限定命名空间
    (function ($) {
        $.fn.extend({
            "highLight": function (options) {
                //检测用户传进来的参数是否合法
                if (!isValid(options))
                    return this;
                var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
                return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用
                    //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                    var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
                    //根据参数来设置 dom的样式
                    $this.css({
                        backgroundColor: opts.background,
                        color: opts.foreground
                    });
                    //格式化高亮文本
                    var markup = $this.html();
                    markup = $.fn.highLight.format(markup);
                    $this.html(markup);
                });
            }
        });
        //默认参数
        var defaluts = {
            foreground: 'red',
            background: 'yellow'
        };
        //公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。
        $.fn.highLight.format = function (str) {
            return "" + str + "";
        }
        //私有方法,检测参数是否合法
        function isValid(options) {
            return !options || (options && typeof options === "object") ? true : false;
        }
    })(window.jQuery);
    
  • 相关阅读:
    Fiddler 教程
    Android 利用 aapt 解析 apk 得到应用名称 包名 版本号 权限等信息
    Android获取Manifest中<meta-data>元素的值
    Android资源混淆保护实践
    Android中捕获TTextView文本中的链接点击事件方法
    Android APK 手动命令编译、打包、签名步骤
    Android签名总结
    软件概要设计模板
    整理了一份React-Native学习指南
    appium简明教程(转)
  • 原文地址:https://www.cnblogs.com/heyinwangchuan/p/6235010.html
Copyright © 2011-2022 走看看