锋利的jQuery读书笔记-第7章 jQuery插件的使用和写法

来源：互联网发布：武术器材专卖店淘宝网编辑：程序博客网时间：2024/05/29 10:07

jQuery官方网站插件获取地址：https://plugins.jquery.com/

因为各种原因，jQuery官方已经将项目托管于GitHub： https://github.com/jquery/plugins.jquery.com

一.介绍四种常用插件：

1.表单验证插件-Validation

先写一个纯HTML代码，定义表单

<body> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset>   <legend>一个简单的验证带验证提示的评论例子</legend>   <p>     <label for="cusername">姓名</label>     <em>*</em><input id="cusername" name="username" size="25" />   </p>   <p>     <label for="cemail">电子邮件</label>     <em>*</em><input id="cemail" name="email" size="25"  />   </p>   <p>     <label for="curl">网址</label>     <em>  </em><input id="curl" name="url" size="25"  value="" />   </p>   <p>     <label for="ccomment">你的评论</label>     <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>   </p>   <p>     <input class="submit" type="submit" value="提交"/>   </p> </fieldset> </form></body>

然后引入校验代码

  <script src="../../scripts/jquery.js" type="text/javascript"></script>  <script src="lib/jquery.validate.js" type="text/javascript"></script>

  <script type="text/javascript">  $(document).ready(function(){$("#commentForm").validate({rules: {username: {required: true,minlength: 2},email: {required: true,email: true},url:"url",comment: "required"}  });  });  </script>

这种写法的好处在于，HTML的结构与校验实现行为完全分离，通过每一个字段的name属性来匹配校验规则。

该插件同时支持提示信息国际化，提示信息自定义，和自定义校验规则

$(document).ready(function(){//自定义一个验证方法$.validator.addMethod("formula", //验证方法名称function(value, element, param) {//验证规则return value == eval(param);}, '请正确输入数学公式计算后的结果'//验证提示信息);$("#commentForm").validate({rules: {username: {required: true,minlength: 2},email: {required: true,email: true},url:"url",comment: "required",valcode: {formula: "7+9"}},//自定义校验信息messages: {username: {required: '请输入姓名',minlength: '请至少输入两个字符'},email: {required: '请输入电子邮件',email: '请检查电子邮件的格式'},url: '请检查网址的格式',comment: '请输入您的评论'},//自定义校验样式errorElement: "em",//用来创建错误提示信息标签success: function(label) {//验证成功后的执行的回调函数//label指向上面那个错误提示信息标签emlabel.text(" ")//清空错误提示消息.addClass("success");//加上自定义的success类}  });  });

2.表单插件-Form

jQuery Form实际上一饿Ajax表单插件，有两个核心方法-ajaxForm() 和 ajaxSubmit().

先定义一个HTML表单

  <body>    <h3> Demo : form插件的使用---ajaxSubmit(). </h3><form id="myForm" action="demo.php" method="post">     名称： <input type="text" name="name" /> <br/>地址： <input type="text" name="address" /><br/>     自我介绍： <textarea name="comment"></textarea> <br/>    <input type="submit" id="test" value="提交" /> <br/>    <div id="output1" style="display:none;"></div></form>  </body>

两种提交表单的方式：

   <script type="text/javascript">             $(document).ready(function() {     $('#myForm').ajaxForm(function() {      $('#output1').html("提交成功！欢迎下次再来！").show();       });      });      </script>     <script type="text/javascript">               $(document).ready(function() {  $('#myForm').submit(function() {                $(this).ajaxSubmit(function() {      $('#output1').html("提交成功！欢迎下次再来！").show();           });       return false; //阻止表单默认提交});        });        </script>

这里实际上是将传统的方式转化为了ajax请求方式。

3.模态窗口插件-SimpleModal

这里有一个比较重要的概念：

模态窗口-只能操作当前窗口，在当前窗口关闭前无法与其他窗口交互。

非模态窗口-可以在窗口间来回切换操作

实际使用非常简单，先定义好弹出的窗口HTML代码，然后将它以模态方式打开

<script>jQuery(function ($) {/* 提示框 */$('.open-basic-dialog-ok').click(function (e) {$('#basic-dialog-ok').modal();return false;});$('.open-basic-dialog-warn').click(function (e) {$('#basic-dialog-warn').modal();return false;});$('.open-basic-ifr').click(function (e) {showIframe("http://www.baidu.com","ifr-dialog-content");return false;});});/* eg:showIframe */function showIframe(src , id ){$("#ifr-dialog-container").attr("src",src);$('#ifr-dialog').modal({opacity:30,"overlayClose":true,"containerId":id });}</script>

4.Cookie插件

Cookie一般用于保存用户的个人喜好配置，或者缓存信息等等， Cookie是不安全的，建议在其中保存敏感信息。

<p><a href="#">设置 cookie (设置有效期天数为 10 天)</a><br><a href="#">设置 cookie (通过 date 对象设置过期日期为 3 天后的那天)</a><br><a href="#">获取 cookie</a><br><a href="#">删除 cookie</a><br><a href="#">设置另一个 cookie</a><br><a href="#">获取另一个 cookie</a><br><a href="#">删除另一个 cookie</a></p>

使用上API非常简单

$(function() {var COOKIE_NAME = 'test_cookie';var ADDITIONAL_COOKIE_NAME = 'additional';$('a').eq(0).click(function() { // 用天数设置 cookie$.cookie(COOKIE_NAME, 'test', { path: '/', expires: 10 });return false;});$('a').eq(1).click(function() { // 用日期设置 cookievar date = new Date();date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));$.cookie(COOKIE_NAME, 'test', { path: '/', expires: date });return false;});$('a').eq(2).click(function() { // 获取 cookiealert($.cookie(COOKIE_NAME));return false;});$('a').eq(3).click(function() { // 删除 cookie$.cookie(COOKIE_NAME, null, { path: '/' });return false;});$('a').eq(4).click(function() { // 设置第二个 cookie$.cookie(ADDITIONAL_COOKIE_NAME, 'foo', { expires: 10 });return false;});$('a').eq(5).click(function() { // 获取第二个 cookiealert($.cookie(ADDITIONAL_COOKIE_NAME));return false;});$('a').eq(6).click(function() { // 删除第二个 cookie$.cookie(ADDITIONAL_COOKIE_NAME, null);return false;});});

二.编写jQuery插件

1.jQuery插件主要分三种类型

封装对象方法的插件（基本上95%以上的插件都是封装对象方法插件）

封装全局函数的插件

选择器插件

2.编写插件的基本要点

·命名方式：jquery.[插件名].js

·所有的对象方法都应该附加倒jQuery.fn对象上，所有的全局函数都应该附加倒jQuery对象本身上

·插件内部使用的this应该是指向jQuery对象

·可以通过this.each便利所有元素

·所有的方法和函数插件，都应该在结束的地方添加分号以保证格式正确；甚至可以再开头再加一个分号避免别人的格式错误导致插件本身运行错误。

·插件应该返回一个jQuery对象，保证链式操作正确性

·插件内部避免使用$作为jQuery的别名，使用“jQuery”来替代。不过可以通过闭包来继续使用$符号。

3.插件的基本结构

<!--   引入jQuery --><script src="../../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">//插件编写;(function($) {$.fn.extend({"pluginDemo":function(options){return this;  //返回this，使方法可链。}});})(jQuery);</script>

4.简单的闭包示例

;(function($)    //这里编写插件的代码，可以继续使用$作为jQuery的别名。    {        //定义一个局部变量foo，仅函数内部可以访问，外部无法访问        var foo;        var bar = function()        {            /*            在匿名函数内部的函数都可以访问到foo，及时在匿名函数外部调用bar()的时候，            可以在内部访问foo，但是在匿名函数外部直接访问foo是无法访问的             */        }        /*        下面这样的定义就可以是bar这个函数逃逸到全局可以访问的范围内，        这样可以在匿名函数外部使用jQuery.BAR()来访问内部定义的函数bar（）         */        $.BAR=bar;    })(jQuery);

5.jQuery插件机制
jQuery提供了两种扩展jQuery功能的写法
jQuery.fn.extend() 和 jQuery.extend()，前者用于扩展前面提到的三种插件类型中的第一种；后者用于扩展其他两种。
两个方法都接受一个参数，类型为object。 Object对象的 “名/值” 分别代表了“函数名/函数主体”。

jQuery.extend()有一个很强大的功能，就是扩展对象。

function foo(options){    options=jQuery.extend({        name:"kewen",        age:"27",        sex:"男",         },options)}

这种写法非常灵活，即使代码变更也不会影响到之前编写的函数。

6.实现一个颜色选择器插件
使用封装jquery对象的方式来实现

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>color</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style>.a{  color : red;}</style><script type="text/javascript" src="../../scripts/jquery.js"></script><script type="text/javascript">//插件编写;(function($) {jQuery.fn.extend({"color":function(value){return this.css("color",value);}});})(jQuery);//插件应用$(function(){   $("div").click(function(){var color = $(this).text();$("div").color( color ); //设置所有的div的字体颜色   })})</script></head><body><div class="a">red</div><div style="color:blue">blue</div><div style="color:green">green</div><div style="color:yellow">yellow</div></body></html>

7.通过封装全局函数实现一个trim空格的插件


//插件编写;(function($) {$.extend({ltrim :function( text ) {return (text ||"").replace( /^\s+/g, "" )},rtrim :function rtrim(text ) {return (text ||"").replace( /\s+$/g, "" )}});})(jQuery);//插件应用$(function(){$("#trimTest").val(jQuery.trim("       test      ") + "\n" +jQuery.ltrim("       test      ") + "\n" +jQuery.rtrim("       test      "));})

8.自定义选择器插件
这里需要理解一个概念，选择器就是jQuery.expr[":"]对象的部分
<script src="../../scripts/jquery.js" type="text/javascript"></script><scripttype="text/javascript">//插件编写;(function($) {$.extend(jQuery.expr[":"], {between :function( a , i ,m ) {var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组return tmp[0]-0<i&&i<tmp[1]-0;}});})(jQuery);//插件应用$(function(){alert("执行前");$("div:between(2,5)").css("background","white");alert("执行后");})</script>

阅读全文

0 0