正文

读<jQuery 权威指南>[5]-插件

IP云
IP云V管理员/4 阅读
09/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、说明

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]-插件的更多相关文章

  1. 读&lt&semi;jquery 权威指南&gt&semi;&lbrack;1&rsqb;-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  2. 读&lt&semi;jquery 权威指南&gt&semi;&lbrack;3&rsqb;-动画

    一. 显示与隐藏——hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...

  3. 读&lt&semi;jquery 权威指南&gt&semi;&lbrack;4&rsqb;-Ajax

    一.获取异步数据 jQuery可以从服务器异步获得静态数据. ①load() $.load(url,data,callback) url要加载的页面地址, data发送到服务器的数据key/value ...

  4. 读&lt&semi;jQuery 权威指南&gt&semi;&lbrack;6&rsqb;--实用工具函数

    官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...

  5. 读&lt&semi;jquery 权威指南&gt&semi;&lbrack;7&rsqb;-性能优化与最佳实践

    一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...

  6. 读&lt&semi;jquery 权威指南&gt&semi;&lbrack;2&rsqb;-事件

    1.  事件冒泡 阻止事件冒泡的两种方式: event.stopPropagation(); return false ; 2. 绑定事件——bind(type,[data],function) ty ...

  7. 跟小静读《jQuery权威指南》——目录

    前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...

  8. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 &lt ...

  9. &lbrack;在读&rsqb; javascript权威指南第六版

    耽搁了有大半年没看,记得当时看到5分之2了吧.权威指南是不管读几遍都能觉得有新收获的书^^

随机推荐

  1. No row with the given identifier exists&colon;

    最近在弄一个后台项目,有用到hibernate操作数据库.写hql语句表一对一关联查询的时候报这个错误.受到了csdn上一篇博客的启发,解决了我的问题.他的博客地址:http://blog.csdn. ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. 一次性下载CVPR2016的所有文章

    wget --no-clobber --convert-links --random-wait -r -p -E -e robots=off -U mozilla http://www.cv-foun ...

  4. Smart ——jiaoyou模板

    <!--{foreach $vip_data as $key=>$volist}-->    <!--{if $key==0 ||$key==1||$key==5||$key= ...

  5. 【code vs】 2780 ZZWYYQWZHZ

    2780 ZZWYYQWZHZ 题目描述 Description 可爱的小管在玩吹泡泡.忽然,他想到了一种排序....... 输入描述 Input Description 第一行输入n,表示有n个数. ...

  6. Linux 配置vim编辑器

    最终效果 步骤1.下载NERDTree插件安装包(vim目录插件) https://www.vim.org/scripts/script.php?script_id=1658 步骤2.在家目录创建 . ...

  7. Azkaban 使用问题及解决&lpar;一&rpar;

    什么是Azkaban Azkaban是一款基于Java编写的任务调度系统 任务调度:有四个任务脚A.B.C.D,其中任务A与任务B可以并行运行,然后任务C依赖任务A和任务B的运行结果,任务D依赖任务C ...

  8. 实验一：Java开发环境的熟悉

    实验一:Java开发环境的熟悉 一.实验一-1 在码云中建立"20165317exp1"的项目. 从git中下载该项目. 在"20165317exp1"目录下建 ...

  9. Java中 final、static、abstract区别与联系

    1.static修饰符 static作用于代码块:称作静态代码块(可以初始化static field,不能初始化非static field); static作用于methods: static方法只能 ...

  10. Linux初学时的一些常用命令（3）

    管道 |  重要的一个概念,其作用是将一个命令的输出用作另一个命令的输入 例如:  在ifconfig的结果里查找 192.168字符串  ifconfig | grep 192.168 查找和jav ...