• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery 插件开发指南

jQuery 插件开发指南

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery,插件开发等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

那么首先我们来简单的看一下最正统的 jQuery 插件定义方式:

(function ($) {    
$.fn.插件名 = function (settings) {        
//默认参数        
var defaultSettings = {
 
        }         /* 合并默认参数和用户自定义参数 */       
 
settings = $.extend(defaultSettings, settings);
 
return this.each(function () {             //代码         });   //插件在元素内多次出现
 
} })(jQuery);

 
先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):

(function ($) {
 
})(jQuery);

 这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解,将会对这种代码非常疑惑,那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。

jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用,就是用于合并参数。

$.fn.tip = function (settings) {    
var defaultSettings = {           
//颜色    
color: 'yellow',       
//延迟       
timeout: 200     }
 /* 合并默认参数和用户自定义参数 */  
settings = $.extend(defaultSettings, settings);   
alert(settings.input); <br>}

 jQuery 插件定义第二种方式:

(function ($) {
    //插件定义--更换名字
    $.fn.tabpanel = function (method) {
        var methods = $.fn.tabpanel.methods;
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
 
        }
    }
    //支持的方法
    $.fn.tabpanel.methods =
    {
        //初始化
        init: function (p_options) {
            tabpanelBind(p_options, this);
        },
        add: function (p_options) {
            addTab(p_options, this);
            tabpanelBind(p_options, this);
            // debugger
        }    }
    function add(p_options) {
        var _defaults = {
            id: ""
        }
    <br>    //内部实现略.........<br>        return _index;
    }
<br>})(jQuery);<br><br>调用  $("#team").tabpanel('add',"");

好了,上面介绍的这2种开发方式都是最常用的,小伙伴们先好好学习下吧,后续我们再介绍的更深入些

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16javascript权威指南 学习笔记之null和undefined
  • 2017-08-16jQuery xml字符串的解析、读取及查找方法
  • 2017-08-16jQuery循环遍历子节点并获取值的方法
  • 2017-08-16jQuery遍历DOM节点操作之filter()方法详解
  • 2017-08-1610个基于jQuery或JavaScript的WYSIWYG 编辑器整理
  • 2017-08-16浅析JQuery UI Dialog的样式设置问题
  • 2017-08-16jQuery获取file控件中图片的宽高与大小
  • 2017-08-16jQuery实现简单弹窗遮罩效果
  • 2017-08-16jQuery设置Easyui校验规则(推荐)
  • 2017-08-16jquery prop的使用介绍及与attr的区别

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实现边框动态效果的实例代码
    • jQuery 获取对象 定位子对象
    • jquery 经典动画菜单效果代码
    • EasyUI Combobox设置默认值 获取text的方法
    • 用jquery与css打造个性化的单选框和复选框
    • jQuery如何实现点击页面获得当前点击元素的id或其他信息
    • jquery下将选择的checkbox的id组成字符串的方法
    • jQuery+PHP+MySQL二级联动下拉菜单实例讲解
    • jquery URL参数判断,确定菜单样式
    • jquery div 居中技巧应用介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有