當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScriptDOM
生活随笔
收集整理的這篇文章主要介紹了
JavaScriptDOM
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript
獨立的語言，瀏覽器具有js解釋器
js的書寫方式：
1、js的第一種書寫方式
<script>alert('fdsfdsf') </script>2、js的第二種書寫方式
<script src="a.js"></script>ps：JS代碼塊放置在<body>標簽的最下方
3、注釋方式
3.1 單行注釋 // 3.2 多行注釋 /*fdsfdsf dsfdsf */4、變量
局部變量 var name = 'alex'; 全局變量 name = "alex"; (1).變量對大小寫敏感（y 和 Y 是兩個不同的變量） (2).第一個字符必須是字母、下劃線（_）或美元符號（$） (3).余下的字符可以是下劃線、美元符號或任何字母或數字字符 ? ?5、數據類型
? ? 5.1數字
var num = 10;? ? 5.2字符串
obj.length // 長度 obj.trim() // 移除空白 obj.trimLeft()obj.trimRight()obj.charAt(n) // 返回字符串中的第n個字符obj.concat(value, ...) // 拼接obj.indexOf(substring,start) // 子序列位置obj.lastIndexOf(substring,start) // 子序列位置obj.substring(from, to) // 根據索引獲取子序列obj.slice(start, end) // 切片obj.toLowerCase() // 大寫obj.toUpperCase() // 小寫 obj.split(delimiter, limit) // 分割5.3列表 (數組)
obj.length // 數組的長度obj.push(ele) // 尾部追加元素obj.pop() // 尾部獲取一個元素obj.unshift(ele) // 頭部插入元素obj.shift() // 頭部移除元素obj.splice(start, deleteCount, value, ...) // 插入、刪除或替換數組的元素obj.splice(n,0,val) // 指定位置插入元素(從n開始刪除0個元素，插入val)obj.splice(n,1,val) // 指定位置替換元素obj.splice(n,1) // 指定位置刪除元素obj.slice( ) // 切片obj.reverse( ) // 反轉obj.join(sep) // 將數組元素連接起來以構建一個字符串obj.sort( ) // 對數組元素進行排序? ? 5.4字典 ?
var dict = {"name":"alex", "age":"22"} dict.name // 調用方式一 dict['name'] // 調用方式二? ? 5.6 bool
true or false6、基本的運算符
算術運算符：
+ - * / % ++ --var total = num++; // total = num; num+1;var total = ++num; // num = num + 1; total = num;console.log(total);比較運算符：
> >= < <= !=(值不相等就成立) ==(值相等就成立) ===（值跟類型都相等才成立） !==（值跟類型都不相等才成立）邏輯運算符：
&& || ！賦值運算符：
= += -= *= /=字符串運算符：???
+ // 如果兩邊是數字就計算，兩邊操作數有一個或兩個是字符串就做連接運算7、流程控制
7.1、順序結構
console.log(“吃飯”);console.log(“睡覺”);console.log(“打豆豆”);7.2、分支結構
7.2.1單分支結構
if(表達式){命令}7.2.2雙分支
if(表達式){命令}else{命令}7.2.3多路分支
if(表達式){命令}else if(表達式){命令}else if(表達式){命令}else{命令}7.2.4switch...case
switch (expression){ case label1 :statement1; break;case label2 :statement2; break;default : statementdefault }7.3 循環結構
for循環
1.1列表循環時，循環的元素是索引
var a = [11,22,33,44];for (var item in a){console.log(a[item])}以上代碼運行結果
11 22 33 441.2循環列表方式二
var a = [11,22,33,44];for (var i = 0;i<a.length;i=i+1){console.log(a[i])}以上代碼運行結果：
11 22 33 442.字典循環時，循環的元素是key
var a = {'k1':'v1','k2':'v2'}for (var item in a){console.log(a[item])}以上代碼運行結果：
v1 v2while循環（do...while）
var n = 0;do{console.log('fdsfs')n = n + 1;}while(n<3);7.4 函數三種書寫方式
函數在javascript里面是一等公民的位置普通函數
function test(arg){console.log(); } // 調用方式： test(arg);函數當成變量
var func = function(){console.log('fdsfs'); } // 調用方式： func();匿名函數
setInterval(function () {console.log(123) },2000);自執行函數
(function(arg){console.log(arg) })(123) // 調用方式： // 直接執行上面的函數7.5.系統函數
7.5.1、序列化
JSON.stringify(obj) // 序列化，把對象轉換成字符串JSON.parse(str) // 反序列化，把字符串轉換成對象7.5.2、轉義
js將數據經過轉義后，保存在cookie中
decodeURI( ) // URl中的字符轉中文decodeURIComponent( ) // URI中的字符轉中文encodeURI( ) // URI中的中文轉字符encodeURIComponent( ) // URI中的':/=?&'轉字符escape( ) // 對字符串轉義unescape( ) // 給轉義字符串解碼URIError // 由URl的編碼和解碼方法拋出7.5.3.eval
python:val = eval(表達式)exec（執行代碼,不能獲取返回值）JavaScript:eva(l既可以執行表達式，也可以執行代碼。)7.5.4時間
var d = new Date() d // 顯示當前完整時間 d.getDate() //顯示當前day d.getMinutes() //顯示當前minutes作用域：
<script>function func() {for (var i=0;i<3;i++){setInterval(function () {console.log(i)},1000)}}func(); </script>以上代碼輸出：很多個3
JavaScript?正則表達式
/.../ // 用于定義正則表達式 /.../g // 表示全局匹配 /.../i // 表示不區分大小寫 /.../m // 表示多行匹配，默認多行匹配?
?
search() 方法?用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，存在就返回子串的起始位置，不存在則返回-1。
'exc'.search(/e/) // 結果為0replace() 方法?用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
'exc'.replace(/xc/,'fg') // 結果為efgtest() 方法?用于檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
/e/.test('exc') // 檢測字符e是否在字符串exc里，結果為trueexec() 方法?用于檢索字符串中的正則表達式的匹配。該函數返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。
/e/.exec('exc')[0] // 檢測字符e是否在字符串exc里，結果為"e" 非全局模式獲取匹配結果數組，注意：第一個元素是第一個匹配的結果，后面元素是正則子匹配（正則內容分組匹配）var pattern = /\bJava\w*\b/;var text = "JavaScript is more fun than Java or JavaBeans!";result = pattern.exec(text)var pattern = /\b(Java)\w*\b/;var text = "JavaScript is more fun than Java or JavaBeans!";result = pattern.exec(text)全局模式需要反復調用exec方法，來一個一個獲取結果，直到匹配獲取結果為null表示獲取完畢var pattern = /\bJava\w*\b/g;var text = "JavaScript is more fun than Java or JavaBeans!";result = pattern.exec(text)var pattern = /\b(Java)\w*\b/g;var text = "JavaScript is more fun than Java or JavaBeans!";result = pattern.exec(text)?
?
跑馬燈實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="i1">歡迎光臨</div><script>function f1() {var tag = document.getElementById('i1');var tagtext = tag.innerText;var f = tagtext.charAt(0);var l = tagtext.substring(1, tagtext.length);var new_content = l + f;tag.innerText = new_content ;}setInterval('f1();', 1000)</script> </body> </html>DOM
1.HTML Document Object Model（文檔對象模型）
2.HTML DOM 定義了訪問和操作HTML文檔的標準方法
3.HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）
一、選擇器：
1.直接選擇器
document.getElementById // 根據ID獲取一個標簽document.getElementsByName // 根據name屬性獲取標簽集合document.getElementsByClassName // 根據class屬性獲取標簽集合document.getElementsByTagName // 根據標簽名獲取標簽集合實例：
document.getElementById('i1') //訪問id為i1的元素 document.getElementsByName('aa') //訪問所有包含name屬性為aa的元素，返回一個列表 document.getElementsByTagName('input') //訪問所有<input>元素,返回一個列表 document.getElementsByClassName('c1') 方法 //訪問標簽屬性為c1的所有元素，返回一個列表 document.getElementById("main").getElementsByTagName("p"); //訪問所有 <p> 元素的列表，并且這些 <p> 元素應該是 id="main" 的元素的后代（子、孫等等）2.間接選擇器?
parentNode // 父節點childNodes // 所有子節點firstChild // 第一個子節點lastChild // 最后一個子節點nextSibling // 下一個兄弟節點previousSibling // 上一個兄弟節點 parentElement // 父節點標簽元素children // 所有子標簽,得到一個列表firstElementChild // 第一個子標簽元素lastElementChild // 最后一個子標簽元素nextElementtSibling // 下一個兄弟標簽元素previousElementSibling // 上一個兄弟標簽元素二、操作
1、內容?
innerText // 文本 outerText innerHTML // HTML內容 outerHTML value // 值2、屬性
attributes // 獲取所有標簽屬性 setAttribute(key,value) // 設置標簽屬性 getAttribute(key) // 獲取指定標簽屬性/* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr); */3、class操作
className // 獲取所有類名 classList.remove(cls) // 刪除指定類 classList.add(cls) // 添加類4.提交表單
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form id='f1' action="http://www.baidu.com"><a onclick="confirm();">跳轉</a> </form><script>function confirm() {document.getElementById('f1').submit()}</script> </body> </html>5、彈出框和輸出框
console.log //輸出框 alert //彈出框 confirm //確認框6、獲取URL和刷新
// URL和刷新 location.href // 獲取URL location.href = "url" // 重定向 location.reload() // 重新加載實例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><a οnclick="confirm();">跳轉</a><script>function confirm() {location.href = 'http://www.baidu.com';}console.log('href',location.href);// location.reload()</script> </body> </html>7、定時器
// 定時器 setInterval // 多次定時器 clearInterval // 清除多次定時器 setTimeout // 單次定時器 clearTimeout // 清除單次定時器setInterval('執行的代碼',間隔時間) // setInterval會先執行eval('執行的代碼')
<script>function f1() {s1 = setInterval("console.log(123);",2000); //這里的s1要設置成全局變量}function f2() {clearInterval(s1)}f1();// setInterval('f2()',6000) //方式一setInterval(f2,6000) //方式二 </script>
8、事件
onclick、onfocus、onmouseover...
寫一個行為（js）、樣式（css）、結構（HTML）相分離的頁面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: pink;color: green;}</style> </head> <body><div class="c1">dsfds</div><div class="c1">hhhd</div><script>var mydiv = document.getElementsByClassName('c1');var len = mydiv.length;for (var i=0;i<len;i++){mydiv[i].onclick = function () {this.innerText = 'gogogo'; //誰調用的this，this就是誰（這里的this如果改成mydiv[i]，當點擊的時候，觸發的都是mydiv[1]）this.style.color = 'red'}} </script> </body> </html>當綁定的兩個事件重疊的時候，是冒泡方式執行的，先執行里面的，再執行外面的：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>#i1{background-color: pink;width: 300px;height: 200px;z-index: 10;}#i2{background-color: aquamarine;width: 150px;height: 100px;z-index: 1;}</style> </head> <body><div id="i1"><div id="i2"></div></div> <script>var mydiv1 = document.getElementById('i1');var mydiv2 = document.getElementById('i2');mydiv1.onclick = function () {console.log(1);};mydiv2.onclick = function () {console.log(2);} </script> </body> </html>?
同時綁定多個事件：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: pink;color: green;}</style> </head> <body><div class="c1" id="i1">dsfds</div><script>var mydiv = document.getElementById('i1');mydiv.addEventListener('click',function () {console.log('aaa')},false); //這里的false表示冒泡（從內到外），如果改成true就是捕捉（從外到內），就會先執行外面的，再執行里面的。mydiv.addEventListener('click',function () {console.log('bbb')},false); </script> </body> </html>左側菜單實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.header{height: 20px;width: 100px;background-color: pink;}.hide{display: none;}</style></head> <body><div><div class="item"><div id="i1" class="header" onclick="func('i1')">標題一</div><div class="content"><div>內容</div><div>內容</div><div>內容</div></div></div><div class="item"><div id="i2" class="header" onclick="func('i2')">標題二</div><div class="content"><div>內容</div><div>內容</div><div>內容</div></div></div><div class="item"><div id="i3" class="header" onclick="func('i3')">標題三</div><div class="content"><div>內容</div><div>內容</div><div>內容</div></div></div><div class="item"><div id="i4" class="header" onclick="func('i4')">標題四</div><div class="content"><div>內容</div><div>內容</div><div>內容</div></div></div></div><script>function func(nid) {var p = document.getElementById(nid).parentElement.parentElement;var item = p.children;for (var i=0;i<item.length;i++){var content = item[i].children[1];content.classList.add('hide')}document.getElementById(nid).nextElementSibling.classList.remove('hide')}</script></body> </html>?
?轉載于:https://www.cnblogs.com/xone/p/6437246.html
總結
以上是生活随笔為你收集整理的JavaScriptDOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bzoj 3209: 花神的数论题
- 下一篇： 使用序列化实现对象的拷贝(转载)