读jQuery 权威指南[5]-插件
一、说明
jQuery插件官网:http://plugins.jquery.com/
使用插件时引用顺序:插件引用要位于主jquery库之后。
二、插件应用实例
演示插件jquery.validate.js的使用方法:
①引用jQuery主库和validate插件。
注意:
- jQuery主库要先于插件引用;
- 如果想显示中文错误提示,还需要引用jquery.validate.messages_cn.js。
<script type="text/javascript" src="Jscript/jquery-1.4.2.js"></script><script type="text/javascript" src="Js-7-1/jquery.validate.js"></script><script type="text/javascript" src="Js-7-1/jquery.validate.messages_cn.js"></script>
<form id="frmV" method="get" action="#"><div class="divFrame"><div class="divTitle">请输入下列资料</div><div class="divContent"><div>标题:<br /><input id="title" name="title"type="text" class="txt" /><font color="red">*</font><br /><span></span></div><div></div></div><div class="divBtn"><input id="sbtUser" type="submit" value="提交" class="btn" /></div></div></form>
②设置验证规则,注意name要与控件对应。
<script type="text/javascript">$(function() {$("#frmV").validate({/*自定义验证规则*/ rules: {title: { required: true, minlength: 5,maxlength:18 }},/*错误提示位置*/errorPlacement: function(error, element) {error.appendTo(element.siblings("span"));}});})</script>
三、自定义插件
1.插件分类:
- 封装方法插件:对象插件
- 封闭函数插件:类插件
2.插件开发注意事项
①插件命名格式: jquery.[插件名].js;
②所有插件都应该以分号;开头,避免压缩插件之后出现错误;为了保证JQuery的链式写法正确性,插件本身必须返回一个jQuery对象;
③在插件内部,this表示选择器选中的对象,和平时的this含义不太相同;
④为了避免冲突,在编写插件时尽量使用jQuery而不是$符号;
⑤对象级别插件所有方法都依附于jquery.fn主体对象;类级别插件所有方法都依附于jquery对象。
⑥编写对象级别插件是用jQuery.fn.extend()方法进行扩展,编写类级别插件时是用jQuery.extend()方法进行扩展。
2.对象插件示例:
插件功能比较简单,当鼠标经过菜单项时自动切换背景颜色。
首先定义插件jquery.color.js
; (function($) { $.fn.extend({"focusColor":function (color) {var def_col = "#ccc";var list_bg = "#fff";color = (color == undefined )? def_col : color;$(this).find("li").each(function() {$(this).mouseover(function() {$(this).css("background-color", color);}).mouseout(function() {$(this).css("background-color", list_bg);});});return $(this);}}); })(jQuery);
调用:
<script type="text/javascript">$(function() {$("#u1").focusColor("green");//调用自定义的插件 })</script>
3.类插件示例:
定义类级别插件jquery.calc.js。
;$(function () { $.extend({"addNum": function (a, b) {a = a || 0;b = b || 0;return parseInt(a) + parseInt(b);}}); })(jQuery);
调用:
<script type="text/javascript">$(function() {$("#Button1").click(function() {$("#Text3").val($.addNum($("#Text1").val(),$("#Text2").val()));}); })</script>
读jQuery 权威指南[5]-插件相关推荐
- 读jquery 权威指南[7]-性能优化与最佳实践
一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...
- 读jquery 权威指南[4]-Ajax
一.获取异步数据 jQuery可以从服务器异步获得静态数据. ①load() $.load(url,data,callback) url要加载的页面地址, data发送到服务器的数据key/value ...
- 读jquery 权威指南[3]-动画
一. 显示与隐藏--hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...
- 读jQuery 权威指南[6]--实用工具函数
官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each--遍历 $.each(obj,function(param1,pa ...
- 读jquery 权威指南[2]-事件
1. 事件冒泡 阻止事件冒泡的两种方式: event.stopPropagation(); return false ; 2. 绑定事件--bind(type,[data],function) ty ...
- 跟小静读《jQuery权威指南》——目录
前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...
- 陶国荣著JQuery权威指南PDF
JQuery权威指南 本书由国内资深web技术专家亲自执笔,4大web开发社区一致鼎力推荐,权威性毋庸置疑.学习网页设计中会遇到JQuery的一些特效,由51RGB小编整理的一个关于JQuery权威指 ...
- jQuery权威指南(第2版)
为什么80%的码农都做不了架构师?>>> jQuery权威指南(第2版) 本书由国内资深web技术专家亲自执笔,4大web开发社区一致鼎力推荐,权威性毋庸置疑.内容新颖,基于j ...
- jQuery权威指南(第2版)pdf
下载地址:网盘下载 作者简介 · · · · · · 资深Web技术专家,有10余年开发经验,是国内较早专业从事Web开发的一线技术人员和培训讲师.长期致力于HTML 5.JavaScript.CS ...
最新文章
- 50岁马斯克又恋爱了!27岁金发女友长着芭比娃娃脸
- 《自然》深度:中国AI能在2030年制霸世界吗?
- 13KB的代码能做什么?有些人可是弄出了一个完整的游戏!
- selenium 解析网页_用Selenium进行网页搜刮
- c语言中闰年 日期 天数 统计出在某个特定的年份中,出现了多少次既是13号又是星期五的情形
- Mac系统上安装Composer
- 【Python】文本进度条
- ES6 的发布,加速 JavaScript 框架淘汰?
- 桌面虚拟化之应用程序的整合
- mysql 堆表_Mysql聚集索引和非聚集索引(堆组织表和索引组织表)
- Maven安装与配制环境【win7/win10】
- uva 10825 - Anagram and Multiplication(暴力)
- 区块链学习之《区块链技术指南》读书笔记
- Axure第11享:Axure汉化方法?
- “快易需求系统”数据库设计心得
- 媒体在计算机科学中的两种含义,多媒体技术应用_思考与练习题.doc
- Clickhouse查询语句 sample
- 【转】最全前端面试问题及答案总结
- 金融分析与风险管理——期权类型及到期时的盈亏
- 基于深度学习的自动识别夹取机械臂