推荐文章

jQuery 获取屏幕高度、宽度

jQuery 获取屏幕高度、宽度

jQuery 获取屏幕高度、宽度、滚动条位置
JavaScript及C#的url编码

JavaScript及C#的url编码

JavaScript中编码有三种方法:escape、encodeURI、encodeURIComponent
jQuery隐藏和显示

jQuery隐藏和显示

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:语法:$().hide(speed,callback);$().show(speed,callback);可选参数:可选的 speed 参数规定隐藏显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。例子:$("#hide")
jQuery淡入淡出效果

jQuery淡入淡出效果

通过 jQuery,您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法:fadeIn(speed,callback) 用于淡入已隐藏的元素fadeOut(speed,callback)方法用于淡出可见元素fadeToggle(speed,callback)方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换fadeTo(speed,opacity,cal
load()方法从服务器加载数据,并把返回的数据放入被选元素中

load()方法从服务器加载数据,并把返回的数据放入被选元素中

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。语法:$().load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。例子:$("butto

jQuery插件开发

日期:2018-08-14 点击:734 来源:PB2.CN
jQuery简单的插件开发模式,分别为:
1、通过$.extend()来扩展jQuery
2、通过$.fn 向jQuery添加新的方法
3、通过$.widget()应用jQuery UI的部件工厂方式创建


一、$.extend()插件开发模式



$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用


二、$.fn插件开发模式


$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);//合并参数
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}
//调用
$('a').myPlugin({
    'color': '#2C9929'
});


三、$.widget()插件开发模式


(function($, window, document,undefined) {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    }
})(jQuery, window, document);
//调用
$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px',
        'textDecoration': 'underline'
    });
})


这篇文档对您是否有帮助?

jQuery 获取屏幕高度、宽度

jQuery 获取屏幕高度、宽度

jQuery 获取屏幕高度、宽度、滚动条位置
JavaScript及C#的url编码

JavaScript及C#的url编码

JavaScript中编码有三种方法:escape、encodeURI、encodeURIComponent
jQuery隐藏和显示

jQuery隐藏和显示

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:语法:$().hide(speed,callback);$().show(speed,callback);可选参数:可选的 speed 参数规定隐藏显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。例子:$("#hide")
jQuery淡入淡出效果

jQuery淡入淡出效果

通过 jQuery,您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法:fadeIn(speed,callback) 用于淡入已隐藏的元素fadeOut(speed,callback)方法用于淡出可见元素fadeToggle(speed,callback)方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换fadeTo(speed,opacity,cal
load()方法从服务器加载数据,并把返回的数据放入被选元素中

load()方法从服务器加载数据,并把返回的数据放入被选元素中

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。语法:$().load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。例子:$("butto