一套耕、JS定義及應(yīng)用
JavaScript：一種直譯式腳本語言尘应，是一種動態(tài)類型痰娱、弱類型弃榨、基于原型的語言，內(nèi)置支持類型梨睁。它的解釋器被稱為JavaScript引擎鲸睛，為瀏覽器的一部分，廣泛用于客戶端的腳本語言坡贺，最早是在HTML（標準通用標記語言下的一個應(yīng)用）網(wǎng)頁上使用官辈，用來給HTML網(wǎng)頁增加動態(tài)功能。
JS控制HTML方式：
直接在HTML中寫入代碼：<script type="text/javascript">......</script>
引用JS外部文件：<script src="script.js"></script>（script.js是外部文件）
二遍坟、JS基礎(chǔ)
- 1拳亿、JS變量命名（var）規(guī)則：
- 1.變量必須使用字母、下劃線(_)或者美元符($)開始愿伴。
- 2.然后可以使用任意多個英文字母肺魁、數(shù)字、下劃線(_)或者美元符($)組成隔节。
- 3.不能使用JavaScript關(guān)鍵詞與JavaScript保留字鹅经。
- 2、函數(shù)定義：
function 函數(shù)名()
{
函數(shù)代碼;
} - 函數(shù)的調(diào)用：1怎诫、在<script>標簽內(nèi)部直接調(diào)用瘾晃。2、在html文件中幻妓，通過按鈕調(diào)用函數(shù)（<input type="button" value="點點我" onclick="函數(shù)名"> ）
3蹦误、輸出內(nèi)容：document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。簡單的說就是直接在網(wǎng)頁中輸出內(nèi)容肉津。輸出HTML標簽强胰，并起作用，標簽使用""括起來妹沙。
4哪廓、消息對話框：alert（字符串或變量）; 直接在對話框中顯示括號里的內(nèi)容。
confirm 消息對話框：
confirm(str);
str：在消息對話框中要顯示的文本
返回值: Boolean值
當用戶點擊"確定"按鈕時初烘，返回true
當用戶點擊"取消"按鈕時涡真，返回false
function rec(){
var mymessage=confirm("是女的？") ;
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
- prompt 消息對話框:
prompt(str1, str2);
str1: 要顯示在消息對話框中的文本肾筐，不可修改
str2：文本框中的內(nèi)容哆料，可以修改
返回值:
點擊確定按鈕，文本框中的內(nèi)容將作為函數(shù)返回值
點擊取消按鈕吗铐，將返回null
function rec(){
var score; //score變量东亦，用來存儲用戶輸入的成績值。
score =prompt("請輸入成績：") ;
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不錯吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
打開新窗口：window.open([URL], [窗口名稱], [參數(shù)字符串])
URL：可選參數(shù)，在窗口中要顯示網(wǎng)頁的網(wǎng)址或路徑典阵。如果省略這個參數(shù)奋渔，或者它的值是空字符串，那么窗口就不顯示任何文檔壮啊。
窗口名稱：可選參數(shù)嫉鲸，被打開窗口的名稱。
1.該名稱由字母歹啼、數(shù)字和下劃線字符組成玄渗。
2."_top"、"_blank"狸眼、"_self"具有特殊意義的名稱藤树。
_blank：在新窗口顯示目標網(wǎng)頁
_self：在當前窗口顯示目標網(wǎng)頁
_top：框架網(wǎng)頁中在上部窗口中顯示目標網(wǎng)頁3.相同 name 的窗口只能創(chuàng)建一個，要想創(chuàng)建多個窗口則 name 不能相同拓萌。
4.name 不能包含有空格岁钓。
參數(shù)字符串：可選參數(shù)，設(shè)置窗口參數(shù)微王，各參數(shù)用逗號隔開屡限。窗口關(guān)閉：window.close(); 或<窗口對象>.close(); （關(guān)閉指定窗口）
DOM節(jié)點:
1、元素節(jié)點：上圖中<html>骂远、<body>囚霸、<p>等都是元素節(jié)點腰根，即標簽激才。
2、文本節(jié)點:向用戶展示的內(nèi)容额嘿，如<li>...</li>中的JavaScript瘸恼、DOM、CSS等文本册养。
3东帅、屬性節(jié)點:元素屬性，如<a>標簽的鏈接屬性球拦。
通過id獲取元素： document.getElementById(“id”)
innerHTML屬性：Object.innerHTML Object是獲取的對象
改變html樣式：Object.style.property=new style;
顯示和隱藏：Object.style.display = value
控制類名：object.className = classname（1.獲取元素的class 屬性 2. 為網(wǎng)頁內(nèi)的某個元素指定一個css樣式來更改該元素的外觀）
三靠闭、JS數(shù)組
- 創(chuàng)建數(shù)組：var myarray=new Array();
- 二維數(shù)組：
var myarr=new Array(); //先聲明一維
for(var i=0;i<2;i++){ //一維長度為2
myarr[i]=new Array(); //再聲明二維
for(var j=0;j<3;j++){ //二維長度為3
myarr[i][j]=i+j; // 賦值，每個數(shù)組元素的值為i+j
}
}
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
四坎炼、JS事件
-
主要事件表：
Paste_Image.png 鼠標單擊事件( onclick ）:當在網(wǎng)頁上單擊鼠標時愧膀，就會發(fā)生該事件。同時onclick事件調(diào)用的程序塊就會被執(zhí)行谣光，通常與按鈕一起使用檩淋。
鼠標經(jīng)過事件（onmouseover）：鼠標經(jīng)過事件，當鼠標移到一個對象上時萄金，該對象就觸發(fā)onmouseover事件蟀悦，并執(zhí)行onmouseover事件調(diào)用的程序媚朦。
鼠標移開事件（onmouseout）：鼠標移開事件，當鼠標移開當前對象時日戈，執(zhí)行onmouseout調(diào)用的程序询张。
光標聚焦事件（onfocus）：當網(wǎng)頁中的對象獲得聚點時，執(zhí)行onfocus調(diào)用的程序就會被執(zhí)行涎拉。
失焦事件（onblur）：onblur事件與onfocus是相對事件瑞侮，當光標離開當前獲得聚焦對象的時候，觸發(fā)onblur事件鼓拧，同時執(zhí)行被調(diào)用的程序半火。
內(nèi)容選中事件（onselect）：選中事件，當文本框或者文本域中的文字被選中時季俩，觸發(fā)onselect事件钮糖，同時調(diào)用的程序就會被執(zhí)行。
文本框內(nèi)容改變事件（onchange）：通過改變文本框的內(nèi)容來觸發(fā)onchange事件酌住，同時執(zhí)行被調(diào)用的程序店归。
加載事件（onload）：事件會在頁面加載完成后，立即發(fā)生酪我，同時執(zhí)行被調(diào)用的程序消痛。
注意：
1、 加載頁面時都哭，觸發(fā)onload事件秩伞，事件寫在<body>標簽內(nèi)。
2.欺矫、此節(jié)的加載頁面纱新，可理解為打開一個新頁面時。
如下代碼,當加載一個新頁面時穆趴，彈出對話框“加載中脸爱，請稍等…”。
卸載事件（onunload）：當用戶退出頁面時（頁面關(guān)閉未妹、頁面刷新等）簿废，觸發(fā)onUnload事件，同時執(zhí)行被調(diào)用的程序络它。
Windows對象方法：
五族檬、JavaScript 計時器：
-
計時器方法
Paste_Image.png
計時器setInterval():setInterval(代碼,交互時間);
參數(shù)說明：
1、代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串酪耕。
2导梆、交互時間：周期性執(zhí)行或調(diào)用表達式之間的時間間隔，以毫秒計（1s=1000ms）。 取消計時器clearInterval()：clearInterval(id_of_setInterval)
計時器setTimeout()：setTimeout(代碼,延遲時間);在載入后延遲指定時間后,去執(zhí)行一次表達式,僅執(zhí)行一次看尼。
取消計時器clearTimeout()：clearTimeout(id_of_setTimeout)
History 對象：window.history.[屬性|方法]递鹉；history對象記錄了用戶曾經(jīng)瀏覽過的頁面(URL)，并可以實現(xiàn)瀏覽器前進與后退相似導航的功能藏斩。
History 對象屬性
- History 對象方法
返回前一個瀏覽的頁面：window.history.back();=window.history.go(-1);
返回瀏覽歷史中的其他頁面：window.history.go(number);
參數(shù)：
- Location對象：location.[屬性|方法]躏结；location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL狰域。
- location 對象屬性：
- location 對象方法:
- Navigator對象：包含有關(guān)瀏覽器的信息媳拴，通常用于檢測瀏覽器與操作系統(tǒng)的版本。
對象屬性:
userAgent：navigator.userAgent兆览；返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
- screen對象：window.screen.屬性;用于獲取用戶的屏幕信息屈溉。
對象屬性：
屏幕分辨率的高和寬
window.screen 對象包含有關(guān)用戶屏幕的信息。
- screen.height 返回屏幕分辨率的高
- screen.width 返回屏幕分辨率的寬
屏幕可用高和寬度 - screen.availWidth 屬性返回訪問者屏幕的寬度抬探，以像素計子巾，減去界面特性，比如任務(wù)欄小压。
- screen.availHeight 屬性返回訪問者屏幕的高度线梗，以像素計，減去界面特性怠益，比如任務(wù)欄仪搔。
六、文檔對象模型DOM（Document Object Model）：
定義訪問和處理HTML文檔的標準方法蜻牢。DOM 將HTML文檔呈現(xiàn)為帶有元素烤咧、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）。
遍歷節(jié)點樹:
以上圖ul為例孩饼，它的父級節(jié)點body,它的子節(jié)點3個li,它的兄弟結(jié)點h2髓削、P竹挡。
DOM操作:
getElementsByName()方法：document.getElementsByName(name)镀娶；返回帶有指定名稱的節(jié)點對象的集合。（返回名字是name的元素數(shù)組）
getElementsByTagName()方法：document.getElementsByTagName(Tagname)揪罕；返回帶有指定標簽名的節(jié)點對象的集合梯码。返回元素的順序是它們在文檔中的順序。
getElementByID,getElementsByName,getElementsByTagName區(qū)別：
1好啰、ID 是一個人的身份證號碼轩娶，是唯一的。所以通過getElementById獲取的是指定的一個人框往。
2鳄抒、Name 是他的名字，可以重復。所以通過getElementsByName獲取名字相同的人集合许溅。
3瓤鼻、TagName可看似某類，getElementsByTagName獲取相同類的人集合贤重。如獲取小孩這類人茬祷，getElementsByTagName("小孩")。getAttribute()方法：elementNode.getAttribute(name)并蝗；通過元素節(jié)點的屬性名稱獲取屬性的值祭犯。
1、elementNode：使用getElementById()滚停、getElementsByTagName()等方法沃粗，獲取到的元素節(jié)點。
2键畴、name：要想查詢的元素節(jié)點的屬性名字setAttribute()方法：elementNode.setAttribute(name,value)陪每；setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現(xiàn)有的屬性設(shè)定為指定的值镰吵。
在文檔對象模型 (DOM) 中檩禾，每個節(jié)點都是一個對象。DOM 節(jié)點有三個重要的屬性 ：
1疤祭、nodeName : 節(jié)點的名稱
2盼产、nodeValue ：節(jié)點的值
3、nodeType ：節(jié)點的類型訪問子節(jié)點childNodes：elementNode.childNodes勺馆；訪問選定元素節(jié)點下的所有子節(jié)點的列表戏售，返回的值可以看作是一個數(shù)組，他具有l(wèi)ength屬性草穆。
firstChild 屬性：返回‘childNodes’數(shù)組的第一個子節(jié)點灌灾。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回 NULL悲柱。
語法：
node.firstChild
說明：與elementNode.childNodes[0]是同樣的效果锋喜。lastChild 屬性：返回‘childNodes’數(shù)組的最后一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點豌鸡，則該屬性返回 NULL嘿般。
語法：
node.lastChild
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。訪問父節(jié)點parentNode： elementNode.parentNode涯冠；
訪問兄弟節(jié)點：
1炉奴、nextSibling 屬性：nodeObject.nextSibling；可返回某個節(jié)點之后緊跟的節(jié)點（處于同一樹層級中）蛇更。
2瞻赶、previousSibling 屬性：nodeObject.previousSibling 赛糟；可返回某個節(jié)點之前緊跟的節(jié)點（處于同一樹層級中）。
插入節(jié)點appendChild()：appendChild(newnode)砸逊；在指定節(jié)點的最后一個子節(jié)點列表之后添加一個新的子節(jié)點虑灰。
插入節(jié)點insertBefore()：insertBefore(newnode,node);可在已有的子節(jié)點前插入一個新的子節(jié)點。（node: 指定此節(jié)點前插入節(jié)點痹兜。）
刪除節(jié)點removeChild()：nodeObject.removeChild(node)穆咐；removeChild() 方法從子節(jié)點列表中刪除某個節(jié)點。如刪除成功字旭，此方法可返回被刪除的節(jié)點对湃，如失敗，則返回 NULL遗淳。
替換元素節(jié)點replaceChild()：node.replaceChild (newnode,oldnew ) 拍柒；實現(xiàn)子節(jié)點(對象)的替換。返回被替換對象的引用屈暗。
創(chuàng)建元素節(jié)點createElement：document.createElement(tagName)拆讯；
創(chuàng)建文本節(jié)點createTextNode：document.createTextNode(data)
