今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析 更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载。笔者今天详细的阅读了这篇文章并记录了一些笔记。
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。 进行jQuery插件开发前,首先要知道两个问题:什么是jQuery插件?jQuery插件如何使用? 第一个问题,jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题,也就知道第二个问题的答案了,jQuery插件的使用方式就是jQuery对象方法的调用。 我们先看个例子:$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素,返回一个a元素的jQuery对象,这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢?其实jQuery内部定义了一个jQuery.fn对象,查看jQuery源码可以发现jQuery.fn=jQuery.prototype,也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的,然后jQuery对象就可以通过原型继承这些方法。 基础版jQuery插件 知道了上面这些知识,我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色,就可以按下面的方式来实现这个插件: $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); } 然后按下面的方式来使用插件: $("p").changeStyle("red"); 插件调用的时候,插件内部的this就是当前调用插件的jQuery对象,这样的话每个使用$()方法选择的标签,在调用changeStyle()插件时都会使用css()方法重设color样式。 满足链式调用的jQuery插件 链式调用时jQuery的一大特色,一个通用的插件应该遵循jQuery风格,满足链式调用要求。实现链式调用的方式也很简单: $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } 然后使用的时候就可以链式调用其他方法了: $("p").changeStyle("red").addClass("red-color"); 实现链式调用的关键点就一行代码return this,插件中加了这行代码,那么在插件执行完之后,就会把当前的jQuery对象返回,然后就可以在插件方法后面继续调用其它jQuery方法。 防止$符号污染的jQuery插件 有很多js库都会使用$符号,虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权,但是如果定义插件的时候,使用$.fn对象来定义的,那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况,我们可以使用立即执行函数通过传参的方式封装插件。形式如下: (function($){ $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } })(jQuery); 因为使用了立即执行函数,所以此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。 可以接受参数的jQuery插件 继续上面的例子,假如我还想为这个插件添加一个设置标签元素内容文字大小的功能,那么我可以这么来实现: (function($){ $.fn.changeStyle = function(colorStr,fontSize){ this.css("color",colorStr).css("fontSize",fontSize+"px"); return this; } })
var Helloword = function(objId){ var _get_dom = function(Id){ return document.getElementById(Id); } var _aim_obj = _get_dom(objId); var _say_hello = function(str){ _aim_obj.innerHTML = str; HelloWorld.sayHello('hello','hello text'); } return{ sayHello:_say_hello } }
写jQuery插件时一些经验分享一下。 一、推荐写法 jQuery(function($){ //coding }); 全写为 jQuery(document).ready(function($){ //coding }); 1、意义为在DOM加载完毕后执行了ready()方法。 2、$私有变量,与其他插件不冲突 二、不推荐写法 (function($){ //coding })(jQuery); 1、立即执行函数;相当于先申明一个函数,声明完后直接调用 。
第一次写jQuery插件,简直无从下手,好在一步一步从简单到复杂(对我来说挺复杂的),终于理解了jQuery插件的写法规则,并最终以一个新闻式插件面世。尤其感谢带领我的很棒的前端师傅~ 废话不多说,开始。(编写准备工具:sublime(其他只要可以开发HTML就行),jQuery包) 一、题目:编写一个类似新闻样式的小插件(即:用上这个插件,就能自动生成一个新闻样式),如图所示。 image.png 二、分析题目,整理思路,并用代码实现它 1、首先用HTML+CSS将静态页面写出来(不用想许多后续难度等等
基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。
//$("#testdiv").hoverAlert({message:'弹出内容'});
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
1.x:兼容ie678,但相对其它版本文件较大,官方只做BUG维护,功能不再新增,最终版本:1.12.4 (2016年5月20日).
jQuery补充知识点 隐式迭代 基本概念 隐式迭代:jQuery在设置属性时会自动的遍历,因此我们不需要再遍历 jQuery在执行设置性操作时,会给所有的元素都设置上相同的值。 jQuery在执行获取性操作时,只会返回第一个元素对应的值。 如果想要给每一个元素都设置不同的值,需要手动进行遍历jQuery对象。 each方法 遍历jQuery对象集合,为每个匹配的元素执行一个函数 语法: // 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素, 在function中this也表示当前元素
在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。 第一种情况:jquery.js在prototype.js之后进行引入,如:
jQuery插件就是别人已经开发好弄的,我们直接约会就可以使用。并且基于jQuery制作的,可以实现某些特定的网页效果的js文件(js + css)。
对于那些不知道的人来说,jQuery是一个JavaScript库,它包含了许多特性,非常小而且速度很快。它还包括一个易于使用的API,在所有浏览器上都是兼容的,并且可以很容易的进行HTML遍历、动画、DOM操作和事件处理。它不仅可扩展,而且经久耐用。因此,客户端脚本自开发以来变得容易得多。
我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!”
在追求页面互动效果的时代,大家都想把页面效果做的美轮美奂,这一切都离不开前端技术脚本Javascript,而最近常被人用到的Javascript库文件则是jQuery。 jQuery的使用具体步骤如下:
网站建设系列是收集网站使用到的各种demo。包括 JavaScript 插件,JavaScript组件,常用 css 等多方面。
一、没有引入jQuery库文件 二、jQuery库文件和jquery.cookie.js文件的顺序问题。须先引入jQuery库文件再引入cookie插件文件 三、页面的加载顺序所导致 大家的问题大多出在第三个原因! 网上有人说是一个页面由于二次或多次引入了jquery插件导致。 我觉得应该这样总结: 火狐浏览器报错$.cookie is not a function;是由于一个页面通过非正常方法载入jquery插件所导致! 怎么个非正常方法呢?比如jquery的ajax方法load(),当被
原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
jQuery插件就是开发爱好者自己利用jQuery制作的特效,然后打包成js文件,发布到网上供大家使用的脚本集合。
本文主要介绍了高可维护的JavaScript代码规范,包括变量命名、注释、函数、正则表达式、对象、闭包、性能、模块化、私有变量、代码格式化、测试、编码规范、工具和最佳实践等。同时,本文还提供了常见代码规范的具体示例和JavaScript代码规范检查工具的输出结果。通过遵循这些规范,可以大大提高代码的可读性和可维护性,从而提高开发效率。
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统。这好比大公司们争相做平台一样,得平台者得天下。苹果,微软,谷歌等巨头,都有各自的平台及生态圈。
http://www.bootcss.com/p/chart.js/docs/
简介与要点:在网页上制作一个音乐播放器我们仅需用到一个新的标签;因为我们这个音乐播放不是单曲循环的使用还要用到jQuery插件做一个下拉框式的选择切换功能,所以依旧要使用到jQuery插件;使用jQuery建立一个动态生成的歌曲选择器,再用jQuery设置点击事件或者焦点失去事件,只要能触发下面的切换效果就行
本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都知道。今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下 面就是一个简单扩展Jquery对象的dem
##引言 工作大概9年了,就算不算上在学校里的写网页的经历,其实从事与Web前端有关的开发已经8年。这8年我自己也随着Web开发技术的革新,也在不停地更新这方面的知识体系。最近在想,是时候对目前所掌握的Web开发技术进行一个小结了。于是就有了这个系列的开始,这个系列开篇会概览性地说一下Web开发几个重要的工具或技术,后面则会在以demo示例的方式讲一讲在真实项目中是如何实践它们的。 很多年前,那个时候写前端页面真的很简单,基本上抓起一个编辑器就可以开始写html了,当时页面真的很简单,就是一堆html标签,
Vue之所以受欢迎,主要就在于它的轻量和灵活,我们可以用vue做SPA,也可以用它做多页应用,一个页面对应一个VUE实例。而且因为他的轻量,低侵入性,所以我们可以很方便地和其他框架或者库搭配使用,那么我们怎么在基于vue的SPA应用中搭配jquery使用呢?
版权声明:本文为王小雷原创文章,未经博主允许不得转载 https://blog.csdn.net/dream_an/article/details/49658143
你不懂JS - 可能是用现代JavaScript编写的最好的书,完全可以免费在线阅读,或者可以买来支持作者。
each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使用的时候注意转成 jQuery 对象。
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件:
由于js的代码逻辑越来越重,一个js文件可能会有上千行,十分不利于开发与维护。最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是seajs的时候,最终还是偏向于requirejs。毕竟官方文档比较专业嘛... 不过即便是有完整的官方文档,仍然遇到不少的问题,比如jquery-ui的使用。 下面就循序渐进的讲解一下我遇到的问题,以及解决的办法。 关于AMD和CMD的理解 AMD(异步模块定义)的典型就是requirejs,而CMD(通用模块定义)的典型是淘宝的seajs。 他
Bootstrap是一个功能强大的、以移动端为优先的响应式前端框架,它是用CSS、HTML和JavaScript构建的。与从零开始编程,甚至许多其他框架相比,Bootstrap都有许多优势。
Javascript语言的执行环境是”单线程”(single thread)。所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。 Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。 “异步模式”非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,”异步模式”甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。 然而,异步执行最大的问题就是执行顺序。 假定有两个函数f1和f2,后者等待前者的执行结果。
官方API:http://api.jqueryui.com/category/all/
1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局
vue3 源码实战出来啦:在面试中,害怕被问到 Vue源码,或者想通过自己对Vue 源码的来秀一下面试官的,可以了解一下。
一、配色类网站 http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色
在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以复制并粘贴大部分的代码结构,只要专注最主要的逻辑代码就行了。 使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂。我在这里分享10条我总结的经验。
5、更新快,功能全,样式多 用户的选择也就更多了【目前更新了11个播放器样式+9种小功能】
AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。
最近用django写了一个后台系统,使用的是验证码方式。但是开发人员抱怨,输入验证太麻烦,还有可能出错,太影响效率了。
作者|波同学 原文|http://www.jianshu.com/p/3f97570d22b4 早几年学习前端,大家都非常热衷于研究jQuery源码。我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发展,另外几种前端框架的崛起,jQuery慢慢变得不再是必须。因此大家对于jQuery的热情低了很多。但是许多从jQuery中学到的技巧用在实际开发中仍然非常好用。简单的了解它也有助于我们更加深入的理解JavaScri
据统计,据媒体报道,据各种经验之谈:用户不喜欢点击,更爱滚动!所以,之前挺流行的文章分页没有了,沿用了几百年的“下一页”也被无限load取代。瀑布流和Twitter更是推动了无限load的普及。
在集成时,我的思路是写一个公共JSP文件,里面包含一些常用的js文件,当然此处我用的就是Jquery插件了。
head.jsp文件 将项目中所需要用到次数比较多的的插件,库等,同意放在一个jsp文件里面,命名为head.jsp文件,相当于一个全局的 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib uri="
领取专属 10元无门槛券
手把手带您无忧上云