javascript涉及到的相關技術點：
dom操作
document.getElementById()
document.getElementsByTagName();
事件操作
dom二級事件操作
主流瀏覽器
addEventListener()
removeEventListener()
IE瀏覽器
attachEvent()
detachEvent()
事件物件
① 主流 事件處理函式的第一個形參 divnode.onclick = function(evt){}
② IE 全域性變數window.event
事件物件阻止事件流產生
主流 evt.stopPropagation()
IE evt.cancelBubble = true;
事件物件阻止瀏覽器預設動作
主流 evt.preventDefault()
IE evt.returnValue = false;
ajax使用
建立物件/onreadystatechange/open()/send()
jquery已經對上述等等許多內容做了封裝
使用jquery的時候可以明顯減少js程式碼的編寫量，瀏覽器相容問題也給做了相應的處理
例如使用jquery：
$.get(url,function(msg){}); //觸發ajax請求
$('#apple'); //獲得元素節點
$('div') //獲得元素節點
-------------------------------------------------------------------------------
1. 什麼是jquery
其是對javascript封裝的一個框架包
簡化對javascript的操作
javascript程式碼：dom獲得頁面節點物件、ajax操作、事件操作、事件物件
jquery程式碼：無需考慮瀏覽器相容問題、程式碼非常少
2. 宗旨和特點
宗旨：寫得程式碼很少，實現很多的功能
特點：
① 語法簡練、語義易懂、學習快速、豐富文件。
② jQuery 是一個輕量級的指令碼，其程式碼非常小巧
③ jQuery 支援 CSS1~CSS3 定義的屬性和選擇器
④ jQuery 是跨瀏覽器的，它支援的瀏覽器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
⑤ 能將 JavaScript (行為)指令碼與 HTML (結構)原始碼完全分離，便於後期編輯和維護。
外掛豐富，除了 jQuery 自身帶有的一些特效外，可以通過外掛實現更多功能
3. 出現的年代
jQuery 是繼 Prototype 之後又一個優秀的 JavaScript 框架，由 John Resig 於 2006 年初建立， 目前最新版本為 1.11.3，官方地址為：http://jquery.com/，中文地址為 http://jquery.org.cn/。
jquery版本：
1.0.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.2.x 1.2.6 1.3.x 1.4.x 1.5.x 1.6.x 1.7.x
1.8.x 1.9.x 1.10.x 1.11.x
2.x.x (對IE6/7/8支援不好)
4. 其他相關的javascript框架包
Prototype、YUI、Extjs、bindows、JSVM(國內)、mootools、jQuery
Prototype：與物件導向的原型繼承關鍵字prototype一致，該框架的特點是功能擴充套件比較容易。
YUI: yahoo user interface 雅虎使用者介面，該框架可以實現各種頁面佈局效果。
通過標籤切換到對應的內容是YUI實現效果之一
Extjs: 是目前js框架包裡邊最為時尚、前沿的。通過該框架包可以實現許多非常絢麗的效果。
該框架可以實現效果之一：頁面不同區域進行拖拽效果。
該框架由於實現的效果非常“絢麗”、導致其“實用”價值相對略低。
jQuery：javascript+query
使用前期，jquery側重快速找到頁面上各種節點。
後期jquery豐富了事件操作、ajax操作、動畫效果、DOM操作等等。
5. 簡單使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.11.3.js"></script>
</head>
<script type="text/javascript">
function f1(){
//document.getElementsByTagName('h2')[0].style.color = "red";
//獲得h2元素節點，並設定css樣式
//物件.css方法(引數，引數)
$('h2').css('color','blue');
//ajax請求
$.get('./01.jsp',function(msg){
alert(msg);
});
}
</script>
<body>
<h2>開始學習jquery</h2>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------------------
三. 選擇器
在頁面上獲得各種元素節點物件而使用的條件就是選擇器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
1. 基本選擇器
$(‘#id屬性值’) ----------->document.getElementById()
$(‘tag標籤名稱’)----------->document.getElementsByTagName();
$(‘.class屬性值’) class屬性值選擇器
$(‘*’) 萬用字元選擇器
$(‘s1,s2,s3’)聯合選擇器
5種基本選擇器的使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//① $(#id屬性值)
//$('#useremail').css(樣式名稱，樣式值);
$('#useremail').css('color','blue');
//② $(標籤名稱)
$('h2').css('background-color','pink');
$('input').css('width','500px');//獲得多個input框
//③ $(.class屬性值)
$('.apple').css('background-color','lightgreen');
//④ $(*) 萬用字元選擇器(獲得頁面全部節點)
//$('*').css('background-color','gray');
//⑤ $(s1,s2,s3) selector選擇器,聯合選擇器
//把符合s1 或 s2 或 s3條件的節點都給找到
$('h2,#usertel,#userqq').css('background-color','lightblue');
}
</script>
<style type="text/css">
h2{}
input{}
#useremail{}
.apple{}
*{margin:0; padding:0;}
h2,input,#useremail{}
</style>
</head>
<body>
<h2>基本選擇器(靈感來之css樣式選擇器)</h2>
<input type="text" id="username" value="linken" /><br />
<input type="text" id="useremail" value="linken@whitehouce.com" /><br />
<input type="text" class="apple" id="usertel" value="13264547364" /><br />
<input type="text" class="apple" id="userqq" value="2989244" /><br />
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------------------------------
2. 層次選擇器
2.1 $(s1 s2) [父子]
派生選擇器：在s1內部獲得全部的s2節點(不考慮層次)
$(“div span”); 在div內部獲得span節點
<div>
<span></span>
<p><span></span></p>
</div>
<span></span>
2.2 $(s1 > s2) [父子]
直接子元素選擇器: 在s1內部獲得子元素節點s2
$(‘div > span’); //在div內部獲得子元素span節點
<div>
<span></span>
<p><span></span></p>
<span></span>
</div>
<span></span>
2.3 $(s1 + s2) [兄弟]
直接兄弟選擇器：在s1後邊獲得緊緊挨著的第一個兄弟關係的s2節點
$(‘div + span’) //在div後邊獲得緊緊挨著的第一個兄弟關係的span節點
<div>
<span></span>
<p><span></span></p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>
2.4 $(s1 ~ s2) [兄弟]
後續全部兄弟關係節點選擇器：在s1後邊獲得全部兄弟關係的s2節點
$(‘div ~ span) //獲得div後邊全部兄弟關係的span節點
<div>
<span></span>
<p><span></span></p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>
<p></p>
<span></span>
層次選擇器的具體使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//① $(s1 s2) 派生選擇器（不考慮層次）
$('div span').css('color','blue'); //劉備 阿斗 關羽
//② $(s1 > s2) 直接子元素選擇器
$('div > span').css('background-color','lightgreen'); //劉備 關羽
//③ $(s1 + s2) 緊緊挨著的第一個兄弟關係選擇器
$('div + span').css('color','yellow'); //呂布 周瑜
//④ $(s1 ~ s2) s1後續全部兄弟關係的s2節點
$('div ~ span').css('background-color','purple'); //呂布 貂蟬 周瑜 孫權
}
</script>
</head>
<body>
<h2>層次選擇器</h2>
<div>
<span>劉備</span>
<p><span>阿斗</span></p>
<span>關羽</span>
</div>
<span>呂布</span>
<span>貂蟬</span>
<div>董卓</div>
<span>周瑜</span>
<p>黃蓋</p>
<span>孫權</span>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
------------------------------------------------------------------------------------------
3. 並且(過濾)選擇器
3.1 :first
用法: $(”tr:first”) ; 單個元素的組成的集合
匹配找到的第一個元素
3.2 :last
匹配找到的最後一個元素
3.3 :not(selector)
去除所有與給定選擇器匹配的元素
3.4 :even
匹配所有索引值為偶數的元素，從 0 開始計數
3.5 :odd
匹配所有索引值為奇數的元素，從 0 開始計數
3.6 :eq(index)
匹配一個給定索引值的元素，從 0 開始計數
3.7 :gt(index)
匹配所有大於給定索引值的元素，從 0 開始計數
3.8 :lt(index)
匹配所有小於給定索引值的元素，從 0 開始計數
3.9 :header
匹配如 h1, h2, h3之類的標題元素
----------------------------------------------------
3.1 基本用法
並且選擇器的基本使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//① :first 第一個 :last 最後一個
$('li:first').css('color','blue'); //獲得li元素 並且需要是第一個
$('li:last').css('color','green');
//② :eq(下標索引號碼) equal等於意思 獲得節點的下標索引值 與 給定索引值相等
$('li:eq(3)').css('color','red');
//③ :gt(索引號) great than節點索引值 大於 某個範圍
// :lt(索引號) less than節點索引值 小於 某個範圍
$('li:gt(5)').css('background-color','pink');
$('li:lt(3)').css('background-color','orange');
//④ :even 匹配到下標索引值為偶數的節點
// :odd 匹配到下標索引值為奇數的節點
$('li:odd').css('background-color','lightblue');
$('li:even').css('background-color','lightgreen');
//⑤ :not(selector選擇器) 去除某個節點
$('li:not(#yun)').css('color','blue');
}
</script>
</head>
<body>
<h2>並且選擇器</h2>
<ul>
<li>劉備</li>
<li>關羽</li>
<li>張飛</li>
<li id="yun">趙雲</li>
<li>孫權</li>
<li>小喬</li>
<li>周瑜</li>
<li>黃蓋</li>
<li>大喬</li>
</ul>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------
3.2 複雜用法
注意：
① 並且選擇器可以單獨使用
② 各種選擇器都可以構造“並且”關係
③ 並且關係的選擇器可以使用多個，每個選擇器使用前，已經獲得節點的下標要“歸位”(歸零)
④ 多個並且關係的選擇器，沒有前後順序要求，但是要避免產生“歧義”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//$('h1,h2,h3,h4')
$(':header').css('background-color','yellow');
//獲得“標題標籤元素”，並且有“class=pear”屬性值
//$(':header')
//$('.pear')
$(':header.pear').css('color','red');
//獲得 張飛、趙雲、孫權
//每個選擇器使用前，已經獲得節點的下標要“歸位”(歸零)
$('li:gt(1):lt(3)').css('color','blue');
//多個並且關係的選擇器，沒有前後順序要求，但是要避免產生“歧義”
$('li.pear').css('background-color','orange');
}
</script>
</head>
<body>
<h1>並且選擇器1</h1>
<h2>並且選擇器2</h2>
<h3 class="pear">並且選擇器3</h3>
<h4 class="pear">並且選擇器4</h4>
<ul>
<li>劉備</li>
<li>關羽</li>
<li>張飛</li>
<li id="yun">趙雲</li>
<li>孫權</li>
<li class="pear">小喬</li>
<li class="pear">周瑜</li>
<li>黃蓋</li>
<li>大喬</li>
</ul>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------------
4. 內容過濾選擇器
4.1 :contains(內容)
包含內容選擇器，獲得的節點內部必須包含指定的內容
$(‘div:contains(beijing)’)
<div>I like <span>beijing</span></div> //標籤不構成影響
<div>xiaoming like shanghai</div>
4.2 :empty
獲得空元素(內部沒有任何元素/文字(空) )節點物件
$(‘div:empty’)
<div>I like <span>beijing</span></div>
<div> </div>
<div>hello</div>
<div><img /></div>
<div></div>
4.3 :has(選擇器)
節點內部必須包含指定選擇器對應的元素
$(‘div:has(#apple)’)
<div><p></p></div>
<div><span id=’apple’></span></div>
4.4 :parent
尋找的節點必須作為父元素節點存在
$(‘div:parent’)
<div></div>
<div> </div>
<div><input type=”text”></div>
<div>sun</div>
內容過濾選擇器的具體使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//①:contains(text)
$('div:contains(beijing)').css('color','red');
//② :empty 空節點
console.log($('div:empty'));//Object[div]
//③ :has(選擇器)
$('div:has(p)').css('background-color','pink');
//④ :parent 作為父節點存在的節點
console.log($('div:parent'));//Object[div, div, div, div]
}
</script>
</head>
<body>
<h2>內容過濾選擇器</h2>
<div>I like <span>beijing</span></div> <!--標籤不構成影響-->
<div>xiaoming like shanghai</div>
<div></div>
<div>sun</div>
<div><p>hello</p></div>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
--------------------------------------------------------------------------
5. 表單域選中選擇器
核取方塊、單選按鈕、下拉選單
$(:checked)核取方塊、單選按鈕 選中選擇器
$(:selected) 下拉選單 選中選擇器
獲得核取方塊、單選按鈕、下拉選單的選中元素節點：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//:checked 獲得被選中的核取方塊
console.log($('.hby:checked'));
//Object[input.hby 屬性(attribute)值 = "2", input.hby 屬性(attribute)值 = "3", input.hby 屬性(attribute)值 = "4"]
//:checked 獲得被選中的單選按鈕
console.log($('.sx:checked'));//Object[input.sx 屬性(attribute)值 = "c"]
//:selected 獲得被選中的下拉選單專案
console.log($('option:selected'));//Object[option]
}
</script>
</head>
<body>
<h2>表單域選中選擇器</h2>
愛好：
<input type="checkbox" class="hby" name="hobby[]" value="1">籃球
<input type="checkbox" class="hby" name="hobby[]" value="2">足球
<input type="checkbox" class="hby" name="hobby[]" value="3">排球
<input type="checkbox" class="hby" name="hobby[]" value="4">棒球
<hr /></hr />
性別：
<input type="radio" class="sx" name="sex" value="a">男
<input type="radio" class="sx" name="sex" value="b">女
<input type="radio" class="sx" name="sex" value="c">保密
<hr /></hr />
城市：
<select>
<option value='A'>北京</option>
<option value='B'>天津</option>
<option value='C'>上海</option>
<option value='D'>深圳</option>
</select>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
---------------------------------------------------------------------
總結：
1. 各種選擇器
a) 基本選擇器 $(#id) $(.class) $(tag) $(*) $(s1,s2,s3)
b) 層次選擇器
$(s1 s2)
$(s1 > s2)
$(s1 + s2)
$(s1 ~ s2)
c) 並且選擇器
:first :last
:gt(n) :lt(n) :eq(n)
:even :odd
$(s1s2s3) :[並且]節點要符合s1/s2/s3全部的條件
$(s1,s2,s3):[聯合] 節點符合s1、s2、s3其中一個條件即可
d) 內容過濾選擇器
:contains(txt)
:empty
:has(selector)
:parent
e) 表單域選中選擇器
：checked
：selected
----------------------------------------------------------------------------------
四. 屬性操作
<input type=”text” class=”apple” id=”username” name=”username” value=”tom”
address=”beijing” />
itnode.屬性名稱
itnode.屬性名稱= 值;
itnode.getAttribute(屬性名稱);
itnode.setAttribute(屬性名稱，值);
jquery方式操作屬性(attribute)：
$().attr(屬性名稱); //獲得屬性資訊值
$().attr(屬性名稱，值); //設定屬性的資訊
$().removeAttr(屬性名稱); //刪除屬性
$().attr(json物件); //同時為多個屬性設定資訊值，json物件的鍵值對就是名稱和值
$().attr(屬性名稱，fn); //通過fn函式執行的return返回值對屬性進行賦值
屬性值的獲取和設定操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//獲取屬性資訊(自定義屬性 和 w3c規定的屬性 都可以獲取)
console.log($('input:first').attr('type')); //text
console.log($('input:first').attr('class')); //apple
console.log($('input:first').attr('id')); //username
console.log($('input:first').attr('name')); //username
console.log($('input:first').attr('value')); //tom
console.log($('input:first').attr('address')); //beijing
}
function f2(){
//修改屬性(除了type屬性，其他屬性都可以修改)
$('input:first').attr('class','orange');
$('input:first').attr('id','usertel');
$('input:first').attr('name','usertel');
$('input:first').attr('value','13243635363');
$('input:first').attr('address','shanghai');
//$('input:first').attr('type','checkbox');//禁止修改
//js底層程式碼在有的瀏覽器裡邊可以修改
//document.getElementById('username').type = "checkbox";
}
function f3(){
//刪除屬性(除了type屬性，其他屬性都可以刪除)
$('input:first').removeAttr('class');
$('input:first').removeAttr('id');
$('input:first').removeAttr('name');
$('input:first').removeAttr('value');
$('input:first').removeAttr('address');
//$('input:first').removeAttr('type');//禁止刪除
}
function f4(){
//批量修改多個屬性$().attr(json物件);
var jn = {class:'pear',id:'useremail',name:'useremail',value:'jim@163.com',address:'shenzhen'};
$('input:first').attr(jn);
}
function f5(){
//通過函式執行後return的返回值對屬性進行修改賦值操作
$('input:first').attr('value',function(){
//xxxxxxxxx
return 12+30;
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>屬性操作</h2>
<input type="text" class="apple" id="username" name="username" value="tom" address="beijing" />
<br /><br />
<input type="button" value="獲取" onclick="f1()" />
<input type="button" value="設定" onclick="f2()" />
<input type="button" value="刪除屬性" onclick="f3()" />
<input type="button" value="批量修改屬性" onclick="f4()" />
<input type="button" value="函式修改屬性" onclick="f5()" />
</body>
</html>
--------------------------------------------------------------------------------------------
五. 快捷操作
1. class屬性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class屬性’); //刪除class的屬性
class具體快捷操作方法：
$().addClass(class屬性值); //給class屬性追加資訊值
$().removeClass(class屬性值); //刪除class屬性中的某個資訊值
$().toggleClass(class屬性值); //開關效果，資訊值有就刪除，沒有就新增
class屬性值的“追加”和“刪除”操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//給div設定class屬性值
//attr()對同一個屬性進行多次設定修改，後者要覆蓋前者
//以下三條語句，最終“class=banana”
//$('div').attr('class','apple');
//$('div').attr('class','pear');
//$('div').attr('class','banana');
//addClass()給class屬性"追加"資訊值
//以下class的三個資訊值會同時存在
$('div').addClass('apple');
$('div').addClass('pear');
$('div').addClass('banana');
}
function f2(){
//刪除class屬性值
$('div').removeClass('pear');//刪除class屬性中的pear資訊值
$('div').removeClass('apple');
$('div').removeClass('banana');
//$('div').removeAttr('class');//刪除class屬性
}
function f3(){
$('div').toggleClass('apple');//開關效果
}
</script>
<style type="text/css">
.apple{width:300px; height:200px; background-color:pink;}
.pear{color:blue;}
.banana{font-size:30px;}
</style>
</head>
<body>
<h2>class屬性快捷操作</h2>
<div>Today we are studying jQuery</div>
<input type="button" value="設定" onclick="f1()" />
<input type="button" value="刪除class屬性值" onclick="f2()" />
<input type="button" value="開關效果" onclick="f3()" />
</body>
</html>
--------------------------------------------------------------------------
2. 標籤包含內容操作
<div>hello<span>world</span></div>
javascript操作：
dvnode.innerHTML; 獲得div包含的資訊
dvnode.innerHTML = XXX； 設定div包含的內容
(innerHTML不是w3c標準技術，許多瀏覽器對其有支援而已)
jquery操作：
$().html(); //獲得節點包含的資訊
$().html(資訊); //設定節點包含的內容
$().text(); //獲得節點包含的“文字字串資訊”內容
$().text(資訊); //設定節點包含的內容(有html標籤就把“><”符號變為符號實體)
html()和text()方法的使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//獲取
//html() "字串" 和 "html標籤" 都可以獲取
console.log($('div').html());//Today we are <span>studying</span> jQuery
//text() 只給獲取"字串"內容
console.log($('div').text());//Today we are studying jQuery
}
function f2(){
//設定
//html(內容); "字串" 和 "html標籤" 都可以設定
//$('div').html('請訪問<a href="http://www.baidu.com">百度</a>');//有具體"百度"超連結體現
//text(內容); 最好設定普通"字串"內容
// 如果有html標籤，則標籤的"<"">"符號會變為符號實體
// <-----< >------->
$('div').text('<p>hel</p>lo');
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>標籤包含內容操作</h2>
<div>Today we are <span>studying</span> jQuery</div>
<input type="button" value="獲取" onclick="f1()" />
<input type="button" value="設定" onclick="f2()" />
</body>
</html>
-----------------------------------------------------------------------------------
3. css樣式操作
$().css(name，value); //設定
$().css(name); //獲取
$().css(json物件); //同時修改多個css樣式
3.1 css()樣式操作特點：
① 樣式獲取，jquery可以獲取 行內、內部、外部的樣式。
dom方式只能獲得行內樣式
② 獲取複合屬性樣式 需要拆分為"具體樣式"才可以操作
(有的瀏覽器是可以獲得複合屬性資訊的，例如chrome)
例如： background 需要拆分為 background-color background-image 等進行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等
③ 樣式的設定，會被設定為“行內樣式”
有則修改，無則新增
(複合屬性樣式可以直接進行設定操作)
獲取div的各個樣式資訊：
給div設定一些css樣式資訊：
通過一個json物件批量修改樣式資訊：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//獲取
//行內、內部、外部樣式都可以獲得
//javascript的dom方式只能獲得"行內"樣式
console.log($('div').css("color")); //rgb(255, 0, 0)
console.log($('div').css("width")); //300px
console.log($('div').css("height")); //200px
console.log($('div').css("background-color")); //rgb(173, 216, 230)
console.log($('div').css("font-size")); //25px
//console.log($('div').css("border"));//(空字串)
//"複合樣式"需要拆分為"具體樣式"進行獲取
console.log($('div').css('border-left-style')); //solid
console.log($('div').css('border-left-color')); //rgb(0, 0, 255)
console.log($('div').css('border-left-width')); //4px
}
function f2() {
//設定(會被設定為"行內"樣式)
//有則修改、無則新增
$('div').css('font-size', '40px'); //新增
$('div').css('color', 'green'); //修改
$('div').css('width', '400px'); //新增
//複合樣式可以直接進行設定
$('div').css('border', '5px solid yellow');
}
function f3() {
//通過json物件批量修改css樣式
$('div').css({
'font-size': '50px',
color: 'purple',
height: '300px'
});
}
</script>
<link href="css/11.css" type="text/css" rel="stylesheet" />
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>css樣式操作</h2>
<!--樣式分類：行內、內部、外部-->
<div style="color:red;">Today we are studying jQuery</div>
<input type="button" value="獲取" onclick="f1()" />
<input type="button" value="設定" onclick="f2()" />
<input type="button" value="json物件批量修改樣式" onclick="f3()" />
</body>
</html>
---------------------------------------------------------------------------------
4. value屬性值快捷操作
$().attr(‘value’);
$().attr(‘value’,資訊值);
快捷操作：
$().val(); //獲得value屬性值
$().val(資訊值); //設定value屬性的值
該val()方法在 核取方塊、單選按鈕、下拉選單 的使用有凸出表現。
4.1 核取方塊操作
① 獲得被選中核取方塊的value屬性值
② 設定預設情況下哪個核取方塊被選中
獲取被選中核取方塊value值的邏輯：
通過val()方法可以非常方便地設定哪個核取方塊選中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//獲取(被選中核取方塊的value值)
//① 獲得全部的"被選中"核取方塊元素節點物件
//②遍歷全部的被選中核取方塊
//③如果有選中就獲得其value值
//console.log($('.hby:checked'));//其是一個Object物件，內部有具體的核取方塊元素節點物件
//Object[input.hby 屬性(attribute)值 = "1", input.hby 屬性(attribute)值 = "3", input.hby 屬性(attribute)值 = "4"]
var s = "";
for(var i=0; i<$('.hby:checked').length; i++){
//$('.hby:checked:eq('+i+')') //被遍歷出來的當前的核取方塊元素節點
//console.log($('.hby:checked:eq('+i+')').val());
s += $('.hby:checked:eq('+i+')').val()+","; //1,3,4
}
//s = s.substr(起始位置,長度); //字串擷取
s = s.substr(0,s.length-1); //去除最後','逗號
console.log(s);//2,3,4
}
function f2(){
//設定，"籃球" "足球" "棒球" 選中
//獲得全部核取方塊，做遍歷，判斷當前專案的value值是否等於1或4
//等於就選中
//$(全部的核取方塊).val([元素值，元素值])，可以設定"value值=元素值"的專案選中
$('.hby').val([1,2,4]);
}
</script>
<link href="js/11.css" type="text/css" rel="stylesheet" />
<style type="text/css">
div{width:300px; height:200px; background-color:lightblue;}
</style>
</head>
<body>
<h2>核取方塊操作</h2>
愛好：
<input type="checkbox" class="hby" name="hobby[]" value="1">籃球
<input type="checkbox" class="hby" name="hobby[]" value="2">足球
<input type="checkbox" class="hby" name="hobby[]" value="3">排球
<input type="checkbox" class="hby" name="hobby[]" value="4">棒球
<br /><br />
<input type="button" value="獲取" onclick="f1()" />
<input type="button" value="設定" onclick="f2()" />
</body>
</html>
-----------------------------------------------------------------------------------
4.2 下拉選單操作
下拉選單獲得選中專案value值，和 設定預設選中專案操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//獲取(被選中下拉選單專案的value值)
//適合"單選"的下拉選單
//console.log($('option:selected').val()); //attr('value')
//"多選"的情況（適合單選情況）
$(下拉選單).val(); //獲得全部被選中的下拉選單專案的value值
console.log($('select').val());//["B", "D", "E"]
}
function f2(){
//設定，北京 天津 瀋陽 選中(單選、多選都適合)
//$(下拉選單).val([元素值，元素值。。。]); //可以設定"value值=元素值"的專案選中
$('#city').val(['A','B','E']);
}
</script>
</head>
<body>
<h2>下拉選單操作</h2>
曾經旅遊過的城市：
<select id="city" multiple="multiple" style='width:150px; height:246px;'>
<option value='0'>-請選擇-</option>
<option value='A'>北京</option>
<option value='B'>天津</option>
<option value='C'>上海</option>
<option value='D'>深圳</option>
<option value='E'>瀋陽</option>
</select>
<br /><br />
<input type="button" value="獲取" onclick="f1()" />
<input type="button" value="設定" onclick="f2()" />
</body>
</html>
-------------------------------------------------------------------------------
4.3 單選按鈕操作
獲得選中專案的value值 和 設定預設選中專案操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//獲取(被選中單選框專案的value值)
console.log($('.sx:checked').val());
}
function f2(){
//設定
//$(全部單選按鈕).val([元素值]);//使得value值===元素值的專案選中
$('.sx').val(['c']);
}
</script>
</head>
<body>
<h2>單選按鈕操作</h2>
性別：
<input type="radio" class="sx" name="sex" value="a">男
<input type="radio" class="sx" name="sex" value="b">女
<input type="radio" class="sx" name="sex" value="c">保密
<hr /></hr />
<br /><br />
<input type="button" value="獲取" onclick="f1()" />
<input type="button" value="設定" onclick="f2()" />
</body>
</html>
-------------------------------------------------------------------------------
5. 核取方塊操作
全選、反選、全不選
$().attr(‘checked’,true); //設定核取方塊選中
$().attr(‘checked’,false); //取消核取方塊選中
$().attr(‘checked’); //判斷核取方塊選中情況，返回布林值
核取方塊全選、全不選、反選的實現邏輯：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function selAll(){
//全選 $('li').css('color','red');
$('.hby').attr('checked',true);
//以上css()/attr()方法都有批量處理效果
//在jquery框架裡邊，大部分方法本身有“遍歷機制”
//遍歷同時會為每個dom物件都設定對應的(css)屬性
}
function selnotAll(){
//全不選
$('.hby').attr('checked',false);
}
function selfan(){
//遍歷全部的核取方塊，檢視選中狀態，選中設定不選中
//$('.hby')
for(var i=0; i<$('.hby').length; i++){
var flag = $('.hby:eq('+i+')').attr('checked');//判斷選中狀態
$('.hby:eq('+i+')').attr('checked',!flag);
}
}
</script>
</head>
<body>
<h2>核取方塊操作</h2>
愛好：
<input type="checkbox" class="hby" name="hobby[]" value="1">籃球
<input type="checkbox" class="hby" name="hobby[]" value="2">足球
<input type="checkbox" class="hby" name="hobby[]" value="3">排球
<input type="checkbox" class="hby" name="hobby[]" value="4">棒球
<br /><br />
<input type="button" value="全選" onclick="selAll()" />
<input type="button" value="全不選" onclick="selnotAll()" />
<input type="button" value="反選" onclick="selfan()" />
</body>
</html>
----------------------------------------------------------------------------------
總結:
1. 屬性操作
$().attr(name)
$().attr(name,value)
$().removeAttr(name)
$().attr(json物件);
$().attr(name,fn)
自定義屬性 和 w3c規定的 都可以操作
2. 快捷操作
a) class屬性值快捷操作
addClass() //給class屬性“追加”資訊值
removeClass() //給class屬性“刪除”資訊值
toggleClass() //開關效果
b) 標籤包含內容
html()
text()
c) val() value屬性快捷操作
val() ----- attr(‘value’)
val(內容)----- attr(‘value’,值);
核取方塊、單選框、下拉選單.val([元素值，元素值，元素值])
d) 核取方塊選中、不選中
核取方塊.attr(‘checked’,true/false)
核取方塊.attr(‘checked’)
------------------------------------------------------------------------------
一．昨天內容回顧
1. 各種選擇器使用
a) 基本 $(#id) $(.class) $(標籤名稱) $(*) $(s1,s2,s3)
b) 層次
$(s1 s2) $(s1 > s2)
$(s1 + s2) $(s1 ~ s2)
c) 並且
:first :last
:eq(n) :gt(n) :lt(n)
:odd :even
普通選擇器也可以構成並且關係
$(s1s2s3s4) 獲得的節點要同時滿足s1/s2/s3/s4四個條件
在沒有歧義的情況下各個並且選擇器沒有前後順序要求
d) 內容過濾
:contains(text) :empty
:has(selector) :parent
e) 表單域選中
核取方塊、單選按鈕 :checked
下拉選單option標籤 :selected
2. 屬性操作
$().attr(name)
$().attr(name,value)
$().attr(json物件)
$().removeAttr(name)
$().attr(name,function)
3. 快捷操作
a) class屬性
addClass() removeClass() toggleClass()
b) 標籤包含內容
html([text]) text([txt])
c) css樣式操作
$().css(name) $().css(name,value) $().css(json物件)
d) val()方法
對value屬性操作
$().val()
$().val(text)
$(核取方塊/下拉選單/單選按鈕).val([陣列])
$(下拉選單).val(); //獲得選中下拉選單專案的value值
e) 核取方塊選中設定
$().attr(‘checked’,true/false); $().attr(‘checked’)
------------------------------------------------------------------
二．作業
1. 使用“並且選擇器”實現下圖效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
window.onload = function() {
$('tr:first').css('background-color', 'yellow');
$('tr:gt(0):odd').css('background-color', 'lightblue');
}
function cont() {
//通過控制器核取方塊，控制其他核取方塊的選中狀態
var flag = $('#ctl').attr('checked'); //判斷選中狀態
$('.goods').attr('checked', flag) //其他核取方塊狀態設定
}
</script>
<style type="text/css">
table {
width: 700px;
margin: auto;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
h2 {
width: 700px;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<h2>表格隔行換色</h2>
<table>
<tr>
<td><input type="checkbox" id="ctl" onclick="cont()" /></td>
<td>序號</td>
<td>名稱</td>
<td>價格</td>
<td>數量</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>1</td>
<td>apple</td>
<td>6100</td>
<td>13</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>2</td>
<td>nokia</td>
<td>2300</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>3</td>
<td>htc</td>
<td>2500</td>
<td>28</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>4</td>
<td>heimei</td>
<td>3100</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>5</td>
<td>samsung</td>
<td>4600</td>
<td>41</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------
2. 製作圖片放大、縮小效果(圖片等比例縮放效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function big() {
//放大
//① 獲得圖片原寬度、高度
var w = $('img').width();
//var h = $('img').height();
//② 遞增操作(5px)
var new_w = w + 5;
//等比例 w/h = new_w/new_h
//var new_h = new_w*h/w;
//③ 把新寬度、高度給圖片進行設定
$('img').width(new_w);
//$('img').height(new_h);
}
function small() {
//縮小
//① 獲得圖片原寬度、高度
var w = $('img').width();
var h = $('img').height();
//② 遞增操作(5px)
var new_w = w - 5;
//等比例 w/h = new_w/new_h
var new_h = new_w * h / w;
//③ 把新寬度、高度給圖片進行設定
$('img').width(new_w);
$('img').height(new_h);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>圖片放大縮小</h2>
<img src="img/zhou.gif" alt="" width="400" />
<br />
<input type="button" value="放大" onclick="big()" />
<input type="button" value="縮小" onclick="small()" />
</body>
</html>
-------------------------------------------------------------------
三. $符號的由來
$(‘div’) $(‘.apple’) $(‘*’) $(’#id屬性值‘)等等。
選擇器使用的過程就是函式呼叫過程。
$符號就是一個函式，函式名稱為”$”符號而已。也可以使用“jQuery”符號。
$符號 就是一個函式，同時其也是一個全域性變數，除此之外還可以使用jQuery符號，它們互為別名。
---------------------------------------------------------------------------------------
四. jquery物件 與 dom物件關係
jquery物件：$(‘li’) $(‘.apple’) $(‘#one’)
等選擇器使用返回的資訊就是物件，
稱為jquery物件
dom物件： document.getElementById()
document.getElementsByTagName();
1. 互調對方的成員
jquery物件 和 dom物件 不能隨便呼叫對方的成員：
2. jquery物件封裝dom物件
dom物件 就是jquery物件 的陣列組成部分。
jquery物件 對 document.getElementById()方法的封裝：
3. jquery物件 和 dom物件 的轉化
3.1 jquery物件--》dom物件
$()[下標]
jquery物件變為dom物件之後可以呼叫dom物件的成員：
3.2 dom物件--》jquery物件
$(dom物件)
dom物件變為jquery物件才可以呼叫對方方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
document.getElementsByTagName('h2')[0].style.backgroundColor = "pink";
//jquery物件 去呼叫 dom物件的成員【失敗】
//$(...).style is undefined
//$('h2').style.backgroundColor = "lightblue";
//"jquery物件"變為"dom物件"才可以呼叫對方成員【成功】
$('h2')[0].style.backgroundColor = "lightgreen";
}
function f2() {
//$('div').css('color','red');
//dom物件 去呼叫 jquery物件的成員【失敗】
var dv = document.getElementsByTagName('div')[0];
// document.getElementsByTagName(...)[0].css is not a function
//dv.css('color','blue');
//"dom物件" 變為 "jquery物件" 才可以呼叫對方成員【成功】
//$(dom物件) dom物件選擇器
$(dv).css('color', 'orange');
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>圖片放大縮小</h2>
<div>This is Tuesday</div>
<input type="button" value="觸發1" onclick="f1()" />
<input type="button" value="觸發2" onclick="f2()" />
</body>
</html>
-----------------------------------------------------------------------
五. jQuery框架物件分析
jQuery框架物件型別：jquery物件 和 $物件
① jquery物件(普通物件)：就是各種選擇器建立出來的物件 $(div)$(.class) $(#id)
② $物件就是”函式物件” $.get()
1. jquery物件
$(‘#apple’)------> 24行 new jQuery.fn.init()
以上jquery物件 可以呼叫許多成員 css() attr() addClass() html() text()等等
問題：
jquery物件 可呼叫的各種成員 是從哪來的？
答：
jquery物件可以呼叫的成員共分為三類：init()、fn()、fn.extend()
其中fn.extend()複製繼承佔多數。
普通的jquery物件呼叫成員的90%以上都是jQuery.fn.extend()複製繼承過來的。
jQuery.fn.init通過原型繼承jQuery.fn
jQuery.fn本身有extend複製繼承，可以為自己豐富許多成員：
2. $物件
$物件 也可以成為 jQuery物件。
$物件-------------->函式物件
該$物件可以呼叫的成員都是extend複製繼承過來的
$.get() $.post() $.ajax()
$物件 的全部成員都是通過extend()複製繼承過來的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//$('#apple') 是對 document.getElementById('apple')的封裝
//$('#apple').css('color','green');
//console.log($('#apple'));//Object[div#apple]
//$('#apple')
//console.log($('div'))
console.log($('li'))
$('li')[1].style.color = "red";
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>圖片放大縮小</h2>
<div id="apple">This is Tuesday</div>
<ul>
<li>哈爾濱</li>
<li>長春</li>
<li>瀋陽</li>
</ul>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
$('#apple').css/addClass()/attr()/html()/text();
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>圖片放大縮小</h2>
<div id="apple">This is Tuesday</div>
<ul>
<li>哈爾濱</li>
<li>長春</li>
<li>瀋陽</li>
</ul>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
------------------------------------------------------------------------------------
六. 遍歷方法
each()遍歷方法：
$.each(陣列/物件,function處理); //$物件 呼叫的
$(選擇器).each(function處理); //jquery物件 呼叫的
each()方法對陣列和物件的遍歷：
each()方法對jquery物件的遍歷 及內部this關鍵字的使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
//each()遍歷方法
//① 遍歷陣列
// for迴圈 for-in
// $.each(陣列,function(k每個元素下標,v每個元素的值){});
var color = ['gold', 'yellow', 'orange', 'blue'];
$.each(color, function(k, v) {
//遍歷的主體實現
console.log(k + "---" + v);
});
//② 遍歷物件(獲得各個成員)
// $.each(物件,function(k成員名稱,v成員值){});
var cat = {
name: 'kitty',
color: "white",
climb: function() {
console.log('會爬樹')
}
};
$.each(cat, function(k, v) {
console.log(k + '--' + v);
});
var clr = ['red', 'blue', 'pink', 'purple', 'yellow', 'orange', 'gray'];
window.onload = function() {
//③ 遍歷jquery物件
//$().each(function(k-dom物件下標,v-dom物件){});
jQuery('li').each(function(k, v) {
//console.log(k+"----"+v); //0 1 2 3 object HTMLLIElement
//this關鍵字在當前位置代表"每個li的dom物件"
//在jquery內部使用this的時候，其就是代表dom物件
//console.log(this);//依次代表每個li的dom物件
this.style.color = "purple";
$(this).css('background-color', clr[Math.floor(Math.random() * 7)]); //隨機數顏色
//v.style.color = "blue"; //dom物件進行樣式設定
//$(v).css('background-color','lightgreen');//dom物件 變成 jquery物件 了
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>each遍歷方法</h2>
<ul>
<li>石家莊</li>
<li>濟南</li>
<li>鄭州</li>
<li>西安</li>
</ul>
</body>
</html>
----------------------------------------------------------------------------------------------
總結：
1. $符號的由來
2. jquery物件 和 dom物件的關係
dom物件 是 jquery物件 的陣列組成部分
jquery物件------->dom物件: $()[下標]
dom物件------->jquery物件: $(dom物件)
3. jQuery框架物件分析
a) jquery物件成員的來源分析：
new jQuery.fn.init()
可以呼叫的成員分為三類： jQuery.fn.init()、jQuery.fn()、 jQuery.fn.extend()
b) $物件
$物件(jQuery符號物件)的成員都是extend()複製繼承過來的
4. each()
------------------------------------------------------------------------------------------------
七. 載入事件
javascript的載入事件：
<body onload = “函式()”>
window.onload = function(){}
1. jquery載入事件實現
① $(document).ready(function處理);
$(document)是把document的dom物件變為jquery物件
② $().ready(function處理);
$()也是建立jquery物件，不過內部沒有dom物件的組成部分
③ $(function處理); 對第一種載入的封裝而已
jquery載入事件的三種體現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
//jquery物件 ---> ready()方法,其屬於fn的成員
//jquery物件可以呼叫成員：init()、fn()、extend()
//① $(document).ready(function);
$(document).ready(function() {
//具體載入事件實現
alert(1234);
});
//② $().ready(function);
$().ready(function() {
console.log('abcd');
});
//③ $(function);
// 該方式載入事件是對第①種的封裝
$(function() {
console.log('fghi');
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>jquery載入事件實現</h2>
</body>
</html>
-----------------------------------------------------------------------
2. jquery載入事件與傳統載入事件的區別
2.1 設定個數
在同一個請求裡邊，jquery載入事件的可以設定多個，而傳統方式只能設定一個
傳統方式載入事件是給onload事件屬性賦值，多次賦值，後者會覆蓋前者。
jquery方式載入事件是把每個載入事件都存入一個陣列裡邊併成為陣列的元素，
執行的時候就遍歷該陣列執行每個元素即可，因此其可以設定多個載入事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//傳統載入事件，在同一個請求裡邊如果設定多個
//後者會覆蓋前者
//最好只設定一個
window.onload = function(){
console.log(1234);
}
window.onload = function(){
console.log(2345);
}
window.onload = function(){
console.log(3456);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2></h2>
</body>
</html>
----------------------------------------------------------
2.2 執行時機不一樣
傳統方式載入事件，是全部內容(文字、圖片、樣式)在瀏覽器顯示完畢再給執行載入事件。
廣告圖片小叉隱藏圖片實現（在載入事件裡邊給圖片的小叉設定onclick事件）
使用者名稱輸入框有點選隱藏灰色的文字(在載入事件裡邊給輸入框設定onclick事件，隱藏灰色文字)
jquery方式載入事件，只要全部內容(文字、圖片、樣式)在記憶體裡邊對應的DOM樹結構繪製完畢就給執行，有可能對應的內容在瀏覽器裡邊還沒有顯示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//傳統載入：頁面上全部內容在瀏覽器裡邊顯示好了，再給執行
window.onload = function(){
alert(1234);//4s之後 "圖片" 和 "彈出框" 同時看到
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>載入事件的執行時機</h2>
<!--4s後出現圖片-->
<img src="./09.php" alt="" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
//jquery載入事件：全部內容在記憶體裡邊繪製好了就給執行，
// 有可能對應的內容還沒有在瀏覽器裡邊顯示
$(function(){
alert('abcd'); //先看到彈出框，4s後看到圖片
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>載入事件的執行時機</h2>
<!--4s後出現圖片-->
<img src="./09.php" alt="" />
</body>
</html>
----------------------------------------------------------------------
3. jquery載入事件原理
jquery載入事件是對DOMContentLoaded的封裝(非onload)
jquery載入事件的原理實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//jquery載入事件原理：其是對DOMContentLoaded的封裝(非onload)
document.addEventListener('DOMContentLoaded',function(){
alert('111222'); //先看到彈出框,4s後看到圖片
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>載入事件的執行時機</h2>
<!--4s後出現圖片-->
<img src="./09.php" alt="" />
</body>
</html>
------------------------------------------------------------------------
八. 普通(簡單)事件操作
① dom1級事件設定
<input type=”text” onclick=”過程性程式碼” value=’tom’ />
<input type=”text” onclick=”函式()” />
itnode.onclick = function(){}
itnode.onclick = 函式;
② dom2級事件設定
itnode.addEventListener(型別，處理，事件流);
itnode.removeEventListener(型別，處理，事件流);
node.attachEvent();
node.detachEvent();
③ jquery事件設定
$().事件型別(事件處理函式fn); //設定事件
$().事件型別(); //觸發事件執行
事件型別：click、keyup、keydown、mouseover、mouseout、blur、focus等等
例如：
$(form).submit()可以使得表單進行提交。
$(‘div’).click(function(){事件觸發過程this});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function(){
//頁面載入完畢為div設定事件
//$().事件型別(處理函式);
$('div').mouseover(function(){
//this代表dom物件(如果有多個會分別依次代表每個dom物件)
$(this).css('background-color','lightgreen');
});
$('div').mouseout(function(){
$(this).css('background-color','lightblue');
});
});
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:lightblue;}
</style>
</head>
<body>
<h2>簡單事件操作</h2>
<div>Today is sunshine</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//頁面載入完畢為div設定事件
//$().事件型別(處理函式);
$('div').mouseover(function() {
$(this).css('background-color', 'lightgreen');
});
$('div').mouseout(function() {
$(this).css('background-color', 'lightblue');
});
//允許為同一個物件設定多個同型別事件
$('div').mouseover(function() {
$(this).css('font-size', '30px');
});
});
function f1() {
//"觸發"物件事件執行
//(通過程式碼觸發事件執行)
$('div').mouseover();
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>簡單事件操作</h2>
<div>Today is sunshine</div>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------------
九. jquery對文件的操作
通過jquery方式實現頁面各種節點的追加、刪除、複製、替換等操作
1. 節點追加
1.1 父子關係追加
1.1 append(content)
主動 向每個匹配的元素內部後置追加內容
1.3 prepend(content)
向每個匹配的元素內部前置追加內容
1.2 appendTo(content)
被動 把所有匹配的元素後置追加到另一個、指定的元素元素集合中
1.4 prependTo(content)
把所有匹配的元素前置追加到另一個、指定的元素集合中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//主動
//父節點.append()後置
$('#shu').append('<li>馬超</li>'); //新節點
$('#shu').append($('#wu li:eq(1)')); //已有節點追加(物理位置移動)
//父節點.prepend()前置
$('#shu').prepend('<li>諸葛亮</li>'); //新節點
//被動
//被追加節點.appendTo(父節點) 後置
$('<li>黃忠</li>').appendTo($('#shu')); //新節點
//prependTo() 前置
$('<li>魏延</li>').prependTo($('#shu')); //新節點
$('#xiang').prependTo($('#shu')); //已有節點追加(物理位置移動)
}
</script>
</head>
<body>
<h2>節點追加(父子)</h2>
<ul id="shu">
<li>劉備</li>
<li>張飛</li>
<li>趙雲</li>
<li>關羽</li>
</ul>
<ul id="wu">
<li>孫權</li>
<li>周瑜</li>
<li id="xiang">孫尚香</li>
</ul>
<input type="button" value="追加" onclick="f1()" />
</body>
</html>
---------------------------------------------------------------------
1.2 兄弟關係追加
2.1 after(content)
主動 在每個匹配的元素之後插入內容
2.2 before(content)
在每個匹配的元素之前插入內容
2.3 insertAfter(content)
被動 把所有匹配的元素插入到另一個、指定的元素集合的後面
2.4 insertBefore(content)
把所有匹配的元素插入到另一個、指定的元素集合的前面
兄弟關係節點追加的具體使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
////主動
//兄弟節點.after() 後置
$('#yun').after('<li>黃忠</li>');//新節點
//兄弟節點.before() 前置
$('#yun').before('<li>諸葛亮</li>');//新節點
$('#shu li:first').after($('#xiang'));//已有節點追加(物理位置移動)
////被動
//被追加節點.insertAfter(追加節點) 後置
$('<li>馬超</li>').insertAfter($('#fei'));//新節點
//insertBefore() 前置
$('<li>司馬懿</li>').insertBefore($('#fei'));//新節點
$('#wu li:first').insertBefore($('#bei'));//已有節點追加(物理位置移動)
}
</script>
</head>
<body>
<h2>節點追加(兄弟)</h2>
<ul id="shu">
<li id="bei">劉備</li>
<li id="fei">張飛</li>
<li id="yun">趙雲</li>
<li>關羽</li>
</ul>
<ul id="wu">
<li>孫權</li>
<li>周瑜</li>
<li id="xiang">孫尚香</li>
</ul>
<input type="button" value="追加" onclick="f1()" />
</body>
</html>
-----------------------------------------------------------------------------------------
2. 節點替換
$().replaceWith(); 被動替換
$().replaceAll(); 主動替換
具體使用(新舊節點都可以去替換)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//新節點去替換、已有節點去替換
// $('<li>馬超</li>').replaceAll($('#fei')); //新節點去替換(主動)
$('#bei').replaceWith($('#quan'));//(被動)已有節點去替換,物理位置移動
}
</script>
</head>
<body>
<h2>節點替換</h2>
<ul id="shu">
<li id="bei">劉備</li>
<li id="fei">張飛</li>
<li id="yun">趙雲</li>
<li>關羽</li>
</ul>
<ul id="wu">
<li id="quan">孫權</li>
<li>周瑜</li>
<li id="xiang">孫尚香</li>
</ul>
<input type="button" value="替換" onclick="f1()" />
</body>
</html>
---------------------------------------------------------------------------
3. 節點刪除
$(父節點).empty(); //父節點清空子節點
$(匹配節點).remove(); //刪除指定的節點
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//empty()/remove()
$('#wu').empty(); //清空對應的子節點
$('#bei,#yun').remove(); //刪除匹配到的節點。基本選擇器的聯合選擇器 $(s1,s2,s3)
}
</script>
</head>
<body>
<h2>節點刪除</h2>
<ul id="shu">
<li id="bei">劉備</li>
<li id="fei">張飛</li>
<li id="yun">趙雲</li>
<li>關羽</li>
</ul>
<ul id="wu">
<li id="quan">孫權</li>
<li>周瑜</li>
<li id="xiang">孫尚香</li>
</ul>
<input type="button" value="刪除" onclick="f1()" />
</body>
</html>
----------------------------------------------------------------------------------
4. 複製節點
$().clone(true) //節點 和 其身上的事件都給複製
$().clone(false) //只給複製 節點 本身(包括節點內部資訊)
給多個li的專案設定mouseover和mouseout事件，事件方法本身有遍歷機制：
節點複製clone(true)，節點本身和其事件都給複製：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
//頁面載入完畢要給#shu內部的li設定事件
$(document).ready(function(){
//mouseover()事件本身有"遍歷機制"，會給每個li都設定時間
$('#shu li').mouseover(function(){
//this分別依次代表每個li的dom物件
$(this).css('background-color','pink');
});
$('#shu li').mouseout(function(){
//this分別依次代表每個li的dom物件
$(this).css('background-color','greenyellow');
});
});
function f1(){
//複製一份“張飛”節點， 並追加給#wu
var fu_fei = $('#fei').clone(false);//只複製節點(沒有事件)
//var fu_fei = $('#fei').clone(true);//複製“節點”和其“事件”
$('#wu').append(fu_fei);
}
</script>
</head>
<body>
<h2>節點複製</h2>
<ul id="shu">
<li id="bei">劉備</li>
<li id="fei">張飛</li>
<li id="yun">趙雲</li>
<li>關羽</li>
</ul>
<ul id="wu">
<li id="quan">孫權</li>
<li>周瑜</li>
<li id="xiang">孫尚香</li>
</ul>
<input type="button" value="複製" onclick="f1()" />
</body>
</html>
----------------------------------------------------------------------
十. 屬性選擇器使用
1. [attribute]用法:$("div[id]");
定義：匹配包含給定屬性的元素,判斷擁有某個屬性的元素
2. [attribute=value]用法:$("input[name=newletter]").
定義：匹配給定的屬性是某個特定值的元素，判斷某個元素的屬性值相等
3. [attribute!=value]用法:$("input[name!='newletter']").
定義：匹配給定的屬性是不包含某個特定值的元素，判斷某個元素的屬性值不等
4. [attribute^=value]用法:$("input[name^='news']")
定義：匹配給定的屬性是以某些值開始的元素，判斷某個屬性值以value為開始值
5. [attribute$=value]用法:$("input[name$='letter']")
定義：匹配給定的屬性是以某些值開始的元素，判斷某個屬性值以value為結尾值
6. [attribute*=value]用法:$("input[name*='man']")
定義：匹配給定的屬性是以包含某些值的元素，判斷某個屬性值包含value
7. [selector1][selector2][selectorN]用法:$("input[id][name$='man']")
定義：複合屬性選擇器，需要同時滿足多個條件時使用，多個屬性值去交集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//① [name] 節點必須有"name"屬性
// $("[size]").css('background-color', 'pink');
//② [name=value] 節點必須有name屬性，其值等於“value”
// $("[size=30]").css('color', 'red');
//③ [name^=value] 節點必須有name屬性，其值以“value”開始
// $("[value^=to]").css('font-size', '27px');
//④ [name$=value] 節點必須有name屬性，其值以“value”結尾
// $("[value$=63]").css('width', '470px');
//⑤ [name!=value]
// A.節點如果有name屬性，則其值不等於"value"
// B.節點沒有name屬性
// $("[class!=orange]").css('background-color', 'darkseagreen');
//⑦ [][][][]並且關係，同時滿足多個條件
//我們需要的節點：有此class屬性，並且屬性值不等於"orange"
//$(s1s2s3s4) 獲得的節點需要滿足s1/s2/s3/s4等多個條件
$("[class][class!=orange]").css('background-color', 'lightblue');
// $("[size][value^=t][name]input").css('width', '500px');
//⑥ [name*=value] 節點必須有name屬性，其值必須出現"value"字樣
$("[class*=an]").css('color', 'red');
}
</script>
</head>
<body>
<h2 class="orange">屬性選擇器</h2>
<input type="text" size="10" value="tom" /><br />
<input type="text" size="30" name="useremail" value="tom@163.com" /><br />
<input type="text" size="30" name="usertel" class="orange" value="15243735363" /><br />
<input type="text" size="30" name="userqq" class="pear" value="84323998" /><br />
<input type="button" value="觸發" onclick="f1()" /><br />
</body>
</html>
---------------------------------------------------------------------------------------------------
總結：
1. 載入事件使用
$(document).ready(function)
$().ready(function);
$(function)
與傳統載入事件不同：
① 設定個數
② 執行時機
jquery載入事件原理：其是對DOMContentLoaded的封裝。
2. 簡單事件設定
$().事件型別(function事件處理函式)
$().事件型別();
3. 文件操作
a) 節點追加
父子：append() prepend() appendTo() prependTo()
兄弟：after() before() insertAfter() insertBefore()
b) 替換和刪除
替換： replaceWith()被動 replaceAll()主動
刪除： empty() remove()
c) 複製
被複制節點.clone(true/false)
4. 屬性選擇器使用
[name] [name=value]
[name^=value] [name$=value] [name*=value]
[name!=value]
---------------------------------------------------------------------
一．昨天內容回顧
1. $符號由來
$(‘li’) $(‘#apple’)
$符號就是一個全域性的函式名稱，同時還可以使用jQuery符號
2. jquery物件 和 dom物件 的關係
dom物件 是 jquery物件的陣列組成部分
jquery物件---->dom物件： $()[下標]
dom物件---->jquery物件： $(dom物件)
3. jquery物件 的成員來源
jquery物件->addClass()/html()/text()/css()/attr()等等許多成員可呼叫
jquery物件呼叫的成員共分3種型別：
① jQuery.fn.init()
② jQuery.fn()
③ jQuery.fn.extend()
4. each()遍歷方法
$.each(陣列,funciton(k下標變數,v值變數){})
$.each(物件，function(k成員名稱,v成員值){})
$(選擇器).each(function(k dom物件的序號下標,v 分別依次代表每個dom物件){
this分別依次代表每個dom物件
$(this) 把this的dom物件變為jquery物件
})
5. 載入事件使用及與傳統載入事件不同
三種體現形式：
$(document).ready(function);
$().ready(function);
$(function);
與傳統載入事件不同：
① 設定個數
② 執行時機
6. 簡單事件操作
事件型別：click/dblclick/focus/blue/mouseover/mouseout/keyup/keydown
$(選擇器).事件型別(function);//設定事件
$(選擇器).事件型別(); //觸發事件執行
7. 文件操作
a) 追加
父子關係：append() prepend() appendTo() prependTo()
兄弟關係：after() before() insertAfter() insertBefore()
b) 替換
replaceWith()被動 replaceAll()主動
c) 刪除
empty() remove()
d) 複製
clone(true/false)
8. 屬性選擇器
[name] [name=value] [name^=value] [name$=value]
[name!=value] ([name][name!=value])
--------------------------------------------------------------------------------
二．作業
1. 利用文件節點操作實現如下效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<style type="text/css">
select {
width: 150px;
height: 250px;
}
</style>
</head>
<body>
<h2></h2>
<select id="hebei" multiple="multiple">
<option>石家莊</option>
<option>邯鄲</option>
<option>保定</option>
<option>邢臺</option>
</select>
<select id="shandong" multiple="multiple">
<option>濟南</option>
<option>青島</option>
<option>泰安</option>
<option>煙臺</option>
</select>
<br />
<input type="button" value="-->" onclick="toRight()" />
<input type="button" value="==>" onclick="toAllRight()" />
<input type="button" value="<--" onclick="toLeft()" />
<input type="button" value="<==" onclick="toAllLeft()" />
</body>
<script type="text/javascript">
//在載入事件裡邊給option專案設定雙擊事件，被雙擊移動到對方
$().ready(function() {
//雙擊判斷父級節點，再做節點跳轉
$('option').dblclick(function() {
//this分別依次代表每個option的dom節點物件
if (this.parentNode.id === 'hebei') {
$(this).appendTo($('#shandong'));
} else {
$(this).appendTo($('#hebei'));
}
});
//以下設定專案移動到對方就不能回來了
// $('#hebei option').dblclick(function(){
// $(this).appendTo($('#shandong'));
// });
// $('#shandong option').dblclick(function(){
// $(this).appendTo($('#hebei'));
// });
});
function toRight() {
//左側"選中"專案移動到右側
$('#hebei option:selected').appendTo($('#shandong'));
}
function toAllRight() {
//左側全部專案移動到右側
$('#hebei option').appendTo($('#shandong'));
}
function toLeft() {
//右側"選中"專案移動到左側
$('#shandong option:selected').appendTo($('#hebei'));
}
function toAllLeft() {
//右側全部專案移動到左側
$('#shandong option').appendTo($('#hebei'));
}
</script>
</html>
---------------------------------------------------------------------------
三．事件繫結
1. 事件繫結
jquery事件的簡單操作：
$().事件型別(function事件處理);
$().事件型別();
1.1 jquery事件繫結
$().bind(事件型別，function事件處理);
$().bind(型別1 型別2 型別3，事件處理); //給許多不同型別的事件繫結同一個處理
$().bind(json物件); //同時繫結多個不同型別的事件
(事件型別：click mouseover mouseout focus blur 等等)
事件處理：有名函式、匿名函式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//頁面載入完畢，為div繫結事件
//① 簡單繫結
//$('div').bind(事件型別，處理函式[有名/匿名]);
$('div').bind('mouseover', function() {
$(this).css('background-color', 'lightblue');
});
$('div').bind('mouseout', function() {
$(this).css('background-color', 'lightgreen');
});
});
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>事件繫結</h2>
<div>today is rain</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//頁面載入完畢，為div繫結事件
//② 為同一個物件的“多個不同型別事件”繫結同一個處理
//$('div').bind(型別1 型別2 型別3...,function(){})
//注意：多個型別事件彼此通過“一個”空格連線
$('div').bind('click mouseover mouseout', function() {
console.log(1234);
});
});
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>事件繫結</h2>
<div>today is rain</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//頁面載入完畢，為div繫結事件
//③ 通過一個“json物件”為節點同時繫結多個事件
//$('div').bind(json物件)
//批量方式設定事件
$('div').bind({
click: function() {
console.log('111')
},
mouseover: function() {
console.log('222')
},
mouseout: function() {
console.log('333')
}
});
});
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>事件繫結</h2>
<div>today is rain</div>
</body>
</html>
---------------------------------------------------------------------------
1.2 取消事件繫結
之前取消事件：
dvnode.onclick = null; //dom1級事件取消
dvnode.removeEventListener(型別，(有名)處理，事件流); //dom2級事件取消
jquery方式取消事件繫結：
① $().unbind(); //取消全部事件(無視事件型別、無視處理函式型別)
② $().unbind(事件型別); //取消指定型別的全部事件(無視處理函式型別)
③ $().unbind(事件型別，有名(事件)處理函式); //取消指定型別事件的指定處理
注意：第③種取消事件繫結，事件處理必須是有名函式。
在載入事件裡邊給div節點進行各種事件的繫結：
三種方式實現取消事件繫結操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//批量方式設定事件
$('div').bind({
click: function() {
console.log('111')
},
mouseover: function() {
console.log('222')
},
mouseout: function() {
console.log('333')
}
});
$('div').bind('mouseover', function() {
$(this).css('font-size', '30px');
});
$('div').bind('mouseout', function() {
$(this).css('font-size', '5px');
});
//"有名函式"事件繫結
$('div').bind('click', fa);
$('div').bind('click', fb);
$('div').bind('click', fc);
});
function fa() {
console.log('aaa');
}
function fb() {
console.log('bbb');
}
function fc() {
console.log('ccc');
}
function cancel() {
//事件取消
$('div').unbind(); //全部事件
//$('div').unbind('click');//取消指定型別事件
//$('div').unbind('click', fb); //取消指定型別、指定處理(有名函式)
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>事件取消繫結</h2>
<div>today is rain</div>
<br />
<input type="button" value="取消" onclick="cancel()" />
</body>
</html>
----------------------------------------------------------------------------------------
2. 事件物件、阻止瀏覽器預設動作、阻止事件冒泡
$().bind(‘click’,function(evt){ });
$().click(function(evt){});
$().bind(‘mouseover’,f1);
function f1(evt){}
事件物件：就使用紅色的evt即可，在jquery框架內部有做瀏覽器相容處理。
以上紅色的evt對主流的事件物件 和 IE的事件物件有封裝。
阻止瀏覽器預設動作、阻止事件冒泡：
dom2級瀏覽器預設動作阻止：
事件物件.preventDefault(); 主流瀏覽器
事件物件.returnValue = false; IE瀏覽器
dom2級事件冒泡阻止：
事件物件.stopPropagation(); 主流瀏覽器
事件物件.cancelBubule = true; IE瀏覽器
在jquery裡邊：
$().bind(‘click’,function(evt){
evt.preventDefault();
evt.stopPropagation();
});
preventDefault()方法是jquery的方法，名字與js底層程式碼的名字一致而已。
並且其有做瀏覽器相容處理
stopPropagation()方法是jquery的方法，名字與js底層程式碼的名字一致。
其有做瀏覽器相容處理
-------------------------------------------------------------------------------
四. 動畫效果
1. 基本動畫
該動畫效果的本質是 寬度、高度、透明度、display 在變化。
show(speed, [callback])
顯示隱藏的匹配元素
hide(speed, [callback])
隱藏顯示的元素
toggle()
切換元素的可見狀態
toggle(switch)
根據switch引數切換元素的可見狀態
（ture為可見，false為隱藏）。
toggle(speed, ?[callback])
以優雅的動畫切換所有匹配的元素可見狀態
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//隱藏
//$().hide([速度毫秒,回撥函式]);
//回撥函式：效果呈現完畢會自動呼叫函式執行
$('div').hide(3000, function() {
alert('我消失了');
});
}
function f2() {
//顯示
//$().show([速度,回撥函式]);
//回撥函式：效果呈現完畢會自動呼叫函式執行
$('div').show(3000, function() {
alert('我又回來了');
});
}
function f3() {
//$('div').toggle(2000);
$('div').toggle(false);
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>today is rain</div>
<br />
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關" onclick="f3()" />
</body>
</html>
------------------------------------------------------------------
2. 垂直動畫
效果的本質： 高度、display 在變化
slideDown(speed, [callback])
顯示元素
slideUp(speed, [callback])
隱藏元素
slideToggle(speed, [callback])
切換所有匹配元素的可見性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//隱藏
//$().slideUp(速度毫秒=預設時間,[,回撥函式]);
$('div').slideUp(5000);
}
function f2() {
//顯示
//$().slideDown([速度=預設時間,回撥函式]);
$('div').slideDown(2000);
}
function f3() {
//開關效果
//$().slideToggle(速度時間，回撥函式);
$('div').slideToggle(500);
}
$(function() {
setInterval("f3()", 5000);
})
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h2>垂直動畫效果</h2>
<div>today is rain</div>
<br />
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關" onclick="f3()" />
</body>
</html>
-------------------------------------------------------------------
3. 顏色漸變動畫
fadeIn(speed, [callback])
不透明度的變化來實現所有匹配元素的淡入效果 (顯示)
fadeOut(speed, [callback])
通過不透明度的變化來實現所有匹配元素的淡出效果 (隱藏)
fadeTo(speed, opacity, [callback])
把所有匹配元素的透明度以漸進方式調整到指定的不透明度
fadeToggle(speed,? [callback])
通過不透明度的變化來開關所有匹配元素的淡入和淡出效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//隱藏
//$().fadeOut(速度毫秒=預設時間,[,回撥函式]);
$('div').fadeOut(2000);
}
function f2() {
//顯示
//$().fadeIn([速度=預設時間,回撥函式]);
$('div').fadeIn(2000);
}
function f3() {
//開關效果
//$().fadeToggle(速度時間，回撥函式);
$('div').fadeToggle(3000);
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h2>顏色漸變動畫效果</h2>
<div>today is rain</div>
<br />
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關" onclick="f3()" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
$('div').hide(2000,f2);
}
function f2(){
//顯示
$('div').css('background-color','blue');
$('div').slideDown(2000,f3);
}
function f3(){
$('div').css('background-color','purple');
$('div').slideUp(2000,f4);
}
function f4(){
$('div').css('background-color','orange');
$('div').fadeIn(2000,function(){
alert('ok, it feel good');
});
}
</script>
<style type="text/css">
div{width:300px; height:200px; background-color:green;}
</style>
</head>
<body>
<h2>動畫效果聯合</h2>
<div>today is rain</div>
<br />
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//給div層設定指定的透明度
//$('div').fadeTo(2000,透明度 清楚0-1不清楚,回撥函式);
$('#son').fadeTo(0,0.2);
}
</script>
<style type="text/css">
#pat{width:400px; height:300px; background-color:green;}
#son{width:200px; height:100px; background-color:blue;
position:absolute; left:350px;
}
</style>
</head>
<body>
<h2>顏色漸變動畫效果</h2>
<div id="pat"><div id="son">today is rain</div></div>
<br />
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
--------------------------------------------------------------------------
五．jquery封裝的ajax
具體操作：
$.get(url [,data] [,function(msg){}回撥函式] [, dataType]);
data:給伺服器傳遞的資料，請求字串 、json物件 都可以設定
funtion(msg){}：回撥函式，ajax請求完成後呼叫該函式，可以在此函式完成ajax的後續處理，msg泛指從伺服器傳遞回來的資訊
dataType：伺服器返回資料型別，html、text、xml、json
$.post(url [,data] [,fn回撥函式] [, dataType]);
該方法與$.get()方法使用完全一致，不同的是其為post方式請求
給伺服器傳遞資料的時候，不需要設定header頭
(以上兩種ajax請求是非同步的，如果需要設定同步請求，就換其他方法)
$.ajax({ //json物件
url:請求地址,
[data]:給伺服器傳遞的資料(請求字串/json物件)
[dataType]:預設字串返回資訊，資料從伺服器返回格式html、text、xml、json
[type]:[get]/post請求方式
[success]:function(msg){} ajax成功請求後的回撥函式，可以做後續處理使用
msg泛指伺服器返回來的資訊
async:[true]非同步/false同步，
cache:[true]快取/false不快取,
})
$.get()的ajax的各種使用(封裝層次稍高，可設定引數較少)：
相對底層的ajax方法使用$.ajax(json物件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
$.ajax({
url: './11.php',
data: {
name: 'kitty',
age: 5
},
dataType: 'json',
type: 'post',
success: function(msg) {
alert(msg);
console.log(msg.city);
console.log(msg.temp);
}
});
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h2>Ajax請求</h2>
<div>today is rain</div>
<br />
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
----------------------------------------------------------------------
總結:
1. 事件繫結
bind(型別，處理函式);
bind(型別1 型別2 型別3,處理函式);
bind(json物件);
取消繫結
$().unbind()
$().unbind(型別);
$().unbind(型別，有名函式處理)
2. 動畫效果
基本：show(速度,function) hide(速度,function)
垂直：slideDown() slideUp()
顏色漸變： fadeIn() fadeOut() fadeTo()
3. ajax使用
$.get(url,data,funciton,dataType)
$.post(url,data,funciton,dataType)
$.ajax({
url:
data:
dataType:
type:
success:
})
-------------------------------------------------------------------
六. 地區三級聯動
技術點：jquery + ajax + xml/json
1. 省份的獲取和顯示
通過“ajax+jquery”獲得xml資訊從中解析出省份資訊並顯示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
var xmldom = null; //宣告一個全域性變數，用於儲存第一次請求回來的xml資訊
function show_province() {
//①ajax去伺服器把xml的地區資訊都給請求回來
//②從中賽選“省份”資訊並顯示
$.get('js/ChinaArea.xml', function(msg) {
//對伺服器返回的xml資訊進行處理
//alert(msg);//object XMLDocument
xmldom = msg;
//我們需要供最大的 XMLDocument 節點裡邊獲得 province 元素節點
//province 是 XMLDocument 的子節點
//從父節點獲得內部的子節點 $(父節點).find(子節點選擇器) 方法
$(msg).find('province').each(function(k, v) {
//this分別依次代表每個province的dom物件
//獲得省份的名稱並顯示給 下拉選單
var nm = $(this).attr('province');
var id = $(this).attr('provinceID');
//給select框"追加"省份名稱
$('#province').append("<option value='" + id + "'>" + nm + "</option>");
});
}, 'xml');
}
$(function() {
show_province();
});
//根據選取的省份顯示對應的城市
function show_city() {
//① 獲得選取的省份的id資訊
var pid = $('#province option:selected').val();
var two_pid = pid.substr(0, 2); //只要前兩位即可
//② 獲得選取省份下的城市資訊
// 限制條件：City標籤 和 本身id的前兩位與省份id的前兩位一致
console.log($(xmldom).find('City[CityID^=' + two_pid + ']'));
$('#city').empty(); //清除舊節點
$('#city').append('<option value="0">-請選擇-</option>');
//遍歷城市資訊，並顯示到頁面上
$(xmldom).find('City[CityID^=' + two_pid + ']').each(function() {
//this分別依次代表每個City節點的dom物件
var nm = $(this).attr('City');
var id = $(this).attr('CityID');
//把nm與option做結合顯示到頁面上
$('#city').append("<option value='" + id + "'>" + nm + "</option>");
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>地區三級聯動</h2> 省份：
<select id="province" onchange="show_city()">
<option value="0">-請選擇-</option>
</select> 城市：
<select id="city">
<option value="0">-請選擇-</option>
</select> 地區：
<select id="area">
<option value="0">-請選擇-</option>
</select>
</body>
</html>