與Ajax同樣重要的jQuery（2）
練習9：
² 點選button 列印radio checkbox select 中選中項的值
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ // 點選button 列印radio checkbox select 中選中項的值 $("#mybutton").click(function(){ // 列印選中性別的值 $("input[name='gender']:checked").each(function(){ alert($(this).val()); }); // 列印愛好 $("input[name='hobby']:checked").each(function(){ alert($(this).val()); }); // 列印城市 $("select[name='city'] option:selected").each(function(){ alert($(this).val()); }); }); }); </script> </head> <body> 性別 ：<input type="radio" name="gender" value="男" /> 男 <input type="radio" name="gender" value="女"/> 女 <br/> 愛好: <input type="checkbox" name="hobby" value="體育" />體育 <input type="checkbox" name="hobby" value="讀書" />讀書 <input type="checkbox" name="hobby" value="音樂" />音樂 <input type="checkbox" name="hobby" value="旅遊" />旅遊 <br/> 城市 ：<select name="city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州">廣州</option> </select><br/> <input type="button" value="獲取選中的值 " id="mybutton" /> </body>
3.jQuery選擇器總結
①：物件訪問核心方法
each(function(){}) 遍歷集合
size()/length屬性 返回集合長度
index() 查詢目標元素是集合中第幾個元素
②：CSS樣式操作
css(name,value) css({name:value,name:value}); 同時修改多個CSS樣式
基本過濾選擇器與 篩選過濾 API功能是相同
$("tr:first") 等價於 $("tr").first()
③：九種選擇器重點
l 基本選擇器和層級選擇器 鎖定元素
l 使用屬性過濾選擇器和內容過濾選擇器 具體選中元素
l 表單操作 :checked :selected 選中 表單選中元素
配合基本過濾選擇器，縮小選中的範圍
4.jQuery的DOM操作
使用jQuery的九種選擇器可以基本選中需要操作的物件，但是為了提高jQuery的查詢效率，可以結合jQuery的內建查詢函式一起使用
①：查詢
children([expr]) 獲取指定的子元素
find(expr) 獲取指定的後代元素
parents([expr]) 獲得祖輩元素
parent() 獲取父元素
next([expr]) 獲取下一個兄弟元素
prev([expr]) 獲取前一個兄弟元素
siblings([expr]) 獲取所有兄弟元素
在XML 解析中 find 方法使用最多
對查詢結果進行遍歷操作 each(function(){… }) ，在each函式中可以通過this 獲得DOM物件，$(this) 獲得jQuery物件
②：屬性操作
設定屬性 attr(name,value)
讀取屬性 attr(name)
同時設定多個屬性 attr({name:value,name:value... });
attr("checked","true") 等價於 prop("checked")
練習1：
² 點選一個button，動態設定 div的屬性 id name class
² 嘗試能否設定一個不存在的屬性？
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 點選一個button，動態設定 div的屬性 id name class
// 嘗試能否設定一個不存在的屬性？
$(function(){
$("#mybutton").click(function(){
// 可以設定一個不存在屬性
$("#mydiv").attr({'id':'xxxdiv','name':'xxxxname','class':'xxxclass','itcastinfo':'xxxxitcast'});
});
});
</script>
</head>
<body>
<div id="mydiv">itcast</div>
<input type="button" value="設定屬性" id ="mybutton" />
</body>
③：CSS操作
通過attr屬性設定/獲取 style屬性
attr('style','color:red'); // 新增style屬性
設定CSS樣式屬性
css(name, value) 設定一個CSS樣式屬性
css(properties) 傳遞key-value物件，設定多個CSS樣式屬性
設定class屬性
addClass(class) 新增一個class屬性
removeClass([class]) 移除一個class屬性
toggleClass(class)如果存在（不存在）就刪除（新增）一個類
練習2：
² 點選button，使一個div的背景顏色變為 黃色
² 通過toggleClass(class) 實現點選 字型變為紅色，再點選樣式還原
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 點選button，使一個div的背景顏色變為 黃色
$("#button1").click(function(){
$("#div1").css("background-color","yellow");
});
// 通過toggleClass(class) 實現點選 字型變為紅色，再點選樣式還原
$("#button2").click(function(){
$("#div1").toggleClass("divclass");
});
});
</script>
<style type="text/css">
.divclass {
color:red;
}
</style>
<body>
<div id="div1">AAAAAA</div>
<input type="button" value="背景顏色變為黃色" id="button1" />
<input type="button" value="字型顏色開關" id="button2" />
</body>
④：HTML程式碼&文字&值操作
l 讀取和設定某個元素中HTML內容
html() 讀取innerHTML
html(content) 設定innerHTML
l 讀取和設定某個元素中的文字內容
text() 讀取文字內容
text(content) 設定文字內容
l 文字框、下拉列表框、單選框 選中的元素值
val() 讀取元素value屬性
val(content) 設定元素value屬性
練習3：
² <div><p>傳智播客</p></div> 獲取div中 html和text 對比
² 使用val() 獲得文字框、下拉框、單選框選中的value
² 測試能否通過 val() 設定單選框、下拉框的選中效果
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// <div><p>傳智播客</p></div> 獲取div中 html和text 對比
var $obj = $("<div><p>傳智播客</p></div>");
// alert($obj.html());
// alert($obj.text());
//使用val() 獲得文字框、下拉框、單選框選中的value
$("#mybutton").click(function(){
alert($("#username").val());
alert($("input[name='gender']:checked").val());
alert($("#city").val());
});
//測試能否通過 val() 設定單選框、下拉框的選中效果
$("#city").val("廣州");
$("input[name='gender']").val(['女']);
});
</script>
</head>
<body>
使用者名稱 <input type="text" id="username" /><br/>
性別 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" /> 女<br/>
城市 <select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
</select><br/>
<input type="button" value="獲取val" id="mybutton"/>
</body>
設定 val控制radio select checkbox 選中
$("#city").val("廣州");
$("input[name='gender']").val(['女']);
練習4：
² 輸出所有select元素下的所有option元素中對應的文字內容
例如:<option value="中專">中專^^</option> 輸出--->中專^^
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#edu option").each(function(){
alert($(this).text());
});
});
</script>
</head>
<body>
<select id="edu">
<option>博士</option>
<option>碩士</option>
<option>本科</option>
<option>大專</option>
</select>⑤：jQuery新增元素
l 建立元素
拼接好HTML程式碼片段 $(html片段) ---- 產生jQuery物件
l 內部插入：
$node.append($newNode) 內部結尾追加
$node.prepend($newNode) 內部開始位置追加
l 外部插入：
$node.after($newNode) 在存在元素後面追加 -- 兄弟
$newNode.insertBefore($node) 在存在元素前面追加
練習5：
² 在id=edu下增加<option value="大專">大專</option>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 追加 option 內容大專
// 建立元素
var $newNode = $("<option value='大專'>大專</option>");
// 新增元素
// $("#edu").append($newNode); // 內部結尾
// $("#edu").prepend($newNode); // 內部開始
// $("option[value='本科']").after($newNode);
$newNode.insertBefore($("option:contains('高中')"));
});
</script>
<body>
<select id="edu">
<option value="博士">博士</option>
<option value="碩士">碩士</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
</select>
⑥：jQuery刪除元素
選中要刪除元素.remove() ---- 完成元素刪除
選中要刪除元素.remove(expr) ----- 刪除特定規則元素
remove刪除節點後，事件也會刪除
detach刪除節點後，事件會保留 從1.4新API
練習6：
² 分別使用detach和remove 刪除帶有click事件的p標籤，刪除後再將p 重新加入body 檢視事件是否存在
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("p").click(function(){
alert($(this).text());
});
// 使用remove方法刪除 p元素，連同事件一起刪除
// var $p = $("p").remove();
// 使用detach刪除，事件會保留
var $p = $("p").detach();
$(document.body).append($p);
});
</script>
</head>
<body>
<p>AAA</p>
<div>BBB</div>
</body>
練習7：
² 表格資料新增與刪除練習
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#mybutton").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
// DOM新增
var $tr =
$("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='javascript:void(0)' onclick='del(this)'>刪除</a></td></tr>");
$("table").append($tr);
});
});
function del(o) {
// 物件o 代表a 標籤
$(o).parents("tr").remove();
}
</script>
</head>
<body>
<form>
姓名 <input type="text" id="name" />
郵箱 <input type="text" id="email" />
手機<input type="text" id="phone" /><br/>
<input type="button" value="提交" id="mybutton"/>
</form>
<hr/>
<table border="1" width="400">
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>手機</th>
<th>刪除</th>
</tr>
</table>
⑦：jQuery複製和替換
l 複製節點
$(“p”).clone(); 返回節點克隆後的副本，但不會克隆原節點的事件
$(“p”).clone(true); 克隆節點，保留原有事件
l 替換節點
$("p").replaceWith("<b>ITCAST</b>"); 將所有p元素，替換為"<b>ITCAST</b>“
$(“<b>ITCAST</b>”).replaceAll(“p”); 與replaceWith相反
⑧：全選以及左右移動練習
練習8：
² 全選練習
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 全選/ 全不選
$("#checkallbox").click(function(){
var isChecked = this.checked;
$("input[name='hobby']").each(function(){
this.checked = isChecked;
});
});
// 全選
$("#checkAllBtn").click(function(){
$("input[name='hobby']").attr("checked","checked");
});
// 全不選
$("#checkAllNotBtn").click(function(){
$("input[name='hobby']").removeAttr("checked");
});
// 反選
$("#checkOppoBtn").click(function(){
$("input[name='hobby']").each(function(){
this.checked = !this.checked;
});
});
});
</script>
<body>
請選擇您的愛好<br/>
<input type="checkbox" id="checkallbox" /> 全選/全不選 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="籃球" /> 籃球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
<input type="button" value="全選" id="checkAllBtn" />
<input type="button" value="全不選" id="checkAllNotBtn" />
<input type="button" value="反選" id="checkOppoBtn" />
</body>
練習9：
² 左右移動練習
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//選中的去右邊
$("#chooseToRight").click(function(){
$("#right").append($("#left option:selected"));
});
// 全去右邊
$("#allToRight").click(function(){
$("#right").append($("#left option"));
});
// 全去左邊
$("#allToLeft").click(function(){
$("#left").append($("#right option"));
});
//選中的去左邊
$("#chooseToLeft").click(function(){
$("#left").append($("#right option:selected"));
});
});
</script>
</head>
<body>
<select id="left" multiple="multiple" size="15">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>杭州</option>
<option>武漢</option>
<option>廣州</option>
<option>深圳</option>
<option>南京</option>
</select>
<input type="button" value="-->" id="chooseToRight" />
<input type="button" value="==>" id="allToRight" />
<input type="button" value="<--" id="chooseToLeft" />
<input type="button" value="<==" id="allToLeft" />
<select id="right" multiple="multiple" size="15">
<option>鄭州</option>
</select>
</body>
5.jQuery事件
①：事件繫結
傳統js 一般一個物件只能繫結某種事件一個函式
jQuery 支援對同一個物件，同一個事件可以繫結多個函式
繫結事件函式到物件有兩種寫法
寫法一
$("div").click(function(){
……
});
取消繫結：$("div").unbind("click");
*** live 為滿足條件物件，實時追加繫結 、取消live事件用die方法
Demo:
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 使用live繫結
$("div").live("click",function(){
alert($(this).text());
});
// $("div").click(function(){
// alert($(this).text());
// });
// 解除繫結
// $("div").unbind("click");
// 新加入div元素沒有之前div元素繫結事件
$(document.body).append($("<div>CCC</div>"));
});
</script>
</head>
<body>
<div>AAA</div>
<div>BBB</div>
</body>
②：事件一次性繫結和自動觸發
一次性事件 one(type, [data], fn) 為物件繫結一次性事件，只有一次有效
觸發事件 trigger(type, [data]) 觸發目標物件指定的事件執行
練習1：
² 為頁面內所有p 元素繫結 一次性事件，點選列印p元素中內容
² 頁面內有兩個按鈕，點選按鈕1， 觸發按鈕2的 click事件執行
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//為頁面內所有p 元素繫結 一次性事件，點選列印p元素中內容
$("p").one("click",function(){
alert($(this).text());
});
//頁面內有兩個按鈕，點選按鈕1， 觸發按鈕2的 click事件執行
$("#mybutton1").click(function(){
alert("點選了按鈕一");
// 觸發2 click事件
$("#mybutton2").trigger("click");
});
$("#mybutton2").click(function(){
alert("點選了按鈕二");
});
});
</script>
<body>
<p>傳智播客</p>
<input type="button" value="按鈕一" id="mybutton1" />
<input type="button" value="按鈕二" id="mybutton2" />
</body>
③：事件切換
hover(mouseover,mouseout) 模擬滑鼠懸停事件
toggle(fn1,fn2,fn3...) ; 滑鼠點選一次 觸發一個函式
練習1：
² 編寫一個div元素，游標移動上去 字型變為紅色，移開後 變為藍色
² 建立三張圖片，頁面顯示第一張，點選切換到第二張，點選切換到第三張
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 編寫一個div元素，游標移動上去 字型變為紅色，移開後 變為藍色
$("div").hover(function(){
// over
$(this).css("color","red");
},function(){
// out
$(this).css("color","blue");
});
// 建立三張圖片，頁面顯示第一張，點選切換到第二張，點選切換到第三張
$("img").toggle(function(){
$(this).attr("src","2.jpg");
},function(){
$(this).attr("src","3.jpg");
},function(){
$(this).attr("src","4.jpg");
});
});
</script>
<body>
<div>滑鼠移動上 會變色的內容！</div>
<img src="1.jpg" width="240" height="180" />
</body>④：事件阻止預設動作和傳播
l 預設動作阻止
$("a").click(function(event){
event.preventDefault();
// do something
});
l 取消事件冒泡
$("p").click(function(event){
event.stopPropagation();
// do something
});
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 通過event阻止預設事件
$("#dellink").click(function(event){
var isConfirm = window.confirm("確認刪除嗎？");
if(!isConfirm){
event.preventDefault();
}
});
$("div").click(function(){
alert($(this).html());
});
// 阻止事件冒泡
$("p").click(function(event){
alert($(this).html());
event.stopPropagation();
});
});
</script>
<body>
<a href="del?id=1" id="dellink">刪除資料</a>
<div><p>資訊</p></div>
</body>