第二章 JavaScript對象
瀏覽器對象模型(BOM)是JavaScript的組成之一，window對象是整個BOM的核心
window對象的常用方法
prompt():顯示可提示用戶輸入的對話框
alert():顯示一個帶有提示信息和一個"確定"的按鈕的警示對話框
confirm():顯示一個滴啊有提示信息,"確定"和"取消"按鈕的對話框
close():關閉瀏覽器窗口
open():打開一個新的瀏覽器窗口，加載給定URL制定的文檔
setTimeout():在制定的毫秒數后調用函數或計算表達式
setInterval():按照制定的周期(以毫秒計)來調用函數或表達式
window對象的常用事件
onload:一個頁面或一幅圖像完成加載
onmouseover:鼠標指針移到某個元素之上
onclic:鼠標單擊某個對象
onkeydown:某個鍵盤按鍵被按下
onchange:域的內容被改變
window對象的常用屬性
history:有關客戶訪問過的URL的信息
location:有關當前URL的信息
history對象的方法
back()：加載history對象列表中的前一個URL
forward():加載histrory對象列表中的后一個URL
go():加載history對象列表中的某個具體URL
location對象的屬性和方法
host:設置或返回主機名和當前URL的端口號
hostname:設置或返回當前URl的主機名
href:設置或返回完整的URL
reload():重寫加載當前溫度
replace()：用新的文檔替換當前文檔
document對象的方法
getElementById()：返回對擁有指定id的第一個對象的引用
getElementsByName():返回帶有指定名稱的對象的集合
getElementsByTagName():返回帶有指定標簽名的對象的集合
write():像文檔寫文本，HTML表達式或JavaScript代碼
定時函數的清除
clearTimeout(setTimeout()返回的ID值)
clearInterval(setInterval()返回的ID值)
Date對象的方法
getDate()：返回Date對象的一個月中的每一天，其值為1~31
getDay()：返回Date對象的星期中的每一天，其值為0~6
getHours():返回Date對象的小時數，其值為0~23
getMinutes():返回Date對象的分鍾數,其值為0~59
getSeconds():返回Date對象的秒數，其值為0~59
getMonth:返回Date對象的月份，其值為0~11
getFullYear():返回Date對象的年份，其值為4位數
getTime():返回自某一時刻(1970年1月1日)以來的毫秒數
Math對象的方法
ceil()：對數進行上舍入
floor()：對數進行下舍入
round()：巴蜀四舍五入為最接近的數
random():返回0-1的隨機數
第三章 初識jQuery
jQuery是一個優秀的JavaScript庫， 使用它可以 大大提高Web客戶端的開發效率.
要想使用jQuery的功能，需要首先引用jQuery庫文件。 可以使用addClass()方法和css()方法為DOM元素添加樣式.
$(document).ready()與window.onload使用場合類似，但有差異 jQuery中的click()方法對應JavaScript中的onclick事件
jQuery代碼中常見的元素包括工廠函數，選擇器和方法。 jQuery程序代碼的特色:包含$符號和連綴操作.
每個頁面都有對應DOM模型，DOM模型 包括元素節點，文本節點和屬性節點。
DOM對象轉換成jQuery對象 var $tex=$(DOM對象)
jQuery對象轉換成DOM對象 var tex=$tex.get(0);或 var tex=$tex[0];
使用next()方法可以獲得所匹配元素集合中每個元素其后緊鄰的 同輩元素。
第四章 jQuery選擇器
基本選擇器
標簽選擇器:根據給定的標簽名匹配元素，返回元素集合，$("h2")選取所有h2元素
ID選擇器:根據給定的Id匹配元素，返回單個元素，$("#title"),選取id為title的元素
類選擇器:根據給定的class匹配元素,返回元素集合，$(".a")選取所有class為a的元素
並集選擇器:將每一個選擇器匹配的元素合並后一起返回，元素集合，$("div，.a")選取所有div，類為a的元素
交集選擇器:匹配制定class或id的某元素或元素集合(若在同一頁面中指定id的元素返回值，則一定是單個元素；若制定class的元素，則可以是單個元素，也可以是元素集合)，返回單個元素或元素集合，$("h2.a")選取所有擁有class為title的h2元素
全局選擇器: 匹配所有元素,集合元素，$("*")選取所有元素
層次選擇器
后代選擇器:返回元素集合，$("#a span")選取#a下所有<span>元素
子選擇器:返回元素集合，$("#a>span"),選取#a下子元素<span>
相鄰元素選擇器:返回元素集合，$("h2+dl")選取緊鄰<h2>元素之后的同輩元素<dl>
同輩元素選擇器:元素集合，$("h2~dl")選取<h2>元素之后所有的同輩元素<dl>
屬性選擇器
選取包含給定屬性的元素，返回元素集合，$("[href]")選取含有href屬性的元素
選取等於給定屬性是某個特定值的元素，元素集合，$("[href="#"]"),選取href屬性值為"#"的元素
選取不等於給定屬性是某個特定值的元素,返回元素集合，$("[href !="#"]"),選取href屬性值不為"#"的元素
選取給定屬性是以某個些特定值開始的元素，元素集合，$("[href ^="en"]"),選取href屬性值以en開頭的元素
選取給定屬性是以某個些特定值結尾的元素，元素集合，$("[href $="en"]"),選取href屬性值以en結尾的元素
選取給定屬性是包含某些值的元素，元素集合，$("[href *="en"]"),選取href屬性值中含有txt的元素
選取滿足多個條件的復合屬性的元素,元素集合,$("li[id][title='新聞要點]")選取含有id屬性和title屬性為”新聞要點“的<li>元素
基本過濾選擇器
:first，選取第一個元素，單個元素，$("li:first")選取所有<li>第一個<li> 元素
:last，選取最后一個元素，單個元素，$("li:last")選取所有<li>最后一個<li> 元素
:not（selectot），選取去除所有與給定選擇器匹配的元素，集合元素，$("li:not(.a)")選取class不是a的元素
:even，選取索引是偶數的所有元素(index從0開始)，集合元素，$("li:even")選取索引是偶數的所有<li>元素
:odd，選取索引是奇數的所有元素(index從0開始)，集合元素，$("li:odd")選取索引是奇數的所有<li>元素
:eq(index)，選取索引等於index的元素(index從0開始)，單個元素，$("li:eq(1)")選取索引等於1<li>元素
:gt(index)，選取索引大於index的元素(index從0開始)，集合元素，$("li:gt(1)")選取索引大於1<li>元素，不包括1
:lt(index)，選取索引小於index的元素(index從0開始)，集合元素，$("li:lt(1)")選取索引小於1<li>元素，不包括1
:header，選取所有標題元素，集合元素，$(":header")選取網頁中的所有標題元素
:focus,選取當前獲取焦點的元素，集合元素,$(":focus")選取當前獲取焦點的元素
可見性過濾選擇器
:visible,選取所有可見的元素,集合元素，$(":visible")選取所有可見的元素
:hidden,選取所有隱藏的元素，集合元素，$(":hidden")選取所有隱藏的元素
轉義符
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
錯誤: $("id#a") $("#id[2]")
正確:$("#id\\#a") $("#id\\[2\\") 多一個空格或少一個空格，可能會得到不同的結果。
第五章jQuery中的事件與動畫
jQuery中典型事件
單擊事件:click(fn),單擊鼠標時發生，fn表示綁定的函數
按下鍵盤觸發事件:keydown(fn),按下鍵盤時發生，fn表示綁定的函數
失去焦點事件:blur(fn),失去焦點時發生，fn表示綁定的函數
常用的鼠標事件
click():觸發或將函數綁定到指定元素的click事件，單擊鼠標時
mouseover(): 觸發或將函數綁定到指定元素的mouseover事件，鼠標指針移過時
mouseout():觸發或將函數綁定到指定元素的mouseoutshij,鼠標指針移出時
常用鍵盤事件
keydown():觸發或將函數綁定到指定元素的keydown事件，按下按鍵時
keyup():觸發或將函數綁定到指定元素的keyup事件，釋放按鍵時
keypress():觸發或將函數綁定到指定元素的keypress事件，產生可打印的字符時
常用的表單事件
focus():觸發或兩函數綁定到指定元素的focus事件,獲得焦點
blur();觸發或將函數綁定到指定元素的blur事件，失去焦點
綁定事件
bind（type，[data],fn）:data不是必需的
type：事件類型,主要包括blur，focus,click,moseout等基礎事件，還可以自定義事件
[data]:可選參數,作為event.data屬性值傳遞給事件對象的額外數據對象
fn:處理函數,用來綁定的處理函數 使用bind()方法不僅可以一次綁定一個事件，還可以同時綁定多個事件。
移除事件
unbind([type],[fn])
[type]:事件類型,主要包括blur，focus,click,moseout等基礎事件，還可以自定義事件
fn:處理函數，用來解除綁定的處理函數
hover()方法
hover(enter,leave); hover()方法用於模擬鼠標指針懸停事件。當鼠標指針移動到元素上時，會觸發指定的第1個函數(enter);當鼠標指針移出這個元素時，會觸發指定的第2個函數(leave)
toggle()方法
toggle(fn1,fn2,....,fnN);toggle()方法用於模擬鼠標連續click事件。第一次單擊元素，觸發指定的第一個函數 (fn1);當在此單擊同一個元素時，則觸發指定的第二個函數(fn2);如果有更多函數，則依次觸發，直到最后一個。隨后的每次單擊都重復對這幾個函數的輪番調用。
控制元素的顯示與隱藏
隱藏到顯示:$(selector).show([speed],[callback]);
顯示到隱藏:$(selector).hide([speed],[callback]);
speed:默認值為"0"，變化的速度，毫秒1000，slow,normal,fast callback:可選。
show函數執行完之后，要執行的函數
改變元素的透明度
淡入:$(selector).fadeIn([speed],[callback]) 元素從隱藏到完全可見的過程。
淡出:$(selector).fadeOut([speed],[callback]) 元素從可見到隱藏的過程。
speed:默認值為"0"，變化的速度，毫秒1000，slow,normal,fast callback:可選。
show函數執行完之后，要執行的函數
改變元素高度
slideUp(“slow”):若元素的display屬性值為block,這個元素會從下到上縮短直至隱藏。
slideDown("slow"):若元素的display屬性值為none，這個元素會從上向下延伸顯示。
slow,normal,fast（三者對應的世界分別為0.6秒，0.4秒,0.2秒）
第六章使用jQuery操作DOM
樣式操作
css(name,value);//設置單個值
css({name:value,name:value,name:value})//同時設置多個屬性
name:必需，規定CSS屬性的名稱，該參數可以是任何css屬性。
value:必需，規定CSS屬性的值。
name:value:必需，規定要設置樣式的屬性的"名稱:值"對象。
追加樣式和移除樣式
追加:addClass(class)或addClass(class1 class2..classN)
移除:removeClass(class)或removeClass(class1 class2...classN);
切換樣式:toggleClass(class);
內容操作
html([content]) text([content])
html():用於獲取第一個匹配元素的HTML內容或文本內容
html(content)：用於設置所有匹配元素的HTML內容或文本內容
text():用於獲取所有匹配元素的文本內容
text(content)：用於設置所有匹配元素的文本內容
屬性值的操作:val([value])
value:可選。規定被選元素的新內容。
$(slector)或$(element)或$(html) selector:選擇器。
使用jQuery選擇器匹配元素
element：DOM元素.以DOM元素來創建jQuery對象
html：HTML代碼。使用HTML字符創建jQuery對象
內部插入
append(content):想所選擇的元素內部插入內容，即$(A).append(B)表示將B追加到A中。這樣插入元素的順序是最后一個。
appendTo(content):即$(A).appendTo(B).A追加到B中。也是最后一個。
prepend(content):向每個選擇的元素內部前置內容。$(A).prepend(B)表示將B追加到A中。這樣插入元素的順序是第一個。
prepend(To(content):即$(A).prepend(To(B).A追加到B中。也是第一個。
外部插入
after(content):想所選擇的元素內部插入內容，即$(A).append(B)表示將B追加到A之后。這樣插入元素的順序是最后一個。
insetAfter(content):即$(A).appendTo(B).A追加到B之后。也是最后一個。
before(content):向每個選擇的元素內部前置內容。$(A).prepend(B)表示將B追加到A之前。這樣插入元素的順序是第一個。
insertBefore(To(content):即$(A).prepend(To(B).A追加到B之前。也是第一個。
$(selector).remove([expr]):刪除整個節點，不保留事件。
$(selector).empty();刪除的節點中的內容。
$(selector).removeAttr(name):刪除屬性
替換節點:
var $A=$(<li>死神</li>")
$("ul li:eq(1)").replacewith($A); 或 $($A).replaceAll("ul li:eq(1)")
復制節點: $("ul li:eq(1)").clone(true).appendTo("ul"); true:表示是否復制事件
獲取與設置元素屬性
$(selector).attr([name]); //獲取屬性值 attr([name])
獲取和設置單個屬性值，如$($a).attr("alt");
attr({[name1:value1],[name2:value2]...[nameN:valueN]}):設置多個屬性值，如 $("img").attr({width:"50",height:"100"})
$(selector).children([expr])
var $body=$("body").children();
使用children()方法可以獲取<body>元素子元素的個數
alert($body.length) each循環:
$body.each(function(index,dom){ index:下標,dom臨
時變量,是dom對象 })
遍歷同輩元素
next([expr]): 用於獲取緊鄰匹配元素之后的元素。同輩元素的下一個。
prev([expr]):用於獲取緊鄰匹配元素之前的元素。同輩元素的前一個。
siblings([expr]):用於獲取位於匹配元素前面和后面的所有同輩元素。
遍歷前輩元素
parent([selector]) 參數可選。獲取當前匹配元素集合中每個元素的父集元素
parents([selector]) 參數可選。獲取當匹配元素集合中每個元素的祖先元素。 可以指定祖先中的任何一個元素。
CSS-DOM操作
css():設置或返回匹配元素的樣式屬性
height([value])：參數可選。設置或返回匹配元素的高度。如果沒有規定長度單位，則使用默認的px作為單位。$("#box").heigh(180);
width([value]): 參數可選。設置或返回匹配元素的寬度。如果沒有規定長度單位，則使用默認的px作為單位。$("#box").width(180);
offset([value]):返回以像素為單位的top和left坐標。此方法對可見元素有效。$("#box").offset();
offsetParent():返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被設置為relative，absolute或fixed的元素 $("#box").offsetParent();
scrollLeft([position]) 參數可選。設置或返回匹配元素相對滾動條左側的偏移 $("#box").scrollLeft(20) scrollTop([position])參數可選。設置或返回匹配元素相對滾動條頂部的偏移 $("#box").scrollTop20)
第七章 表單校驗
在JavaScript中提交方式是，在<form>標簽中加屬性：onsubmit="return chck()"
在jQuery中$("表單標簽").submit(function(){
return chck(); })
表單驗證常用的方法和事件
onblur:失去焦點，當光標離開某個文本框時觸發
onfocus：獲得焦點，當光標進入某個文本框時觸發
blur():從文域中移開焦點
focus():從文本域設置焦點，即獲得鼠標光標
select();選取文本域中的內容，突出顯示輸入區域的內容，全選域中內容。
定義正則表達式
普通方式P:var reg=/表達式/附加參數
構造函數: var re=new RegExp("表達式","附加參數")
正則表達式對象實例.test(字符串)
簡單模式(具體)：var reg1=/cat/
復合模式(抽象)：var reg=/^\W+$/;
var str="my cat";
var result=reg.test(str);//true
RegExp對象
exec() :檢索字符中是正則表達式的匹配，返回找到的值，並確定位置
test() :檢索字符串中指定的值，返回true或false RegExp對象屬性(附加參數)
global RegExp對象是否有標志g （代表可以進行全局匹配）
ignoreCase RegExp對象是否有標志i （代表不區分大小寫的匹配）
multiline RegExp對象是否有標志m （代表可以進行多行匹配）
String對象的方法
match()：找到一個或多個正則表達式的匹配（匹配值）
search():檢索與正則表達式匹配的值(索引)
replace():替換與正則表達式匹配的字符串
split():把字符串分割為字符串數組
例: var str="my cat"
var reg=/cat/
var result=str.match(reg);
var strto=str.repleace(/cat/g,"dog") //全局替換，返回替換后的字符串
正則表達式的重復字符
{n} 匹配前一項n次 \d{3}:\d\d\d
{n,} 匹配前一項n次，或者多次
{n,m} 匹配前一項至少n次，但是不能超過m次
* 匹配前一項0次或多次，等價於{0,}
+ 匹配前一項1次或多次，等價於{1,}
? 匹配前一項0次或1次，也就是說前一項是可選的，等價於{0,1}
正則表達式的常用符號
/..../ 代表一個模式的開始和結束
^ 匹配字符串的開始 $ 匹配字符串的結束
\s 任何空白字符(換行，空格)
\S 任何非空白字符(不包含空格)
\d 匹配一個數字字符，等價於[0-9]
\D 除了數字之外的任何字符,等價於[^0-9] 除了0-9以外
\w 匹配一個數字，下划線或字母字符，等價於[A-Za-z0-9]
\W 任何非單子字符，等價於[^a-zA-z0-9_]
. 除了換行符之外的任意字符
表單選擇器
:input 匹配所有input,textarea,select和buttjon元素 $("#myform :input")選取表單中所有的input,select和button元素
:text 匹配所有單行文本框 $("#myform :text") 選取type="text"的所有元素
:password 匹配所有的密碼框 $("#myform :password") 選取type="password"的元素
:radio 匹配所有單項按鈕 $("#myform :radio") 選取type="radio"的元素
:checkbox 匹配所有復選框 $("#myform :checkbox") 選取type="checkbox "的元素
:submit 匹配所有復選框 $("#myform :submit ") 選取type="submit"的元素
:image 匹配所有圖像域 $("#myform :image ") 選取type="image"的元素
:reset 匹配所有重置按鈕 $("#myform :reset") 選取type="reset"的元素
:button 匹配所有按鈕 $("#myform :button") 選取type="button"的元素
:file 匹配所有文件域 $("#myform :file") 選取type="file"的元素
:hidden 匹配所有不可見元素，或者type為hidden的元素 $("#myform :hidden ") 選取type="hidden "的元素
表單選擇器表單屬性過濾器
:enabled 匹配所有可用元素 $("#userform ：enabled")匹配form內部除了編號輸入框外的所有元素
:disabled 匹配所有不可用元素 例如禁止輸入的文本框
:checked 匹配所有被選中元素(復選框,單項按鈕,select中的option)
:selected 匹配所有選中的option 元素