jQuery是js的一个非常优秀的库,它大大简化了js的很多操作,并且解决了js的大部分兼容性问题。甚至很多css兼容性问题,用jQuery写都能解决。

这里是对象插件的封装。当然,封装插件很多,这里是最简单的一种:

1、打两个括号 ()()
2、在第二个括号里面加入"jQuery"

()(jQuery)
 

3、在第一个括号里面写一个匿名函数,传参是一个$

(function($){})(jQuery)

4、在function($){}写:$.fn.插件名,如$.fn.tabs,这里的fn表示本插件是需要一个dom对象的插件
5、在刚才的$.fn.tabs后面“=”一个传参的(有参)匿名函数

$.fn.tabs = function(options){
}

6、在刚才的匿名函数里面定义一个对象,对象的属性就是插件需要传递的参数,默认值就是插件参数的默认值:

$.fn.tabs = function(options){
var defaults = {
currentStyle : "current",
contentList : "content_list"
}
}

7、将传递的参数,继承刚才定义的对象defaults

$.fn.tabs = function(options){
var defaults = {
currentStyle : "current",
contentList : "content_list"
}
options = $.extend(defaults,options);
}
 

8、将你写的代码,封装起来,得到下面的代码:

(function($){
$.fn.tabs = function(options){
var defaults = {
currentStyle : "current",
contentList : "content_list"
}
options = $.extend(defaults,options);
$(this).mouseover(function(){
$(this).addClass(options.currentStyle).siblings().removeClass(options.currentStyle);
var _index = $(this).index();
$("."+options.contentList).eq(_index).show().siblings().hide();
})
}
})(jQuery)
 

9.调用插件

$("#nav_des li").tabs({
currentStyle : "current456",
contentList : "con"
});
 

这里是一个tab选项卡插件,传递两个参数,一个是tab的当前class样式,一个是tab选项卡的类容容器class名。

jQuery对象插件封装步骤的更多相关文章

  1. jQuery编写插件--封装全局函数的插件(一些常用的js验证表达式)

    上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...

  2. JQuery分页插件封装(源码来自百度,自己封装)

    最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...

  3. jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件

    完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...

  4. jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象

    一.前提说明 Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 二.简单介绍 本文演示的是:jQue ...

  5. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  6. jQuery对象与DOM对象之间的转换(转)

    原文:https://www.cnblogs.com/lsy0403/p/5907084.html 什么是DOM对象 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.比如使用 ...

  7. jQuery对象和语法

    jQuery类型 引入jquery.js时,其实是向全局作用域中,添加了一个新的类型--jQuery. 构造函数:负责创建jQuery类型的对象. 原型对象:保存jQuery对象可用的所有简化版API ...

  8. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...

  9. jquery插件封装

    HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...

随机推荐

  1. angularJS 系列(五)--controller AS 语法

    原文: http://www.cnblogs.com/whitewolf/p/3493362.html 这篇国外的文章也非常好: http://codetunnel.io/angularjs-cont ...

  2. OGG FAQ

    Q1:oracle_关于参数.ENABLE_GOLDENGATE_REPLICATION A:   So, in order to use OGG, on Oracle 11.2.0.4, or Or ...

  3. 阿里云CentOS安装firefox闪退

    安装完vnc远程连接,接着安装firefox,点firefox木有任何提示就退 直接命令下运行,发现错误如下: /usr/lib/firefox/firefox: symbol lookup erro ...

  4. 1209:Catch That Cow(bfs)

    题意: 从一个坐标到另一个坐标的移动方式有三种,即:st-1,st+1,2*st.每移动一步时间是一秒. 给出两个坐标,求得从第一坐标到第二座标的最短时间. #include<iostream& ...

  5. mystring c++ 自己的string 封装

    1 /************************************************************************* > File Name: mystrin ...

  6. vi set number E486:Pattern not found:

    先输入:/* 按回车键,然后再输入之前的的命令.

  7. JAVA基础--toString, equals方法

    ==比较的是地址 equals比较的是内容. 所以要重写object的equals方法. public class TestEquals { public static void main(Strin ...

  8. Python+Selenium 环境配置之Firefox,IE,Chrome几种浏览器运行

    Selenium(Webdriver)支持Firefox,IE,Chrome等多个浏览器.很多人可能装环境时遇到很多问题,下面简单聊聊如何配置测试这几个浏览器以及相关通过简单的实例来测试. 1.Fir ...

  9. Varnish Cache

    1 Varnish简介 Varnish是高性能且开源的反向代理服务器和HTTP加速器(cache server).其开发者Poul-Henning Kamp是FreeBSD核心的开发人员之一.Varn ...

  10. HDU 2489 Minimal Ratio Tree 最小生成树+DFS

    Minimal Ratio Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...