一. 表單驗證插件Validation
jquery最常用的場合就是表單驗證。Validation則是歷史最悠久的jquery插件之一。分為內(nèi)置驗證規(guī)則，和自定義驗證規(guī)則。信息提示明確——可以通過keyUp,focus等方式完成實時驗證。
本筆記跟隨原書采用Validation 1.9版
1.快速上手
Validation基本規(guī)則如下：（相關(guān)內(nèi)容可通過ctrl+F查找源文件得到）
資料來源：//www.cnblogs.com/si-shaohua/p/3760286.html>
【例7.1】
制作一個表單，包括用戶名，郵箱，網(wǎng)址（非必填），和評論。要求能夠輸入驗證。
思路：
（1）對于姓名一欄中長度至少為2位（minlength="2"）
（2）電子郵件一欄需要加上.email類
（3）網(wǎng)址加上.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>補充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; }最后還不要忘記對插件庫的調(diào)用，
<script type="text/javascript" src="js/jquery.validate.js"></script>
jq調(diào)用
$(document).ready(function(){
$("#commentForm").validate();});效果如下：
【初步小結(jié)插件的使用方法】
（1）引入插件
（2）確定需求：哪些需要用才加
（3）指定驗證規(guī)則。
（4）如果我們想漢化這個插件，只需要修改插件中的message消息(注意和驗證規(guī)則對應(yīng))：
jQuery.extend(jQuery.validator.messages, {
required: "必選字段",
remote: "請修正該字段",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網(wǎng)址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數(shù)字",
digits: "只能輸入整數(shù)",
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} 的值")});2.改進
上面的例子對于最短字段采用了minlength="2"這樣的屬性方法。而對開發(fā)者來說最友好的事情，應(yīng)該是把所有的驗證規(guī)則要么全放class要么全放屬性中。
（1）再引一個插件——jquery.metadata.js
(從這個插件能查到的資料來看，大多數(shù)都是和表單驗證一起用)
（2）改變jq的調(diào)用方法：
$(document).ready(function(){
$("#commentForm").validate({meta:'validate'});});（3）驗證規(guī)則全部寫到class屬性里去！
比如說：
把class="required" minlength="2"寫成：class="{validate:{required:true，minlength:2}}".只要是插件相關(guān)的，全部改成復(fù)合對象的形式：
<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>效果和之前完全一致。
3.改進（第二種）：通過name來驗證
鍵入繁瑣的class是多數(shù)人不喜歡的。下面從js層面研究如何實現(xiàn)一樣的效果。把class都刪了：
$(function(){
$('#commentForm).validate({
rules:{//定義rules屬性
username:{//通過name來匹配驗證屬性規(guī)則
required:true;
minlength:2;
}，email{
required:true;
email:true;
}，url:"url",
comment:required;
}
})
})4.自定義插件
（1）更推薦的方法
除了從源碼上漢化之外，更推薦在調(diào)用class時完成一整套規(guī)則。比如姓名驗證一欄中，class改寫為：
class="{validate:{required:true,minlength:2,messages:{required:'請輸入姓名',minlength:'請至少輸入兩個字符'}}}"（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: '請輸入姓名',
minlength: '請至少輸入兩個字符'
},
email: {
required: '請輸入電子郵件',
email: '請檢查電子郵件的格式'
},
url: '請檢查網(wǎng)址的格式',
comment: '請輸入您的評論'
},
errorElement: "em", //可以用其他標簽，記住把樣式也對應(yīng)修改
success: function(label) {
//label指向上面那個錯誤提示信息標簽em
label.text(" ") //清空錯誤提示消息
.addClass("success"); //加上自定義的success類
}
});
});同時在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;}效果圖：
（3）規(guī)則的自定義
評論功能還有一個重要部分是驗證碼,驗證碼通常有后臺生成，在這里直接模擬。
在html的表現(xiàn)是：
<p>
<label for="cvalcode">驗證碼</label>
<input id="cvalcode" name="valcode" size="25" value="" />=1+1</p>在$("#commentForm").validate(）方法上面定義驗證規(guī)則：
使用$.validator.addMethod('方法名',function(值,對象,param)）定義
//自定義一個驗證方法
$.validator.addMethod( "formula", //驗證方法名稱
function(value, element, param) {//驗證規(guī)則
return value == eval(param);
},
'請正確輸入數(shù)學(xué)公式計算后的結(jié)果'//不成功則出現(xiàn)驗證提示信息
);跟其他規(guī)則一樣,在rules里面,根據(jù)name調(diào)用對象：
valcode: {
formula: "1+1" }效果如下：
代碼清單
jq
$(document).ready(function(){
//自定義一個驗證方法
$.validator.addMethod( "formula", //驗證方法名稱
function(value, element, param) {//驗證規(guī)則
return value == eval(param);
},
'請正確輸入數(shù)學(xué)公式計算后的結(jié)果'//驗證提示信息
);
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required",
valcode: {
formula: "1+1"
}
},
messages: {
username: {
required: '請輸入姓名',
minlength: '請至少輸入兩個字符'
},
email: {
required: '請輸入電子郵件',
email: '請檢查電子郵件的格式'
},
url: '請檢查網(wǎng)址的格式',
comment: '請輸入您的評論'
},
errorElement: "em", //用來創(chuàng)建錯誤提示信息標簽
success: function(label) { //驗證成功后的執(zhí)行的回調(diào)函數(shù)
//label指向上面那個錯誤提示信息標簽em
label.text(" ") //清空錯誤提示消息
.addClass("success"); //加上自定義的success類
}
});
});二. jQuery表單插件——form
jQuery Form插件是一個優(yōu)秀的Ajax表單插件，可以非常容易地、無侵入地升級HTML表單以支持Ajax。jQuery Form有兩個核心方法 -- ajaxForm() 和 ajaxSubmit()， 它們集合了從控制表單元素到?jīng)Q定如何管理提交進程的功能。另外，插件還包括其他的一些方法： formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
調(diào)試需要服務(wù)器環(huán)境的支持。筆記跟隨原書使用2.95版
1.快速上手
【例7.2】
一個表單，包括名字，地址，自我介紹，被提交時傳送到demo.php中，如果返回成功則收到“提交成功！”的信息。
————準備工作
在頁面引入插件：
html結(jié)構(gòu)為：
<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>demo.php初始化內(nèi)容為：
<?php
header("Content-Type:text/html; charset=utf-8");
echo "<h6>{$_REQUEST['name']}</h6>";?>在js文件中：
$(function(){
//綁定一個id為myForm的表單并提供一個回調(diào)函數(shù)
$('#myForm').ajaxForm(function(){
$('#output1').html('提交成功！').show();
});
return false;//阻止表單默認提交})通過Form插件的兩個核心方法，都可以在不修改表單的HTML代碼結(jié)構(gòu)的情況下，輕易地將表單的提交方式升級為Ajax提交方式。另一個核心方法ajaxSubmit()也能完成同樣的功能。
$(function(){
//綁定一個id為myForm的表單并提供一個回調(diào)函數(shù)
$('#myForm').ajaxSubmit(function(){
$('#output1').html('提交成功！').show();
});
return false;//阻止表單默認提交})2.兩個核心方法的參數(shù)
ajaxForm() 和 ajaxSubmit() 都能接受0個或1個參數(shù)，當(dāng)為單個參數(shù)時，該參數(shù)既可以是一個回調(diào)函數(shù)，也可以是一個options對象，上面的例子就是回調(diào)函數(shù)，下面介紹options對象，使得它們對表單擁有更多的控制權(quán)。
1. var options = {
2. target: '#output', //把服務(wù)器返回的內(nèi)容放入id為output的元素中
3. beforeSubmit: showRequest, //提交前的回調(diào)函數(shù)
4. success: showResponse, //提交后的回調(diào)函數(shù)
5. //url: url, //默認是form的action， 如果申明，則會覆蓋
6. //type: type, //默認是form的method（get or post），如果申明，則會覆蓋
7. //dataType: null, //html(默認), xml, script, json...接受服務(wù)端返回的類型
8. //clearForm: true, //成功提交后，清除所有表單元素的值
9. //resetForm: true, //成功提交后，重置所有表單元素的值
10. timeout: 3000 //限制請求的時間，當(dāng)請求大于3秒后，跳出請求
11. }
13. function showRequest(formData, jqForm, options){
14. //formData: 數(shù)組對象，提交表單時，F(xiàn)orm插件會以Ajax方式自動提交這些數(shù)據(jù)，格式如：[{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轉(zhuǎn)換為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 = $('name', responseXML).text();
26. var address = $('address', 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. });表單提交之前進行驗證： beforeSubmit會在表單提交前被調(diào)用，如果beforeSubmit返回false，則會阻止表單提交。
3.表單提交之前的驗證
利用beforeSubmit的特性，當(dāng)返回為false時，阻止提交?？梢远x一個validate函數(shù)，作為beforeSubmit的值：
1. beforeSubmit: validate
2. function validate(formData, jqForm, options) { //在這里對表單進行驗證，如果不符合規(guī)則，將返回false來阻止表單提交，直到符合規(guī)則為止
3. //方式一：利用formData參數(shù)
4. for (var i=0; i < formData.length; i++) {
5. if (!formData[i].value) {
6. alert('用戶名,地址和自我介紹都不能為空!');
7. return false;
8. }
9. }
11. //方式二：利用jqForm對象
12. var form = jqForm[0]; //把表單轉(zhuǎn)化為dom對象
13. if (!form.name.value || !form.address.value) {
14. alert('用戶名和地址不能為空，自我介紹可以為空！');
15. return false;
16. }
18. //方式三：利用fieldValue()方法，fieldValue 是表單插件的一個方法，它能找出表單中的元素的值，返回一個集合。
19. var usernameValue = $('input[name=name]').fieldValue();
20. var addressValue = $('input[name=address]').fieldValue();
21. if (!usernameValue[0] || !addressValue[0]) {
22. alert('用戶名和地址不能為空，自我介紹可以為空！');
23. return false;
24. }
26. var queryString = $.param(formData); //組裝數(shù)據(jù)
27. //alert(queryString); //類似 ： name=1&add=2
28. return true;
29. }三.模態(tài)窗口插件——SimpleModal
補白:
模態(tài)窗口就是在該窗口關(guān)閉之前，其父窗口不可能成為活動窗口的那種窗口。
例如：窗口A彈出窗口B,如果窗口B是模態(tài)的，在窗口B關(guān)閉前就不可能切換到窗口A;如果B是非模態(tài)的，那可以在這兩個窗口之間任意切換。
更簡單地說alert彈出框就是一個模態(tài)窗口。
模態(tài)對話框 和 非模態(tài)對話框區(qū)別
模態(tài)對話框在顯示之后，就不能對同一個程序中的其它窗口進行操作。
非模態(tài)對話框在顯示之后，還可以對同一個程序的其它窗口進行操作
SimpleModal為模態(tài)窗口的開發(fā)提供了強有力的接口。
本筆記采用SimpleModal 1.4.4版
1.快速上手
彈出的內(nèi)容是需要css規(guī)范化的，因此css文件不可少?？梢愿鶕?jù)規(guī)則自定義css。本例用的是box.css。直接復(fù)制來用就好。
.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;}有兩種調(diào)用方法。
（1）獲取一個jquery對象，然后對其使用Modal()方法。然后就可以用該元素的內(nèi)容來顯示模態(tài)窗口。
$(elem).modal({options})
（2）作為一個單獨的函數(shù)使用
通過傳遞一個jq對象，通過dom元素來創(chuàng)建一個模態(tài)窗口
$.modal('
HELLO WORLD!
options參數(shù)為以上兩個方法提供了可能需要的css樣式信息。
（3）如何關(guān)閉——使用.simplemodal-close類
你可以在button按鈕或是a標記上使用此類。
【例7.3】制作一個模態(tài)提示框和模態(tài)的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='container'>
<div id='content'>
<div id='basic-modal'>
<p>提示框-ok：<input type='button' name='basic' value='Demo' class='open-basic-dialog-ok'/></p>
<p>警告框-warn：<input type='button' name='basic' value='Demo' class='open-basic-dialog-warn'/></p>
<p>彈出iframe：<input type='button' name='basic' value='Demo' class='open-basic-ifr'/></p>
</div>
</div>
<!-- 彈出內(nèi)容 -->
<div id="basic-dialog-ok">
<!-- 普通彈出層 [[ -->
<p><h3>已完成！</h3></p>
<button type="button" class="simplemodal-close">關(guān) 閉</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">系統(tǒng)繁忙，請稍候重試</div>
<div class="tips-line"></div>
</div>
</div>
<div class="box-buttons"><button type="button" class="simplemodal-close">關(guān) 閉</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>主要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('../images/logo.png') no-repeat center 90px;
background-size: 50px 50px;}.dialog-param{
color: #fff;}/* 定義彈出窗口時其它區(qū)域的顏色*/#simplemodal-overlay {
background-color:#000;}/*定義彈出窗口的背景色*/.simplemodal-wrap{background-color:#fff;}/* 彈出窗寬高 */#simplemodal-container {
height:150px;
width:500px;}/*彈出iframe的寬高*/#ifr-dialog-content{
height:300px;
width:700px;}效果：
四. 管理cookie的插件——Cookie
關(guān)于cookie的知識補白
cookie是網(wǎng)站放在客戶端的一個小文本文件，比如下回自動登陸，記住用戶名。就是典型的cookie應(yīng)用。
和網(wǎng)頁緩存沒有任何關(guān)系。緩存無法用js控制，而cookie可以。
所有網(wǎng)站共享同一套cookie——數(shù)量和總的體積有限（以Kb為單位）數(shù)量幾十個。
會有過期時間,由js來控制。
完全由客戶來控制。敏感數(shù)據(jù)不能放cookie。
測試cookie，要么搭建本地服務(wù)器，要么在火狐。其它都不行。
1.快速上手
此插件需要用到$.cookie()方法。其中有三個參數(shù)
$.cookie('表單控件的name值'，cookie字符串的來源比如value值，過期天數(shù))
【例7.4】
一個表單，有用戶名。當(dāng)點擊“記住用戶名”時，下回登陸就會記住用戶名。
用戶名：<input type="text" name="username" id="username"/> <br/> <input type="checkbox" name="check" id="check"/>記住用戶名
根據(jù)上述思想很快寫出
$(function(){
var COOKIE_NAME='username';
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:'/'});
}
}) alert(document.cookie);//驗證cookie狀況})在輸入框中寫入djtao，點擊關(guān)閉，重新打開網(wǎng)頁。
彈出cookie信息為：
過期時間可以在火狐選項-隱私中查看最近的cookie發(fā)現(xiàn)。過期時間在10天后。
2.其它方法
（1）寫入cookie
$.cookie('待寫入的cookie名','cookie值')
（2）讀取:根據(jù)已有的cookie名來讀取已有的cookie值
$.cookie('待讀取的cookie名')
（3）刪除cookie
把一個空字符串或是空對象存進第二個參數(shù)就行了。
$.cookie('待刪除的cookie名'，'null')
（4）第三個參數(shù)
所謂第三個參數(shù)其實是一個集合。
$.cookie(cookieName,cookieValue,{
expires:7;//有效期，如果時間已過，則自動刪除。
path:'/';//cookie路徑
domain:xxx.com;//域名，頁面cookie都會在此站點下歸類。
secure:true;//如果設(shè)置為true，會要求一個安全協(xié)議。})五. jquery UI插件
如果說jquery是javascript的一個庫。那么jquery UI就是jquery的庫。原書認為，jquery UI很可能是未來jquery的重點。但從幾年之后網(wǎng)絡(luò)上的討論來看，是落伍了。另一方面，作為一個官方插件，jquery還是有它值得研究的地方?；蛟S可以借鑒該代碼思想。
jQuery UI 主要分為3個部分：交互、微件和效果庫。
交互（Interactions）
交互部件是一些與鼠標交互相關(guān)的內(nèi)容，包括縮放（Resizable） , 拖動（Draggable） , 放置（Droppable） , 選擇（Selectable） , 排序（Sortable）等。
小部件（Widgets）
主要是一些界面的擴展，包括折疊面板（Accordion） , 自動完成（Autocomplete） , 按鈕（Button） , 日期選擇器（Datepicker） , 對話框（Dialog） , 菜單（Menu） , 進度條（Progressbar） , 滑塊（Slider） , 旋轉(zhuǎn)器（Spinner） , 標簽頁（Tabs） , 工具提示框（Tooltip）等，新版本的UI將包含更多的微件。
效果庫（Effects）
用于提供豐富的動畫效果，讓動畫不再局限于jQuery的animate()方法。包括特效（Effect） , 顯示（Show） , 隱藏（Hide） , 切換（Toggle） , 添加 Class（Add Class） , 移除 Class（Remove Class） , 切換 Class（Toggle Class） , 轉(zhuǎn)換 Class（Switch Class） , 顏色動畫（Color Animation）等。
在此闡述深入的使用方法非本筆記原意。但是為了學(xué)習(xí)思想，不妨把jqueryUI基本原理陳列如下。
安裝
當(dāng)小部件安裝時，生命周期開始。我們只需要在一個或多個元素上調(diào)用插件，即安裝了小部件。
$( "#elem" ).progressbar();
這將會初始化 jQuery 對象中的每個元素，在本例中，元素 id 為 "elem"。因為我們調(diào)用無參數(shù)的 .progressbar() 方法，小部件則會按照它的默認選項進行初始化。我們可以在安裝時傳遞一組選項，這樣既可重寫默認選項。
$( "#elem" ).progressbar({ value: 20 });安裝時傳遞的選項數(shù)目多少可根據(jù)我們的需要而定。任何我們未傳遞的選項則都使用它們的默認值。
選項是小部件狀態(tài)的組成部分，所以我們也可以在安裝后再進行設(shè)置選項。我們將在后續(xù)的 option 方法中介紹這部分內(nèi)容。
方法
既然小部件已經(jīng)初始化，我們就可以查詢它的狀態(tài)，或者在小部件上執(zhí)行動作。所有初始化后的動作都以方法調(diào)用的形式進行。為了在小部件上調(diào)用一個方法，我們可以向 jQuery 插件傳遞方法的名稱。例如，為了在進度條（progressbar）小部件上調(diào)用 value 方法，我們應(yīng)該使用：
$( "#elem" ).progressbar( "value" );
如果方法接受參數(shù)，我們可以在方法名后傳遞參數(shù)。例如，為了傳遞參數(shù) 40 給 value 方法，我們可以使用：
$( "#elem" ).progressbar( "value", 40 );
就像 jQuery 中的其他方法一樣，大部分的小部件方法為鏈接返回 jQuery 對象。
$( "#elem" ) .progressbar( "value", 90 ) .addClass( "almost-done" );
公共的方法
每個小部件都有它自己的一套基于小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。
option
正如我們前面所提到的，我們可以在初始化之后通過 option 方法改變選項。例如，我們可以通過調(diào)用 option 方法改變 progressbar（進度條）的 value 為 30。
$( "#elem" ).progressbar( "option", "value", 30 );
請注意，這與之前我們調(diào)用 value 方法的實例有所不同。在本實例中，我們調(diào)用 option 方法，改變 value 選項為 30。
我們也可以為某個選項獲取當(dāng)前的值。
$( "#elem" ).progressbar( "option", "value" );
另外，我們可以通過給 option 方法傳遞一個對象，一次更新多個選項。
$( "#elem" ).progressbar( "option", {
value: 100,
disabled: true});您也許注意到 option 方法有著與 jQuery 代碼中取值器和設(shè)置器相同的標志，就像 .css() 和 .attr()。唯一的不同就是您必須傳遞字符串 "option" 作為第一個參數(shù)。
disable
disable 方法禁用小部件。在進度條（progressbar）實例中，這會改變樣式讓進度條顯示為禁用狀態(tài)。
1. $( "#elem" ).progressbar( "disable" );
調(diào)用 disable 方法等同于設(shè)置 disabled 選項為 true。
enable
enable 方法是 disable 方法的對立面。
1. $( "#elem" ).progressbar( "enable" );
調(diào)用 enable 方法等同于設(shè)置 disabled 選項為 false。
destroy
如果您不再需要小部件，那么可以銷毀它，返回到最初的標記。這意味著小部件生命周期的終止。
1. $( "#elem" ).progressbar( "destroy" );
一旦您銷毀了一個小部件，您就不能在該部件上調(diào)用任何方法，除非您再次初始化這個小部件。如果您要移除元素，可以直接通過 .remove()，也可以通過 .html() 或 .empty() 修改祖先，小部件會自動銷毀。
widget
一些小部件生成包裝器元素，或與原始元素斷開連接的元素。在下面的實例中，widget 將返回生成的元素。在進度條（progressbar）實例中，沒有生成的包裝器，widget 方法返回原始的元素。
1. $( "#elem" ).progressbar( "widget" );
事件
所有的小部件都有跟他們各種行為相關(guān)的事件，用于在狀態(tài)改變時通知您。對于大多數(shù)的小部件，當(dāng)事件被觸發(fā)時，名稱以小部件名稱為前綴。例如，我們可以綁定進度條（）的 change 事件，一旦值發(fā)生變化時就觸發(fā)。
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );});每個事件都有一個相對應(yīng)的回調(diào)，作為選項進行呈現(xiàn)。我們可以使用進度條（progressbar）的 change 回調(diào)，這等同于綁定 progressbarchange 事件。
$( "#elem" ).progressbar({
change: function() {
alert( "The value has changed!" );
}});公共的事件
大多數(shù)事件是針對特定的小部件，所有的小部件都有一個公共的 create 事件。該事件在小部件被創(chuàng)建時即被觸發(fā)。
1.快速上手
【例7.5】拖動排序的使用
拖動方法調(diào)用的是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>css
.list-item{
width: 200px;line-height: 50px;
border: 1px solid black;
text-align: center;
margin-top: 20px;
list-style: none;
cursor: pointer;}jq
$(function(){
$( "#ul1" ).sortable();
$( "#ul1" ).disableSelection();})然后一個簡單到令人發(fā)指的拖動排序效果就做出來了。
2. 結(jié)合后臺
sortable方法在參數(shù)中可以插入回調(diào)函數(shù)。比如說我想知道拖動后的排序，可以采用：
$('selector').sortable{
stop:function(){
do something;
}}六.jquery插件的編寫
插件編寫的目的是封裝方法或函數(shù)，以便下次調(diào)用。插件分為三個類型：
封裝對象方法：
最常見的類型，通過選擇器來進行對象操作：
封裝全局函數(shù)
獨立的全局函數(shù)。
選擇器插件
更為豐富的選擇邏輯。
1.要點
命名：建議命名為jquery.xxx.js
所有的對象方法應(yīng)該加到j(luò)query.fn對象上，全局函數(shù)加到j(luò)query對象本身
注意this：內(nèi)部指向的是選擇器
允許遍歷（this.each）
分號結(jié)尾：（否則壓縮會出問題）
插件返回的是一個jquery對象，保證鏈式操作
不建議簡寫，可以允許閉包方法。
2.閉包方法
所謂閉包：允許使用其它函數(shù)內(nèi)部定義的函數(shù)。
插件的標準寫法是：
//前面加分號為了更好的兼容性。;(
function($){//$是這個匿名函數(shù)的形參/*代碼，允許簡寫如$*/})(jQuery);
//將jquery作為實參傳遞給匿名函數(shù)。后面括弧表示立即執(zhí)行。3. 插件機制——jQuery.extend()和jQuery.fn.extend()
前者用于擴展對象方法，后者用于擴展全局函數(shù)或者選擇器。
4. 編寫實例
（1）對象方法
【例7.6】編寫獲取顏色方法的插件color()
實現(xiàn)兩個功能：A.設(shè)置匹配元素的顏色；B.獲取匹配元素的顏色
網(wǎng)頁中有一個#div1,字體顏色為紅色
;(function ($) {jQuery.fn.extend({
"color":function(value){
if(value==undefined){
return this.css('color');//當(dāng)前返回字體的顏色
}else{
return this.css('color',value);//如果value參數(shù)為空，返回字體顏色
}
}})})(jQuery);//立即調(diào)用！再寫一段調(diào)用的測試：
$(function(){alert(
$('#div1').color());
$('#div1').color('blue');})成功將字體設(shè)置為藍色。
進一步改造：因為color的css方法中已經(jīng)包含了參數(shù)為空的情況，可以省略判斷，直接返回this.css('color',value)。根據(jù)設(shè)置color的思想還可以設(shè)置background，border等方法：
;(function ($) {
jQuery.fn.extend({ 'color':function(value){ return this.css('color',value);
}, 'backgroundColor':function(value){ return this.css('background-color',value);
}, 'border':function(value){ return this.css('border',value);
}
})
})(jQuery);成功通過測試。
【例7.7】表格隔行變色：
第五章表格隔行變色的代碼是：
.even{
background: #fff38f;}.odd{
background: #ffffee;}.selected{ background:#FF6500;color:#fff;}jq:
$(function(){
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');
$('tbody>tr').click(function(){
if($(this).hasClass('selected')){
return false;
}else{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
}
})})試用插件的寫法實現(xiàn)上述功能。插件方法取名為tableStriped
思路：要通過`對象.tableStriped()方法應(yīng)該有一個參數(shù)options，options參數(shù)是一個對象。你可以通過設(shè)置參數(shù)的屬性來規(guī)定你要給它加上那種class，表述為options.odd，options.even,options.selected。
;(function ($) {
jQuery.fn.extend({
'tableStriped':function(options){
options=$.extend({
odd:'odd',
even:'even',
selected:'selected'
},options);
}
})})(jQuery);//立即調(diào)用！框架已經(jīng)打好，接下來就是選擇元素，應(yīng)該使用$(選擇器,this)表述只在匹配與元素內(nèi)進行操作。函數(shù)應(yīng)該是可鏈的，所以最后應(yīng)該返回this。
;(function ($) {
jQuery.fn.extend({ 'tableStriped':function(options){ //參數(shù)框架
options=$.extend({
odd:'odd',
even:'even',
selected:'selected'
},options); //具體方法：
$('tbody>tr:odd',this).addClass(options.odd);
$('tbody>tr:even',this).addClass(options.even);
$('tbody>tr',this).click(function(){ if($(this).hasClass(options.selected)){ return false;
}else{
$(this).siblings().removeClass(options.selected);
$(this).addClass(options.selected);
}
}) return this;//使方法可鏈
}
})
})(jQuery);//立即調(diào)用！在驗證中，可以通過$('table').tableStriped(參數(shù))來實現(xiàn)題目的效果。如果我不想使用.odd、.even、。selected這種名稱的樣式，可以重新傳入一個對象：
$('table').tableStriped({odd:'haha',even:'hehe',selected:'hoho'});
上述代碼表示在所有table中，對奇數(shù)序列odd的行（2,4,6...）使用.haha樣式，...一次類推。
注意：在前面提到的幾個要點里，元素應(yīng)該是允許遍歷的。簡單的說，就是內(nèi)部對象可能不是一個單獨的對象，也有可能是多個。
;(function ($) {
jQuery.fn.extend({
'somePlugin':function(options){
return this.each(function(){
//代碼
}) }
})})(jQuery);//立即調(diào)用！（2）怎樣封裝全局函數(shù)插件
因為全局函數(shù)之前已經(jīng)經(jīng)過封裝，因改起來很簡單，把函數(shù)放到j(luò)query命名空間下就可以。
;(function($){
$.extand({
屬性名:function(){
//待封裝函數(shù)代碼
})})(jQuery)寫插件時注意不要把內(nèi)容寫死。
（3）自定義選擇器
想自定義選擇器，首先得了解jquery選擇器的機制：通過正則表達式來解析，然后針對解析出來的選擇符執(zhí)行一個函數(shù)。——稱為選擇器函數(shù)?，F(xiàn)在以:lt()為例說明jquery選擇器函數(shù)的特性。
$('div:lt(3)')表示選取div索引值小于3的所有div元素（大于用:gt()）。分析:lt()jquery源碼：
gt:function(a,i,m){
return i<m[3]-0;
}a表示當(dāng)前遍歷到的dom元素
i表示當(dāng)前遍歷到dom的索引值
m是一個數(shù)組，也是選擇器函數(shù)的最重要部分。拿$('div:lt(3)')來說：
m[0]表示:lt(3)這部分。
m[1]表示冒號
m[2]決定了用那個選擇器函數(shù)，在例子只帶lt
m[3]指代括號內(nèi)的數(shù)字。
【例7.8】在jquery的空間內(nèi)寫一個between選擇器，選取目標元素索引值在一定范圍之間的所有元素。
;function($){
$.extend($.expr[':'],{
between:function(a,i,m){
var tmp=m[3].split(',');
return tmp[0]-0<i&&tmp[1]<tmp[1]-0;
}
})}解釋：在自定義選擇器between，中m[3]表述為x,y表示數(shù)字x，和數(shù)字y之間的索引值范圍。因此，需要用split方法把它分割為數(shù)組tmp，所以tmp有兩個元素。其中tmp[0]代表數(shù)字較大的數(shù)組元素（本質(zhì)上還是字符串）。
接下來依樣畫葫蘆，把i的取值范圍返回出去就行了。（tmp-0表示通過一個簡單運算把字符串轉(zhuǎn)換為數(shù)字。）
選擇器僅僅是$.expr[':']的一部分，不能獨立存在。
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat
Feb 27, 2024 pm 06:45 PM
Penjelasan terperinci kaedah rujukan jQuery: Panduan Mula Pantas jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas dalam pembangunan tapak web Ia memudahkan pengaturcaraan JavaScript dan menyediakan pemaju dengan fungsi dan ciri yang kaya. Artikel ini akan memperkenalkan kaedah rujukan jQuery secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca bermula dengan cepat. Memperkenalkan jQuery Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Ia boleh diperkenalkan melalui pautan CDN atau dimuat turun
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery?
Feb 28, 2024 am 08:39 AM
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen
Fahami peranan dan senario aplikasi eq dalam jQuery
Feb 28, 2024 pm 01:15 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk mengendalikan manipulasi DOM dan pengendalian acara dalam halaman web. Dalam jQuery, kaedah eq() digunakan untuk memilih elemen pada kedudukan indeks tertentu Senario penggunaan dan aplikasi khusus adalah seperti berikut. Dalam jQuery, kaedah eq() memilih elemen pada kedudukan indeks yang ditentukan. Kedudukan indeks mula dikira dari 0, iaitu indeks elemen pertama ialah 0, indeks elemen kedua ialah 1, dan seterusnya. Sintaks kaedah eq() adalah seperti berikut: $("s
Pengenalan kepada cara menambah baris baharu pada jadual menggunakan jQuery
Feb 29, 2024 am 08:12 AM
jQuery ialah perpustakaan JavaScript yang popular digunakan secara meluas dalam pembangunan web. Semasa pembangunan web, selalunya perlu menambah baris baharu secara dinamik pada jadual melalui JavaScript. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menambah baris baharu pada jadual dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman HTML. Pustaka jQuery boleh diperkenalkan dalam teg melalui kod berikut:
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
