Heim > 类库下载 > 其它类库 > Hauptteil

So verwenden und schreiben Sie das jQuery-Plug-in

高洛峰
Freigeben: 2016-10-31 14:57:14
Original
1694 Leute haben es durchsucht

一. 表单验证插件Validation

jquery最常用的场合就是表单验证。Validation则是历史最悠久的jquery插件之一。分为内置验证规则,和自定义验证规则。信息提示明确——可以通过keyUp,focus等方式完成实时验证。
本笔记跟随原书采用Validation 1.9版

1.快速上手

Validation基本规则如下:(相关内容可通过ctrl+F查找源文件得到)

资料来源://www.cnblogs.com/si-shaohua/p/3760286.html>

So verwenden und schreiben Sie das jQuery-Plug-in

【例7.1】

制作一个表单,包括用户名,邮箱,网址(非必填),和评论。要求能够输入验证。
思路:

(1)对于姓名一栏中长度至少为2位(minlength="2")

(2)电子邮件一栏需要加上.email类

(3)网址加上.url类

(4)对于必填字段全部加上class="required";

html

<form class="cxmform" id="commentForm" method="get" action="#">
        <fieldset>
            <lengend>一个简单带验证提示的评论</lengend>
            <p>
                <label for="cursername">Name</label><em>*</em>
                <input type="text" id="cuesername" name="username" size="25" class="required" minlength="2">
            </p>
            <p>
                <label for="cemail">Email</label><em>*</em>
                <input type="text" id="cemail" name="email" size="25" class="required email">
            </p>
            <p>
                <label for="curl">WebCite</label><em>  </em>
                <input type="text" id="curl" name="url" size="25" class="url">
            </p>
            <p>
                <label for="ccomment">Comment</label><em>*</em>
                <textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
            </p>
            <p>
                <input type="submit" value="Submit" class="submit">
            </p>
        </fieldset>
    </form>
Nach dem Login kopieren

补充css样式(对功能无影响)

* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
Nach dem Login kopieren

最后还不要忘记对插件库的调用,

<script type="text/javascript" src="js/jquery.validate.js"></script>
Nach dem Login kopieren

jq调用

$(document).ready(function(){
    $("#commentForm").validate();});
Nach dem Login kopieren

效果如下:

So verwenden und schreiben Sie das jQuery-Plug-in

【初步小结插件的使用方法】
(1)引入插件
(2)确定需求:哪些需要用才加
(3)指定验证规则。
(4)如果我们想汉化这个插件,只需要修改插件中的message消息(注意和验证规则对应):

jQuery.extend(jQuery.validator.messages, {
  required: "必选字段",
  remote: "请修正该字段",
  email: "请输入正确格式的电子邮件",
  url: "请输入合法的网址",
  date: "请输入合法的日期",
  dateISO: "请输入合法的日期 (ISO).",
  number: "请输入合法的数字",
  digits: "只能输入整数",
  creditcard: "请输入合法的信用卡号",
  equalTo: "请再次输入相同的值",
  accept: "请输入拥有合法后缀名的字符串",
  maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
  minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
  rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
  range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
  max: jQuery.validator.format("请输入一个最大为{0} 的值"),
  min: jQuery.validator.format("请输入一个最小为{0} 的值")});
Nach dem Login kopieren

2.改进

上面的例子对于最短字段采用了minlength="2"这样的属性方法。而对开发者来说最友好的事情,应该是把所有的验证规则要么全放class要么全放属性中。

(1)再引一个插件——jquery.metadata.js

(从这个插件能查到的资料来看,大多数都是和表单验证一起用)

(2)改变jq的调用方法:

$(document).ready(function(){
    $("#commentForm").validate({meta:&#39;validate&#39;});});
Nach dem Login kopieren

(3)验证规则全部写到class属性里去!

比如说:
把class="required" minlength="2"写成:class="{validate:{required:true,minlength:2}}".只要是插件相关的,全部改成复合对象的形式:

 <form class="cxmform" id="commentForm" method="get" action="#">
        <fieldset>
            <lengend>一个简单带验证提示的评论</lengend>
            <p>
                <label for="cursername">Name</label><em>*</em>
                <input type="text" id="cuesername" name="username" size="25" class="{validate:{required:true,minlength:2}}">
            </p>
            <p>
                <label for="cemail">Email</label><em>*</em>
                <input type="text" id="cemail" name="email" size="25" class="{validate:{required:true, email:true}}">
            </p>
            <p>
                <label for="curl">WebCite</label><em>  </em>
                <input type="text" id="curl" name="url" size="25" class="{validate:{url:true}}">
            </p>
            <p>
                <label for="ccomment">Comment</label><em>*</em>
                <textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}"></textarea>
            </p>
            <p>
                <input type="submit" value="Submit" class="submit">
            </p>
        </fieldset>
    </form>
Nach dem Login kopieren

效果和之前完全一致。

3.改进(第二种):通过name来验证

键入繁琐的class是多数人不喜欢的。下面从js层面研究如何实现一样的效果。把class都删了:

$(function(){
    $(&#39;#commentForm).validate({
        rules:{//定义rules属性
            username:{//通过name来匹配验证属性规则
                required:true;
                minlength:2;
            },email{
                required:true;
                email:true;
            },url:"url",
            comment:required;
        }
    })
})
Nach dem Login kopieren

4.自定义插件

(1)更推荐的方法

除了从源码上汉化之外,更推荐在调用class时完成一整套规则。比如姓名验证一栏中,class改写为:

class="{validate:{required:true,minlength:2,messages:{required:&#39;请输入姓名&#39;,minlength:&#39;请至少输入两个字符&#39;}}}"
Nach dem Login kopieren

(2)如果需要在验证信息中添加图片

在js文件中键入代码:

 $(document).ready(function(){

    $("#commentForm").validate({
        rules: {
            username: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            url:"url",
            comment: "required"
        },
        
        messages: {
            username: {
                required: &#39;请输入姓名&#39;,
                minlength: &#39;请至少输入两个字符&#39;
            },
            email: {
                required: &#39;请输入电子邮件&#39;,
                email: &#39;请检查电子邮件的格式&#39;
            },
            url: &#39;请检查网址的格式&#39;,
            comment: &#39;请输入您的评论&#39;
        },  
        
        errorElement: "em", //可以用其他标签,记住把样式也对应修改
        success: function(label) {
            //label指向上面那个错误提示信息标签em
            label.text(" ")             //清空错误提示消息
                .addClass("success");   //加上自定义的success类
        }

      });

  });
Nach dem Login kopieren

同时在css中追加样式:

em.error {
  background:url("../images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;}em.success {
  background:url("../images/checked.gif") no-repeat 0px 0px;
  padding-left: 16px;}
Nach dem Login kopieren

效果图:

So verwenden und schreiben Sie das jQuery-Plug-in

(3)规则的自定义

评论功能还有一个重要部分是验证码,验证码通常有后台生成,在这里直接模拟。
在html的表现是:

<p>
    <label for="cvalcode">验证码</label>
    <input id="cvalcode" name="valcode" size="25"  value="" />=1+1</p>
Nach dem Login kopieren

在$("#commentForm").validate()方法上面定义验证规则:
使用$.validator.addMethod('方法名',function(值,对象,param))定义

   //自定义一个验证方法
    $.validator.addMethod(    "formula", //验证方法名称
    function(value, element, param) {//验证规则
        return value == eval(param);
    }, 
    &#39;请正确输入数学公式计算后的结果&#39;//不成功则出现验证提示信息
    );
Nach dem Login kopieren

跟其他规则一样,在rules里面,根据name调用对象:

valcode: {
    formula: "1+1"  }
Nach dem Login kopieren

效果如下:

So verwenden und schreiben Sie das jQuery-Plug-in

代码清单
jq

$(document).ready(function(){

    //自定义一个验证方法
    $.validator.addMethod(    "formula", //验证方法名称
    function(value, element, param) {//验证规则
        return value == eval(param);
    }, 
    &#39;请正确输入数学公式计算后的结果&#39;//验证提示信息
    );

    $("#commentForm").validate({
        rules: {
            username: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            url:"url",
            comment: "required",
            valcode: {
                formula: "1+1"  
            }
        },
        
        messages: {
            username: {
                required: &#39;请输入姓名&#39;,
                minlength: &#39;请至少输入两个字符&#39;
            },
            email: {
                required: &#39;请输入电子邮件&#39;,
                email: &#39;请检查电子邮件的格式&#39;
            },
            url: &#39;请检查网址的格式&#39;,
            comment: &#39;请输入您的评论&#39;
        },  
        
        errorElement: "em",             //用来创建错误提示信息标签
        success: function(label) {          //验证成功后的执行的回调函数
            //label指向上面那个错误提示信息标签em
            label.text(" ")             //清空错误提示消息
                .addClass("success");   //加上自定义的success类
        }


      });

  });
Nach dem Login kopieren

二. jQuery表单插件——form

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。

调试需要服务器环境的支持。笔记跟随原书使用2.95版

1.快速上手

【例7.2】

一个表单,包括名字,地址,自我介绍,被提交时传送到demo.php中,如果返回成功则收到“提交成功!”的信息。
————准备工作
在页面引入插件:

html结构为:

    <form id="myForm" action="demo.php" method="post">
        名称:<input type="text" name="name"><br>
        地址:<input type="text" name="address"><br>
        自我介绍:<input type="text" name="introduction"><br>
        <div id="output1" style="display:none"></div>
    </form>
Nach dem Login kopieren

demo.php初始化内容为:

<?php 
    header("Content-Type:text/html; charset=utf-8");
    echo "<h6>{$_REQUEST[&#39;name&#39;]}</h6>";?>
Nach dem Login kopieren

在js文件中:

$(function(){
    //绑定一个id为myForm的表单并提供一个回调函数
    $(&#39;#myForm&#39;).ajaxForm(function(){
        $(&#39;#output1&#39;).html(&#39;提交成功!&#39;).show();
    });
    return false;//阻止表单默认提交})
Nach dem Login kopieren

通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交方式。另一个核心方法ajaxSubmit()也能完成同样的功能。

$(function(){
    //绑定一个id为myForm的表单并提供一个回调函数
    $(&#39;#myForm&#39;).ajaxSubmit(function(){
        $(&#39;#output1&#39;).html(&#39;提交成功!&#39;).show();
    });
    return false;//阻止表单默认提交})
Nach dem Login kopieren

2.两个核心方法的参数

ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权。

1.  var options = {  
2.  target: &#39;#output&#39;,          //把服务器返回的内容放入id为output的元素中      
3.  beforeSubmit: showRequest,  //提交前的回调函数  
4.  success: showResponse,      //提交后的回调函数  
5.  //url: url,                 //默认是form的action, 如果申明,则会覆盖  
6.  //type: type,               //默认是form的method(get or post),如果申明,则会覆盖  
7.  //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型  
8.  //clearForm: true,          //成功提交后,清除所有表单元素的值  
9.  //resetForm: true,          //成功提交后,重置所有表单元素的值  
10.  timeout: 3000               //限制请求的时间,当请求大于3秒后,跳出请求  
11.  }  

13.  function showRequest(formData, jqForm, options){  
14.  //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]  
15.  //jqForm:   jQuery对象,封装了表单的元素     
16.  //options:  options对象  
17.  var queryString = $.param(formData);   //name=1&address=2  
18.  var formElement = jqForm[0];              //将jqForm转换为DOM对象  
19.  var address = formElement.address.value;  //访问jqForm的DOM元素  
20.  return true;  //只要不返回false,表单都会提交,在这里可以对表单元素进行验证  
21.  };  

23.  function showResponse(responseText, statusText){  
24.  //dataType=xml  
25.  var name = $(&#39;name&#39;, responseXML).text();  
26.  var address = $(&#39;address&#39;, responseXML).text();  
27.  $("#xmlout").html(name + "  " + address);  
28.  //dataType=json  
29.  $("#jsonout").html(data.name + "  " + data.address);  
30.  };  

32.  $("#myForm").ajaxForm(options);  

34.  $("#myForm2").submit(funtion(){  
35.  $(this).ajaxSubmit(options);  
36.  return false;   //阻止表单默认提交  
37.  });
Nach dem Login kopieren

表单提交之前进行验证: beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交。

3.表单提交之前的验证

利用beforeSubmit的特性,当返回为false时,阻止提交。可以定义一个validate函数,作为beforeSubmit的值:

1.  beforeSubmit: validate  
2.  function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来阻止表单提交,直到符合规则为止  
3.  //方式一:利用formData参数  
4.  for (var i=0; i < formData.length; i++) {  
5.  if (!formData[i].value) {  
6.  alert(&#39;用户名,地址和自我介绍都不能为空!&#39;);  
7.  return false;  
8.  }  
9.  }   

11.  //方式二:利用jqForm对象  
12.  var form = jqForm[0]; //把表单转化为dom对象  
13.  if (!form.name.value || !form.address.value) {  
14.  alert(&#39;用户名和地址不能为空,自我介绍可以为空!&#39;);  
15.  return false;  
16.  }  

18.  //方式三:利用fieldValue()方法,fieldValue 是表单插件的一个方法,它能找出表单中的元素的值,返回一个集合。  
19.  var usernameValue = $(&#39;input[name=name]&#39;).fieldValue();  
20.  var addressValue = $(&#39;input[name=address]&#39;).fieldValue();  
21.  if (!usernameValue[0] || !addressValue[0]) {  
22.  alert(&#39;用户名和地址不能为空,自我介绍可以为空!&#39;);  
23.  return false;  
24.  }  

26.  var queryString = $.param(formData); //组装数据  
27.  //alert(queryString); //类似 : name=1&add=2    
28.  return true;  
29.  }
Nach dem Login kopieren

三.模态窗口插件——SimpleModal

补白:

模态窗口就是在该窗口关闭之前,其父窗口不可能成为活动窗口的那种窗口。
例如:窗口A弹出窗口B,如果窗口B是模态的,在窗口B关闭前就不可能切换到窗口A;如果B是非模态的,那可以在这两个窗口之间任意切换。
更简单地说alert弹出框就是一个模态窗口。

模态对话框 和 非模态对话框区别
模态对话框在显示之后,就不能对同一个程序中的其它窗口进行操作。
非模态对话框在显示之后,还可以对同一个程序的其它窗口进行操作

SimpleModal为模态窗口的开发提供了强有力的接口。
本笔记采用SimpleModal 1.4.4版

1.快速上手

So verwenden und schreiben Sie das jQuery-Plug-in

So verwenden und schreiben Sie das jQuery-Plug-in

弹出的内容是需要css规范化的,因此css文件不可少。可以根据规则自定义css。本例用的是box.css。直接复制来用就好。

.simplemodal-container .ico-ok, .simplemodal-container .ico-error, .simplemodal-container .ico-info, .simplemodal-container .ico-question, .simplemodal-container .ico-warn, .simplemodal-container .ico-wait,.simplemodal-container .modalCloseImg,.simplemodal-container .btn-close, .simplemodal-container .btn-close-b{background:url(../img/box.png) no-repeat;display:inline-block;width:32px;height:32px;}
.simplemodal-container .ico-ok{background-position:-66px 0;}
.simplemodal-container .ico-error{background-position:0 0;}
.simplemodal-container .ico-info{background-position:-33px 0;}
.simplemodal-container .ico-question{background-position:-99px 0;}
.simplemodal-container .ico-warn{background-position:-165px 0;}
.simplemodal-container .ico-wait{background-position:-132px 0;}

.simplemodal-container .tips{padding:34px 0 0;}
.simplemodal-container .tips-ico{float:left;position:relative;top:-9px;width:auto;padding-left:5%;margin-right:16px;_margin-right:13px;text-align:right;}
.simplemodal-container .tips-content{overflow:hidden;height:1%;padding-right:5%;}
.simplemodal-container .tips-title, .simplemodal-container .tips-line{padding:0 0 8px;}
.simplemodal-container .tips-title{font-weight:700;font-size:14px;}
.simplemodal-container .tips-line{line-height:20px;}
.simplemodal-container .font-red{color:#c00;}
.simplemodal-container .tips-buttons{margin-top:23px;text-align:right;}
.simplemodal-container .tips-buttons .btn-blue, .simplemodal-container .tips-buttons .btn-blue-s, .simplemodal-container .tips-buttons .btn-white, .simplemodal-container .tips-buttons .btn-white-s{margin-right:16px;}

.simplemodal-container{position:relative;height:100%;*width:100%;margin:-9px;padding:9px;font-size:12px;line-height:1.5;background-color:rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);}
.simplemodal-container .btn-close{background-position:-286px 0;position:absolute;z-index:1;right:13px;top:13px;width:16px;height:16px;overflow:hidden;text-indent:-99em;text-decoration:none;}
.simplemodal-container .btn-close:hover{background-position:-302px 0;}
.simplemodal-container .btn-close-b{background-position:-249px 0;position:absolute;z-index:1;right:17px;_right:19px;top:19px;width:18px;height:18px;overflow:hidden;text-indent:-99em;text-decoration:none;}
.simplemodal-container .btn-close-b:hover{background-position:-267px 0;}

.box-title{position:relative;border:1px solid #369;border-bottom:none;margin:-1px -1px 0;background-color:#EBF2FA;padding:1px 0;}
.box-title h2{height:2em;line-height:2em;color:#666;font-size:100%;text-indent:12px;}
.simplemodal-data{height:100%;overflow:hidden;}
.box-main{position:relative;background-color:#fff;border:1px solid #369;margin:0 -1px -1px;border-top:none;zoom:1;}
.box-buttons{margin-top:23px;padding:0 9px 9px 0;text-align:right;}
.box-buttons button{margin-left:8px;min-width:68px;min-width:52px\9;*min-width:auto;height:24px;padding:0 5px 1px;*padding:0 10px 1px;}
.simplemodal-container iframe.box-iframe{position:relative;height:100%;width:100%;margin:-1px;overflow:hidden;border:1px solid #6685A2;background-color:#fff;}

.simplemodal-container .modalCloseImg{
    background-position:-286px 0;
    position:absolute;
    right:13px;
    top:13px;
    width:16px;
    height:16px;
    overflow:hidden;
    text-indent:-99em;
    text-decoration:none;
    cursor:pointer; 
    display:inline;
    z-index:3200;
}
.simplemodal-container .modalCloseImg:hover{background-position:-302px 0;}
Nach dem Login kopieren

有两种调用方法。

(1)获取一个jquery对象,然后对其使用Modal()方法。然后就可以用该元素的内容来显示模态窗口。

$(elem).modal({options})

(2)作为一个单独的函数使用

通过传递一个jq对象,通过dom元素来创建一个模态窗口

$.modal('

HELLO WORLD!

'),({options});

options参数为以上两个方法提供了可能需要的css样式信息。

(3)如何关闭——使用.simplemodal-close类

你可以在button按钮或是a标记上使用此类。

【例7.3】制作一个模态提示框和模态的iframe。

注意:原书案例中,simpleModal版本是1.4.2。用的是jquery1.7.1

   <link rel="stylesheet" type="text/css" href="css/box.css"/>
    
    <link rel="stylesheet" type="text/css" href="css/css.css"/>
    <script type="text/javascript" src="js/jquery-1.9.js"></script>
    <script type="text/javascript" src="js/jquery.simplemodal-1.4.4.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <div id=&#39;container&#39;>

    <div id=&#39;content&#39;>
        <div id=&#39;basic-modal&#39;>
            <p>提示框-ok:<input type=&#39;button&#39; name=&#39;basic&#39; value=&#39;Demo&#39; class=&#39;open-basic-dialog-ok&#39;/></p>
            <p>警告框-warn:<input type=&#39;button&#39; name=&#39;basic&#39; value=&#39;Demo&#39; class=&#39;open-basic-dialog-warn&#39;/></p>
            <p>弹出iframe:<input type=&#39;button&#39; name=&#39;basic&#39; value=&#39;Demo&#39; class=&#39;open-basic-ifr&#39;/></p>
        </div>
    </div>
    
    <!-- 弹出内容 -->

    <div id="basic-dialog-ok">
        <!-- 普通弹出层 [[ -->  
        <p><h3>已完成!</h3></p>
        <button type="button" class="simplemodal-close">关 闭</button>
         
        <!-- 普通弹出层 ]] -->
    </div>

    <div id="basic-dialog-warn">
        <!-- 普通弹出层 [[ -->  
        <div class="box-title show"><h2>提示</h2></div>  
        <div class="box-main">
            <div class="tips">      
                <span class="tips-ico">
                    <span class="ico-warn"><!-- 图标 --></span>
                </span>      
                <div class="tips-content">        
                    <div class="tips-title">系统繁忙,请稍候重试</div>        
                    <div class="tips-line"></div>     
                </div>    
            </div>
            <div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>
        </div>  
        <!-- 普通弹出层 ]] -->
    </div>

    <div id="ifr-dialog" >
        <!-- iframe弹出层 [[ -->  
        <iframe frameborder="0" scrolling="no" id="ifr-dialog-container" src="javascript:;" class="box-iframe"></iframe>
        <!-- iframe弹出层 ]] -->
    </div></div>
Nach dem Login kopieren

主要css

body {
    background:#fff; color:#333;
    font: 12px/22px verdana, arial, sans-serif; 
    height:100%; margin:0 auto; width:100%;}#container {
    margin:0 auto; 
    padding-top:20px; 
    width:800px;}#content {
    border-bottom:1px dotted #999; 
    border-top:1px dotted #999; 
    padding:20px 0;}*{margin:0;padding:0;}/* element全部消失为none */#basic-dialog-ok,#basic-dialog-warn,#ifr-dialog{
    display:none;
    background: url(&#39;../images/logo.png&#39;) no-repeat center 90px;
    background-size: 50px 50px;}.dialog-param{
    color: #fff;}/* 定义弹出窗口时其它区域的颜色*/#simplemodal-overlay {
    background-color:#000;}/*定义弹出窗口的背景色*/.simplemodal-wrap{background-color:#fff;}/* 弹出窗宽高 */#simplemodal-container {
    height:150px; 
    width:500px;}/*弹出iframe的宽高*/#ifr-dialog-content{
    height:300px; 
    width:700px;}
Nach dem Login kopieren

效果:

So verwenden und schreiben Sie das jQuery-Plug-in

四. 管理cookie的插件——Cookie

关于cookie的知识补白

cookie是网站放在客户端的一个小文本文件,比如下回自动登陆,记住用户名。就是典型的cookie应用。

和网页缓存没有任何关系。缓存无法用js控制,而cookie可以。

所有网站共享同一套cookie——数量和总的体积有限(以Kb为单位)数量几十个。

会有过期时间,由js来控制。

完全由客户来控制。敏感数据不能放cookie。

测试cookie,要么搭建本地服务器,要么在火狐。其它都不行。

1.快速上手

此插件需要用到$.cookie()方法。其中有三个参数

$.cookie('表单控件的name值',cookie字符串的来源比如value值,过期天数)

【例7.4】

一个表单,有用户名。当点击“记住用户名”时,下回登陆就会记住用户名。

 用户名:<input type="text" name="username" id="username"/> <br/>
   <input type="checkbox" name="check" id="check"/>记住用户名
Nach dem Login kopieren

根据上述思想很快写出

$(function(){
    var COOKIE_NAME=&#39;username&#39;;
    if($.cookie(COOKIE_NAME)){
        $(&#39;#username&#39;).val($.cookie(COOKIE_NAME));
    }
    $(&#39;#check&#39;).click(function(){
        if(this.checked){
            $.cookie(COOKIE_NAME,$(&#39;#username&#39;).val(),{path:&#39;/&#39;,expires:10});
        }else{
            $.cookie(COOKIE_NAME,null,{path:&#39;/&#39;});
        }
    })    alert(document.cookie);//验证cookie状况})
Nach dem Login kopieren

在输入框中写入djtao,点击关闭,重新打开网页。
弹出cookie信息为:

So verwenden und schreiben Sie das jQuery-Plug-in

过期时间可以在火狐选项-隐私中查看最近的cookie发现。过期时间在10天后。

So verwenden und schreiben Sie das jQuery-Plug-in

2.其它方法

(1)写入cookie

$.cookie('待写入的cookie名','cookie值')

(2)读取:根据已有的cookie名来读取已有的cookie值

$.cookie('待读取的cookie名')

(3)删除cookie

把一个空字符串或是空对象存进第二个参数就行了。

$.cookie('待删除的cookie名','null')

(4)第三个参数

所谓第三个参数其实是一个集合。

$.cookie(cookieName,cookieValue,{
    expires:7;//有效期,如果时间已过,则自动删除。
    path:&#39;/&#39;;//cookie路径
    domain:xxx.com;//域名,页面cookie都会在此站点下归类。
    secure:true;//如果设置为true,会要求一个安全协议。})
Nach dem Login kopieren

五. jquery UI插件

如果说jquery是javascript的一个库。那么jquery UI就是jquery的库。原书认为,jquery UI很可能是未来jquery的重点。但从几年之后网络上的讨论来看,是落伍了。另一方面,作为一个官方插件,jquery还是有它值得研究的地方。或许可以借鉴该代码思想。

jQuery UI 主要分为3个部分:交互、微件和效果库。

交互(Interactions)
交互部件是一些与鼠标交互相关的内容,包括缩放(Resizable) , 拖动(Draggable) , 放置(Droppable) , 选择(Selectable) , 排序(Sortable)等。

小部件(Widgets)
主要是一些界面的扩展,包括折叠面板(Accordion) , 自动完成(Autocomplete) , 按钮(Button) , 日期选择器(Datepicker) , 对话框(Dialog) , 菜单(Menu) , 进度条(Progressbar) , 滑块(Slider) , 旋转器(Spinner) , 标签页(Tabs) , 工具提示框(Tooltip)等,新版本的UI将包含更多的微件。

效果库(Effects)
用于提供丰富的动画效果,让动画不再局限于jQuery的animate()方法。包括特效(Effect) , 显示(Show) , 隐藏(Hide) , 切换(Toggle) , 添加 Class(Add Class) , 移除 Class(Remove Class) , 切换 Class(Toggle Class) , 转换 Class(Switch Class) , 颜色动画(Color Animation)等。

在此阐述深入的使用方法非本笔记原意。但是为了学习思想,不妨把jqueryUI基本原理陈列如下。

安装

当小部件安装时,生命周期开始。我们只需要在一个或多个元素上调用插件,即安装了小部件。

$(  "#elem"  ).progressbar();
Nach dem Login kopieren

这将会初始化 jQuery 对象中的每个元素,在本例中,元素 id 为 "elem"。因为我们调用无参数的 .progressbar() 方法,小部件则会按照它的默认选项进行初始化。我们可以在安装时传递一组选项,这样既可重写默认选项。

$(  "#elem"  ).progressbar({ value:  20  });
Nach dem Login kopieren

安装时传递的选项数目多少可根据我们的需要而定。任何我们未传递的选项则都使用它们的默认值。

选项是小部件状态的组成部分,所以我们也可以在安装后再进行设置选项。我们将在后续的 option 方法中介绍这部分内容。

方法

既然小部件已经初始化,我们就可以查询它的状态,或者在小部件上执行动作。所有初始化后的动作都以方法调用的形式进行。为了在小部件上调用一个方法,我们可以向 jQuery 插件传递方法的名称。例如,为了在进度条(progressbar)小部件上调用 value 方法,我们应该使用:

$(  "#elem"  ).progressbar(  "value"  );
Nach dem Login kopieren

如果方法接受参数,我们可以在方法名后传递参数。例如,为了传递参数 40 给 value 方法,我们可以使用:

$(  "#elem"  ).progressbar(  "value",  40  );
Nach dem Login kopieren

就像 jQuery 中的其他方法一样,大部分的小部件方法为链接返回 jQuery 对象。

$(  "#elem"  )
  .progressbar(  "value",  90  )
  .addClass(  "almost-done"  );
Nach dem Login kopieren

公共的方法

每个小部件都有它自己的一套基于小部件所提供功能的方法。然而,有一些方法是所有小部件都共同具有的。

option

正如我们前面所提到的,我们可以在初始化之后通过 option 方法改变选项。例如,我们可以通过调用 option 方法改变 progressbar(进度条)的 value 为 30。

$(  "#elem"  ).progressbar(  "option",  "value",  30  );
Nach dem Login kopieren

请注意,这与之前我们调用 value 方法的实例有所不同。在本实例中,我们调用 option 方法,改变 value 选项为 30。

我们也可以为某个选项获取当前的值。

$(  "#elem"  ).progressbar(  "option",  "value"  );
Nach dem Login kopieren

另外,我们可以通过给 option 方法传递一个对象,一次更新多个选项。

$(  "#elem"  ).progressbar(  "option",  {
  value:  100,
  disabled:  true});
Nach dem Login kopieren

您也许注意到 option 方法有着与 jQuery 代码中取值器和设置器相同的标志,就像 .css() 和 .attr()。唯一的不同就是您必须传递字符串 "option" 作为第一个参数。

disable

disable 方法禁用小部件。在进度条(progressbar)实例中,这会改变样式让进度条显示为禁用状态。

1.  $(  "#elem"  ).progressbar(  "disable"  );
Nach dem Login kopieren

调用 disable 方法等同于设置 disabled 选项为 true。

enable

enable 方法是 disable 方法的对立面。

1.  $(  "#elem"  ).progressbar(  "enable"  );
Nach dem Login kopieren

调用 enable 方法等同于设置 disabled 选项为 false。

destroy

如果您不再需要小部件,那么可以销毁它,返回到最初的标记。这意味着小部件生命周期的终止。

1.  $(  "#elem"  ).progressbar(  "destroy"  );
Nach dem Login kopieren

一旦您销毁了一个小部件,您就不能在该部件上调用任何方法,除非您再次初始化这个小部件。如果您要移除元素,可以直接通过 .remove(),也可以通过 .html() 或 .empty() 修改祖先,小部件会自动销毁。

widget

一些小部件生成包装器元素,或与原始元素断开连接的元素。在下面的实例中,widget 将返回生成的元素。在进度条(progressbar)实例中,没有生成的包装器,widget 方法返回原始的元素。

1.  $(  "#elem"  ).progressbar(  "widget"  );
Nach dem Login kopieren

事件

所有的小部件都有跟他们各种行为相关的事件,用于在状态改变时通知您。对于大多数的小部件,当事件被触发时,名称以小部件名称为前缀。例如,我们可以绑定进度条()的 change 事件,一旦值发生变化时就触发。

$(  "#elem"  ).bind(  "progressbarchange",  function()  {
  alert(  "The value has changed!"  );});
Nach dem Login kopieren

每个事件都有一个相对应的回调,作为选项进行呈现。我们可以使用进度条(progressbar)的 change 回调,这等同于绑定 progressbarchange 事件。

 $(  "#elem"  ).progressbar({
  change:  function()  {
  alert(  "The value has changed!"  );
  }});
Nach dem Login kopieren

公共的事件

大多数事件是针对特定的小部件,所有的小部件都有一个公共的 create 事件。该事件在小部件被创建时即被触发。

1.快速上手

【例7.5】拖动排序的使用

拖动方法调用的是sortable()方法。
html

    <ul id="ul1">
        <li class="list-item">1</li>
        <li class="list-item">2</li>
        <li class="list-item">3</li>
        <li class="list-item">4</li>
    </ul>
Nach dem Login kopieren

css

.list-item{
    width: 200px;line-height: 50px;
    border: 1px solid black;
    text-align: center;
    margin-top: 20px;
    list-style: none;
    cursor: pointer;}
Nach dem Login kopieren

jq

$(function(){
    $( "#ul1" ).sortable();
    $( "#ul1" ).disableSelection();})
Nach dem Login kopieren

然后一个简单到令人发指的拖动排序效果就做出来了。

So verwenden und schreiben Sie das jQuery-Plug-in

2. 结合后台

sortable方法在参数中可以插入回调函数。比如说我想知道拖动后的排序,可以采用:

$(&#39;selector&#39;).sortable{
    stop:function(){
        do something;
    }}
Nach dem Login kopieren

六.jquery插件的编写

插件编写的目的是封装方法或函数,以便下次调用。插件分为三个类型:

封装对象方法:
最常见的类型,通过选择器来进行对象操作:

封装全局函数
独立的全局函数。

选择器插件
更为丰富的选择逻辑。

1.要点

命名:建议命名为jquery.xxx.js

所有的对象方法应该加到jquery.fn对象上,全局函数加到jquery对象本身

注意this:内部指向的是选择器

允许遍历(this.each)

分号结尾:(否则压缩会出问题)

插件返回的是一个jquery对象,保证链式操作

不建议简写,可以允许闭包方法。

2.闭包方法

所谓闭包:允许使用其它函数内部定义的函数。
插件的标准写法是:

//前面加分号为了更好的兼容性。;(
function($){//$是这个匿名函数的形参/*代码,允许简写如$*/})(jQuery);
//将jquery作为实参传递给匿名函数。后面括弧表示立即执行。
Nach dem Login kopieren

3. 插件机制——jQuery.extend()和jQuery.fn.extend()

前者用于扩展对象方法,后者用于扩展全局函数或者选择器。

4. 编写实例

(1)对象方法

【例7.6】编写获取颜色方法的插件color()

实现两个功能:A.设置匹配元素的颜色;B.获取匹配元素的颜色
网页中有一个#div1,字体颜色为红色

;(function ($) {jQuery.fn.extend({
    "color":function(value){
        if(value==undefined){
            return this.css(&#39;color&#39;);//当前返回字体的颜色
        }else{
            return this.css(&#39;color&#39;,value);//如果value参数为空,返回字体颜色
        }
    }})})(jQuery);//立即调用!
Nach dem Login kopieren

再写一段调用的测试:

$(function(){alert(
$(&#39;#div1&#39;).color());
$(&#39;#div1&#39;).color(&#39;blue&#39;);})
Nach dem Login kopieren

成功将字体设置为蓝色。

进一步改造:因为color的css方法中已经包含了参数为空的情况,可以省略判断,直接返回this.css('color',value)。根据设置color的思想还可以设置background,border等方法:

;(function ($) {
    jQuery.fn.extend({        &#39;color&#39;:function(value){            return this.css(&#39;color&#39;,value);
        },        &#39;backgroundColor&#39;:function(value){            return this.css(&#39;background-color&#39;,value);
        },        &#39;border&#39;:function(value){            return this.css(&#39;border&#39;,value);
        }
    })
})(jQuery);
Nach dem Login kopieren

成功通过测试。

【例7.7】表格隔行变色:

第五章表格隔行变色的代码是:

.even{
    background: #fff38f;}.odd{
    background: #ffffee;}.selected{ background:#FF6500;color:#fff;}
Nach dem Login kopieren

jq:

$(function(){
    $(&#39;tbody>tr:odd&#39;).addClass(&#39;odd&#39;);
    $(&#39;tbody>tr:even&#39;).addClass(&#39;even&#39;);
    $(&#39;tbody>tr&#39;).click(function(){
        if($(this).hasClass(&#39;selected&#39;)){
            return false;
        }else{
            $(this).siblings().removeClass(&#39;selected&#39;);
            $(this).addClass(&#39;selected&#39;);
        }
    })})
Nach dem Login kopieren

试用插件的写法实现上述功能。插件方法取名为tableStriped

So verwenden und schreiben Sie das jQuery-Plug-in

思路:要通过`对象.tableStriped()方法应该有一个参数options,options参数是一个对象。你可以通过设置参数的属性来规定你要给它加上那种class,表述为options.odd,options.even,options.selected。

;(function ($) {
    jQuery.fn.extend({
        &#39;tableStriped&#39;:function(options){
            options=$.extend({
                odd:&#39;odd&#39;,
                even:&#39;even&#39;,
                selected:&#39;selected&#39;
            },options);
        }
    })})(jQuery);//立即调用!
Nach dem Login kopieren

框架已经打好,接下来就是选择元素,应该使用$(选择器,this)表述只在匹配与元素内进行操作。函数应该是可链的,所以最后应该返回this。

;(function ($) {
    jQuery.fn.extend({        &#39;tableStriped&#39;:function(options){            //参数框架
            options=$.extend({
                odd:&#39;odd&#39;,
                even:&#39;even&#39;,
                selected:&#39;selected&#39;
            },options);        //具体方法:
            $(&#39;tbody>tr:odd&#39;,this).addClass(options.odd);
            $(&#39;tbody>tr:even&#39;,this).addClass(options.even);
            $(&#39;tbody>tr&#39;,this).click(function(){                if($(this).hasClass(options.selected)){                    return false;
                }else{
                    $(this).siblings().removeClass(options.selected);
                    $(this).addClass(options.selected);
                }
            })            return this;//使方法可链
        }
    })
})(jQuery);//立即调用!
Nach dem Login kopieren

在验证中,可以通过$('table').tableStriped(参数)来实现题目的效果。如果我不想使用.odd、.even、。selected这种名称的样式,可以重新传入一个对象:

$('table').tableStriped({odd:'haha',even:'hehe',selected:'hoho'});

上述代码表示在所有table中,对奇数序列odd的行(2,4,6...)使用.haha样式,...一次类推。

注意:在前面提到的几个要点里,元素应该是允许遍历的。简单的说,就是内部对象可能不是一个单独的对象,也有可能是多个。

;(function ($) {
    jQuery.fn.extend({
        &#39;somePlugin&#39;:function(options){
            return this.each(function(){
                //代码
            })        }
    })})(jQuery);//立即调用!
Nach dem Login kopieren

(2)怎样封装全局函数插件

因为全局函数之前已经经过封装,因改起来很简单,把函数放到jquery命名空间下就可以。

;(function($){
    $.extand({
         属性名:function(){
            //待封装函数代码
    })})(jQuery)
Nach dem Login kopieren

写插件时注意不要把内容写死。

(3)自定义选择器

想自定义选择器,首先得了解jquery选择器的机制:通过正则表达式来解析,然后针对解析出来的选择符执行一个函数。——称为选择器函数。现在以:lt()为例说明jquery选择器函数的特性。
$('div:lt(3)')表示选取div索引值小于3的所有div元素(大于用:gt())。分析:lt()jquery源码:

gt:function(a,i,m){
    return i<m[3]-0;
}
Nach dem Login kopieren

a表示当前遍历到的dom元素

i表示当前遍历到dom的索引值

m是一个数组,也是选择器函数的最重要部分。拿$('div:lt(3)')来说:


m[0]表示:lt(3)这部分。


m[1]表示冒号


m[2]决定了用那个选择器函数,在例子只带lt


m[3]指代括号内的数字。

【例7.8】在jquery的空间内写一个between选择器,选取目标元素索引值在一定范围之间的所有元素。

;function($){
    $.extend($.expr[&#39;:&#39;],{
        between:function(a,i,m){
            var tmp=m[3].split(&#39;,&#39;);
            return tmp[0]-0<i&&tmp[1]<tmp[1]-0;
        }
    })}
Nach dem Login kopieren

解释:在自定义选择器between,中m[3]表述为x,y表示数字x,和数字y之间的索引值范围。因此,需要用split方法把它分割为数组tmp,所以tmp有两个元素。其中tmp[0]代表数字较大的数组元素(本质上还是字符串)。
接下来依样画葫芦,把i的取值范围返回出去就行了。(tmp-0表示通过一个简单运算把字符串转换为数字。)
选择器仅仅是$.expr[':']的一部分,不能独立存在。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage