6.jquery插件

最新推荐文章于 2021-08-05 16:47:30 发布

安静低谷

最新推荐文章于 2021-08-05 16:47:30 发布

阅读量411

点赞数

分类专栏： jquery 文章标签： jquery插件

本文链接：https://blog.csdn.net/SHATUP/article/details/78693733

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

也称扩展(Extension),是遵循一定规范编写出来的程序.

jQuery插件几千种可以去http://plugins.jquery.com 去获取

一.表单验证插件-----Validation

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件---Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点:

1. 内置验证规则: 拥有必填、数字、email、url和信用卡号码等19类内置验证规则.

2. 自定义验证规则:可以很方便地自定义验证规则.

3. 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能.

4. 实时验证:可以通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证.

下载地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation

二.快速上手(第一个Validation插件程序)

html页面

* {

font-family:verdana;

font-size:96%;

}

label {

width:10em;

float:left;

}

/*如果不符合验证规则则自动在被验证的文本框后面加一个class属性为error的label

作为提示信息因为上面已经设置了label为浮动所以自动生成的显示提示信息的label

也是浮动的所以效果有些问题需要给自动生成的label修改它的float为none

如果想控制提示信息和文本框的距离可以设置padding-left* */

label.error {

float:none;

color:red;

padding-left:5em;

vertical-align:top;

}

p {

clear:both;

}

em {

font-weight: bold;

padding-right:1em;

vertical-align:top;

}

.submit {

margin-left:12em;

}

</style>

body中的代码

<legend>带验证的评论</legend>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</fieldset>

</form>

需求:

(1) 对”姓名”的必填和长度至少是两位的验证.

(2) 对”电子邮件”的必填和是否为Email格式的验证.

(3) 对”网址”是否为url的验证.

(4) 对”你的评论”的必填验证

当用户单击”提交”按钮后,显示下图的效果(当鼠标失去焦点也会显示)

1:引入jQuery库和Validation插件

2.确定哪个表单需要验证

$(function(){

$("#commentForm").validate();

});

3.给表单域设置验证规则

class=”required” 为必须填写 minlength=”2” 为最小长度为2

class=”required email” 为必须填写和内容要符合E-mail格式

class=”url”为url格式验证

注意:hbuilder中使用IE运行,IE无效,原因是IE默认是阻止脚本执行.解决方案,找到”第一个Validation插件程序.html” 然后右键IE运行,允许阻止内容即可

验证原理

:如果验证失败,则会在验证的表单域后面动态的创建出一个class属性为error的label标签,使用firebug查看,生成的label标签源代码如下:

<label id="username-error" class="error" for="username">Please enter at least 2 characters.</label>

因为之前设置了label标签的float为left 左浮动,所以自动生成的这个label标签也会是左浮动的,如果不给生成的这个标签加label.error样式的话就会出错,效果如下:

产生该效果的原因为 “姓名”这个label 和错误提示这个label都是左浮动的,左浮动会脱离文档流,紧贴父容器的边框.

为了效果正确,需要给自动产生的这个label加样式,让它不浮动,代码如下:

/*如果不符合验证规则则自动在被验证的文本框后面加一个class属性为error的label

作为提示信息因为上面已经设置了label为浮动所以自动生成的显示提示信息的label

也是浮动的所以效果有些问题需要给自动生成的label修改它的float为none

如果想控制提示信息和文本框的距离可以设置padding-left* */

label.error {

float:none;

color:red;

padding-left:5em;

vertical-align:top;

}

padding-left:设置提示信息和文本框的边距，为了同学们看清padding的效果,给label加了一个背景，效果如下:

全部代码如下

参见第一个validation插件程序.html

<!DOCTYPE html>

<html>

<head>

<title>第一个validation插件程序</title>

* {

font-family: verdana;

font-size: 96%;

}

label {

width: 10em;

float: left;

}

/*如果不符合验证规则则自动在被验证的文本框后面加一个class属性为error的label

作为提示信息因为上面已经设置了label为浮动所以自动生成的显示提示信息的label

也是浮动的所以效果有些问题需要给自动生成的label修改它的float为none

如果想控制提示信息和文本框的距离可以设置padding-left* */

label.error {

float: none;

color: red;

padding-left: 5em;

vertical-align: top;

background-color: burlywood;

}

p {

clear: both;

}

em {

font-weight: bold;

padding-right: 1em;

vertical-align: top;

}

.submit {

margin-left: 12em;

}

</style>

/*第二步确定哪个表单需要被验证*/

$(function() {

$("#commentForm").validate();

});

</script>

</head>

<body>

<legend>带验证的评论</legend>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</fieldset>

</form>

</body>

</html>

三.两种不同的验证写法

(一)class=”required” 和 minlength=”2” 都写到class中

上面的例子需要把class设置成required 才能完成必填验证,需要把minlength设置为2才能完成最小长度为2的验证.虽然这样写能实现功能,但一会把验证信息写到class里,一会又写到minlength中实在很麻烦.Validation充分考虑到了这一点,用户可以将所有的与验证相关的信息都写到class 属性中方便管理.为了实现这个功能,需要经过以下几个步骤.

1.引入一个新的jQuery插件: jquery.metadata.js

2.改变调用的验证方法

将

$("#commentForm").validate();

改为

$("#commentForm").validate({meta: "validate"});

3.将验证规则全部编写到class属性中

演示代码:

<legend>带验证的评论</legend>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</fieldset>

</form>

本段代码的验证效果与之前的例子完全一致.

注意: jquery.validate.js和 jquery.metadata.js版本要配套，之前笔者下载的最新版本的validate和现有的jquery.metadata.js不配套，所以不出效果.

(二)将验证规则和HTML结构分离

上面的两个例子都是通过修改HTML的属性来实现的,这样写虽然能实现功能,但内容和验证行为没有分离,下面介绍一种分离的方法,在js中通过name属性来关联表单域和验证规则.

首先,将表单域中的class属性移除.

然后加入如下jQuery代码:

$(function() {

$("#commentForm").validate({

rules:{

username:{

required:true,

minlength:2

email:{

required:true,

email:true

url:"url",

comment:"required"

}

});

具体代码步骤:

1.在表单对象.validate()方法中增加rules属性

2.通过每个字段的name属性值来匹配验证规则

3.定义验证规则

如果一个表单域上只有一个验证规则,则直接写这一个验证规则,例如url:"url"

如果一个表单域上有多个验证规则,那么验证规则也是一个json对象

四.验证信息

1.国际化

Validation插件的验证信息默认语言为英文,如果要改成中文,只需要引入Validation提供的中文验证信息库jquery.validate.messages_cn.js即可，引入代码如下:

引入语言库后,提示信息自动变成中文,效果如下:

2.自定义提示信息

在不同的验证写法----第一种代码的基础上修改代码,修改后的结果如下

<legend>带验证的评论</legend>

<p>

<input type="text" name="username" id="username" size="25"

class="{validate:{required:true, minlength:2,messages:{required:'请输入姓名',minlength:'请至少输入两个字符'}}}" />

</p>

<p>

<input type="text" name="email" id="email" size="25"

class="{validate:{required:true, email:true,messages:{required:'请输入电子邮件',email:'请检查电子邮件的格式'}}}" />

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</fieldset>

</form>

3.自定义提示信息并美化

为提示信息美化(加图片),这对于Validation插件来说，也是非常简单的.

jQuery代码:

$(function() {

$("#commentForm").validate({

rules: {

username: {

required: true,

minlength: 2

email: {

required: true,

email: true

url: "url",

comment: "required"

messages: {

username: {

required: '请输入姓名',

minlength: '请至少输入两个字符'

email: {

required: '请输入电子邮件',

email: '请检查电子邮件的格式'

url: '请检查网址的格式',

comment: '请输入您的评论'

errorElement: "label", //可以用其他标签，记住把样式也对应修改

success: function(label) {

//label指向上面那个错误提示信息标签em

label.text(" ") //清空错误提示消息

.addClass("success"); //加上自定义的success类

}

});

样式代码:

label.error {

float: none;

color: red;

/*padding-left: 5em;*/

vertical-align: top;

background-color: yellowgreen;

background: url("../../../img/unchecked.gif") no-repeat 2px 0px;

padding-left: 18px;

}

label.success {

background: url("../../../img/checked.gif") no-repeat 2px 0px;

padding-left: 18px;

}

全部代码:见 “自定义提示信息并美化.html”

4.自定义验证规则

需求: 验证码的验证,验证用户输入的验证码是否正确

<p>

<input type="text" name="valCode" id="valCode" size="25" />=7+9

</p>

(1)自定义一个验证规则

jQuery代码:

在$(function(){

//在一开始的地方自定义一个验证方法

$.validator.addMethod(

"formula", //验证方法名称

function(value, element, param) {//验证规则

return value == eval(param);

'请正确输入数学公式计算后的结果'//验证提示信息

);

});

(2)调用该验证规则

$("#commentForm").validate({

rules: {

username: {

required: true,

minlength: 2

email: {

required: true,

email: true

url: "url",

comment: "required",

valCode: {

formula: "7+9"

}

});

全部代码参见 “自定义验证规则.html”

管理Cookie的插件----Cookie

Cookie是网站设计者放置在客户端的小文本文件. 实现存储用户曾经浏览过的产品列表,记住用户喜欢浏览哪类新闻等.在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息.

快速上手

<!DOCTYPE html>

<html>

<head>

<title>jQuery Cookie Plugin</title>

$(function() {

var COOKIE_NAME = 'username';

alert($.cookie(COOKIE_NAME));

if( $.cookie(COOKIE_NAME) ){

$("#username").val($.cookie(COOKIE_NAME) );

}

$("#check").click(function(){

if(this.checked){

$.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });

}else{

$.cookie(COOKIE_NAME, null, { path: '/' });

}

});

</script>

</head>

<body>

用户名：<input type="text" name="username" id="username"/> <br/>

<input type="checkbox" name="check" id="check"/>记住用户名

</body>

</html>

1.初始化页面

2.关闭浏览器之前

3.重新打开浏览器

API

写入Cookie

$.cookie(‘cookie名’, ’cookie值’);

读取Cookie

$.cookie(‘cookie名’);

删除Cookie

$.cookie(‘cookie名’,null);

说明: 设置为null即删除此cookie，必须使用与之前设置时相同的路径(path)和域名(domain)，才可以正确的删除cookie

其他可选参数

$.cookie(‘cookie名’,’cookie值’,{

expires:7,

path:’/’,

domain:’Jquery.com’,

secure:true

})

说明: expires:(Number|Date) 有效期.可以设置一个整数作为有效期(单位:天),也可以直接设置一个日期对象作为Cookie的过期日期.如果指定日期为负数,例如已经过去的日子,那么此cookie将被删除;如果不设置或者设置为null,那么此cookie将被当做Session Cookie处理,并且在浏览器关闭后删除.

Path:(String) cookie的路径属性。默认是创建该Cookie的页面路径.

Domain:(String)cookie的域名属性。默认是创建该Cookie的页面域名.

Secure:(Boolean)如果设为true,那么此cookie的传输会要求一个安全协议,例如HTTPS.

自定义插件

Why

编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率.

插件的种类

1.封装对象方法的插件

调用在jQuery对象上的 div对象.方法名();

95%以上的jQuery插件都是封装对象方法的插件

2.封装全局函数的插件

jQuery.noConflict()

3.选择器插件

color(red) 来选择所有红色字的元素

自定义Color()颜色插件

;(function($) {

//这里写插件代码

})(jQuery);

jquery.color.js

;(function($) {

//一. 直接调用在 div对象.color();

$.fn.extend({

"color": function(value) {

if(value == undefined) {

return this.css("color");

} else {

return this.css("color", value);

}

});

})(jQuery);

如何使用:

1.引入jquery.color.js

2.使用即可

$(function(){

$("#btn1").click(function(){

$("#div1").color("blue");

});

body中的代码

我是div111222

</div>

学生练习:自定义表格隔行换色插件jquery.myTable.js

演示代码:

;(function($) {

$.fn.extend({

"隔行换色":function(options){

//设置默认值

options=$.extend({

odd:"odd", /* 偶数行样式*/

even:"even", /* 奇数行样式*/

selected:"selected" /* 选中行样式*/

},options);

//$("选择器",上下文); //如果不传第二个参数默认上下文是 document 从当前文档中寻找

//this 在当前对象下寻找 table

$("tbody>tr:odd",this).addClass(options.odd);

$("tbody>tr:even",this).addClass(options.even);

$('tbody>tr',this).click(function() {

//判断当前是否选中

var hasSelected=$(this).hasClass(options.selected);

//如果选中，则移出selected类，否则就加上selected类

$(this)[hasSelected?"removeClass":"addClass"](options.selected)

//查找内部的checkbox,设置对应的属性。

.find(':checkbox').prop('checked',!hasSelected);//2.1.4 需改成prop方法

});

// 如果单选框默认情况下是选择的，则高色.

$('tbody>tr:has(:checked)',this).addClass(options.selected);

return this; //返回this，使方法可链。

}

});

})(jQuery);

测试代码:

<!DOCTYPE html>

<html>

<head>

$(function(){

$("table").alterBgColor()

.find("th").css("color","red");//可以链式操作

});

</script>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>MAXMAN</td>

</tr>

</tbody>

</table>

</body>

</html>

Style.css

table { border:0;border-collapse:collapse;}

td { font:normal 12px/17px Arial;padding:2px;width:100px;}

th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}

.even { background:#FFF38F;} /* 偶数行样式*/

.odd { background:#FFFFEE;} /* 奇数行样式*/

.selected { background:#FF6500;color:#fff;}

作业: 实现元素居中的插件

;

(function($) {

$.fn.extend({

"居中": function() {

return this.css("margin","0px auto");

}

});

})(jQuery);

附录: $.extend()方法

<!DOCTYPE html>

<html>

<head>

var obj = {

odd: "odd",

even: "even",

};

$.extend(obj,{

odd: "111",

selected: "selected"

});

console.info(obj);

</script>

</head>

<body>

</body>

</html>

安静低谷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.jquery插件

表单验证插件-----Validation，管理Cookie的插件----Cookie，管理Cookie的插件----Cookie
复制链接

扫一扫

专栏目录

6.jquery插件

一.表单验证插件-----Validation

二.快速上手(第一个Validation插件程序)

html页面

需求:

1:引入jQuery库和Validation插件

2.确定哪个表单需要验证

3.给表单域设置验证规则

验证原理

全部代码如下

三.两种不同的验证写法

(一)class=”required” 和 minlength=”2” 都写到class中

1.引入一个新的jQuery插件: jquery.metadata.js

2.改变调用的验证方法

3.将验证规则全部编写到class属性中

(二)将验证规则和HTML结构分离

四.验证信息

1.国际化

2.自定义提示信息

3.自定义提示信息并美化

4.自定义验证规则

(1)自定义一个验证规则

(2)调用该验证规则

管理Cookie的插件----Cookie

快速上手

API

自定义插件

Why

插件的种类

自定义Color()颜色插件

学生练习:自定义表格隔行换色插件jquery.myTable.js

作业: 实现元素居中的插件

附录: $.extend()方法

“相关推荐”对你有帮助么？