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