Web全棧~18.jQuery
上一期
jQuery是JavaScript的一個函數庫,對JavaScript進行了一個封裝。jQuery將常用的、複雜的操作進行函數化封裝，直接調用，大大降低了使用JavaScript的難度，改變了使用JavaScript的習慣。 jQuery能做的JavaScript也能做，但使用jQuery能大幅提高開發效率。
JavaScript中獲取元素內容的方式
getElementById( ) ：返回一個節點對象。
getElementsByName( )：返回多個（節點數組）。
getElementsByTagName( ) ：返回多個（節點數組）
jQuery選擇器
基本選擇器
標籤選擇器 $("a")
ID選擇器 $("#id") $("p#id")
類選擇器 $(".class") $("h2.class")
通配選擇器 $("*")
並集選擇器$("elem1,elem2,elem3")
後代選擇器$(ul li)
父子選擇器 $(ul>li)
屬性選擇器
[attribute] 匹配包含給定屬性的元素
[attribute1][attribute2] 複合屬性選擇器，需要同時滿足多個屬性
[attribute=value] 匹配給定的屬性是某個特定值的元素
[attribute!=value] 匹配所有屬性不等於特定值的元素
[attribute^=value] 匹配給定的屬性是以某些值開始的元素
[attribute$=value] 匹配給定的屬性是以某些值結尾的元素
[attribute*=value] 匹配給定的屬性是以包含某些值的元素
位置選擇器
針對整個頁面而言的位置選擇器
first 獲取第一個元素
:last 獲取最後一個元素
odd 匹配所有索引值爲奇數的元素，從 0 開始計數
even匹配所有索引值爲偶數的元素，從 0 開始計數
eq(n) 匹配一個給定索引值的元素
gt(n) 匹配所有大於給定索引值的元素
lt(n) 匹配所有小於給定索引值的元素
針對上級標籤而言的位置選擇器
first-child 匹配第一個子元素
last-child匹配最後一個子元素
only-child如果某個元素是父元素中唯一的子元素，將會被匹配
nth-child(n) :nth-child(odd|even) :nth-child(xn+y) 匹配其父元素下的第N個子或奇偶元素
表單選擇器
關於表單項的選擇器
text :password :radio :checkbox :hidden :file :submit
input 匹配所有 input, textarea, select 和 button 元素
關於表單項狀態的選擇器
selected :checked :enabled :disabled
hidden :visible :not
注意$("input")和$(":input")的區別
$("input")：標籤選擇器，只匹配input標籤
$(":input")： 匹配所有 input, textarea, select 和 button 元素
表單驗證案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function checkForm(){
//判斷用戶名是否符合驗證規則
var flag1 = checkUser();
//判斷郵箱是否符合驗證規則
var flag2 = checkEmail();
//如果均符合驗證規則，驗證成功，否則驗證出錯
if(flag1 && flag2){
return true;
}else{
return false;
}
}
function checkUser(){
//清空上次檢查的提示信息
//$("#usererror").html("");
$("#usererror").empty();
// 用戶名不能爲空
var user = $("#user").val();
if(user == ""){
//alert("用戶名不能爲空");
$("#usererror").html("用戶名不能爲空");
return false;
}
// 用戶名長度大於6
if(user.length <=6){
//alert("用戶名長度需要大於6");
$("#usererror").html("用戶名長度需要大於6");
return false;
}
// 用戶名中不能有數字 ad34adf
for(var i=0;i<user.length;i++){
var ch = user.charAt(i);
if(ch>='0' && ch<='9' ){
//alert("用戶名中不能有數字");
$("#usererror").html("用戶名中不能有數字");
return false;
}
}
return true;
//return undefined
}
function checkEmail(){
//清空上次驗證郵箱的提示信息
$("#emailerror").empty();
var email = $("#email").val();
if(email.indexOf('@')<0){
//alert("郵箱中必須有@");
$("#emailerror").html("郵箱中必須有@");
return false;
}
if(email.indexOf('.')<0){
//alert("郵箱中必須有.");
$("#emailerror").html("郵箱中必須有.");
return false;
}
return true;
}
function operUser(){
$("#user").select();
//$("#user").val("");
}
</script>
</head>
<body>
<table id="center" border="0" cellspacing="0" cellpadding="0">
<form action="doRegister.jsp" method="post" name="myform" onsubmit="return checkForm()" >
<tr>
<td >您的姓名：</td>
<td>
<input id="user" type="text" onfocus="operUser()" onblur="checkUser()"/>
<div id="usererror" style="display: inline;"></div>
</td>
</tr>
<tr>
<td >輸入密碼：</td>
<td><input id="pwd" name="pwd" type="password"/></td>
</tr>
<tr>
<td >再輸入一遍密碼：</td>
<td><input id="repwd" type="password"/></td>
</tr>
<tr>
<td >您的Email：</td>
<td>
<input id="email" type="text" onblur="checkEmail()"/>
<span id="emailerror"></span>
</td>
</tr>
<tr>
<td> </td>
<td ><input name="btn" type="submit" value="註冊" class="rb1" /></td>
</tr>
</form>
</table>
</body>
</html>
購物車案例
需求:使用jQuery實現對購物車的增刪查改全選反選功能。單個選擇複選框的時候如果滿了,全選框也必須自動勾上。修改數量的時候數量變成文本格式,修改數量按鈕自身變成確定按鈕。修改的時候要檢查數量是否正確。
做這個的目的就和我寫數據結構一樣,主要是爲了順順手。因爲這些選擇器也好還是事件也好都太多了。我不可能一個一個去背,只能說下次要用的時候看看文檔可以上手。待會兒也會用到各種選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
//全選操作
$(function(){
//全選操作
$("#chks").click(function(){
//獲取全選框的值,this就相當於是chks。
//prop會根據是否選中返回true和false,也可以在後面修改true和false
var flag = $(this).prop("checked");
//這句話的意思是將所有input name = chk 的值都根據flag改變
//觸發chks單機事件勾選了的時候flag是true,沒勾選的時候就是false
//所以當全選框是true的時候,下面全改成true。全選是false下面就全改成false就好了
$("input[name=chk]").prop("checked",flag);
});
//爲了防止複選框被一個一個點滿的時候全選框沒有被改變.所以這裏要處理一下
//使用了該選擇器後,用戶每次點擊複選框,都會在這裏進行判斷一下
$("input[name=chk]").click(judgeAll());
//反選操作
$("#fx").click(function(){
//獲取所有複選框
$("input[name=chk]").each(function(){
//獲取原來的值
var flag = $(this).prop("checked");
//修改相反的值
$(this).prop("checked",!flag);
})
//直接調用就可以了
judgeAll();
});
/**
* 新增
*/
$("#addRow").click(function(){
//創建一個
var newRow = $('<tr>'+
'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
'<td>《c primer plus》</td>'+
'<td>Stephen Prata</td>'+
'<td>10</td>'+
'<td>'+
'<input type="button" name="aa" id="" value="修改數量" οnclick="updateAmount(this)"/>'+
'<input type="button" name="" id="" value="刪除" οnclick="delRow(this)"/>'+
'</td>'+
'</tr>');
//======================================
//這裏用到了位置選擇器,last是最後一個。如果要放在第一個就用first
$("tr:last").after(newRow);
});
/**
* 多行刪除
*/
//這個對應的是橫着那一排的刪除id。不是單獨刪除的那個單擊事件
$("#delRow").click(function(){
//獲取所有被選中的複選框
var toDelArr = $("input[name=chk]:checked");
//先判斷是否選擇,如果沒選就提示
if(toDelArr.length == 0){
alert("至少選中一行");
}else{
//toDelArr.remove();是反面教材,因爲剛剛只是獲得複選框。直接刪自然也只會刪掉複選框
//toDelArr.parent().remove();也不行,因爲它只會刪掉當前的td。要想刪掉tr需要兩個parent
//toDelArr.parent().parent().remove(); 這種寫法雖然可以但是也太麻煩了
//最好的寫法還是這種。parents裏面一定要寫東西。不然整個頁面都刪掉了。。。
toDelArr.parents("tr").remove();
}
});
/**
* 複製多行
*/
$("#copyRow").click(function(){
//獲取所有被選中的複選框
var toCopyArr = $("input[name=chk]:checked");
//先判斷是否選擇,如果沒選就提示
if(toCopyArr.length == 0){
alert("至少選中一行");
}else{
//each是在循環,所以循環裏面一個一個加就相當於多行增加
toCopyArr.each(function(){
//複製一份
var cloneRow = $(this).parents("tr").clone();
//粘貼一份
$("#ta").append(cloneRow);
});
}
});
})
/**
* 爲了讓反選和普通選擇都進行判斷並且代碼不用重複寫
* 所以這裏就封裝成一個函數讓它們調用
*/
function judgeAll(){
//獲取所有的複選框
var arr = $("input[name=chk]");
//先默認全部選中
var flag = true;
//arr.each就相當於是在循環遍歷
arr.each(function(){
//判斷所有複選框是否被選中
var flagplus = $(this).prop("checked");
//假如有一個沒被選中,那麼全選框就是false
if(flagplus == false){
flag = false;
return;
}
});
//決定全選框的值
$("input[name=chks]").prop("checked",flag);
}
/**
* 修改當前數量
*/
function updateAmount(obj){
//數量變成文本框的值,文本框變成數量的值
//獲取原來的數量 prev是指修改數量的前面一個表格。不然就會把自己變成下面input的格式
//如果要把input格式換成作者那個位置,可以用兩個prev()試試
var amountCell = $(obj).parent().prev();
var amount = amountCell.html();
//將指定位置的td改成input文本格式
amountCell.html('<input type="text" value = "'+ amount +'" οnblur="checkAmount(this)"/>');
//把修改按鈕變成確定按鈕
//獲得當前按鈕單元格
var buttonCell = $(obj).parent();
//準備新按鈕
var newButton = $('<input type="button" name="" id="" value="確定" οnclick="confirmAmount(this)"/>'+
'<input type="button" name="" id="" value="刪除" οnclick="delRow(this)" />');
//添加新按鈕
buttonCell.html(newButton);
}
/**
* 確定數量
* @param {Object} obj
*/
function confirmAmount(obj){
//文本框變成數量
//獲取原來的數量
var amountInput = $(obj).parent().prev().find("input");
var amount = amountInput.val();
//修改文本框的數量
$(obj).parent().prev().html(amount);
//確定按鈕變成修改按鈕
//獲得當前按鈕單元格
var buttonCell = $(obj).parent();
//準備新按鈕
var newButton = $('<input type="button" name="" id="" value="修改數量" οnclick="updateAmount(this)"/>'+
'<input type="button" name="" id="" value="刪除" οnclick="delRow(this)" />');
//添加新按鈕
buttonCell.html(newButton);
}
//判斷數量是否正確
function checkAmount(obj){
//獲取值
var amount = $(obj).val();
//判斷是否正確
if(isNaN(amount) || amount < 1 || parseInt(amount) != amount){
alert("必須是大於0的整數!");
}
}
/**
* 刪除當前行
*/
function delRow(obj){
//這裏就是一句話解決了。。。
$(obj).parents("tr").remove();
}
</script>
</head>
<body>
<h3>購物車</h3>
<hr />
<input type="button" id="fx" value="反選" />
<input type="button" id="addRow" value="新增一行" />
<input type="button" id="delRow" value="刪除行"/>
<input type="button" id="copyRow" value="複製行" />
<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
<tr>
<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
<td width="200px">書名</td>
<td width="200px">作者</td>
<td width="200px">數量</td>
<td width="200px">操作</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="2"/></td>
<td>《計算機組成原理》</td>
<td>Alan Clements</td>
<td>10</td>
<td>
<input type="button" name="aa" id="" value="修改數量" onclick="updateAmount(this)"/>
<input type="button" name="" id="" value="刪除" onclick="delRow(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="3" /></td>
<td>《深入理解計算機系統》</td>
<td>布賴恩特</td>
<td>10</td>
<td>
<input type="button" name="" id="" value="修改數量" onclick="updateAmount(this)"/>
<input type="button" name="" id="" value="刪除" onclick="delRow(this)" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="4" /></td>
<td>《編譯原理》</td>
<td>Alfred V．Aho</td>
<td>30</td>
<td>
<input type="button" name="" id="" value="修改數量"οnclick="updateAmount(this)"/>
<input type="button" name="" id="" value="刪除" onclick="delRow(this)"/>
</td>
</tr>
</table>
</body>
</html>