一. 表單驗(yàn)證插件Validation
jquery最常用的場(chǎng)合就是表單驗(yàn)證。Validation則是歷史最悠久的jquery插件之一。分為內(nèi)置驗(yàn)證規(guī)則，和自定義驗(yàn)證規(guī)則。信息提示明確——可以通過(guò)keyUp,focus等方式完成實(shí)時(shí)驗(yàn)證。
本筆記跟隨原書采用Validation 1.9版
1.快速上手
Validation基本規(guī)則如下：（相關(guān)內(nèi)容可通過(guò)ctrl+F查找源文件得到）
資料來(lái)源：//www.cnblogs.com/si-shaohua/p/3760286.html>
【例7.1】
制作一個(gè)表單，包括用戶名，郵箱，網(wǎng)址（非必填），和評(píng)論。要求能夠輸入驗(yàn)證。
思路：
（1）對(duì)于姓名一欄中長(zhǎng)度至少為2位（minlength="2"）
（2）電子郵件一欄需要加上.email類
（3）網(wǎng)址加上.url類
（4）對(duì)于必填字段全部加上class="required";
html
<form class="cxmform" id="commentForm" method="get" action="#">
<fieldset>
<lengend>一個(gè)簡(jiǎn)單帶驗(yàn)證提示的評(píng)論</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>補(bǔ)充css樣式（對(duì)功能無(wú)影響）
* { 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; }最后還不要忘記對(duì)插件庫(kù)的調(diào)用，
<script type="text/javascript" src="js/jquery.validate.js"></script>
jq調(diào)用
$(document).ready(function(){
$("#commentForm").validate();});效果如下：
【初步小結(jié)插件的使用方法】
（1）引入插件
（2）確定需求：哪些需要用才加
（3）指定驗(yàn)證規(guī)則。
（4）如果我們想漢化這個(gè)插件，只需要修改插件中的message消息(注意和驗(yàn)證規(guī)則對(duì)應(yīng))：
jQuery.extend(jQuery.validator.messages, {
required: "必選字段",
remote: "請(qǐng)修正該字段",
email: "請(qǐng)輸入正確格式的電子郵件",
url: "請(qǐng)輸入合法的網(wǎng)址",
date: "請(qǐng)輸入合法的日期",
dateISO: "請(qǐng)輸入合法的日期 (ISO).",
number: "請(qǐng)輸入合法的數(shù)字",
digits: "只能輸入整數(shù)",
creditcard: "請(qǐng)輸入合法的信用卡號(hào)",
equalTo: "請(qǐng)?jiān)俅屋斎胂嗤闹?quot;,
accept: "請(qǐng)輸入擁有合法后綴名的字符串",
maxlength: jQuery.validator.format("請(qǐng)輸入一個(gè) 長(zhǎng)度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("請(qǐng)輸入一個(gè) 長(zhǎng)度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("請(qǐng)輸入 一個(gè)長(zhǎng)度介于 {0} 和 {1} 之間的字符串"),
range: jQuery.validator.format("請(qǐng)輸入一個(gè)介于 {0} 和 {1} 之間的值"),
max: jQuery.validator.format("請(qǐng)輸入一個(gè)最大為{0} 的值"),
min: jQuery.validator.format("請(qǐng)輸入一個(gè)最小為{0} 的值")});2.改進(jìn)
上面的例子對(duì)于最短字段采用了minlength="2"這樣的屬性方法。而對(duì)開(kāi)發(fā)者來(lái)說(shuō)最友好的事情，應(yīng)該是把所有的驗(yàn)證規(guī)則要么全放class要么全放屬性中。
（1）再引一個(gè)插件——jquery.metadata.js
(從這個(gè)插件能查到的資料來(lái)看，大多數(shù)都是和表單驗(yàn)證一起用)
（2）改變jq的調(diào)用方法：
$(document).ready(function(){
$("#commentForm").validate({meta:'validate'});});（3）驗(yàn)證規(guī)則全部寫到class屬性里去！
比如說(shuō)：
把class="required" minlength="2"寫成：class="{validate:{required:true，minlength:2}}".只要是插件相關(guān)的，全部改成復(fù)合對(duì)象的形式：
<form class="cxmform" id="commentForm" method="get" action="#">
<fieldset>
<lengend>一個(gè)簡(jiǎn)單帶驗(yàn)證提示的評(píng)論</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.改進(jìn)（第二種）：通過(guò)name來(lái)驗(yàn)證
鍵入繁瑣的class是多數(shù)人不喜歡的。下面從js層面研究如何實(shí)現(xiàn)一樣的效果。把class都刪了：
$(function(){
$('#commentForm).validate({
rules:{//定義rules屬性
username:{//通過(guò)name來(lái)匹配驗(yàn)證屬性規(guī)則
required:true;
minlength:2;
}，email{
required:true;
email:true;
}，url:"url",
comment:required;
}
})
})4.自定義插件
（1）更推薦的方法
除了從源碼上漢化之外，更推薦在調(diào)用class時(shí)完成一整套規(guī)則。比如姓名驗(yàn)證一欄中，class改寫為：
class="{validate:{required:true,minlength:2,messages:{required:'請(qǐng)輸入姓名',minlength:'請(qǐng)至少輸入兩個(gè)字符'}}}"（2）如果需要在驗(yàn)證信息中添加圖片
在js文件中鍵入代碼：
$(document).ready(function(){
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required"
},
messages: {
username: {
required: '請(qǐng)輸入姓名',
minlength: '請(qǐng)至少輸入兩個(gè)字符'
},
email: {
required: '請(qǐng)輸入電子郵件',
email: '請(qǐng)檢查電子郵件的格式'
},
url: '請(qǐng)檢查網(wǎng)址的格式',
comment: '請(qǐng)輸入您的評(píng)論'
},
errorElement: "em", //可以用其他標(biāo)簽，記住把樣式也對(duì)應(yīng)修改
success: function(label) {
//label指向上面那個(gè)錯(cuò)誤提示信息標(biāo)簽em
label.text(" ") //清空錯(cuò)誤提示消息
.addClass("success"); //加上自定義的success類
}
});
});同時(shí)在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ī)則的自定義
評(píng)論功能還有一個(gè)重要部分是驗(yàn)證碼,驗(yàn)證碼通常有后臺(tái)生成，在這里直接模擬。
在html的表現(xiàn)是：
<p>
<label for="cvalcode">驗(yàn)證碼</label>
<input id="cvalcode" name="valcode" size="25" value="" />=1+1</p>在$("#commentForm").validate(）方法上面定義驗(yàn)證規(guī)則：
使用$.validator.addMethod('方法名',function(值,對(duì)象,param)）定義
//自定義一個(gè)驗(yàn)證方法
$.validator.addMethod( "formula", //驗(yàn)證方法名稱
function(value, element, param) {//驗(yàn)證規(guī)則
return value == eval(param);
},
'請(qǐng)正確輸入數(shù)學(xué)公式計(jì)算后的結(jié)果'//不成功則出現(xiàn)驗(yàn)證提示信息
);跟其他規(guī)則一樣,在rules里面,根據(jù)name調(diào)用對(duì)象：
valcode: {
formula: "1+1" }效果如下：
代碼清單
jq
$(document).ready(function(){
//自定義一個(gè)驗(yàn)證方法
$.validator.addMethod( "formula", //驗(yàn)證方法名稱
function(value, element, param) {//驗(yàn)證規(guī)則
return value == eval(param);
},
'請(qǐng)正確輸入數(shù)學(xué)公式計(jì)算后的結(jié)果'//驗(yàn)證提示信息
);
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required",
valcode: {
formula: "1+1"
}
},
messages: {
username: {
required: '請(qǐng)輸入姓名',
minlength: '請(qǐng)至少輸入兩個(gè)字符'
},
email: {
required: '請(qǐng)輸入電子郵件',
email: '請(qǐng)檢查電子郵件的格式'
},
url: '請(qǐng)檢查網(wǎng)址的格式',
comment: '請(qǐng)輸入您的評(píng)論'
},
errorElement: "em", //用來(lái)創(chuàng)建錯(cuò)誤提示信息標(biāo)簽
success: function(label) { //驗(yàn)證成功后的執(zhí)行的回調(diào)函數(shù)
//label指向上面那個(gè)錯(cuò)誤提示信息標(biāo)簽em
label.text(" ") //清空錯(cuò)誤提示消息
.addClass("success"); //加上自定義的success類
}
});
});二. jQuery表單插件——form
jQuery Form插件是一個(gè)優(yōu)秀的Ajax表單插件，可以非常容易地、無(wú)侵入地升級(jí)HTML表單以支持Ajax。jQuery Form有兩個(gè)核心方法 -- ajaxForm() 和 ajaxSubmit()， 它們集合了從控制表單元素到?jīng)Q定如何管理提交進(jìn)程的功能。另外，插件還包括其他的一些方法： formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
調(diào)試需要服務(wù)器環(huán)境的支持。筆記跟隨原書使用2.95版
1.快速上手
【例7.2】
一個(gè)表單，包括名字，地址，自我介紹，被提交時(shí)傳送到demo.php中，如果返回成功則收到“提交成功！”的信息。
————準(zhǔn)備工作
在頁(yè)面引入插件：
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(){
//綁定一個(gè)id為myForm的表單并提供一個(gè)回調(diào)函數(shù)
$('#myForm').ajaxForm(function(){
$('#output1').html('提交成功！').show();
});
return false;//阻止表單默認(rèn)提交})通過(guò)Form插件的兩個(gè)核心方法，都可以在不修改表單的HTML代碼結(jié)構(gòu)的情況下，輕易地將表單的提交方式升級(jí)為Ajax提交方式。另一個(gè)核心方法ajaxSubmit()也能完成同樣的功能。
$(function(){
//綁定一個(gè)id為myForm的表單并提供一個(gè)回調(diào)函數(shù)
$('#myForm').ajaxSubmit(function(){
$('#output1').html('提交成功！').show();
});
return false;//阻止表單默認(rèn)提交})2.兩個(gè)核心方法的參數(shù)
ajaxForm() 和 ajaxSubmit() 都能接受0個(gè)或1個(gè)參數(shù)，當(dāng)為單個(gè)參數(shù)時(shí)，該參數(shù)既可以是一個(gè)回調(diào)函數(shù)，也可以是一個(gè)options對(duì)象，上面的例子就是回調(diào)函數(shù)，下面介紹options對(duì)象，使得它們對(duì)表單擁有更多的控制權(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, //默認(rèn)是form的action， 如果申明，則會(huì)覆蓋
6. //type: type, //默認(rèn)是form的method（get or post），如果申明，則會(huì)覆蓋
7. //dataType: null, //html(默認(rèn)), xml, script, json...接受服務(wù)端返回的類型
8. //clearForm: true, //成功提交后，清除所有表單元素的值
9. //resetForm: true, //成功提交后，重置所有表單元素的值
10. timeout: 3000 //限制請(qǐng)求的時(shí)間，當(dāng)請(qǐng)求大于3秒后，跳出請(qǐng)求
11. }
13. function showRequest(formData, jqForm, options){
14. //formData: 數(shù)組對(duì)象，提交表單時(shí)，F(xiàn)orm插件會(huì)以Ajax方式自動(dòng)提交這些數(shù)據(jù)，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
15. //jqForm: jQuery對(duì)象，封裝了表單的元素
16. //options: options對(duì)象
17. var queryString = $.param(formData); //name=1&address=2
18. var formElement = jqForm[0]; //將jqForm轉(zhuǎn)換為DOM對(duì)象
19. var address = formElement.address.value; //訪問(wèn)jqForm的DOM元素
20. return true; //只要不返回false，表單都會(huì)提交,在這里可以對(duì)表單元素進(jìn)行驗(yàn)證
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; //阻止表單默認(rèn)提交
37. });表單提交之前進(jìn)行驗(yàn)證： beforeSubmit會(huì)在表單提交前被調(diào)用，如果beforeSubmit返回false，則會(huì)阻止表單提交。
3.表單提交之前的驗(yàn)證
利用beforeSubmit的特性，當(dāng)返回為false時(shí)，阻止提交?？梢远x一個(gè)validate函數(shù)，作為beforeSubmit的值：
1. beforeSubmit: validate
2. function validate(formData, jqForm, options) { //在這里對(duì)表單進(jìn)行驗(yàn)證，如果不符合規(guī)則，將返回false來(lái)阻止表單提交，直到符合規(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對(duì)象
12. var form = jqForm[0]; //把表單轉(zhuǎn)化為dom對(duì)象
13. if (!form.name.value || !form.address.value) {
14. alert('用戶名和地址不能為空，自我介紹可以為空！');
15. return false;
16. }
18. //方式三：利用fieldValue()方法，fieldValue 是表單插件的一個(gè)方法，它能找出表單中的元素的值，返回一個(gè)集合。
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
補(bǔ)白:
模態(tài)窗口就是在該窗口關(guān)閉之前，其父窗口不可能成為活動(dòng)窗口的那種窗口。
例如：窗口A彈出窗口B,如果窗口B是模態(tài)的，在窗口B關(guān)閉前就不可能切換到窗口A;如果B是非模態(tài)的，那可以在這兩個(gè)窗口之間任意切換。
更簡(jiǎn)單地說(shuō)alert彈出框就是一個(gè)模態(tài)窗口。
模態(tài)對(duì)話框 和 非模態(tài)對(duì)話框區(qū)別
模態(tài)對(duì)話框在顯示之后，就不能對(duì)同一個(gè)程序中的其它窗口進(jìn)行操作。
非模態(tài)對(duì)話框在顯示之后，還可以對(duì)同一個(gè)程序的其它窗口進(jìn)行操作
SimpleModal為模態(tài)窗口的開(kāi)發(fā)提供了強(qiáng)有力的接口。
本筆記采用SimpleModal 1.4.4版
1.快速上手
彈出的內(nèi)容是需要css規(guī)范化的，因此css文件不可少?？梢愿鶕?jù)規(guī)則自定義css。本例用的是box.css。直接復(fù)制來(lái)用就好。
.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）獲取一個(gè)jquery對(duì)象，然后對(duì)其使用Modal()方法。然后就可以用該元素的內(nèi)容來(lái)顯示模態(tài)窗口。
$(elem).modal({options})
（2）作為一個(gè)單獨(dú)的函數(shù)使用
通過(guò)傳遞一個(gè)jq對(duì)象，通過(guò)dom元素來(lái)創(chuàng)建一個(gè)模態(tài)窗口
$.modal('
HELLO WORLD!
options參數(shù)為以上兩個(gè)方法提供了可能需要的css樣式信息。
（3）如何關(guān)閉——使用.simplemodal-close類
你可以在button按鈕或是a標(biāo)記上使用此類。
【例7.3】制作一個(gè)模態(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"><!-- 圖標(biāo) --></span>
</span>
<div class="tips-content">
<div class="tips-title">系統(tǒng)繁忙，請(qǐ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;}/* 定義彈出窗口時(shí)其它區(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的知識(shí)補(bǔ)白
cookie是網(wǎng)站放在客戶端的一個(gè)小文本文件，比如下回自動(dòng)登陸，記住用戶名。就是典型的cookie應(yīng)用。
和網(wǎng)頁(yè)緩存沒(méi)有任何關(guān)系。緩存無(wú)法用js控制，而cookie可以。
所有網(wǎng)站共享同一套cookie——數(shù)量和總的體積有限（以Kb為單位）數(shù)量幾十個(gè)。
會(huì)有過(guò)期時(shí)間,由js來(lái)控制。
完全由客戶來(lái)控制。敏感數(shù)據(jù)不能放cookie。
測(cè)試cookie，要么搭建本地服務(wù)器，要么在火狐。其它都不行。
1.快速上手
此插件需要用到$.cookie()方法。其中有三個(gè)參數(shù)
$.cookie('表單控件的name值'，cookie字符串的來(lái)源比如value值，過(guò)期天數(shù))
【例7.4】
一個(gè)表單，有用戶名。當(dāng)點(diǎn)擊“記住用戶名”時(shí)，下回登陸就會(huì)記住用戶名。
用戶名：<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);//驗(yàn)證cookie狀況})在輸入框中寫入djtao，點(diǎn)擊關(guān)閉，重新打開(kāi)網(wǎng)頁(yè)。
彈出cookie信息為：
過(guò)期時(shí)間可以在火狐選項(xiàng)-隱私中查看最近的cookie發(fā)現(xiàn)。過(guò)期時(shí)間在10天后。
2.其它方法
（1）寫入cookie
$.cookie('待寫入的cookie名','cookie值')
（2）讀取:根據(jù)已有的cookie名來(lái)讀取已有的cookie值
$.cookie('待讀取的cookie名')
（3）刪除cookie
把一個(gè)空字符串或是空對(duì)象存進(jìn)第二個(gè)參數(shù)就行了。
$.cookie('待刪除的cookie名'，'null')
（4）第三個(gè)參數(shù)
所謂第三個(gè)參數(shù)其實(shí)是一個(gè)集合。
$.cookie(cookieName,cookieValue,{
expires:7;//有效期，如果時(shí)間已過(guò)，則自動(dòng)刪除。
path:'/';//cookie路徑
domain:xxx.com;//域名，頁(yè)面cookie都會(huì)在此站點(diǎn)下歸類。
secure:true;//如果設(shè)置為true，會(huì)要求一個(gè)安全協(xié)議。})五. jquery UI插件
如果說(shuō)jquery是javascript的一個(gè)庫(kù)。那么jquery UI就是jquery的庫(kù)。原書認(rèn)為，jquery UI很可能是未來(lái)jquery的重點(diǎn)。但從幾年之后網(wǎng)絡(luò)上的討論來(lái)看，是落伍了。另一方面，作為一個(gè)官方插件，jquery還是有它值得研究的地方?；蛟S可以借鑒該代碼思想。
jQuery UI 主要分為3個(gè)部分：交互、微件和效果庫(kù)。
交互（Interactions）
交互部件是一些與鼠標(biāo)交互相關(guān)的內(nèi)容，包括縮放（Resizable） , 拖動(dòng)（Draggable） , 放置（Droppable） , 選擇（Selectable） , 排序（Sortable）等。
小部件（Widgets）
主要是一些界面的擴(kuò)展，包括折疊面板（Accordion） , 自動(dòng)完成（Autocomplete） , 按鈕（Button） , 日期選擇器（Datepicker） , 對(duì)話框（Dialog） , 菜單（Menu） , 進(jìn)度條（Progressbar） , 滑塊（Slider） , 旋轉(zhuǎn)器（Spinner） , 標(biāo)簽頁(yè)（Tabs） , 工具提示框（Tooltip）等，新版本的UI將包含更多的微件。
效果庫(kù)（Effects）
用于提供豐富的動(dòng)畫效果，讓動(dòng)畫不再局限于jQuery的animate()方法。包括特效（Effect） , 顯示（Show） , 隱藏（Hide） , 切換（Toggle） , 添加 Class（Add Class） , 移除 Class（Remove Class） , 切換 Class（Toggle Class） , 轉(zhuǎn)換 Class（Switch Class） , 顏色動(dòng)畫（Color Animation）等。
在此闡述深入的使用方法非本筆記原意。但是為了學(xué)習(xí)思想，不妨把jqueryUI基本原理陳列如下。
安裝
當(dāng)小部件安裝時(shí)，生命周期開(kāi)始。我們只需要在一個(gè)或多個(gè)元素上調(diào)用插件，即安裝了小部件。
$( "#elem" ).progressbar();
這將會(huì)初始化 jQuery 對(duì)象中的每個(gè)元素，在本例中，元素 id 為 "elem"。因?yàn)槲覀冋{(diào)用無(wú)參數(shù)的 .progressbar() 方法，小部件則會(huì)按照它的默認(rèn)選項(xiàng)進(jìn)行初始化。我們可以在安裝時(shí)傳遞一組選項(xiàng)，這樣既可重寫默認(rèn)選項(xiàng)。
$( "#elem" ).progressbar({ value: 20 });安裝時(shí)傳遞的選項(xiàng)數(shù)目多少可根據(jù)我們的需要而定。任何我們未傳遞的選項(xiàng)則都使用它們的默認(rèn)值。
選項(xiàng)是小部件狀態(tài)的組成部分，所以我們也可以在安裝后再進(jìn)行設(shè)置選項(xiàng)。我們將在后續(xù)的 option 方法中介紹這部分內(nèi)容。
方法
既然小部件已經(jīng)初始化，我們就可以查詢它的狀態(tài)，或者在小部件上執(zhí)行動(dòng)作。所有初始化后的動(dòng)作都以方法調(diào)用的形式進(jìn)行。為了在小部件上調(diào)用一個(gè)方法，我們可以向 jQuery 插件傳遞方法的名稱。例如，為了在進(jìn)度條（progressbar）小部件上調(diào)用 value 方法，我們應(yīng)該使用：
$( "#elem" ).progressbar( "value" );
如果方法接受參數(shù)，我們可以在方法名后傳遞參數(shù)。例如，為了傳遞參數(shù) 40 給 value 方法，我們可以使用：
$( "#elem" ).progressbar( "value", 40 );
就像 jQuery 中的其他方法一樣，大部分的小部件方法為鏈接返回 jQuery 對(duì)象。
$( "#elem" ) .progressbar( "value", 90 ) .addClass( "almost-done" );
公共的方法
每個(gè)小部件都有它自己的一套基于小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。
option
正如我們前面所提到的，我們可以在初始化之后通過(guò) option 方法改變選項(xiàng)。例如，我們可以通過(guò)調(diào)用 option 方法改變 progressbar（進(jìn)度條）的 value 為 30。
$( "#elem" ).progressbar( "option", "value", 30 );
請(qǐng)注意，這與之前我們調(diào)用 value 方法的實(shí)例有所不同。在本實(shí)例中，我們調(diào)用 option 方法，改變 value 選項(xiàng)為 30。
我們也可以為某個(gè)選項(xiàng)獲取當(dāng)前的值。
$( "#elem" ).progressbar( "option", "value" );
另外，我們可以通過(guò)給 option 方法傳遞一個(gè)對(duì)象，一次更新多個(gè)選項(xiàng)。
$( "#elem" ).progressbar( "option", {
value: 100,
disabled: true});您也許注意到 option 方法有著與 jQuery 代碼中取值器和設(shè)置器相同的標(biāo)志，就像 .css() 和 .attr()。唯一的不同就是您必須傳遞字符串 "option" 作為第一個(gè)參數(shù)。
disable
disable 方法禁用小部件。在進(jìn)度條（progressbar）實(shí)例中，這會(huì)改變樣式讓進(jìn)度條顯示為禁用狀態(tài)。
1. $( "#elem" ).progressbar( "disable" );
調(diào)用 disable 方法等同于設(shè)置 disabled 選項(xiàng)為 true。
enable
enable 方法是 disable 方法的對(duì)立面。
1. $( "#elem" ).progressbar( "enable" );
調(diào)用 enable 方法等同于設(shè)置 disabled 選項(xiàng)為 false。
destroy
如果您不再需要小部件，那么可以銷毀它，返回到最初的標(biāo)記。這意味著小部件生命周期的終止。
1. $( "#elem" ).progressbar( "destroy" );
一旦您銷毀了一個(gè)小部件，您就不能在該部件上調(diào)用任何方法，除非您再次初始化這個(gè)小部件。如果您要移除元素，可以直接通過(guò) .remove()，也可以通過(guò) .html() 或 .empty() 修改祖先，小部件會(huì)自動(dòng)銷毀。
widget
一些小部件生成包裝器元素，或與原始元素?cái)嚅_(kāi)連接的元素。在下面的實(shí)例中，widget 將返回生成的元素。在進(jìn)度條（progressbar）實(shí)例中，沒(méi)有生成的包裝器，widget 方法返回原始的元素。
1. $( "#elem" ).progressbar( "widget" );
事件
所有的小部件都有跟他們各種行為相關(guān)的事件，用于在狀態(tài)改變時(shí)通知您。對(duì)于大多數(shù)的小部件，當(dāng)事件被觸發(fā)時(shí)，名稱以小部件名稱為前綴。例如，我們可以綁定進(jìn)度條（）的 change 事件，一旦值發(fā)生變化時(shí)就觸發(fā)。
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );});每個(gè)事件都有一個(gè)相對(duì)應(yīng)的回調(diào)，作為選項(xiàng)進(jìn)行呈現(xiàn)。我們可以使用進(jìn)度條（progressbar）的 change 回調(diào)，這等同于綁定 progressbarchange 事件。
$( "#elem" ).progressbar({
change: function() {
alert( "The value has changed!" );
}});公共的事件
大多數(shù)事件是針對(duì)特定的小部件，所有的小部件都有一個(gè)公共的 create 事件。該事件在小部件被創(chuàng)建時(shí)即被觸發(fā)。
1.快速上手
【例7.5】拖動(dòng)排序的使用
拖動(dòng)方法調(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();})然后一個(gè)簡(jiǎn)單到令人發(fā)指的拖動(dòng)排序效果就做出來(lái)了。
2. 結(jié)合后臺(tái)
sortable方法在參數(shù)中可以插入回調(diào)函數(shù)。比如說(shuō)我想知道拖動(dòng)后的排序，可以采用：
$('selector').sortable{
stop:function(){
do something;
}}六.jquery插件的編寫
插件編寫的目的是封裝方法或函數(shù)，以便下次調(diào)用。插件分為三個(gè)類型：
封裝對(duì)象方法：
最常見(jiàn)的類型，通過(guò)選擇器來(lái)進(jìn)行對(duì)象操作：
封裝全局函數(shù)
獨(dú)立的全局函數(shù)。
選擇器插件
更為豐富的選擇邏輯。
1.要點(diǎn)
命名：建議命名為jquery.xxx.js
所有的對(duì)象方法應(yīng)該加到j(luò)query.fn對(duì)象上，全局函數(shù)加到j(luò)query對(duì)象本身
注意this：內(nèi)部指向的是選擇器
允許遍歷（this.each）
分號(hào)結(jié)尾：（否則壓縮會(huì)出問(wèn)題）
插件返回的是一個(gè)jquery對(duì)象，保證鏈?zhǔn)讲僮?/p>
不建議簡(jiǎn)寫，可以允許閉包方法。
2.閉包方法
所謂閉包：允許使用其它函數(shù)內(nèi)部定義的函數(shù)。
插件的標(biāo)準(zhǔn)寫法是：
//前面加分號(hào)為了更好的兼容性。;(
function($){//$是這個(gè)匿名函數(shù)的形參/*代碼，允許簡(jiǎn)寫如$*/})(jQuery);
//將jquery作為實(shí)參傳遞給匿名函數(shù)。后面括弧表示立即執(zhí)行。3. 插件機(jī)制——jQuery.extend()和jQuery.fn.extend()
前者用于擴(kuò)展對(duì)象方法，后者用于擴(kuò)展全局函數(shù)或者選擇器。
4. 編寫實(shí)例
（1）對(duì)象方法
【例7.6】編寫獲取顏色方法的插件color()
實(shí)現(xiàn)兩個(gè)功能：A.設(shè)置匹配元素的顏色；B.獲取匹配元素的顏色
網(wǎng)頁(yè)中有一個(gè)#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)用的測(cè)試：
$(function(){alert(
$('#div1').color());
$('#div1').color('blue');})成功將字體設(shè)置為藍(lán)色。
進(jìn)一步改造：因?yàn)閏olor的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);成功通過(guò)測(cè)試。
【例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');
}
})})試用插件的寫法實(shí)現(xiàn)上述功能。插件方法取名為tableStriped
思路：要通過(guò)`對(duì)象.tableStriped()方法應(yīng)該有一個(gè)參數(shù)options，options參數(shù)是一個(gè)對(duì)象。你可以通過(guò)設(shè)置參數(shù)的屬性來(lái)規(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)打好，接下來(lái)就是選擇元素，應(yīng)該使用$(選擇器,this)表述只在匹配與元素內(nèi)進(jìn)行操作。函數(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)用！在驗(yàn)證中，可以通過(guò)$('table').tableStriped(參數(shù))來(lái)實(shí)現(xiàn)題目的效果。如果我不想使用.odd、.even、。selected這種名稱的樣式，可以重新傳入一個(gè)對(duì)象：
$('table').tableStriped({odd:'haha',even:'hehe',selected:'hoho'});
上述代碼表示在所有table中，對(duì)奇數(shù)序列odd的行（2,4,6...）使用.haha樣式，...一次類推。
注意：在前面提到的幾個(gè)要點(diǎn)里，元素應(yīng)該是允許遍歷的。簡(jiǎn)單的說(shuō)，就是內(nèi)部對(duì)象可能不是一個(gè)單獨(dú)的對(duì)象，也有可能是多個(gè)。
;(function ($) {
jQuery.fn.extend({
'somePlugin':function(options){
return this.each(function(){
//代碼
}) }
})})(jQuery);//立即調(diào)用！（2）怎樣封裝全局函數(shù)插件
因?yàn)槿趾瘮?shù)之前已經(jīng)經(jīng)過(guò)封裝，因改起來(lái)很簡(jiǎn)單，把函數(shù)放到j(luò)query命名空間下就可以。
;(function($){
$.extand({
屬性名:function(){
//待封裝函數(shù)代碼
})})(jQuery)寫插件時(shí)注意不要把內(nèi)容寫死。
（3）自定義選擇器
想自定義選擇器，首先得了解jquery選擇器的機(jī)制：通過(guò)正則表達(dá)式來(lái)解析，然后針對(duì)解析出來(lái)的選擇符執(zhí)行一個(gè)函數(shù)?！Q為選擇器函數(shù)。現(xiàn)在以:lt()為例說(shuō)明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是一個(gè)數(shù)組，也是選擇器函數(shù)的最重要部分。拿$('div:lt(3)')來(lái)說(shuō)：
m[0]表示:lt(3)這部分。
m[1]表示冒號(hào)
m[2]決定了用那個(gè)選擇器函數(shù)，在例子只帶lt
m[3]指代括號(hào)內(nèi)的數(shù)字。
【例7.8】在jquery的空間內(nèi)寫一個(gè)between選擇器，選取目標(biāo)元素索引值在一定范圍之間的所有元素。
;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有兩個(gè)元素。其中tmp[0]代表數(shù)字較大的數(shù)組元素（本質(zhì)上還是字符串）。
接下來(lái)依樣畫葫蘆，把i的取值范圍返回出去就行了。（tmp-0表示通過(guò)一個(gè)簡(jiǎn)單運(yùn)算把字符串轉(zhuǎn)換為數(shù)字。）
選擇器僅僅是$.expr[':']的一部分，不能獨(dú)立存在。
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of jQuery reference methods: Quick start guide
Feb 27, 2024 pm 06:45 PM
Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
In-depth analysis: jQuery's advantages and disadvantages
Feb 27, 2024 pm 05:18 PM
jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example,
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ??the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
How to remove the height attribute of an element with jQuery?
Feb 28, 2024 am 08:39 AM
How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element
Understand the role and application scenarios of eq in jQuery
Feb 28, 2024 pm 01:15 PM
jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s
Introduction to how to add new rows to a table using jQuery
Feb 29, 2024 am 08:12 AM
jQuery is a popular JavaScript library widely used in web development. During web development, it is often necessary to dynamically add new rows to tables through JavaScript. This article will introduce how to use jQuery to add new rows to a table, and provide specific code examples. First, we need to introduce the jQuery library into the HTML page. The jQuery library can be introduced in the tag through the following code:
