国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合污了!就做个‘沉默’的程序猿吧!(总有一天会猿球崛起)嘿嘿. 牢骚到底为止,好的心情才是重要的,本来猝死的几率就那么大了,就不要再往上飙数字了.不快的心情留在公司,快乐的在家里写blog. 有一段时间没有写blog了(恍恍惚惚的过了这些天,买了几本书,看了,字全认识,意思全没看进去),也没有一个清晰…

编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护. 在编写jQuery插件的时候,我们一般会遵循一些约定: jQuery插件推荐命名为:jquery.插件名.js. 所有对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上. 在插件内部,this指向的是当前通过选择器获取的jQuery对象:而一般的方法如click()方法,内部的this指向的是DOM元素. 所有的方法或函数插件,都应当以分号结尾…

自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. 时间:2014-8-3 作者:similar(281542025@qq.com) */ (function ($…

自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box=&qu…

编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件. 2. 封装全局函数的插件 可以将独立的函数加到jQuery命名空间之下.如解决冲突用的jQuery.noConflict()方法,常用的jQuery.ajax()方法以及去除首位空间的jQuery.trim()方法等. 3. 选择器插件 个别情况下,会需要用到选择器插件.例如用:colo…

转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式…

在园子里有很多关于jQuery插件的文章,尤其 以下2篇文章: 不定义JQuery插件,不要说会JQuery jQuery插件开发精品教程,让你的jQuery提升一个台阶 这2位大神基础讲的很清楚,在这里就不多说了,主要那个小需求来练练: 需求说明:一个标题插件,可以通过后端取数,自定义标题,自定义样式 讨论:插件通常不都是加载一下就不操作了,比如表格插件,加载数据,刷新等等. 今天练习的控件就简单给大家理理写控件的思路,(有问题,有意见大家指出.) ; (function ($) { $.fn…

要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,…

编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 return this; 以支持链式调用: 插件函数要有默认值,绑定在 $.fn.<pluginName>.defaults 上: 用户在调用时可传入设定值以便覆盖默认值.…

一.类级别($.extend) 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 二. 对象级别 对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了. 开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object);…

一.类级别($.extend) 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 二. 对象级别 对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了. 开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object);…

封装jQuery对象方法的插件 表格隔行变色插件 CSS部分: .even{ background:#CCC; } .odd{ background:#666; } .selected{ background:#F90; } DOM结构: <table id="table1"> <tbody> <tr><th>选择</th><th>姓名</th><th>性别</th></t…

jQuery插件类型 jQuery插件主要有3种类型: 1.封装对象方法的插件 这种插件类型是最常见的一种插件,它将对象方法封装起来,对通过选择器获取的jQuery对象进行操作. 2.封装全局函数的插件 这种插件将独立的函数加到jQuery命名空间之下.如解决冲突用的jQuery.noConflict()方法,常用的jQuery.ajax()和jQuery.trim()方法等. 3.选择器插件 虽然jQuery的选择器十分强大,但还是会需要扩充一些自己喜欢的选择器,如用color(red)来选择…

该了解我们也知道的差不多了,接下来编写我们第一个jq插件吧 封装对象方法的插件 我们编写一个设置和获取颜色的插件,我们需要实现两个功能 1.设置匹配元素的颜色 2.获取匹配元素(元素集合的第一个)的颜色 我们采用jQuery.fn.extend(),代码如下: ;(function($){ /* code */ })(jQuery) 这是最外层的架构,接下来: ;(function($){ $.fn.extend({ color:function(val){ // code } }); })(j…

就拿一个简单的示例来说,鼠标点击输入框,提示文字消息,鼠标移开,再显示提示文字. <script type="text/javascript"> //编写插件 (function ($) { $.fn.placeholder = function (option) { var input = this; input.focus(function () { if (input.val() == "" || input.val() == option.Def…

封装对象方法的插件 jQuery.fn.extend() 的两种写法 以添加一个点击按钮为例: 方法一: (function ($) { $.fn.mask = function(options){ options = $.extend({ _class:'.maskHomeNew', },options); console.log(options._class); $(options._class).click(function(){ $(this).hide(); }); } })(jQue…

继续上一节的代码 (function(){ /* code */ })() 来我们介绍一下吧,首先定义一个匿名函数 fnction(){/* 这里放置代码 */} 然后用括号括起来, (fnction(){/* 这里放置代码 */}) 变成这种形式,最后添加一个()运算符来执行,括弧内可以添加参数,供内部函数使用: ;(function($){ /* code */ })(jQuery); 这就是jq插件常见的结构.(利用闭包的特性避免污染全局) JQ提供了两个用于宽展jQuery功能的方法 j…

看到这篇文章的人相信大家都学会了jq,或者正在用jq,在这里简单介绍一下jq的插件封装: jQuery的插件主要分为3种类型: 1.封装对象方法的插件 这种插件是将对象的方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.(eg:parent(),find()等等) 2.封装全局函数的插件 将独立的函数添加到JQuery命名空间下.( jQuery.noConflict(),jQuery.ajax() 等等 ) 3.选择器插件 相信大家应该知道jQ的选择器十分强大,…

一. 效果图 二. 原理讲解 1. 用到了两张图片,一张小图,一张大图. 2. 小图用于直接在页面上显示,大图则用于放大镜内显示 3. 放大镜实际是一个div,而大图则是这个div的背景图 4. 小图与大图是等比例的,从而达到最佳放大效果 5. 当没设置大图时,则大图为小图本身,此种情况放大效果不明显,相当于没放大一样 6. 这里借助于鼠标移动事件(即:mousemove),通过鼠标在小图上的移动坐标 和 大小图的比例(比例计算得来),从而计算出放大镜内的背景图对应的坐标位置. 三. 插件实现代…

一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> 三. 原理讲解 1. div.box是最外层盒子, 给它固定的宽高,记得给div.box添加一个 overflow:hidden 样式(超出的内容隐藏) ,因为滚动肯定会超出box的. 2. 我…

比如要扩展验证功能(jquery.validate.js)中的 messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please e…

http://blog.csdn.net/chenxi1025/article/details/52222327 https://www.cnblogs.com/ajianbeyourself/p/5815689.html jQuery.fn.center = function () {     this.css("top", ( $("body").height() - this.outerHeight() ) / 2+$(window).scrollTop()…

JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下: (function($){ $.fn.m…

Writing Your Own jQuery Plugins 原文地址:http://blog.teamtreehouse.com/writing-your-own-jquery-plugins jQuery是一个优秀的javascript库.它不但拥有良好的跨浏览器兼容性,容易学习掌握,还可以轻而易举的为你的网站添加有趣的交互.同时,大量的jQuery插件能够让你随心所欲的完成你想要完成的工作. 然而在平常的工作中,并不是总能够找到可以完全满足需求的插件,或者你想要将一些常用的功能封装以便保…

目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方法的插件 大部分jQuery的插件都属于这种,对获取的jQuery对象进行操作 封装全局函数的插件 可以理解为$.ajax这种就是封装的全局函数 选择器插件 顾名思义,封装的选择器 jQuery插件的基本要点: jQuery插件的文件名推荐为:jquery.[插件名].js,以免和其它js库插件混淆…

jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下:…

原文:http://www.itzhai.com/jquery-plug-in-the-preparation-of-related-technical-design-summary-and-best-practices.html 1.声明插件名称: 添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称: jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here…

如何编写自己的jquery插件 Jquery的插件主要分为三类: .封装对象方法的插件:大部分插件都是封装对象的插件 .封装全局函数的插件:将独立的函数添加到jquery的命名空间之下.Jquery.ajax()和jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的. .选择器插件:扩充自己喜欢的一些选择器. 编写Jquery插件的基本要点: .一般命名的时候最好是按照jquery.[插件名].js命名. .所有的对象都应当附加到jquery.fn对象上,所有的全局函…

jQuery插件编写 jQuery插件 最近搞jquery插件的编写这里做下笔记 给jquery扩展的方式很多,看的我眼花缭乱 方式1 $.fun=function(){} 方式2 $.fn.fun=function(){} 方式3 $.extend({ fun:function(){} }) 方式4    (function ($) {        $.fn.extend({            falert2: function () {                alert('22…

1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuery UI   5.jQuery Cookie   6.遮罩层插件:thickbox   7.编写jQuery插件 <1>编写插件的目的:给已经有的一些列方法或函数做一个封装,一遍在其他地方使用,方便后期维护和提高开发效率.   <2>三种类型的插件 a:封装对象方法的插件 jQuery…