编写自己的jQuery插件简单实现代码

这里只阐述如何编写自己的插件，至于要实现什么功能，要因人而异了...好了，下面开始...
jQuery插件主要分为三种
1、封装对象方法的插件
2、封装全局函数的插件
3、扩展选择器的插件
这里只编写前俩种，即比较常见的..
大多数插件都是已这种形式编写的：


代码如下:

(function ($) {
/* 这里放置代码 */
})(jQuery);

这样的好处是函数内部依然可以使用$作为jQuery的别名，而不影响到其他库使用$
jQuery提供了俩个扩展用于编写插件
$.fn.extend({});用于扩展第一种
$.extend({});用于扩展第二种
以下为实现效果截图和代码



代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<style type="text/css">
li { border: 1px solid #000; cursor: pointer; width: 200px; display: block; }
</style>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
　　　　$.fn.extend({
　　　　　　"chgSC": function (options) {
　　　　　　　　 options = $.extend({ FontSize: "100px", Color: "red" }, options); //这里用了$.extend方法，扩展一个对象
return this.hover(function () { //return为了保持jQuery的链式操作
　　　　　　　　　　 $(this).css({ "fontSize": options.FontSize, "color": options.Color });
　　　　　　　　　　 }, function () {
　　　　 $(this).css({ "fontSize": "", "color": "" });
　　　　　　　　　　 });
}
});
$.extend({
　　　　　　　　"urlParam": function () {
　　　　　　　　　　 var pageUrl = location.search;
　　　　　　　　　　　　 if (pageUrl != "")
　　　　　　　　 return pageUrl.slice(1);
　　　　　　　　　　 else
　　　　　　　　　　 return "没有参数";
　　　　　　　　　　 }
　　　　　　　　});
})(jQuery);
$(function () {
　　　　$("li").chgSC({ FontSize: "130px" });
　 alert($.urlParam());
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>

赞 (0)

相关推荐

  • 编写自己的jQuery提示框（Tip）插件

    编写自己的jQuery提示框（Tip）插件

    对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:"授之以鱼,不如授之以渔". 为了方便之前没有接触的同学,先来回顾一下jQuery的插件机制吧. 复制代码 代码如下: //添加check和uncheck插件 jQuery.fn.extend({   check: function() {     return this.each(function() { this.checked =

  • 基于jquery编写的放大镜插件

    本文实例为大家分享了自己动手实现的jquery放大镜插件,供大家参考,具体内容如下 /** *********************************************** **此插件使用须知--------------- ** **滤镜(inner)与其活动区(active)之比要等于 ** **放大区(movequ)与其内部图片之比.如比值不相 ** **等,请改变图片大小.------------------------** **参数介绍 ** **active:滤镜活动区

  • 基于jquery编写分页插件

    基于jquery编写分页插件

    扩展JQuery很容易,作为一个练习,编写一个简单的分页插件,代码量不大,直接看代码好了: $.fn.mypagination = function(totalProperty,opts){ opts = $.extend({ perPage:10, callback:function(){ } },opts||{}); return this.each(function(){ function numPages(){ return Math.ceil(totalProperty/opts.pe

  • Jquery插件编写简明教程

    复制代码 代码如下: /* 1.jQuery插件文件名推荐命名为 jquery.[插件名].js 以免和其他javascript库插件混淆.例如命名为jquery.color.js 2.所有的对象方法名都应当附加到jQuery.fn对象上而所有的全局函数都应当附加到jQuery对象本身上. 3.在插件内部,this指向的是当前通过选择器获取的jquery对象,而不像一般方法哪样,例如chick()方法,内部的this指向的dom元素 4.可以通过this.each来遍历所有元素 5.所有的方法或

  • 如何编写jquery插件

    前面的话 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护.本文将详细介绍如何编写jQuery插件 类型 jQuery的插件主要分为3种类型 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如:parent()方法.appe

  • jQuery编写设置和获取颜色的插件

    jQuery编写设置和获取颜色的插件

    分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js. 该插件用来实现以下两个功能 设置元素的颜色. 获取元素的颜色. 先在搭建好如下编写插件的框架: ;(function($){ //这里编写插件代码 })(jQuery); 我这里采用jQuery.fn.extend().这种方法来编写,代码如下: ;(function($){ $.fn.extend({ "color":function(value){ //这里写插件代码 } }); })(jQ

  • jQuery弹簧插件编写基础之“又见弹窗”

    本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 $.ajax,$.get 等. 2. 对象级别,这里所谓的对象是指通过jQuery选择器选中的jQuery对象,在该对象上添加方法.例如:$('div').css(), $('div').show() 等. 在实际开发中,我们通常选用对象级别的方法来开发插件,jQuery强大的选择器及对象操作是我们

  • 基于jquery插件编写countdown计时器

    基于jquery插件编写countdown计时器

    废话不多说,直接上代码: 先展示一下插件调用方式:  1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒计时插

  • 基于编写jQuery的无缝滚动插件

    基于编写jQuery的无缝滚动插件

    首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

  • jQuery插件编写步骤详解

    本文实例讲述了jQuery插件编写步骤.分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下 面就是一个简单扩展Jquery

  • 编写简单的jQuery提示插件

    编写简单的jQuery提示插件

    很简单的代码,就不多废话了. 代码: 复制代码 代码如下: /** * 2014年11月13日 * 提示插件 */ (function ($) {     $.fn.tips = function (text) {         var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibilit

随机推荐