day41_jQuery學習筆記_02
jQuery 學習回顧
回顧內容以下：javascript
jQuery 的語法：
$("選擇器")
$(dom對象)
$("<a>點我啊</a></br>").replaceAll("p");
jQuery 的選擇器：
基本：#id、element、.class、s1,s2,... 、*
層級：A B、A>B、A+B、A~B
基本過濾：:first、:last、:eq(index)、:gt(index)、:lt(index)、:even、:odd、:header、:animated、:focus
內容過濾：:contains(text)、:empty、:parent、:has(selector)
可見過濾：:visible、:hidden
屬性：[attr]、[attr=val]、[attr!=val]、[attr^=val]、[attr$=val]、[attr*=val]、[attr=val][][]
子元素：:nth-child(index)、:first-child、:last-child、:only-child
表單過濾：:input、:text、:password、:radio、:checkbox、:file、:submit、:reset、:image、:button、:hidden
表單對象屬性過濾：:enabled、:disabled、:checked、:selected
jQuery 的屬性和CSS：
屬性：attr()、removeAttr()
CSS類：addClass()、removeClass()、toggleClass()
HTML代碼/文本/值：val()與val(...)、html()與html(...)、text()與text(...)
CSS：css(name, value)、css(name)、css(prop)
位置：offset()與offset(...) 格式：{"top":100, "left":100}
scrollTop()與scrollTop(...)、scrollLeft()與scrollLeft(...)
尺寸：width()與width(...)、height()與height(...)
jQuery 的文檔處理：
內部插入：append()、prepend()、appendTo()、prependTo()
外部插入：after()、before()、insertAfter()、insertBefore()
刪除：empty()、remove()、detach() --> 綁定數據：data()與data(...)
複製：clone(true)
替換：replaceWith()、replaceAll()
包裹：wrap()、wrapAll()、wrapInner()、unWrap()
jQuery 的文檔處理的小案例
示例代碼以下：
1.左右select選擇.htmlcss
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 左邊
$("#left1").click(function() {
// 選中多個，只過第一個
$("#leftSelectId>option:selected:first").removeAttr("selected").appendTo("#rightSelectId");
});
$("#left2").click(function() {
// 選中幾個，就過幾個
$("#leftSelectId>option:selected").removeAttr("selected").appendTo("#rightSelectId"); // :selected 選擇（指的是 下拉列表 select 標籤中的 option 標籤）
});
$("#left3").click(function() {
// 選中或者沒選中，都過去
// $("#leftSelectId option").removeAttr("selected").appendTo("#rightSelectId"); // A B 得到A元素內部全部的B的後代元素。（爺孫）
$("#leftSelectId>option").removeAttr("selected").appendTo("#rightSelectId"); // A>B 得到A元素內部全部的B的子元素。（父子）
});
// 右邊
$("input:eq(3)").click(function() {
// 選中多個，只過第一個
$("#rightSelectId>option:selected:first").removeAttr("selected").appendTo("#leftSelectId");
});
$("input:eq(4)").click(function() {
// 選中幾個，就過幾個
$("#rightSelectId>option:selected").removeAttr("selected").appendTo("#leftSelectId"); // :selected 選擇（指的是 下拉列表 select 標籤中的 option 標籤）
});
$("input:eq(5)").click(function() {
// 選中或者沒選中，都過去
// $("#leftSelectId option").removeAttr("selected").appendTo("#leftSelectId"); // A B 得到A元素內部全部的B的後代元素。（爺孫）
$("#rightSelectId>option").removeAttr("selected").appendTo("#leftSelectId"); // A>B 得到A元素內部全部的B的子元素。（父子）
});
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0000;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="leftSelectId" style="width:100px" multiple="multiple" size="10">
<option>劉備</option>
<option>關羽</option>
<option>張飛</option>
<option>諸葛亮</option>
</select>
</td>
<td>
<input id="left1" type="button" value=">" style="width:50px"/><br/>
<input id="left2" type="button" value=">>" style="width:50px"/><br/>
<input id="left3" type="button" value=">>>" style="width:50px"/><br/>
<input type="button" value="<" style="width:50px"/><br/>
<input type="button" value="<<" style="width:50px"/><br/>
<input type="button" value="<<<" style="width:50px"/><br/>
</td>
<td>
<select id="rightSelectId" style="width:100px" multiple="multiple" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
示例動圖以下：html
6、jQuery 的篩選
綜述以下：java
jQuery 的選擇器能夠的完成功能，jQuery 的篩選則提供功能相同的函數。
例如：
選擇器 :first
篩選 first()
兩者對比：
例如：
$("div:first") 直接得到第一個div，永遠只能操做第一個div
$("div").first() 先得到全部的div，而後從全部的div中篩選出第一個，能夠操做第一個div，也能夠操做全部div
6.一、過濾
詳解以下：jquery
eq(index|-index) 相似 :eq()
index：正數，從頭開始得到指定索引的元素。這個元素的位置是從0算起。即：0表示開始第一個
-index：負數，從尾開始得到指定索引的元素。從集合中的最後一個元素開始倒數。即：-1表示最後一個
first() 第一個 相似 :first
last() 最後一個 相似 :last
is() 判斷，返回的是布爾值
hasClass(class) 判斷是不是指定class。<xxx class="my"> 等價於 is("." + class)。返回的是布爾值
filter() 篩選出與指定表達式匹配的元素集合，從A、B、C中篩選出A、B來
not() 將指定內容刪除，從A、B、C中刪除A、B
-------------------------------------------------------
has() 是否有子元素
slice(start, end) 截取元素，[2,4) => 2,3 包前不包後
map(callback) 將jQuery對象 拆分紅 jQuery對象數組，不怎麼使用
示例代碼以下：
01-過濾.htmlnginx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>01-篩選-過濾.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="選擇索引值等於3的div元素" id="btn1"/>
$("#btn1").click(function() {
$("div").eq(3).css("background-color", "#ff0");
// $("div").eq(-1).css("background-color", "#ff0").show(1000);
});
// <input type="button" value="選擇第一個div元素" id="btn2"/>
$("#btn2").click(function() {
$("div").first().css("background-color", "#f0f");
});
// <input type="button" value="選擇最後一個div元素" id="btn3"/>
$("#btn3").click(function() {
$("div").last().css("background-color", "#f0f").show(1000);
});
// <input type="button" value="id=one的div，class是不是one" id="btn4"/>
$("#btn4").click(function() {
alert($("div#one").hasClass("one")); // true
});
// <input type="button" value="選擇class爲none的全部div" id="btn5"/>
$("#btn5").click(function() {
// $("div.none").css("background-color", "#0ff").show(1000);
$("div").filter(".none").css("background-color", "#0ff").show(1000);
});
// <input type="button" value="class爲hide的div，下一個兄弟是不是span" id="btn6"/>
$("#btn6").click(function() {
alert($("div.hide").next().is("span")); // true
});
// <input type="button" value="選擇全部div中含有div的" id="btn7"/>
$("#btn7").click(function() {
$("div").has("div").css("background-color", "#00f");
});
// <input type="button" value="選擇class爲one的div，子元素中沒有title屬性的div" id="btn8"/>
// 換句話說：選擇class爲one的div，而後把有title屬性的div過濾掉
$("#btn8").click(function() {
// 練習一：
// 選擇class爲one的div，子元素中沒有title屬性的div
$("div.one").not("[title]").css("background-color", "#0f0");
// 練習二：
// 選擇class爲one的div，子元素中沒有title屬性的 父div
// $("div.one").children().not("[title]").parent().css("background-color", "#0f0");
// 練習三：
// 選擇class爲one的div，子元素中都沒有title屬性的 父div
// 先把 「子元素中都有title屬性的 父div」 過濾出來
// var $aa = $("div.one").children().filter("[title]").parent();
// 再將上面的過濾出來的東西刪掉
// $("div.one").not($aa).css("background-color", "#0f0");
});
// <input type="button" value="選擇索引號爲3, 4的div" id="btn9"/> // [3, 4) 只有索引3
$("#btn9").click(function() {
$("div").slice(3, 4).css("background-color", "#f00");
});
});
</script>
</head>
<body>
<h3>篩選-過濾</h3>
<button id="reset">手動重置頁面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">點擊下列按鈕時先自動重置頁面</label>
<br/>
<br/>
<!-- 控制按鈕 -->
<input type="button" value="選擇索引值等於3的div元素" id="btn1"/>
<input type="button" value="選擇第一個div元素" id="btn2"/>
<input type="button" value="選擇最後一個div元素" id="btn3"/>
<input type="button" value="選擇id=one的div，class是不是one" id="btn4"/>
<input type="button" value="選擇class爲none的全部div" id="btn5"/>
<input type="button" value="class爲hide的div，下一個兄弟是不是span" id="btn6"/>
<input type="button" value="選擇全部div中含有div的" id="btn7"/>
<input type="button" value="選擇class爲one的div，子元素中沒有title屬性的div" id="btn8"/>
<input type="button" value="選擇索引號爲3,4的div" id="btn9"/>
<br/>
<br/>
<!--文本隱藏域-->
<input type="hidden" value="hidden_1"/>
<input type="hidden" value="hidden_2"/>
<input type="hidden" value="hidden_3"/>
<input type="hidden" value="hidden_4"/>
<!-- 測試的元素 -->
<div class="one" id="one">
id爲one,class爲one的div
<div class="mini">class爲mini</div>
</div>
<div class="one" id="two" title="test">
id爲two,class爲one,title爲test的div
<div class="mini" title="other">class爲mini,title爲other</div>
<div class="mini" title="test">class爲mini,title爲test</div>
</div>
<div class="one">
class爲one
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini">class爲mini</div>
<div class="mini" title="tesst">class爲mini,title爲tesst</div>
</div>
<div style="display:none;" class="none">style的display爲"none"的div</div>
<div class="hide">class爲"hide"的div</div>
<span id="mover">正在執行動畫的span元素</span>
</body>
</html>
示例動圖以下：面試
6.二、查找
詳解以下：ajax
例如：
<A>
<B>
<C></C>
<D></D>
<E></E>
<F></F>
</B>
</A>
-------------------------------------------------------
B.children([...]) 得到全部的子元素。CDEF
A.find(D) 從指定的區域查詢指定元素。D
D.next() 得到下一個兄弟。E
D.nextAll() 得到後面的全部兄弟。EF
E.prev() 得到上一個兄弟。D（prev = previous）
E.prevAll() 得到前面的全部兄弟。CD
E.siblings() 得到全部兄弟。CDF（siblings：兄弟姐妹）
E.parent() 得到父元素（不含本身）。B
E.parents() 得到全部的父元素（不含本身）。AB
E.closest(A) 向上得到指定的父元素（含本身），若是得到到了，就返回一個對象；若是沒有得到到，就返回空的jQuery對象。
-------------------------------------------------------
C.nextUntil(E) 得到後面全部兄弟，直到指定條件位置爲止。DE
F.prevUntil(D) 得到前面全部兄弟，直到指定條件位置爲止。DE
-------------------------------------------------------
closest和parents的主要區別是：
一、前者從當前元素開始匹配尋找，後者從父元素開始匹配尋找；
二、前者逐級向上查找，直到發現匹配的元素後就中止了，後者一直向上查找直到根元素，而後把這些元素放進一個臨時集合中，再用給定的選擇器表達式去過濾；
三、前者返回0或1個元素，後者可能包含0個，1個，或者多個元素。
示例代碼以下：
02-查找.htmlsql
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>02-查找.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="選擇 id=two 的全部的子元素" id="btn1"/>
$("#btn1").click(function() {
$("#two").children().css("background-color", "#ff0");
// $("#two").children("[title='test']").css("background-color", "#ff0");
});
// <input type="button" value="選擇 id=two 的子元素title=test 的元素 " id="btn2"/>
$("#btn2").click(function() {
$("#two").children("[title='test']").css("background-color", "#ff0");
});
// <input type="button" value="選擇 id=two 的下一個兄弟" id="btn3"/>
$("#btn3").click(function() {
$("#two").next().css("background-color", "#f0f");
});
// <input type="button" value="選擇 id=two 的後面的全部兄弟" id="btn4"/>
$("#btn4").click(function() {
$("#two").nextAll().css("background-color", "#0ff").show(1000);
});
// <input type="button" value="選擇 id=two 的上一個兄弟" id="btn5"/>
$("#btn5").click(function() {
$("#two").prev().css("background-color", "#00f").show(1000);
});
// <input type="button" value="選擇 id=two 的前面的全部兄弟" id="btn6"/>
$("#btn6").click(function() {
$("#two").prevAll().css("background-color", "#0f0").show(1000);
});
// <input type="button" value="選擇 id=two 的全部兄弟" id="btn7"/>
$("#btn7").click(function() {
$("#two").siblings().css("background-color", "#f0f").show(1000);
});
// <input type="button" value="選擇 id=two 的父元素" id="btn8"/>
$("#btn8").click(function() {
$("#two").parent().css("background-color", "#ff0");
});
// <input type="button" value="選擇 title='tesst' 的父元素body元素" id="btn9"/>
$("#btn9").click(function() {
$("div[title='tesst']").closest("body").css("background-color", "#000");
});
});
</script>
</head>
......
示例動圖以下：json
6.三、串聯
詳解以下：
做用：將多條語句，改爲一條。（得瑟代碼）
A.add(B) 將A和B組合成一個對象 。相似：$("A, B")
andSelf() 將以前的對象添加到操做的集合中
A.children().andSelf()
A A的孩子 A的孩子和A
end() 回到最近的一個"破壞性"操做以前
A.children().children().end() .end()
A A的孩子 A的孫子 A的孩子 A
-------------------------------------------------------
contents() 得到全部的子節點（子節點包括：子元素 和 文本）
示例代碼以下：
03-串聯.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>03-串聯.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="選擇 id=one和two 的div" id="btn1"/>
$("#btn1").click(function() {
$("#one").add('#two').css("background-color", "#ff0");
});
// <input type="button" value="選擇id=one 的全部的孩子，以及one本身" id="btn2"/>
$("#btn2").click(function() {
$("#one").children().andSelf().css("background-color", "#f0f");
// $("#one").children().add("#one").css("background-color", "#f0f");
});
// <input type="button" value="選擇id=one 的全部的孩子，設置顏色爲紅色，設置one本身爲黃色" id="btn3"/>
$("#btn3").click(function() {
$("#one").children().css("background-color", "#f00").end().css("background-color", "#ff0");
// $("#one").children().css("background-color", "#f00").parent().css("background-color", "#ff0");
// $("#one").css("background-color", "#ff0").children().css("background-color", "#f00");
});
// <input type="button" value="打印id=two 的子節點個數" id="btn4"/>
$("#btn4").click(function() {
alert($("#two").contents().size());
// alert($("#two").contents().length);
});
});
</script>
</head>
......
示例動圖以下：
6.四、篩選案例
示例代碼以下：
2.QQ用戶分組.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>篩選案例-QQ用戶分組</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 一、全部的分組的列表項默認都是隱藏的
// 二、分組<span>能夠點擊，控制其列表項的顯示與隱藏
// 三、當前分組的列表項顯示時，其餘分組的列表項要隱藏
$("div").children("a").hide().prev("span").click(function() {
// $(this).nextAll("a").show().parent().siblings("div").find("a").hide();
$(this).nextAll("a").toggle().parent().siblings("div").find("a").hide();
});
});
</script>
<style type="text/css">
div * {
display: block;
width: 200px;
}
div span {
background-color: #0f0;
}
</style>
</head>
<body>
<div>
<span>追求中</span>
<a>志明</a>
<a>春嬌</a>
</div>
<div>
<span>已交往</span>
<a>明郎</a>
<a>嬌兒</a>
</div>
<div>
<span>分手了</span>
<a>張志明</a>
<a>餘春嬌</a>
</div>
</body>
</html>
示例動圖以下：
7、jQuery 的事件
7.一、常見事件總結
示例代碼以下：
1.常見事件.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>01-常見事件.html</title>
<style type="text/css">
#e02 {
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#e01").blur(function() {
$("#textMsg").html("文本框失去焦點事件：blur");
}).focus(function() {
$("#textMsg").html("文本框得到焦點事件：focus，");
}).keydown(function() {
$("#textMsg").append("鍵盤按下事件：keydown，");
}).keypress(function(event) {
$("#textMsg").append("鍵盤按事件：keypress，");
}).keyup(function() {
$("#textMsg").append("鍵盤彈起事件：keyup，");
}).select(function(event) {
// 只支持谷歌
var sub = $(this).val().substring(event.target.selectionStart, event.target.selectionEnd);
$("#textMsg").html("文本框內容被選中事件：select，" + sub);
});
var i = 0;
$("#e02").mouseover(function() {
$("#divMsg").html("鼠標移入事件：mouseover");
}).mousemove(function() {
// $("#divMsg").html("鼠標移動事件：mousemove , " + i++);
}).mouseout(function() {
$("#divMsg").html("鼠標移出事件：mouseout");
}).mousedown(function() {
$("#divMsg").html("鼠標按下事件：mousedown");
}).mouseup(function() {
$("#divMsg").html("鼠標彈起事件：mouseup");
});
$("#e03").click(function() {
$("#buttonMsg").html("鼠標單擊事件：click");
}).dblclick(function() {
$("#buttonMsg").html("鼠標雙擊事件：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text"/>
<span id="textMsg"></span>
<br/>
<hr/>
<div id="e02"></div>
<span id="divMsg"></span>
<br/>
<hr/>
<input id="e03" type="button" value="能夠點擊"/>
<span id="buttonMsg"></span>
<br/>
</body>
</html>
示例動圖以下：
下面是jQuery 提供額外的事件，用於完善javascript缺失的事件
詳解以下：
focusin 和 focusout
focusin 得到焦點。js中是：focus
focusin事件跟focus事件區別在於：它能夠在父元素上檢測子元素獲取焦點的狀況。
focusout 失去焦點。js中是：blur
focusout事件跟blur事件區別在於：它能夠在父元素上檢測子元素失去焦點的狀況。
mouseenter 和 mouseleave
mouseenter 鼠標移入。js中是：mouseover
與 mouseover 事件不一樣，只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。若是鼠標指針穿過任何子元素，一樣會觸發 mouseover 事件。
mouseleave 鼠標移出。js中是：mouseout
與 mouseout 事件不一樣，只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。若是鼠標指針離開任何子元素，一樣會觸發 mouseout 事件。
示例代碼以下：
2.focus和focusin.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>02-focus和focusin的區別.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 示例：在js中，focus函數，父元素【不能檢測】到子元素是否得到焦點
// $("#outerDiv").focus(function() {
// alert("outer");
// });
// 示例：在jQuery中，focusin函數， 父元素【能夠檢測】到子元素得到焦點
$("#outerDiv").focusin(function() {
alert("outer");
});
});
</script>
</head>
<body>
<div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
<div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
</div>
<br/>
<span id="showSpan"></span>
</body>
</html>
示例代碼以下：
3.mouseover和mouseenter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>3-mouseover和mouseenter的區別.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i= 0;
// js代碼，當鼠標在父元素和子元素之間穿越時，將會觸發父元素的事件
// $("#outerDiv").mouseover(function() {
// $("#showSpan").html(i++);
// });
// jQuery代碼，當鼠標在父元素和子元素之間穿越時，將不會觸發父元素的事件
$("#outerDiv").mouseenter(function() {
$("#showSpan").html(i++);
});
});
</script>
</head>
......
示例動圖以下：
7.二、頁面載入（加載）
詳解以下：
方式1：使用標準api
$(document).ready(function() {
});
等效於
jQuery(document).ready(function() {
});
方式1緣由圖解：
方式2：簡化版
$(function() {
});
等效於
jQuery(function() {
});
方式2緣由圖解：
示例代碼以下：
4.ready.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>4-ready.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// jQuery代碼的頁面加載可使用屢次
// 由於在jQuery中是隊列形式存在的，一個一個的執行
$(function() {
alert("O(∩_∩)O哈哈~");
});
$(function() {
alert("O(∩_∩)O哈哈~O(∩_∩)O哈哈~");
});
// javaScript代碼的頁面加載只執行一次，後面的頁面加載會覆蓋前面的頁面加載
// 由於在js中是先解析完，再加載
window.onload = function () {
alert("(*^▽^*)");
}
window.onload = function () {
alert("(*^▽^*)(*^▽^*)");
}
</script>
</head>
<body>
</body>
</html>
7.三、事件綁定
7.3.一、事件處理
詳解以下：
bind(type, fn) 給當前對象綁定一個事件。例如：A.bind("click", function() {...}); 相似：A.click(function() {...});
unbind(type) 解綁bind所綁定的事件
one(type, fn) 給當前對象綁定一次事件。
-------------------------------------------------------
on(events, fn) 提供綁定事件處理程序所需的全部功能。即完成3個方法的功能：.bind()、.delegate()、和 .live()
off(events) 解綁
trigger(type) 在每個匹配的元素上觸發某類事件。這個函數也會致使瀏覽器同名的默認行爲的執行。例如：A.trigger("submit"); 相似：A.submit();
triggerHandler(type) 在每個匹配的元素上觸發某類事件。但不會執行瀏覽器默認動做，也不會產生事件冒泡。
示例代碼以下：
5.事件處理.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>5-事件處理.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
// <input id="h01" type="button" value="一、只能點擊一次，以後再點擊失效"/>
$("#h01").one("click", function() {
alert("你只能愛我一我的！");
});
// <input id="h02" type="button" value="二、能夠點擊屢次"/>
// jQuery 事件的別名，格式：事件.別名
$("#h02").bind("click.a", function() {
alert("你還愛着誰？");
});
$("#h02").bind("click.b", function() {
alert("你到底還愛着誰？？");
});
// <input id="h03" type="button" value="三、解綁2中指定的事件"/>
$("#h03").click(function() {
$("#h02").unbind("click.a"); // 使用jQuery事件的別名解綁想解綁的，由於jQuery事件默認是全解綁
});
// <input type="button" value="四、添加一個按鈕，樣式爲myClass，且擁有相同的事件(覺醒血脈)" class="myClass"/>
$(".myClass").live("click", function() {
$("body").append("<input type='button' class='myClass' value='血脈覺醒了'/>")
});
// <input id="h05" type="button" value="五、解綁4(滅掉血脈)"/>
$("#h05").click(function() {
$(".myClass").die("click");
});
});
</script>
</head>
<body>
<input id="h01" type="button" value="一、只能點擊一次，以後再點擊失效"/>
<input id="h02" type="button" value="二、能夠點擊屢次"/>
<input id="h03" type="button" value="三、解綁2中指定的事件"/>
<input type="button" value="四、添加一個按鈕，樣式爲myClass，且擁有相同的事件(覺醒血脈)" class="myClass"/>
<input id="h05" type="button" value="五、解綁4(滅掉血脈)"/>
</body>
</html>
示例動圖以下：
7.3.二、事件委派
詳解以下：
live(type, fn) 綁定事件，以後咱們動態添加一樣的成員，也具備相同的事件。
die(type) 解綁事件
示例代碼以下：
同上7.3.1中的代碼
示例動圖以下：
同上7.3.1中的動圖
7.3.三、事件切換
詳解以下：
hover(over, out)
鼠標的移入和移出，之前的寫法：A.mouseover(fn).mouseout(fn);
簡化版：A.hover(fn, fn);
toggle(fn, fn, fn, ...); 執行click事件，每點擊一次執行一個fn
示例代碼以下：
6.事件切換.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>6-事件切換.html</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("#e01").toggle(function() {
alert("O(∩_∩)O哈哈~");
}, function() {
alert("(*^▽^*)嘿嘿-");
});
$("#e02").hover(function() {
$("#divMsg").html("over");
}, function() {
$("#divMsg").html("out");
});
});
</script>
</head>
<body>
<input id="e01" type="button" value="點我啊"/><span id="textMsg"></span><br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span><br/>
</body>
</html>
示例動圖以下：
7.四、事件案例
示例代碼以下：
1.文字提示.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>1-文字提示.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}
p {
clear: both;
margin: 0;
padding: .5em 0;
}
/* tooltip */
#tooltip {
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
// 將自定義的提示，替換成自帶的提示
$(".mytooltip").mouseover(function(event) {
// 一、先建立一個div，自定義的提示
var $new = $("<div id='tooltip'></div>");
// 獲取當前對象綁定的數據
var title = $(this).data("mytitle");
if (!title) { // 第一次沒有數據，就獲取自帶的提示
// 二、得到自帶的提示
title = $(this).attr("title");
// 將自帶的提示移除
$(this).removeAttr("title");
// 綁定數據(綁定自帶的提示)
$(this).data("mytitle", title);
}
// 二、得到自帶的提示
// var title = $(this).attr("title");
// 將自帶的提示移除
// $(this).removeAttr("title");
// 三、設置提示
$new.html(title);
// 追加前，先定個位
$new.offset({"top" : event.pageY - 20, "left" : event.pageX + 5});
// 四、將定位後的新的div追加到body內部的後面，並顯示本身
$new.appendTo("body").show();
}).mouseout(function() { // 鼠標移出刪除
$("#tooltip").remove();
}).mousemove(function(event) { // 鼠標移動跟隨
$("#tooltip").offset({"top" : event.pageY - 20, "left" : event.pageX + 5});
});
});
</script>
</head>
<body>
<p>
<a href="#" class="mytooltip" title="這是個人超連接提示1">提示1</a>
</p>
<p>
<a href="#" class="mytooltip" title="這是個人超連接提示2">提示2</a>
</p>
<!-- <div id="tooltip">xxxx</div> -->
</body>
</html>
示例動圖以下：
2.圖片提示(擴展).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>2-圖片提示(擴展).html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}
img {
border: none;
}
ul, li {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
display: inline;
margin-right: 10px;
border: 1px solid #AAAAAA;
}
/* tooltip */
#tooltip {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 2px;
display: none;
color: #fff;
}
</style>
<script type="text/javascript">
$(function() {
var x = 10;
var y = 20;
var href;
$("a[class=tooltip]").mouseover(function(e) {
// 一、獲取對應標籤的自帶提示
// var title = $("a[class=tooltip]").attr("title");
// this表明的是DOM對象(頁面中的元素)
href = this.href;
// 刪除自帶提示
this.href = "";
// 二、建立標籤用於自定義提示
var $div = $("<div id='tooltip'><img src='" + href + "'></img></div>");
// 三、將自定義提示的標籤，添加到body標籤下
$("body").append($div);
// 四、如何調整顯示位置(相對鼠標的座標值:e.pageX和e.pageY)
$("#tooltip").css({
"top" : e.pageY + y + "px",
"left" : e.pageX + x + "px"
}).show(1000);
}).mouseout(function() {
this.href = href;
$("#tooltip").remove();
}).mousemove(function(e) {
$("#tooltip").css({
"top" : e.pageY + y + "px",
"left" : e.pageX + x + "px"
});
});
});
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li>
<a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod">
<img src="images/apple_1.jpg" alt="蘋果 iPod"/>
</a>
</li>
<li>
<a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano">
<img src="images/apple_2.jpg" alt="蘋果 iPod nano"/>
</a>
</li>
<li>
<a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone">
<img src="images/apple_3.jpg" alt="蘋果 iPhone"/>
</a>
</li>
<li>
<a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac">
<img src="images/apple_4.jpg" alt="蘋果 Mac"/>
</a>
</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h3>無效果：</h3>
<ul>
<li>
<a href="images/apple_1_bigger.jpg" title="蘋果 iPod">
<img src="images/apple_1.jpg" alt="蘋果 iPod"/>
</a>
</li>
<li>
<a href="images/apple_2_bigger.jpg" title="蘋果 iPod nano">
<img src="images/apple_2.jpg" alt="蘋果 iPod nano"/>
</a>
</li>
<li>
<a href="images/apple_3_bigger.jpg" title="蘋果 iPhone">
<img src="images/apple_3.jpg" alt="蘋果 iPhone"/>
</a>
</li>
<li>
<a href="images/apple_4_bigger.jpg" title="蘋果 Mac">
<img src="images/apple_4.jpg" alt="蘋果 Mac"/>
</a>
</li>
</ul>
</body>
</html>
示例動圖以下：
8、jQuery 的效果|動畫
8.一、基本效果|動畫
詳解以下：
做用：經過改變元素 高度和寬度 進行顯示或隱藏
show(speed, fn) 顯示
參數1：speed 速度。顯示的時間，單位：毫秒。也有固定的字符串：("slow", "normal", or "fast")
參數2：fn 回調函數。動畫效果完成以後的回調函數。
hide(speed, fn) 隱藏
toggle(speed, fn) 切換
8.二、滑動效果|動畫
詳解以下：
經過改變元素 高度 進行顯示或隱藏
slideDown(speed, fn) 顯示
slideUp(speed, fn) 隱藏
slideToggle(speed, fn) 切換
8.三、淡入淡出效果|動畫
詳解以下：
經過改變元素 透明度 進行顯示或隱藏
fadeIn(speed, fn) 顯示
fadeOut(speed, fn) 隱藏
fadeToggle(speed, fn) 切換
fadeTo(speed, opacity, fn) 指定透明度
參數2：opacity 透明度，一個0至1之間表示透明度的數字
8.四、效果|動畫案例
示例代碼以下：
效果案例.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>效果|動畫案例.html</title>
<style type="text/css">
div {
border: 1px solid #000;
width: 110px;
height: 100px;
}
</style>
<!-- 導入js庫 ，注意：使用src屬性以後，標籤體中不能寫入內容-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#b1").click(function() {
$("#b1Div").toggle("1000");
});
$("#b2").click(function() {
$("#b2Div").slideToggle("slow");
});
$("#b3").click(function() {
$("#b3Div").fadeToggle(2000, function() {
alert("淡入/淡出效果完成了");
});
});
});
</script>
</head>
<body>
<input type="button" id="b1" value="顯示/隱藏 b1Div"/>
<div id="b1Div"></div>
<br/>
<br/>
<input type="button" id="b2" value="滑出/滑入b2Div"/>
<div id="b2Div"></div>
<br/>
<br/>
<input type="button" id="b3" value="淡出/淡入b3Div"/>
<div id="b3Div" style="background-color: red;"></div>
</body>
</html>
示例動圖以下：
9、jQuery 的ajax【掌握】
- 之前學習的ajax：異步請求，瀏覽器地址欄不改變，而頁面進行局部的刷新。
- ajax 流程分析圖以下：
- ajax環境搭建：
- 0一、新建首頁頁面
- 0二、給按鈕綁定事件
- 0三、編寫servlet
- 0四、未完待續……
- 0一、新建首頁頁面
- jQuery 的ajax
詳解以下：
第一層：$.ajax(...) 最底層的ajax請求，編寫最複雜，完成功能最全的。
第二層：load()、$.get()、$.post() 開發中經常使用3個，$符號開頭的叫全局函數，不是$開頭的是普通函數，普通函數必須使用jQuery對象才能得到
第三層：$.getJSON()、$.getScript() 高級開發中用的
$.getJSON() 能夠完成js的「跨域」請求。
域名：域名+端口+項目，js默認不能跨域請求的（即在A服務器上寫了一個程序，在另B服務器上拿不到A服務器的數據）。
面試中會問到的：有沒有解決js中的跨域問題？
$.getScript() 動態加載js文件。
以前使用標籤 <script src="">加載頁面時，會一併加載不少js文件，有的js文件咱們暫時用不到，致使程序不夠優化。
- 回調函數的參數，一共有三個參數，第一個參數是最重要的
- 使用JQuery的工具類，解析json
- jQuery.parseJSON(json)
- jQuery.parseJSON(json)
9.一、load() 【3】
示例代碼以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax示例</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
// 給按鈕綁定事件
$("input").click(function() {
// alert("a");
// 1.一、肯定請求路徑
var url = "/day41_02_jQuery/SendDataServlet";
// 1.二、肯定請求參數，採用json
var params = {"username":"傑克", "password":"1234"};
/* 一、load() 普通函數 ，$符號開頭的叫全局函數，不是$開頭的是普通函數，普通函數必須使用jQuery對象才能得到
* * 格式：load(url, [data], [callback]) []中括號表示該項能夠省略
* 參數1：url，請求路徑
* 參數2：data，請求參數
* 參數3：callback，回調函數
*
* * 若是沒有請求參數，則發送的GET請求
* * 若是有請求參數，則發送的POST請求。該POST請求不會出現中文亂碼
* * 回調函數的參數，一共有三個參數，第一個參數是最重要的，掌握參數1便可
* 參數1：data，表示服務器響應的數據。
* load() 該函數永遠得到的數據是字符串，若是須要使用該數據，必須將字符串 手動轉換成 json對象。
*/
$(this).load(url, params, function() {
// load() 該函數永遠得到的數據是字符串，若是須要使用該數據，必須將字符串 手動轉換成 json對象。
var jsonData = eval("(" + data + ")");
alert(jsonData.message);
});
});
});
</script>
</head>
<body>
<input type="button" value="發送ajax"/>
</body>
</html>
9.二、$get() 【2】
示例代碼以下：
......
<script type="text/javascript">
$(function() {
// 給按鈕綁定事件
$("input").click(function() {
// alert("a");
// 1.一、肯定請求路徑
var url = "/day41_02_jQuery/SendDataServlet";
// 1.二、肯定請求參數，採用json
var params = {"username":"傑克", "password":"1234"};
/* 二、$.get() 全局函數，做用是：發送get請求
* * 格式：jQuery.get(url, [data], [callback], [type]) []中括號表示該項能夠省略
* 參數1：url，請求路徑
* 參數2：data，請求參數
* 參數3：callback，回調函數
* 參數4：type，返回的內容格式：xml, html, script, json, text, _default
*
* * GET請求不適合發送中文數據，由於請求的存在中文亂碼
* 因此必須手動解碼 new String(username.getBytes("ISO-8859-1"), "UTF-8");
*
* * 對於響應的數據，若是服務端使用的是：application/json;charset=UTF-8 ，那麼jQuery會自動將字符串數據 轉換成json對象。
* * 對於響應的數據，若是服務端使用的是：text/html;charset=UTF-8 ，那麼回調函數得到的是字符串數據，須要手動進行轉換。太麻煩，咱們可使用參數4
* 若是使用「參數4」，設置"json"，則jQuery會將字符串數據 轉換成 json對象。
*/
$.get(url, params, function(data) {
alert(data);
}, "json");
});
});
</script>
......
9.三、$post() 【1】
示例代碼以下：
......
<script type="text/javascript">
$(function() {
// 給按鈕綁定事件
$("input").click(function() {
// alert("a");
// 1.一、肯定請求路徑
var url = "/day41_02_jQuery/SendDataServlet";
// 1.二、肯定請求參數，採用json
var params = {"username":"傑克", "password":"1234"};
/* 三、$.post() 全局函數，做用：發送post請求
* * 格式：jQuery.post(url, [data], [callback], [type])
* 同上
*/
$.post(url, params, function(data) {
alert(data);
}, "json");
});
});
</script>
......
9.四、$ajax() 【4】
示例代碼以下：
......
<script type="text/javascript">
$(function() {
// 給按鈕綁定事件
$("input").click(function() {
// alert("a");
// 1.一、肯定請求路徑
var url = "/day41_02_jQuery/SendDataServlet";
// 1.二、肯定請求參數，採用json
var params = {"username":"傑克", "password":"1234"};
/* 四、$.ajax() 底層功能是最強大的，有的公司使用，能夠作出更炫的效果
* * 格式：jQuery.ajax(url,[settings])
* * 經常使用格式：jQuery.ajax([settings])
* 參數settings：設置全部的參數
* url:發送請求的地址
* data:發送到服務器的數據，即請求參數
* type:請求方式 ("POST" 或 "GET")
*
* success:請求成功的回調函數，success(data, textStatus, jqXHR)
* error:請求失敗時調用此函數
*
* dataType:預期服務器返回的數據類型
* "xml": 返回 XML 文檔，可用 jQuery 處理。
* "html": 返回純文本 HTML 信息；包含的script標籤會在插入dom時執行。
* "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。
* 注意：在遠程請求時(不在同一個域下)，全部POST請求都將轉爲GET請求。(由於將使用DOM的script標籤來加載)
* "json": 返回 JSON 數據 。
* "jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。
* "text": 返回純文本字符串
*/
$.ajax({
"url":url,
"data":params,
"type":"POST",
"success":function(data) {
alert(data);
},
"error":function() {
alert("服務器繁忙，請稍後重試");
},
"dataType":"json",
});
});
});
</script>
......
9.五、其餘--表單序列化
詳解以下：
serialize() 將表單中全部選中項拼湊成一個字符串
相似get請求參數，例如：username=jack&password=1234&gender=man&......
以下圖所示：
詳解以下：
serializeArray() 將表單中全部選中項拼湊一個json數組
返回的JSON對象是由一個對象數組組成的，其中每一個對象包含一個或兩個名值對——name參數和value參數（若是value不爲空的話）。
以下圖所示：
01
02
示例代碼以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// alert($("form").serialize());
alert($("form").serializeArray());
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0000;
}
</style>
</head>
......
10、jQuery 的其餘
10.一、事件冒泡
event.stopPropagation()
示例代碼以下：
3.事件冒泡.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>3.事件冒泡.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 事件冒泡：子元素的事件執行時，會一併觸發父元素相同的事件，咱們要阻止事件冒泡
$("#outerDiv").click(function() {
alert("outerDiv");
});
$("#innerDiv").click(function(event) {
alert("innerDiv");
// 方式1：使用return
// return false; // 默認是true
// 方式2：經過Event 對象提供的函數 event.stopPropagation() 阻止傳播行爲
event.stopPropagation();
});
});
</script>
</head>
<body>
<div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
<div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
</div>
<br/>
<span id="showSpan"></span>
</body>
</html>
10.二、瀏覽器默認動做|行爲
event.preventDefault();
示例代碼以下：
4.瀏覽器的默認動做.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>4.瀏覽器的默認動做.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// a標籤的默認行爲href連接，咱們想要阻止它
$("a").click(function(event) {
alert("歡迎來到黑澤明軍的博客");
// 方式1：
return false;
// 方式2：
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="https://www.cnblogs.com/chenmingjun">點我啊</a>
</body>
</html>
11、ajax案例
11.一、動態加載1
示例代碼以下：
動態加載1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax案例-動態加載1.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 鼠標往下移，內容就不斷的加載
$(document).ready(function() {
var num = 1;
// 一、先建立10個dv
for (var i = 0; i < 10; i++) {
createDiv();
}
// 建立div的函數
function createDiv() {
var $div = $("<div class='createDiv'/>");
$div.html(num ++);
$("body").append($div);
}
// 二、給瀏覽器添加滾動事件
$(window).scroll(function() {
// 2.一、滾過的高度
var wt = $(this).scrollTop();
// 2.一、整個文檔的高度
var dh = $(document).height();
// 2.一、窗口的高度
var wh = $(this).height();
// 三、當接近底部時，添加新的div
if (wt + wh + 100 > dh) {
createDiv();
// 發送ajax去填充數據
// ......
}
// 顯示數據
$("#showDiv").html("wt:" + wt + ", dh:" + dh + ", wh:" + wh);
});
});
</script>
<style>
.createDiv {
border: 1px solid #999;
width: 400px;
height: 100px;
margin: 5px;
font-size: 50px;
}
#showDiv {
border: 1px solid #999;
width: 500px;
height: 30px;
position: fixed;
bottom: 0;
right: 100px;
}
</style>
</head>
<body>
<div id="showDiv"></div>
</body>
</html>
示例動圖以下：
11.二、動態加載2
示例代碼以下：
動態加載2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax案例-抽獎信息顯示.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 一、先建立10個dv
for (var i = 0; i < 5; i++) {
createDiv();
}
// 建立div的函數
function createDiv() {
var $div = $("<div class='createDiv'/>");
$div.html(i+1);
$("body").append($div);
}
// 定時器
setInterval(showDiv, 100);
function showDiv() {
// 第一個div隱藏
$("div:first").slideUp(1000, function() {
// 把本身追加到最後
$(this).appendTo("body").slideDown(1000);
});
}
});
</script>
<style>
.createDiv {
border: 1px solid #999;
width: 400px;
height: 100px;
margin: 5px;
font-size: 50px;
}
</style>
</head>
<body>
</body>
</html>
示例動圖以下：
相關文章
- 1. day64_SpringMVC學習筆記_02
- 2. day62_Mybatis學習筆記_02
- 3. day46_Webservice學習筆記_02
- 4. SpringMVC學習筆記_02
- 5. day25_Struts2學習筆記_02
- 6. node學習筆記_02 API詳解
- 7. LabVIEW 學習_02
- 8. [知了堂學習筆記] java基礎回顧_02
- 9. [知了堂學習筆記]面試題整理_02
- 10. C#看書筆記_02 核心C#
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
