JavascriptDOM(三)
生活随笔
收集整理的這篇文章主要介紹了
JavascriptDOM(三)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
簡(jiǎn)介
今天學(xué)習(xí)第二天的知識(shí),js和BOM對(duì)象,再接再厲,fighting~
學(xué)習(xí)原則
腳踏實(shí)地的走好每一步,要想學(xué)好高級(jí)部分,基礎(chǔ)知識(shí)必須扎實(shí)呀
掌握基本語法,完成小案例,寫博客作總結(jié),基本就是這個(gè)節(jié)奏,下面我們一起快速入門吧
JavaScript快速入門
1. js簡(jiǎn)介
1.js基于對(duì)象和事件驅(qū)動(dòng)的腳本語言，作用在客戶端（瀏覽器）上，無需編譯，可由瀏覽器直接解釋運(yùn)行，JavaScript 是一種弱類型語言 2.js的特點(diǎn)* 交互性好。 人與服務(wù)器之間進(jìn)行溝通。例子：注冊(cè)的功能，輸入特殊字符。瀏覽器直接給我提示。* 安全性 不可以直接訪問本地的硬盤。* 跨平臺(tái)性 瀏覽器就可以解析JS的文件。 3.JavaScript和Java是不同(一點(diǎn)關(guān)系都沒有)* js語言的歷史：網(wǎng)景 牛X的公司 開發(fā)LiveScript動(dòng)態(tài)效果* LiveScript改名稱JavaScript 微軟開發(fā)的語言JScript* 標(biāo)準(zhǔn)：開發(fā)一套語言標(biāo)簽 ECMAScript標(biāo)準(zhǔn)。* 如果想開發(fā)js 底層遵循ECMAScript標(biāo)準(zhǔn)，然后在基礎(chǔ)上進(jìn)行擴(kuò)展。* 如果JScript 底層遵循ECMAScript標(biāo)準(zhǔn)，然后在基礎(chǔ)上進(jìn)行擴(kuò)展。 4.js和Java的不同點(diǎn)（學(xué)習(xí)）* js基于對(duì)象，Java面向?qū)ο? * js解析就可以執(zhí)行，Java先編譯，再執(zhí)行。* js是弱類型的語言，Java是強(qiáng)類型的語言。 5.js語言的組成* ECMAScript標(biāo)準(zhǔn) 定義語法* BOM（瀏覽器對(duì)象模型） 代表整個(gè)瀏覽器（對(duì)象和API）* DOM（文檔對(duì)象模型） 代表整個(gè)文檔2. js和html結(jié)合
1.HTML用標(biāo)簽封裝數(shù)據(jù)，CSS通過標(biāo)簽設(shè)置樣式。js通過對(duì)象和語句來操作標(biāo)簽。 2.js和HTML的結(jié)合（2種)*.HTML的文件提供了一個(gè)標(biāo)簽<script type="text/javascript"> js代碼 </script> 特點(diǎn)：<script>標(biāo)簽可以放在頁面的任意位置。*.引入外部文件的方式：<script type="text/javascript" src="引入JS的文件的地址" ></script> 注意：如果src的屬性引入了外部的文件，在<script>標(biāo)準(zhǔn)中間定義js代碼就不會(huì)執(zhí)行。*.擴(kuò)展的問題：特點(diǎn)：<script>標(biāo)簽可以放在頁面的任意位置。一般情況下：不是必須的。建議。如果引入了外部的文件（外部文件沒有直接操作HTML的標(biāo)簽，一般的情況下放在<head>中間）如果在本HTML文件上編寫JS的代碼，如果也沒有直接操作HTML的標(biāo)簽，推薦放在</body>標(biāo)簽之后3. js的關(guān)鍵字/標(biāo)識(shí)符/注釋/js的基本數(shù)據(jù)類型
1.關(guān)鍵字：用到哪個(gè)記住關(guān)鍵字 2.標(biāo)示符：在js和java是一樣的。 3.注釋： // 單行注釋 /* 多行注釋 */ /** 文檔注釋 */ 4.變量：聲明變量。如果Java中：int a = 10; String str = "abc"; 如果是在js中聲明變量的話：就使用一個(gè)關(guān)鍵字var 5.js的數(shù)據(jù)類型5種基本數(shù)據(jù)類型：Undefined、Null、Boolean、Number 和 String * String 字符串在js中單引號(hào)和雙引號(hào)都代表的是字符串* Number 數(shù)字類型沒有整數(shù)和小數(shù)之分。* Boolean 布爾類型和java一樣的* Null 空，一般給引用賦值* Undefined 未定義（聲明變量，沒有賦值）js中聲明變量使用 vartypeof(變量) ：判斷當(dāng)前的變量是屬于什么類型的js語言弱類型的語言，聲明任意類型的變量，都可以進(jìn)行賦值4. js的運(yùn)算符
* 算術(shù)運(yùn)算符alert(num / 1000 * 1000); //3710數(shù)字類型不區(qū)分整數(shù)和小數(shù)* 字符串中間數(shù)字，做減法js默認(rèn)字符串解析，再進(jìn)行運(yùn)算。alert("abc"-1); // NaN：非法的數(shù)字 彈出NaN（非法的數(shù)字）* 0或者null代表是false，非0或者非null代表是true，默認(rèn)用1來表示。 * 比較運(yùn)算符== ：只比較值是否相等=== ：即比較值又類型是否相等 * 賦值元素 邏輯運(yùn)算符 三元運(yùn)算符 和java是一樣的null,false,0,'',undefined,NaN為假,其它都為真5. js的數(shù)組（重要）
1.var arrs = ["abc","cba",1,3]; 2.var arrs = new Array("abc","cba",..);var arrs = new Array(5); 聲明數(shù)組，長(zhǎng)度是5var arrs = new Array(5,6,7); 聲明數(shù)組，元素是5,6,7 3.java數(shù)組長(zhǎng)度不可變，js的數(shù)組長(zhǎng)度可變。6. js定義方法(函數(shù))
* js中編寫方法，需要使用關(guān)鍵字 function聲明方法。 * java定義方法public String run(參數(shù)列表 int x,String y){....return null;} * js中定義方法function 方法名稱(參數(shù)列表（沒有var的關(guān)鍵字） x,y){... 方法體return 返回值; 如果方法有返回值，直接寫返回值，如果沒有返回值，return可以省略不寫。} * js沒有重載的方式 * arguments數(shù)組存入傳入進(jìn)來的參數(shù) * 匿名函數(shù)：沒有名稱的函數(shù)。起個(gè)名稱。xxxx.onclick = function(){// 執(zhí)行}7. js的全局和局部變量
* js全局變量：定義在<script>標(biāo)簽中間的變量，都是全局變量。不僅可以在<script>標(biāo)簽中間使用，在其他的<script>標(biāo)簽也可以使用。 * js局部變量：定義在方法內(nèi)部的變量，是局部變量8. js的String對(duì)象
兩種聲明字符串的方式：var str = "abc"; var str ='abc';var str = new String("abc"); 屬性：length -- 字符串長(zhǎng)度。（截取字符串操作） 方法：1）和HTML的標(biāo)簽相關(guān)的一些方法bold() 把字符串顯示粗體。fontcolor() 設(shè)置字體演示fontsize() 字體的大小italics() 斜體顯示字符串link() 設(shè)置字符串為超鏈接small() 小字體sup() 上標(biāo)顯示字符串2）和Java中String相關(guān)的方法charAt() 返回指定位置的字符indexOf(searchvalue,fromindex) 檢索字符串 lastIndexOf() 從后向錢檢索字符串replace() 替換字符串substring(start,stop) 截取字符串（包含開始，不包含結(jié)束）substr(start,length) 截取字符串（從哪開始，截取多長(zhǎng)）（包含開始）toLowerCase() 小寫toUpperCase() 大寫9. js的Array對(duì)象
var arr = []; var arr = new Array(5,6); 屬性：length -- 數(shù)組的長(zhǎng)度 方法：concat(元素或者數(shù)組)join(分隔符) 把數(shù)組分隔字符串pop() 刪除數(shù)組最后一個(gè)元素并且返回push(x) 向數(shù)組的末尾去添加一個(gè)元素10. js的Date對(duì)象
Date對(duì)象* 獲取當(dāng)前的時(shí)間 var date = new Date(); 方法：toLocaleString() 根據(jù)本地時(shí)間格式，把date轉(zhuǎn)換字符串toLocaleDateString() 只有日期toLocaleTimeString() 只有時(shí)間getTime() 獲取1970-1-1號(hào)至今的毫秒數(shù)setTime(毫秒數(shù)) // 通過毫秒數(shù)變成當(dāng)前的時(shí)間parse(str) 靜態(tài)方法，使用Date.parse();解析字符串，返回毫秒數(shù)// 2015-1-10 js中不能解析// 可以解析類型 2015,1,10 1/10/201511. js的Math對(duì)象
* 都是和數(shù)學(xué)相關(guān)的 * 靜態(tài)的方法 Math.xxx() ceil(x) 對(duì)一個(gè)數(shù)進(jìn)行上舍入floor(x) 對(duì)一個(gè)數(shù)進(jìn)行下舍入round(x) 對(duì)一個(gè)數(shù)進(jìn)行四舍五入random() 獲取隨機(jī)數(shù) 0-1之間小數(shù)12. js的RegExp對(duì)象
* 作用：完成表單的校驗(yàn)。 * 聲明var reg = new RegExp(表達(dá)式);var reg = /表達(dá)式/; 特殊的寫法：var reg = /^表達(dá)式$/; （記住） * 方法exec(str) ：如果匹配成功，返回是匹配的結(jié)果 test(str) ：如果匹配成功，返回true，如果不成功，返回false （記住）13. js的全局函數(shù)
* 全局函數(shù)游離的狀態(tài)，函數(shù)直接拿過來使用。 eval() 解析字符串，可以執(zhí)行字符串中的方法 isNaN() 檢測(cè)是否是非法的數(shù)字 如果是true代表是非法的數(shù)字下面這些方法都和編碼和解碼有關(guān)。 想傳輸中文亂碼的問題，先把中文編碼（UTF-8），進(jìn)行傳輸。再把內(nèi)容進(jìn)行解碼。 encodeURI() 編碼 decodeURI() 解碼encodeURIComponent() 編碼 decodeURIComponent() 解碼escape() 編碼 unescape() 解碼?
14. 常用事件
1. 聚焦與離焦事件 onfocus 獲取焦點(diǎn)的事件 onblur 失去焦點(diǎn)事件 2. 提交與改變事件 onchange 改變事件 onsubmit 控制表單的提交(表單的校驗(yàn))必須和標(biāo)簽結(jié)合到一起 onsubmit的值寫法：return run()run必須要有返回值，如果返回true，表單就可以提交，如果返回是false，表單不能提交。 3. 加載與卸載事件 onload加載事件：HTML文件加載完成后觸發(fā)事件 onunload 卸載事件：關(guān)閉瀏覽器的時(shí)候，觸發(fā)事件。 onbeforeunload關(guān)閉瀏覽器之前 4. 鼠標(biāo)移動(dòng)事件 mousemove mouseout onmouseover 進(jìn)入某個(gè)區(qū)域，停留在區(qū)域上，觸發(fā)事件onclick 單擊事件 ondblclick 雙擊事件 5. 鍵盤事件 onkeypress 鍵盤摁住 onkeydown 鍵盤按下 onkeyup 鍵盤彈起BOM(瀏覽器對(duì)象模型)快速入門
1. BOM中對(duì)象介紹
BOM Navigator -- 和瀏覽器版本相關(guān)的（**） BOM Screen -- 和瀏覽器屏幕相關(guān)的（用的少） BOM History -- 和瀏覽器歷史相關(guān)的（**）forward() 去下一頁back() 去上一頁go() 傳入值，如果1等于forward() 如果傳入-1代表是back() BOM Location -- 和瀏覽器地址欄相關(guān)的（***）href 當(dāng)前頁面的地址的鏈接 獲取和設(shè)置當(dāng)前網(wǎng)頁的地址window可以省略不寫2. window對(duì)象
1.子--->父?jìng)髦祑indow.parent 2.父--->子傳值window.frames 3.self相當(dāng)于window,代表自身top:代表頂層窗口parent:代表父窗口status:代表狀態(tài)欄opener：代表打開當(dāng)前窗口的窗口 ,結(jié)合window.open()一起使用方法介紹:window.open()打開一個(gè)子窗口窗口屬性： width,height,toolbar,menubarwindow.close() 關(guān)閉窗口//實(shí)現(xiàn)自動(dòng)觸發(fā)setInterval("winOpen()",5000);//5000單位是毫秒,反復(fù)執(zhí)行setTimeout("函數(shù)",毫秒數(shù));//自動(dòng)觸發(fā)，是執(zhí)行一次，如果要多次，需要遞歸調(diào)用制做浮動(dòng)廣告function changFloat(){document.getElementById("imgpos").style.top=Math.random()*500+'px';document.getElementById("imgpos").style.left=Math.random()*500+'px';}setInterval("changFloat()",500);clearInterval(唯一的id值) 清除定時(shí)器clearTimeout(唯一的id值) 清除定時(shí)器//彈框練習(xí)alert();警告框confirm()確定取消框 點(diǎn)確認(rèn)返回true,取消返回falseprompt()對(duì)話框子父窗口傳值問題父子窗口傳數(shù)據(jù)(子-》父:parent, 父----子：frames[0])打開與被打開窗口之間傳數(shù)據(jù):opener打開模式對(duì)話框 showModalDialog()返回子窗口中的值 window.returnValue?
DOM(文檔對(duì)象模型)快速入門
1. DOM的簡(jiǎn)介
1.DOM：Document Object Model 文檔對(duì)象模型 2.文檔：標(biāo)記型文檔（HTML XML） 3.對(duì)象：有對(duì)象有方法或者屬性。 4.模型：抽象。共有的特性封裝起來。 5.DOM的作用：會(huì)把所有的文檔的內(nèi)容全部（元素、文本、屬性）封裝對(duì)象，方便操作。因?yàn)閷?duì)象提供了方法和屬性。 6.DOM如果想操作標(biāo)記型文檔必須先進(jìn)行解析。（解析器） 7.DOM解析HTML的方式(重點(diǎn))2. DOM對(duì)象圖解
3. DOM的三個(gè)級(jí)別和DHTML介紹
1.DOM的三個(gè)級(jí)別就是DOM發(fā)展的過程。 2.DOM的二級(jí)別和三級(jí)別以后有機(jī)會(huì)看一下（偷偷的）。 3.DHTML不是一門語言。* HTML ：使用標(biāo)簽封裝數(shù)據(jù)（最基本一步） <span style="">文本內(nèi)容</span>* CSS ：設(shè)置網(wǎng)頁的樣式* JavaScript（BOM） ：提供的是程序的控制語句。 for if * DOM ：DOM提供了一些解析的對(duì)象4. Document對(duì)象
* document:代表整個(gè)文檔對(duì)象。方法：* getElementById("id的值"); 獲取是指定id值的元素對(duì)象。如果id值相同了，默認(rèn)獲取先加載的那個(gè)* getElementsByName("name名稱") 獲取是name名稱相同的元素對(duì)象集合，返回。也可以通過下標(biāo)[0]或者循環(huán)遍歷* getElementsByTagName("標(biāo)簽名稱") 獲取是通過標(biāo)簽名稱的元素對(duì)象集合* write("文本內(nèi)容") 把文本的內(nèi)容輸出到客戶端上?
5. 動(dòng)態(tài)添加子節(jié)點(diǎn)
function run(){// 創(chuàng)建元素對(duì)象var li = document.createElement("li");// 創(chuàng)建文本var text = document.createTextNode("深圳");// 把文本添加到li下面li.appendChild(text);// 把li添加到ul的下面// 獲取ul的節(jié)點(diǎn)var uls = document.getElementsByTagName("ul");var ul = uls[0];ul.appendChild(li); } 總結(jié)：* 創(chuàng)建元素對(duì)象 document.createElement()* 窗口文本對(duì)象 document.createTextNode()* 添加子節(jié)點(diǎn) appendChild()6. Element元素對(duì)象
* 都是和操作屬性相關(guān)的* setAttribute("屬性名稱","屬性值"); 設(shè)置或者修改屬性的值* getAttribute("屬性名稱"); 獲取屬性的值* removeAttribute("屬性名稱") 刪除屬性 * 獲取子節(jié)點(diǎn)（記住重點(diǎn)）* Element.getElementsByTagName("元素名稱"); 獲取元素下面所有子節(jié)點(diǎn)7. Node節(jié)點(diǎn)對(duì)象動(dòng)態(tài)添加子節(jié)點(diǎn)
* Document Elment Text Attribute對(duì)象都屬性Node節(jié)點(diǎn)對(duì)象。 * Node對(duì)象的三個(gè)屬性* nodeName 屬性名稱* nodeType 屬性類型* nodeValue 屬性值元素對(duì)象 屬性對(duì)象 文本對(duì)象nodeName 大寫標(biāo)簽名稱 屬性名稱 #text nodeType 1 2 3nodeValue null 屬性值 文本的內(nèi)容 * Node其他的屬性（看圖）parentNode 父節(jié)點(diǎn)（不能獲取到空格）firstChild 第一個(gè)節(jié)點(diǎn) firstElementChild 第一個(gè)節(jié)點(diǎn)lastChild 最后一個(gè)節(jié)點(diǎn)、 lastElementChild 最后一個(gè)節(jié)點(diǎn)nextSibling 下一同級(jí)節(jié)點(diǎn) nextElementSibling 下一同級(jí)節(jié)點(diǎn)previousSibling 上一同級(jí)節(jié)點(diǎn) previousElementSibling 上一同級(jí)節(jié)點(diǎn)8. Node節(jié)點(diǎn)對(duì)象的方法
* hasChildNodes() 判斷是否包含子節(jié)點(diǎn)// 先判斷ul是否包含子節(jié)點(diǎn)var ul = document.getElementById("ulId");// alert(ul.hasChildNodes()); * hasAttributes() 判斷是否包含屬性// 判斷是否包含屬性alert(ul.hasAttributes());* appendChild(node) 默認(rèn)向末尾去添加子節(jié)點(diǎn) * insertBefore(new,old) 在指定的節(jié)點(diǎn)之前添加子節(jié)點(diǎn)，new：創(chuàng)建新節(jié)點(diǎn) old：在哪個(gè)節(jié)點(diǎn)之前添加9. innerHTML屬性(重要)
* 不是官方提供的標(biāo)準(zhǔn)，但是所有的瀏覽器都支持它。獲取和設(shè)置標(biāo)簽的文本內(nèi)容。// 如果不使用innerHTML屬性，獲取文本內(nèi)容。 nodeValue如果文本對(duì)象，獲取文本的內(nèi)容。// 提供了innerHTML屬性來獲取文本內(nèi)容// 獲取span的標(biāo)簽對(duì)象/* var span = document.getElementById("spanId");// alert(span.innerHTML);span.innerHTML = "<font color='red'>我是張三</font>"; *//* onfocus ：獲取焦點(diǎn)onblur ：失去焦點(diǎn)*/<span id="spanId">我是span區(qū)域</span><br/><h4>獲取和失去焦點(diǎn)的事件</h4>姓名：<input type="text" name="username" id="nameId" οnfοcus="run1()" οnblur="run2()"/><span id="uspan"></span><br/>密碼：<input type="password" name="password" id="pwdId" /><span id="pspan"></span><br/>function run1(){// 操作uspan，動(dòng)態(tài)設(shè)置提示的內(nèi)容var uspan = document.getElementById("uspan");uspan.innerHTML = "不能輸入特殊字符";}function run2(){// 異步請(qǐng)求 ajaxvar uspan = document.getElementById("uspan");uspan.innerHTML = "用戶名以存在";}?10. 對(duì)節(jié)點(diǎn)進(jìn)行CRUD操作
1.查找結(jié)點(diǎn)？document.getElementById():根據(jù)指定的id查找唯一的結(jié)點(diǎn)document.getElenmentsByName():根據(jù)name屬性查找一組具有相同名稱的結(jié)點(diǎn)document.getElementsByTagName():根據(jù)標(biāo)簽名去查找一組具有相同標(biāo)簽名的結(jié)點(diǎn) 2.刪除結(jié)點(diǎn)？removeChild():刪除元素結(jié)點(diǎn),指定了由父結(jié)點(diǎn)去刪除子結(jié)點(diǎn)deleteData()從已載入的XML中的一個(gè)文本節(jié)點(diǎn)刪除文本removeAttribute()從已載入的XML中刪除屬性。 刪除元素 本例使用 removeChild()從載入的XML中刪除最后一個(gè)<book>元素。 刪除屬性 本例使用removeAttribute()從已載入的XML中刪除所有的"category"屬性。 HTMLDOM 表格deleteRow(rowIndex) 從表格刪除一行。 3.添加結(jié)點(diǎn)？createElement()來創(chuàng)建一個(gè)新的元素setAttribute()方法來設(shè)置新的屬性/屬性值createTextNode() 創(chuàng)建文本節(jié)點(diǎn)。 HTMLDOM 在表格中添加結(jié)點(diǎn)insertRow() 在表格中插入一個(gè)新行。 trinsertCell() 在一行中的指定位置插入一個(gè)空的 <td> 元素。 4.修改或替換結(jié)點(diǎn)？replaceChild()替換結(jié)點(diǎn)克隆結(jié)點(diǎn) cloneNode(true);//true代表復(fù)制子結(jié)點(diǎn)，false不會(huì)復(fù)制子結(jié)點(diǎn)轉(zhuǎn)載于:https://www.cnblogs.com/codingpark/p/4227206.html
總結(jié)
以上是生活随笔為你收集整理的JavascriptDOM(三)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 天命奇御2雯姬怎么玩?
- 下一篇： 深入Javascript中apply、c