前言:这种东西随意可以在网上收到,这里我还是只是记下自己的见解和领. 第一种方式 (function ($) { $.extend({ sayHello: function (name) { alert(name + ": hello"); } }); })(jQuery); $.sayHello("meng"); 这种属于静态方法,直接调用即可. 第二种方式: (function ($) { $.fn.redBg = function () { $(this).c…

因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在弄css(我css文盲级别,形容得还不够贴切,如果说文盲不会写字,只会说话,那我是连话都不会说的级别.),好了,废话少说,切入正题. 首先要了解jQuery插件开发分两种,1.类级别的插件开发.2.对象级别插件开发. 什么? 你居然问什么是类级别和什么是对象级别? 好吧,你完胜爆菊! 类级别你可以理…

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

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发做详细的说明. 1.类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关于类级别的插件开发可以采用如下几种…

先贴代码 (function ( $ ) { var id=33; $.fn.validate=function(options){ // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. color: "#556b2f", backgroundColor: "white" }, options ); // Gre…

日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库,轻量级并且能够很优雅的使用flash向前兼容老版本的浏览器. 其主要特性: 拥有完整API来控制“加载”,“播放”,“暂停”,“音量”和“查找” 并且可以得到播放内容的具体相关信息 不依赖任何类库 兼容版本浏览器,包括:IE8, IE9, Chrome…

需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个button按钮,增加add和delete对应的js函数,无疑大大增加了工作量和维护成本. select有预设值的情况: 下面就开始动手把这4个html元素做成一个JQuery插件. jquery插件结构 如果你是零基础,请参考Jquery官网对jquery plugin的介绍:http://lear…

我们先来看一个最简单的例子: (function($){ $.fn.extend({     //把此插件添加到jQuery的原型上 pluginName:function(){   //插件的名字 return this.each(function(){     //遍历匹配元素的集合 //插件要实现的功能 }); } }); })(jQuery);   //传入jQuery对象 由于jQuery是集化操作($("div")会选择多个div元素进行操作),而我们的插件编写应该一个元素…

jQuery其他补充+ 4.1 链式编程: end()补充 * 补充五角星 评论案例 * 第一步:鼠标移入,当前五角星和前面的五角星变实体.后面的变空心五角星 * 第二步:鼠标点击的时候,为当前元素添加clicked类,其他的移除clicked类 * 第三步:当鼠标移开整个评分控件的时候,把clicked的之前的五角星显示实心 + 4.2 隐式迭代 * 默认情况下,会自动迭代执行jQuery选择出来所有dom元素的操作. * 如果获取的是多元素的值,默认返回的是第一个元素的值. + 4.3 ma…

Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的js框架去实现它. 如果你还是一个Chrome插件的新手并且想尝试写一个的话,下面的文章将会带领大家并且尝试让大家理解Chrome插件的工作机制.这篇文章将会讲述每一块架构,以及相互之间的联系和插件的一般化形式. 架构 Chrome插件中的文件大体上可以分成2部分:Chrome插件中确确实实存在的文…

自己动手Jquery插件 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时候我们需要根据我们自己的业务和系统特色(风格)构造一些我们常用的前端UI组件,而 JQuery的插件给了我们一个较好的方式来构造这些UI组件,方便我们日后反复重用这些组件. 网上也有很多关于JQuery插件的文章,我也搜了一些,但是,这些文档太过离散,没有有效地组织并充分说明…

最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时候我们需要根据我们自己的业务和系统特色(风格)构造一些我们常用的前端UI组件,而 JQuery的插件给了我们一个较好的方式来构造这些UI组件,方便我们日后反复重用这些组件. 网上也有很多关于JQuery插件的文章,我也搜了一些,但是,这些文档太过离散,没有有效地组织并充分说明JQuey插件该如何编写,…

示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table的各列可以左右拉伸,从而使宽度变小或变大 用法:$("#table_id").tableresize(); */ (function ($) { $.fn.tableresize = function (options) { var defaults = { //当table的宽度到达默认…

接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动加窃喜,因为看到间歇地有一些来自世界各地的访客,那感觉真是乡下二狗子刚进城啊,现在看来好二. Inspired By 首先要介绍的是灵感来自于,嗯,介绍一下还是有必要的,因为创意这东西,有时候比实际的产品更有意义,也让我们反思为毛外国友人们更具创造性,我们的思维太僵化勒! 最初是受到国外某大大写的一…

引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对…

很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:“嗨,美女,用这个吧.这是我写的一个jQuery插件.”我想基本上你的人生大事就能很快解决. 先想好做个什么功能 这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还是捡个瘦的…

jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中…

随着jQuery插件在网站建设过程中的使用率不断的增加,所以有必要跟进时代步伐开发出一些新的插件/代码片段,以此来巩固并提高前端用户体验,将用户体验提升到一个新的高度. 接下来所推荐的这些插件中有滑块.地图.图片旋转块等等,可以说是最好的.完全免费的jQuery插件. 1. Flat jQuery Price Slider   实例|下载 这个jQuery价格滑块可以在一定范围内选择需要的价钱,不管你是做开发项目的还是设计项目,它都会起很大的作用.记住,这个插件完全免费. 2. Gmaps jQ…

详细图解jQuery对象,以及如何扩展jQuery插件 早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发展,另外几种前端框架的崛起,jQuery慢慢变得不再是必须.因此大家对于jQuery的热情低了很多.但是许多从jQuery中学到的技巧用在实际开发中仍然非常好用.简单的了解它也有助于我们更加深入的理解JavaScript. 这篇文章的主要目的就…

相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {…

早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发展,另外几种前端框架的崛起,jQuery慢慢变得不再是必须.因此大家对于jQuery的热情低了很多.但是许多从jQuery中学到的技巧用在实际开发中仍然非常好用.简单的了解它也有助于我们更加深入的理解JavaScript. 这篇文章的主要目的就是跟大家分享一下,jquery对象是如何封装的.算是对于…

一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的…

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

教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有…

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 使用方法: Lazy Load 依赖于 jQuery.所有在head区域需要加入jquery和jQuery.lazyload…

一．Js的this,{},[] this是Javascript语言的一个关键字,随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是调用的函数自己. { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. [ ]中括号,表示一个数组,也可以理解为一个数组对象. { } 和[ ] 一起使用,我们前面说到,{ } 是一个对象,[ ] 是一个数组,我们可以组成一个对象数组. 二．JS的prototype和__proto__ 1．prototyp…

最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了最基本的功能,等有了修改再上传上来. /** * 消息提示<br> * 自动生成的html结构如下: * * <div class="title">消息提醒 <div class="toggle" style="">…

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创…

1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "…

在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, window,document); 对于很多初学者来说很难明白这表示什么,下边我将为大家介绍其相应的作用. 1.代码最前面的分号,可以防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后的语法错误. 2.匿名函数(function(){})();:由于Javascript执行表达式是从圆括…