JavaWeb前端開發知識總結(jQuery)
1. jQuery技術
JQuery是一個javascript的框架(javascript的類庫).對傳統的javascript進行了封裝.
jQuery文件的引入
<script type="text/javascript" src="jquery.js"></script>jQuery基礎語法
# 基礎語法是:$(selector).action()
* 美元符號定義jQuery;
* 選擇符(selector)"查詢"和"查找"HTML元素;
* jQuery的action()執行對元素的操作. 1.1 文檔就緒函數
文檔加載完成時執行的jQuery代碼.
// 傳統的js代碼實現文檔加載入口函數
window.onload = function() {}
// jQuery方式的入口函數,方式1
$(document).ready(function(){JQ代碼});
// jQuery方式的入口函數,方式2(方式1的簡寫)
$(function(){JQ代碼});傳統的javascript的入口函數和jQuery入口函數的區別
# 傳統的onload方式:
* 一個html頁面中只能有一個,只能調用一次;
* 在文檔加載完成後才執行,效率低下;
jQuery方式:
* 一個html頁面中可以有多個(可以調用多次),按照由上至下順序執行;
* 在DOM對象繪製完成時就執行,效率高;jQuery對象和javascript對象間的轉換
js對象轉換爲jq對象: $(js對象)
jq對象轉換爲js對象: jq對象[0] (或jq對象get(0)) –> 相當於是通過jq方式獲取的是js對象數組,通過索引獲取其中的js對象
// js對象轉換爲jq對象
var tdiv = document.getElementById("tDiv");
$(tdiv).html("nihao");
// jq對象轉換爲
$("#tDiv")[0].innerHTML="java";
$("#tDiv")get(0).innerHTML="java";1.2 jQuery的效果
注意事項:效果的前提被操作的元素必須先聲明display:none屬性.
# 顯示/隱藏:show()和hide()方法
* 使用一:Jq對象.方法名();
* 使用二:Jq對象.方法名(“slow”); // slow,normal,fast
* 使用三:Jq對象.方法名(毫秒值); // 1000
* 使用四:Jq對象.方法名(毫秒值,function(){});
# 向下/上滑動:slideDown()和slideUp()方法
* 使用一:Jq對象.方法名();
* 使用二:Jq對象.方法名(“slow”); // slow,normal,fast
* 使用三:Jq對象.方法名(毫秒值); // 1000
* 使用四:Jq對象.方法名(毫秒值,function(){});
# 淡入/淡出:fadeIn()和fadeOut()方法
* 使用一:Jq對象.方法名();
* 使用二:Jq對象.方法名(“slow”); // slow,normal,fast
* 使用三:Jq對象.方法名(毫秒值); // 1000
* 使用四:Jq對象.方法名(毫秒值,function(){});
# 自定義動畫:animate()方法
# 單擊切換效果函數:toggle()方法
* Jq對象.toggle(fn1,fn2...);單擊第一下的時候執行fn1,單擊第二下執行fn2...案例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery效果案例</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script>
// 入口函數
$(function(){
// 顯示圖片
$("#btu1").click(function(){
$("#imgId").show(2000);
});
// 隱藏圖片
$("#btu2").click(function(){
$("#imgId").hide(1000);
});
// 下滑圖片
$("#btu3").click(function(){
$("#imgId").slideDown(2000);
});
// 上滑圖片
$("#btu4").click(function(){
$("#imgId").slideUp(2000);
});
// 淡入圖片
$("#btu5").click(function(){
$("#imgId").fadeIn(2000);
});
// 淡出圖片
$("#btu6").click(function(){
$("#imgId").fadeOut(2000);
});
// toggle方法,通過id爲conP的段落控制id爲texP的段落的切換效果
$("#conP").click(function(){
// 可以使用toggle(),slideToggle(),fadeToggle()三種方式
$("#texP").slideToggle(500);
});
});
</script>
</head>
<body>
<div>
<input type="button" id="btu1" value="顯示圖片" />
<input type="button" id="btu2" value="隱藏圖片" />
<input type="button" id="btu3" value="下滑圖片" />
<input type="button" id="btu4" value="上滑圖片" />
<input type="button" id="btu5" value="淡入圖片" />
<input type="button" id="btu6" value="淡出圖片" />
<hr />
<div id="imgId" style="display: none;">
<img src="img/test.jpg" />
</div>
</div>
<hr />
<div>
<p id="conP" style="width: 400px;background-color: burlywood;">單擊切換段落出現和隱藏</p>
<p id="texP" style="width: 400px;height: 200px;background-color: burlywood;">
give me some sunshine<br />
give me some rain
</p>
<p >
give me another chance<br />
I want to grow up once again
</p>
</div>
</body>
</html>1.3 jQuery選擇器
下面介紹各種常用的jQuery選擇器:
1.3.1 基本選擇器
# id選擇器
* 用法:$(“#id”)
* $("#one").css("background", "red"); // 選擇ID爲one的元素,將其背景色修改爲red
# 類選擇器
* 用法:$(“.類名”)
* $(".mini").css({"background":"red","border":"2px solid blue"}); // 選擇class屬性值爲mini的元素
# 元素選擇器
* 用法:$("元素名稱")
* $("div").css("background", "red"); // 選擇所有的div標籤元素
# 通配符選擇器
* 用法:$("*")
* $("*").css("background", "red"); // 選擇所有的標籤元素(body內)
# 並列選擇器
* 用法:$("選擇器,選擇器,選擇器")
* $("#two, span, .mini").css("background", "red"); // 選擇ID爲two或span標籤或class屬性值爲mini的元素1.3.2 層級選擇器
# 後代選擇器:
* 用法:$(祖先元素 子元素) 包括其含有的所有的指定元素(包括孫子級別的元素)
* $("#two div").css("background", "red"); // 選擇ID爲two節點中包含的所有div標籤元素
# 子元素選擇器
* 用法:$(父類元素 > 子類元素) 獲取父類元素中的第一層級的子類元素(只包含兒子元素)
* $("#two > div").css("background", "red"); // 選擇ID爲two節點中第一層級的div標籤元素
# 下一個元素
* 用法:$(元素 + 下一個元素) 緊鄰該元素的下一個同輩元素(元素的類型不一定相同)
* $("#two + div").css("background", "red"); // 選擇ID爲two元素的緊鄰的div元素
# 兄弟元素
* 用法:$(元素 ~ 下一個元素) 該元素後面的所有的同輩元素
* $("#two ~ div").css("background", "red"); // 選擇ID爲two元素後面爲div標籤的所有元素1.3.3 基本過濾器選擇器
# 奇數選擇器:匹配所有索引值爲奇數的元素,從0開始計數
* 用法:$(:odd)
* $("tr:odd").addClass("odd"); // 選擇所有的tr標籤中所有的奇數行,添加其class屬性爲odd類
# 偶數選擇器:匹配所有索引值爲偶數的元素,從0開始計數
* 用法:$(:even)
* $("tr:even").addClass("even"); // 選擇所有的tr標籤中所有的偶數行,添加其class屬性爲even類1.3.4 內容選擇器
# 匹配選擇器:匹配包含給定文本的元素
* 用法:$(:contains(text))
* $("div:contains('a')").css("background", "red"); // 選擇div標籤元素包含字符串a的所有的div1.3.5 屬性選擇器
# 匹配屬性選擇器:匹配包含給定屬性的元素
* 用法:$(元素[屬性名])
* $("div[id]").css("background", "red"); // 獲取所有具有ID屬性的div元素
# 匹配屬性值選擇器:匹配給定的屬性是某個特定值的元素
* 用法:$(元素[屬性名==特定值])
* $("div[id='four']").css("background", "red"); // 選擇ID屬性值爲four的所有div元素
# 匹配屬性值不爲特定值:匹配所有不含有指定的屬性,或者屬性不等於特定值的元素
* 用法:$(元素[屬性名 != 特定值])
* $("div[id !='four']").css("background", "red"); // 選擇ID屬性值不是four的所有div元素1.3.6 表單元素選擇器
# input元素選擇器:
* 用法:$(選擇器:input) 獲取指定選擇器或元素下的所有的input元素
* $(form:input); // 獲取form表單下所有的input元素
# checkbox元素選擇器:匹配所有複選框
* 用法:$(選擇器:checkbox) 獲取指定選擇器或元素下的所有的checkbox元素1.3.7 表單屬性選擇器
# checked選擇器:匹配所有選中的被選中元素(複選框,單選框等,不包括select中的option)
* 用法:$(選擇器:checked) 獲取指定選擇器或標籤元素下的所有的checked爲true的元素
* $(input:checked); // 獲取input標籤下checked屬性爲true的所有元素
# selected選擇器:匹配所有選中的option元素
* 用法:$(選擇器:selected) 獲取指定選擇器或標籤元素下的所有的selected爲true的元素
* $(select:selected); // 獲取select標籤下所有的selected屬性爲true的元素1.3.8 jQuery選擇器綜合案例
/*style.css*/
html,
body {
width: 100%;
height: 100%;
}
.actionDiv {
width: 100%;
background: aquamarine;
}
.actionDiv span {
color: #000000;
font-size: 24px;
}
.btnDiv {
width: 100%;
background: burlywood;
}
.itemDiv {
width: 200px;
height: 200px;
background: crimson;
margin-left: 5px;
margin-top: 5px;
float: left;
color: #FFFFFF;
}
.itemSpan {
display: block;
width: 200px;
height: 200px;
background: seagreen;
margin-left: 5px;
margin-top: 5px;
float: left;
color: #FFFFFF;
}
#container {
height: auto;
width: 100%;
background: bisque;
border: 1px solid #ffffff;
}
.addDiv {
width: 100px;
height: 100px;
color: #FFFFFF;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/*Safari and Chrome*/
}
.borderDiv {
width: 40px;
height: 40px;
margin: 5px auto;
border: 1px solid #DC143C;
}
.item {
width: 60px;
height: 60px;
margin-left: 5px;
margin-top: 5px;
float: left;
color: #000000;
background: cornflowerblue;
}
.addBg {
background: black;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left: 0px;
}
to {
left: 200px;
}
}<!DOCTYPE html>
<!--jQuery選擇器練習-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
// jquery練習
$(function(){
// 恢復顏色
$("#reset").bind("click",function(){
// window.location = location.href;
location.reload();
});
// 改變id=container元素的背景顏色
$("#btn1").bind("click",function(){
// $("#container").css("background","blue");
$("#container").attr("style","background: red;")
});
// 改變class=itemDiv元素的背景顏色
$("#btn2").bind("click",function(){
$(".itemDiv").attr("style","background: blue;");
});
// 改變所有div元素的背景顏色
$("#btn3").bind("click",function(){
$("div").attr("style","background: yellow;");
});
// 改變所有元素的背景顏色
$("#btn4").bind("click",function(){
$("*").attr("style","background: green;");
});
// 改變id=itemDiv3和span標籤的背景顏色
$("#btn5").bind("click",function(){
$("#itemDiv3,span").attr("style","background: greenyellow;");
});
// 隱藏class=spanDiv的元素
$("#btn6").bind("click",function(){
$(".itemDiv").attr("hidden",true);
});
// 獲得id=container元素的內容體
$("#btn7").bind("click",function(){
var data = $("#container").html();
alert(data);
});
// 設置id=container元素的內容體(添加一個class=addDiv的div)
$("#btn8").bind("click",function(){
$("#container").append("<div class='addDiv'>addDiv</div>");
});
// 改變id=container下面所有class=itemDiv的背景顏色
$("#btn9").bind("click",function(){
$("#container .itemDiv").attr("style","background: hotpink;")
});
// 獲得id=itemDiv1下面所有class=item的個數
$("#btn10").bind("click",function(){
var length = $("#itemDiv1 .item").length;
alert(length);
});
// 獲得所有class=item的個數
$("#btn11").bind("click",function(){
var length = $(".item").length;
alert(length);
});
// 刪除id=itemSpan下面所有的元素
$("#btn12").bind("click",function(){
$("#itemSpan *").remove();
});
// 將id=itemDiv4下面的元素追加到id=itemDiv7後面
$("#btn13").bind("click",function(){
$("#itemDiv4 *").appendTo("#itemDiv7");
});
// 給id=itemDiv4下面class=item的元素的div子元素添加一個addBg的class
$("#btn14").bind("click",function(){
$("#itemDiv4>div[class='item']").addClass("addBg"); // 沒有效果,item的將addBg的設置給覆蓋了
});
// 隱藏id=itemSpan下面所有class=item的元素
$("#btn15").bind("click",function(){
$("#itemSpan .item").attr("hidden",true);
});
// 將id=itemSpan下面所有class=item的元素的個數寫入id=itemDiv7的內容體
$("#btn16").bind("click",function(){
$("#itemDiv7").html($("#itemDiv7").text()+$("#itemSpan .item").length);
});
// 改變id=container下面第一層子元素的背景顏色
$("#btn17").bind("click",function(){
$("#container > *").attr("style","background: blueviolet;")
});
// 選中所有的複選框
$("#btn18").bind("click",function(){
$(":checkbox").attr("checked",true);
});
// 選中所有選中的複選框
$("#btn19").bind("click",function(){
$(":checkbox[checked='checked']").each(function(x,n){
alert(n.value);
});
});
// 給用戶名輸入框設置一個value(隨意值)
$("#btn20").bind("click",function(){
$(":input[name='username']").val("somnus");
});
// 設置密碼輸入框只讀
$("#btn21").bind("click",function(){
$(":input[name='password']").attr("readonly","readonly");
});
// 選中省級下拉框的上海下拉項
$("#btn22").bind("click",function(){
// $("option[value='上海']").attr("selected","selected");
$("#province_").attr("value","上海");
});
// 選中性別單選按鈕中的女
$("#btn23").bind("click",function(){
$(":radio[value='女']").attr("checked","checked");
});
// 向省級下拉框中添加下拉項（數據隨意）
$("#btn24").bind("click",function(){
$("#province_").append("<option value='成都'>成都</option>");
$("#province_").append("<option value='成都'>成都</option>");
$("#province_").append("<option value='重慶'>重慶</option>");
});
});
</script>
</head>
<body>
<div class="actionDiv">
<span>
一.基本選擇器練習
<input type="button" id="reset" value="恢復" style="font-size: 20px;font-weight: 5px;"/>
</span>
<div class="btnDiv">
<input type="button" id="btn1" value="改變id=container元素的背景顏色" />
<input type="button" id="btn2" value="改變class=itemDiv元素的背景顏色" />
<input type="button" id="btn3" value="改變所有div元素的背景顏色" />
<input type="button" id="btn4" value="改變所有元素的背景顏色" />
<input type="button" id="btn5" value="改變id=itemDiv3和span標籤的背景顏色" />
</div>
<div class="btnDiv">
<input type="button" id="btn6" value="隱藏class=itemDiv的元素" />
<input type="button" id="btn7" value="獲得id=container元素的內容體" />
<input type="button" id="btn8" value="設置id=container元素的內容體(添加一個class=addDiv的div)" />
</div>
<span>二.層級選擇器</span>
<div class="btnDiv">
<input type="button" id="btn9" value="改變id=container下面所有class=itemDiv的背景顏色" />
<input type="button" id="btn10" value="獲得id=itemDiv1下面所有class=item的個數" />
<input type="button" id="btn11" value="獲得所有class=item的個數" />
<input type="button" id="btn12" value="刪除id=itemSpan下面所有的元素" />
<input type="button" id="btn13" value="將id=itemDiv4下面的元素追加到id=itemDiv7後面" />
<input type="button" id="btn14" value="給id=itemDiv4下面class=item的元素的div子元素添加一個addBg的class" />
</div>
<div class="btnDiv">
<input type="button" id="btn15" value="隱藏id=itemSpan下面所有class=item的元素" />
<input type="button" id="btn16" value="將id=itemSpan下面所有class=item的元素的個數寫入id=itemDiv7的內容體" />
<input type="button" id="btn17" value="改變id=container下面第一層子元素的背景顏色" />
</div>
<span>
二.表單選擇器
</span>
<div class="btnDiv">
<input type="button" id="btn18" value="選中所有的複選框" />
<input type="button" id="btn19" value="選中所有選中的複選框" />
<input type="button" id="btn20" value="給用戶名輸入框設置一個value(隨意值)" />
<input type="button" id="btn21" value="設置密碼輸入框只讀" />
<input type="button" id="btn22" value="選中省級下拉框的上海下拉項" />
<input type="button" id="btn23" value="選中性別單選按鈕中的女" />
</div>
<div class="btnDiv">
<input type="button" id="btn24" value="向省級下拉框中添加下拉項（數據隨意）" />
</div>
</div>
<div id="container">
<div id="itemDiv1" class="itemDiv">itemDiv1<br/>
<div class="item">0-item1</div>
<div class="item">0-item2</div>
<div class="item">0-item3</div>
<div class="item">0-item4</div>
<div class="item">0-item5</div>
<div class="item">0-item6</div>
</div>
<div id="itemDiv2" class="itemDiv">itemDiv2<br/>
<div class="item">1-item1
</div>
<div class="item">1-item2</div>
<div class="item">1-item3</div>
<div class="item">1-item4</div>
<div class="item">1-item5</div>
</div>
<div id="itemDiv3" class="itemDiv">itemDiv3<br/>
<div class="item">2-item1</div>
<div class="item">2-item2</div>
<div class="item">2-item3</div>
<div class="item">2-item4</div>
</div>
<div id="itemDiv4" class="itemDiv">itemDiv4<br/>
<div class="item">3-item1</div>
<div class="item">3-item2</div>
<div class="item">3-item3</div>
<br>
<div class="item">
<div class="borderDiv"></div>
</div>
</div>
<div class="itemDiv">itemDiv5<br/>
<div class="item">4-item1</div>
<div class="item">4-item2</div>
</div>
<div class="itemDiv">itemDiv6<br/>
<div class="item">5-item1</div>
</div>
<div id="itemDiv7" class="itemDiv">itemDiv7<br/>
</div>
<span id="itemSpan" class="itemSpan">itemSpan<br/>
<div class="item">span1</div>
<div class="item">span2</div>
<div class="item">span3</div>
<div class="item">span4</div>
</span>
<br style="clear: both;">
<hr />
<form id="form" style="margin: 0 auto;width: 40%;">
用戶名：
<input type="text" name="username" id="username"/><br />
密碼：
<input type="password" name="password"/><br />
文件選擇:
<input type="file" name="file"/><br />
愛好：
<input type="checkbox" name="hobby" checked="checked" value="足球"/>足球
<input type="checkbox" name="hobby" checked="checked" value="籃球"/>籃球
<input type="checkbox" name="hobby" value="網球"/>網球<br />
省：
<select name="province" id="province_">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="南京">南京</option>
</select>
<br />
性別：
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<br />
備註：
<textarea name="desc"></textarea><br/>
普通按鈕：
<input type="button" value="普通按鈕" /><button>Button</button>
</form>
<hr />
</div>
</body>
</html>1.4 使用jQuery操作元素的屬性
1.4.1 使用css方法
# 使用:jq對象.css(屬性參數);
* $("div").css("background", "red"); // 單個參數時,屬性和屬性值用逗號隔開
* $("div").css({"background":"red","border":"2px solid blue"}); // 多個參數時,使用鍵值對形式1.4.2 使用CSS類的方法
# 添加屬性:addClass()方法
* 用法:jq對象.addClass(class類)
* $("tbody tr:odd").addClass("odd"); // 將tbody標籤內的奇數行添加樣式類odd
# 刪除屬性:removeClass()方法
* 用法:jq對象.removeClass(class類)
* $("tbody tr:odd").removeClass("odd"); // 將tbody標籤內的奇數行刪除樣式類odd1.4.3 屬性值操作方法
# attr(name):設置或返回被選元素的屬性值
* 用法:jq對象.attr(屬性名,屬性值)
* $("img").attr("src","img/test.jpg"); // 將img的添加src屬性,值爲"img/test.jpg"
* 用法:jq對象.attr({屬性名:屬性值,屬性名2:屬性值}) 屬性名可以有"",屬性值必須有""
* $("img").attr({"src":"img/test.jpg","alt":"test"}); // 將img的src和alt屬性設爲指定值
# removeAttr(name):刪除元素指定的屬性
* 用法:jq對象.removeAttr(屬性名)
* $("img").removeAttr("src"); // 刪除img標籤元素的src屬性
# prop(name):設置或返回元素的屬性值
* 用法:jq對象.prop(屬性名,屬性值)
* $("input[type='checkbox']").prop("checked"); // 將type類型爲checkbox的input標籤元素的選中(前提是有checked屬性)
*用法: jq對象.prop({屬性名:屬性值,屬性名2:屬性值}) 屬性名可以有"",屬性值必須有""
* $("input[type='checkbox']").prop({"checked":true, "disabled":true}); // 將checkbox選中並禁用
# removeProp(name):用來刪除由.prop()方法設置的屬性集(attr設置的屬性值也可刪除)
* 用法:jq對象.removeProp(屬性名)
* $("img").removeProp("src"); // 刪除img標籤元素的src屬性attr()和prop()方法的區別:
attr()方法:不能修改布爾類型的屬性值,一般用於操作非布爾值元素的屬性;
prop()方法:可以修改布爾類型的屬性值,一般用於操作布爾值元素的屬性.
1.4.4 HTML/文本/值的設置
# html(value):設置或獲取對象的內容,一般針對含有文本的元素,使用在圖片上無效
* 用法:jq對象.html() 獲取jq對象的內容
* $("p").html(); // 獲取p標籤的內容
* 用法:jq對象.html(value) 設置jq對象的值爲value
* $("p").html("java"); // 將所有的p標籤的內容設爲java
# text(value):設置或獲取對象的內容
* 用法:jq對象.text() 獲取jq對象的內容
* $("p").text(); // 獲取p標籤的內容
* 用法:jq對象.text(value) 設置jq對象的值爲value
* $("p").text("java"); // 將所有的p標籤的內容設爲java
# val(value):設置或獲取元素的值(相當於是js對象中value屬性)
* 用法:jq對象.val()
* $("input[type='text']").val(); // 獲取input的value值
* 用法:val(value值)
* $("input[type='text']").val(value); // 設置文本框的值爲value1.5 jQuery對象訪問
# each(callback):以每一個匹配的元素作爲上下文來執行一個函數(callback)
* 用法:jq對象.each(function(迭代變量){要執行之代碼}); 使用return可以跳出循環
*$("img").each(function(n){ // 將所有的img標籤添加src屬性,n是從0開始
// this是代表DOM對象
// $(this)是代表jq對象
this.src = "img/" + n + ".jpg";
* });
# size():返回jq對象中元素的個數
* 用法:jq對象.size()
* var num = $("img").size(); //返回img對象的個數
# length:返回jq對象中元素的個數
* 用法:jq對象.length;
* var num = $("img").length; // 獲取img對象的個數
# get([index]):取得其中一個匹配的元素, num表示取得第幾個匹配的元素,num從0開始
* 用法:jq對象.get(num); 當無參數時,是獲取所有的匹配的對象集合
* $("img").get(); // 獲取所有img對象的集合
* $("img").get(0); // 獲取匹配的第一個元素對象,與$(this)[0]等價1.6 文檔處理
# append(content):向每個匹配的元素內部追加內容,其中內容可以是標籤
* 用法:jq對象.append(內容);
* $("p").append("內容"); // 向所有p標籤內添加內容(追加)
* $("select").append("<option value='內容'>內容</option>"); // 向select標籤添加option標籤
# appendTo(content):把所有匹配的元素追加到另一個指定的元素中
* 用法:jq對象.appendTo(元素) 將jq對象添加到元素中
* $("p").appendTo("div"); // 將所有p標籤元素追加到div中
# prepend(content):向每個匹配的元素內部前置內容,參數是要插入到目標元素內部前端的內容
* 用法:jq對象.prepend(內容);
* $("p").prepend("<b>Hello</b>"); // 向所有p標籤元素內部的前面插入內容
# prependTo(content):把所有匹配的元素前置到另一個、指定的元素中
* 用法:jq對象.prependTo(元素) 將jq對象前置到元素內容中
* $("p").prependTo("#AdDiv"); // 將所有的p標籤內容前置到id爲AdDiv元素內部的前面
# empty():刪除匹配的元素集合中所有的子節點
* 用法:jq對象.empty(); 刪除jq對象中所有的子節點,jq對象本身不刪除
* $("p").empty(); // 刪除所有p元素中的子節點元素
# remove([expr]):從DOM中刪除所有匹配的元素,參數是用於篩選元素的jQuery表達式
* 用法:jq對象.remove(選擇器)
* $("p").remove(); // 刪除所有的p標籤元素,其本身要被刪除
* $("div").remove("#AdDiv"); // 刪除所有ID爲AdDiv的div元素1.7 jQuery篩選功能
# children([expr]):取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合,參數是過濾子元素的表達式
* 用法:jq對象.children(過濾器)
* $("div").children(); // 獲取所有div元素的所有子元素
* $("div").children("#AdDiv"); // 獲取所有div元素的子元素中ID爲AdDiv的所有元素
# find(expr|obj|ele):搜索所有與指定表達式匹配的元素對象,這個函數是找出正在處理的元素的後代元素的好方法,不包括本身元素,是在本元素的子元素中查找
expr:用於查找的表達式
obj:一個用於匹配元素的jQuery對象
ele:一個DOM元素
* 用法:jq對象.find(參數)
* $("p").find("span"); // 查找所有p標籤元素下的span元素對象
# parent([expr]):取得一個包含着所有匹配元素的唯一父元素的元素集合,參數是篩選表達方式
* 用法:jq對象.parent(篩選表達式)
* $("p").parent(); // 獲取p元素的所有的父類元素對象1.8 jQuery工具類
# jQuery.each(object, [callback]):通用例遍方法,可用於例遍對象和數組
object:需要例遍的對象或數組
callback:每個成員/元素執行的回調函數
* 用法:$.each(對象或數組,function(i,n){代碼}); i是循環的索引值,n是每次循環時的值
* $.each(數組或對象集合, function(i, n) { // 將數組內容添加到select的option中
$("select").append("<option value='"+i+"'>"+n+"</option>");
* });
* 用法:$(對象或數組).each(function(i,n){代碼}); i是循環的索引值,n是每次循環時的值
* $(數組或對象集合).each(function(i, n) { // 將數組內容添加到select的option中
$("select").append("<option value='"+i+"'>"+n+"</option>");
* });案例代碼
// 定義省份和城市信息
var provinceArr = ["北京市", "河南省", "四川省", "湖北省", "浙江省"];
// 定義存儲城市信息的二維數組,與省份數組的元素相對應
var citys = new Array(provinceArr.length);
// 北京對應的城市信息
citys[0] = ["北京市"];
// 河南對應的城市信息
citys[1] = ["鄭州市", "開封市", "洛陽市", "信陽市"];
// 四川對應的城市信息
citys[2] = ["成都市", "遂寧市", "樂山市", "綿陽市"];
// 湖北對應的城市信息
citys[3] = ["武漢市", "襄陽市", "荊州市", "恩施市"];
// 浙江省對應的城市信息
citys[4] = ["杭州市", "溫州市", "義烏市", "嘉興市"];
// 初始化省份信息
$(function(){
var $p = $("#province");
$.each(provinceArr, function(i, n) {
$p.append("<option value='"+i+"'>"+n+"</option>");
});
});
// 生成省份和城市信息
$(function(){
var $city = $("#city");
var $p = $("#province");
$p.change(function(){
// 將城市的信息清空,方式1
$("#city option[value]").remove();
// 將城市的信息清空,方式2,將下拉框的options數組長度設爲1,保留第一個
// $city[0].options.length = 1;
// 添加城市的信息
$.each(citys[$p.val()], function(i, n) {
$city.append("<option value='"+n+"'>"+n+"</option>");
});
});
});1.9 jQuery的事件
# on(events,[selector],[data],fn):在選擇元素上綁定一個或多個事件的事件處理函數,參數中不能使用this
* events:一個或多個用空格分隔的事件類型和可選的命名空間,如"click"或"keydown.myPlugin";
* selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代,如果選擇的< null或省略,當它到達選定的元素,事件總是觸發;
* data:當一個事件被觸發時要傳遞event.data給事件處理函數;
* fn:該事件被觸發時執行的函數, false 值也可以做一個函數的簡寫,返回false.
* 用法:jq對象.on(事件,事件處理函數)
* $("p").on("click", function(){
alert(this.text());
* });
* 用法:jq對象.on(事件,參數,事件處理函數)
* function myHandler(event) {
alert(event.data.foo);
}
* $("p").on("click", {foo: "bar"}, myHandler); // 傳遞參數
# bind(type,[data],fn):爲每個匹配元素的特定事件綁定事件處理函數
* type: 含有一個或多個事件類型的字符串,由空格分隔多個事件,比如"click"或"submit",還可以是自定義事件名;
* data:作爲event.data屬性值傳遞給事件對象的額外數據對象;
* fn:綁定到每個匹配元素的事件上面的處理函數.
* 用法:jq對象.bind(事件,參數,事件處理函數)
* $("p").bind("click", function(){
alert( $(this).text() );
* });
* $('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
* });
* $("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
* });
# delegate(selector,[type],[data],fn):指定的元素(屬於被選元素的子元素)添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數
* selector:選擇器字符串,用於過濾器觸發事件的元素;
* type:附加到元素的一個或多個事件,由空格分隔多個事件值,必須是有效的事件;
* data:傳遞到函數的額外數據;
* fn:當事件發生時運行的函數.
* 用法:jq對象.delegate(過濾器字符串,事件類型,參數,事件執行函數)
* $("div").delegate("button","click",function(){ // 按鈕點擊顯示/隱藏p標籤
$("p").slideToggle();
* });
# blur([[data],fn]):當元素失去焦點時觸發blur事件
* data:blur([Data], fn)可傳入data供函數fn處理;
* fn:在每一個匹配元素的blur事件中綁定的處理函數.
* 用法:jq對象.blur(參數,事件處理函數)
* $("p").blur(function(){alert("段落失去焦點")}); // 當p標籤元素失去焦點,提示信息
# change([[data],fn]):當元素的值發生改變時,會發生change事件,作用於文本域,textarea和select元素,在元素失去焦點時觸發
* data:change([Data],fn)可傳入data供函數fn處理;
* fn:在每一個匹配元素的change事件中綁定的處理函數.
* 用法:jq對象.change(參數,修改事件處理函數)
* $("input[type='text']").change(function(){alert(this.innerHtml)});
# click([[data],fn]):觸發每一個匹配元素的click事件
* data:click([Data],fn)可傳入data供函數fn處理;
* fn:在每一個匹配元素的click事件中綁定的處理函數.
* 用法:jq對象.click(參數,點擊事件處理函數)
* $("button").click(function(){處理代碼}); // button標籤元素的點擊事件
# focus([[data],fn]):當元素獲得焦點時,觸發focus事件
* data:focus([Data], fn)可傳入data供函數fn處理;
* fn:在每一個匹配元素的focus事件中綁定的處理函數.
* 用法:jq對象.focus(參數,獲得焦點處理函數)
* $("input[type='text']").focus(function(){alert("文本框獲得焦點")});
# submit([[data],fn]):當提交表單時,會發生submit事件,只適用於表單元素
* data:submit([Data],fn)可傳入data供函數fn處理;
* fn:在每一個匹配元素的submit事件中綁定的處理函數.
* 用法:jq對象.submit(參數,提交表單處理函數)
* $("form").submit(function(){alert("表單提交")});
# trigger(type,[data]):在每一個匹配的元素上觸發某類事件
* $(選擇器).trigger('事件類型',處理函數);
# triggerHandler(type, [data]):觸發指定的事件類型上所有綁定的處理函數,但不會執行瀏覽器默認動作,也不會產生事件冒泡
* $(選擇器).trigger('事件類型',處理函數);
# trigger和triggerHandler的區別:
* triggerHandler不會觸發瀏覽器默認事件,trigger會觸發瀏覽器默認事件;
* triggerHandler只觸發匹配對象集合中第一個元素的事件處理函數,trigger觸發匹配對象集合中每一元素的事件函數;
* triggerHandler返回的是事件處理函數的返回值,而不是據有可鏈性的jQuery對象,如果最開始的jQuery對象集合爲空,返回undefined.1.10 jQuery綜合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 定義數組：
var cities = [
["杭州市", "紹興市", "溫州市", "義烏市", "嘉興市"],
["南京市", "蘇州市", "揚州市", "無錫市"],
["武漢市", "襄陽市", "荊州市", "宜昌市", "恩施"],
["石家莊市", "唐山市", "保定市", "邢臺市", "廊坊市"],
["長春市", "吉林市", "四平市", "延邊市"]
];
var $city = $("#city");
// 獲得代表省份的下拉列表:
$("#province").change(function() {
// alert(this.value);
// alert($(this).val());
$city.get(0).options.length = 1;
var val = this.value;
// 遍歷並且判斷:
$.each(cities, function(i, n) {
// 判斷:
if(i == val) {
$(n).each(function(j, m) {
// alert(j+" "+m);
$city.append("<option>" + m + "</option>");
});
}
});
});
});
</script>
<!--jQuery進行表單校驗-->
<script>
$(function() {
// 將必填項的輸入框添加*
$(".require").parent().append("<b class='high'> *</b>");
// 爲所有的輸入框添加失去焦點事件
$("form input").blur(function() {
// 將所有的提示信息清除
$(this).parent().children(".formtips").remove();
// 判斷失去焦點的元素是否是username
if($(this).attr("id") == "username") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>用戶名不能爲空</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>用戶名可用</span>");
}
}
// 判斷失去焦點的元素是否是password
if($(this).attr("id") == "password") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>密碼不能爲空</span>");
} else {
if($(this).val().length < 6) {
$(this).parent().append("<span class='formtips onError'>密碼長度至少六位</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>密碼可用</span>");
}
}
}
// 判斷失去焦點的元素是否是repassword
if($(this).attr("id") == "repassword") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>確認密碼不能爲空</span>");
} else {
// 獲取密碼框的後面是否有span標籤
// 獲取密碼框的兄弟元素span標籤(如果有),再獲取span標籤的父元素td,在td的子元素中查找class屬性爲onError
// if($("#password").siblings().parent().find(".onError").length != 0){
// 獲取密碼框的含有class屬性爲onError的所有兄弟元素集合
if($("#password").siblings(".onError").length != 0) {
// 獲取密碼框的父元素td,在td的所有子元素中查找所有的class屬性爲onError的元素集合
// if($("#password").parent().find(".onError").length != 0){
$(this).parent().append("<span class='formtips onError'>第一次輸入密碼有誤</span>");
} else if($(this).val() != $("#password").val()) {
$(this).parent().append("<span class='formtips onError'>兩次密碼不一致</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>確認密碼可用</span>");
}
}
}
// 校驗郵箱
if($(this).attr("id") == "email") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>郵箱不能爲空</span>");
} else {
if($(this).val().match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)) {
$(this).parent().append("<span class='formtips onSuccess'>郵箱可用</span>");
} else {
$(this).parent().append("<span class='formtips onError'>郵箱格式錯誤</span>");
}
}
}
// JQ對象綁定事件,返回的是自身,則可以使用鏈式綁定其他事件
// 輸入框的獲取焦點事件
}).focus(function() {
// 自身對象的失去焦點方法
$(this).triggerHandler("blur");
// 輸入框的鍵盤輸入事件
}).keyup(function() {
$(this).triggerHandler("blur");
});
// form表單提交校驗
$("form").submit(function() {
// 觸發所有input的blur事件,以便完成各個字段信息的校驗
$("input").trigger("blur");
// 獲取出現錯誤信息的輸入框的個數
var length = $(".onError").length;
if(length > 0) {
alert("信息存在錯誤,請重新填寫!")
return false; //返回false,form表單不會提交
}
});
});
</script>
</head>
<body>
<!--整體DIV-->
<div class="bodyDiv">
<form action="" method="post">
<table border="0" width="100%" cellspacing="15">
<tr>
<td>用戶名</td>
<td><input type="text" id="username" name="username" class="require"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" id="password" name="password" class="require"></td>
</tr>
<tr>
<td>確認密碼</td>
<td><input type="password" id="repassword" name="repassword" class="require"></td>
</tr>
<tr>
<td>性別</td>
<td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍貫</td>
<td>
<select id="province" name="province">
<option value="">-請選擇-</option>
<option value="0">浙江省</option>
<option value="1">江蘇省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
<select id="city" name="city">
<option>-請選擇-</option>
</select>
</td>
</tr>
<tr>
<td>愛好</td>
<td>
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="註冊"></td>
</tr>
</table>
</form>
</div>
</body>
</html>