【第68天】BOM DOM

1 BOM:通過(guò)js控制瀏覽器

代碼塊
彈出框:alert('hello,world')
打開(kāi)一個(gè)新的窗口:window.open()

2 window子對(duì)象

2-1 navigator導(dǎo)航對(duì)象

代碼塊
獲取瀏覽器全稱:navigator.appName;
獲取版本:navigator.appVersion;
獲取客戶端絕大多數(shù)信息:navigator.userAgent;
獲取瀏覽器操作系統(tǒng):navigator.platform;

2-2 location對(duì)象

代碼塊
獲取當(dāng)前頁(yè)面的網(wǎng)址:location.href
跳轉(zhuǎn)到指定的網(wǎng)址:location.
重新加載當(dāng)前頁(yè)面:location.reload()

2-3 彈出框

代碼塊
警告框:alert('are you sure ?')
確認(rèn)框:confirm('你確定嗎')
提示框:prompt('請(qǐng)輸入提示內(nèi)容','西紅柿')

2-4 計(jì)時(shí)

代碼塊:多長(zhǎng)時(shí)間后執(zhí)行
setTimeout(function(){alert('hello')},4000);

3秒后執(zhí)行l(wèi)aunch函數(shù)
function launch(){
    alert('hello');
}

setTimeout(launch,3000)

代碼塊:每隔一段時(shí)間做
定義一個(gè)函數(shù)
function auto(){
    console.log('hello,world')
}

每隔一段時(shí)間笛粘,3秒執(zhí)行打印
var res = setInterval(auto,3000)


清除打印,結(jié)束打有角啊:clearInterval(res);

清空定時(shí)器

3 通過(guò)JS操作DOM

3-1 查找標(biāo)簽

查找標(biāo)簽
代碼塊
通過(guò)ID獲取標(biāo)簽:document.getElementById('d1')

根據(jù)類名class去找:document.getElementsByClassName('c1')

根據(jù)標(biāo)簽的名字去找:document.getElementsByTageName('p')

3-2間接查找

間接查找

找標(biāo)簽

3-3 添加節(jié)點(diǎn)

image.png
代碼塊:創(chuàng)建一個(gè)標(biāo)簽润努,放到子節(jié)點(diǎn)最后
第一步:找到父節(jié)點(diǎn)
var father =document.getElementById('d2');

第二:生成子節(jié)點(diǎn)
var last_son =document.createElement('div');

第三:子節(jié)點(diǎn)文字
last_son.innerText='helloworld';

第四:插入正確位置
father.appendChild(last_son);

3-4 刪除節(jié)點(diǎn)

image.png

4 屬性attribute

屬性設(shè)置

4-1 屬性的操作

代碼塊
HTML代碼如下:

<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div標(biāo)簽</div>
<p>我是后面的P</p>

</div>


js代碼如下:

var res =document.getElementById('d3');
拿到屬性值:res.getAttribute('ec14');
"siyu"

設(shè)置新的屬性值:res.setAttribute('ec14','wanjun');

查看屬性值是否為新的:res.getAttribute('ec14');
"wanjun"

移除屬性值:res.removeAttribute('ec14');
undefined

res.getAttribute('ec14');
null

4-2通過(guò)標(biāo)簽名操作屬性

代碼塊:
HTML代碼:
<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div標(biāo)簽</div>
<p>我是后面的P</p>
<span class='c1' dept='it center'>我是王思雨</span>
</div>


js代碼:

拿到span標(biāo)簽:var res = document.getElementsByTagName('span');
是一個(gè)數(shù)組。

res[0].getAttribute('dept');
"it center"

res[0].setAttribute('dept','database');
undefined

res[0].getAttribute('dept');
"database"

res[0].remove('dept');
undefined

4-3 通過(guò)標(biāo)簽名操作圖片的屬性

代碼塊

HTML:

<img id='c1' src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2894487835,3534766040&fm=58&bpow=480&bpoh=640" alt="" /> 

JS:
res=document.getElementById('c1');

res.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569079312315&di=2851a676ef5ad078b2b9055b8249fa33&imgtype=0&src=http%3A%2F%2Fy.zdmimg.com%2F201702%2F07%2F5899a7e766f035068.jpg_e600.jpg');

4-4通過(guò)js操作表單的內(nèi)容

代碼塊
HTML代碼部分:
<body>
<input type="text" id='i1'>
<input type="password" id='i2'>

<select id='s1'>
<option value='杭州'>杭州</option>
<option value='上海'>上海</option>
</select>
<textarea id='t1' cols="60" rows="60">請(qǐng)輸入內(nèi)容:</textarea>
</body>

JS代碼部分:

res1=document.getElementById('i1');

<input type=?"text" id=?"i1">?

res1.value;
"王思雨"

"王思雨"

res2=document.getElementById('i2');

res2.value;


"qwehkkwjjkd"
res3=document.getElementById('s1');

<select id=?"s1">?…?</select>?
res3.value;
"杭州"
res4=document.getElementById('t1');
res4.value;
"請(qǐng)輸入內(nèi)容:真正的猛男"

5樣式操作

image.png
代碼塊
HTML代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
</body>
</html>


JS代碼如下:
d1ele=document.getElementById('d1');

d1ele.classList.remove('c2');  移除c2的屬性

d1ele.classList.add('c2');    添加C2的屬性

d1ele.classList.contains('c2');   查詢是否包含某個(gè)屬性


來(lái)回切換屬性值:
d1ele.classList.toggle('c2');
false
d1ele.classList.toggle('c2');
true

6 指定css的操作

2.png
代碼塊
d1ele;
<div id=?"d1" class=?"c1 c2">?</div>?

d1ele.style.backgroundColor='blue';
"blue"
d1ele.style.borderRadius='20px';
"20px"

7 js捆綁元素之獲得焦點(diǎn)(直接在標(biāo)簽內(nèi)綁定事件)

image.png
代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' onclick="change()">點(diǎn)擊我切換顏色</button>
<script>
function change(){
    var d1ele=document.getElementById('d1');
    d1ele.classList.toggle('c2');
    }
</script>
</body>
</html>

8 通過(guò)在js代碼中綁定事件控制樣式

image.png
代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' >點(diǎn)擊</button>

<script>
    var b1ele=document.getElementById('d1');
    b1.onclick=function(){
        var d1ele=document.getElementById('d1');
        d1ele.classList.toggle('c2');
            
    }
</script>

</body>
</html>

9 js常用事件

js常用事件

10:練習(xí)獲得焦點(diǎn)和失去焦點(diǎn)輸入框默認(rèn)值的變化

代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>

</head>

<body>
<input type='text' value="請(qǐng)輸入姓名:" id="i1">
<script>
    resele=document.getElementById('i1');
    //獲得焦點(diǎn):
    resele.onfocus=function(){
        this.value='';
        
        }
    
    resele.onblur=function(){
        this.value='請(qǐng)輸入姓名:';
        
        }

</script>


</body>
</html>

11 js級(jí)聯(lián)列表示括,選擇省份铺浇,后面城市自動(dòng)變化

image.png
代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>練習(xí)曲</title>

</head>

<body>
<label for="s1">省份:</label>
<select id='s1'>
    <option>請(qǐng)選擇省份</option>
</select>


<label for="c1">城市:</label>
<select id="c1">
    <option>請(qǐng)選擇城市</option>
</select>

<script>
    var data = {
        "北京": ["昌平區(qū)", "海淀區(qū)", "朝陽(yáng)區(qū)"],
        "上海": ["浦東區(qū)", "徐匯區(qū)", "浦東新區(qū)"],
        "山東": ["煙臺(tái)", "青島", "威海"]
    };
    // 1. 拿到所有的省,在s1中生成對(duì)應(yīng)的option選項(xiàng)
    var s1ele=document.getElementById('s1');
    var c1ele=document.getElementById('c1');
    
    for (var i in data){
        console.log(i);
        
    // 2. 創(chuàng)建option標(biāo)簽,將i賦值給option,將option添加到父元素里面就OK
    var tmp =document.createElement('option');
    tmp.innerText=i;
    s1ele.appendChild(tmp);
    }
    
    // 3.當(dāng)用戶選中某個(gè)省之后才做的事兒
    s1ele.onchange=function(){
        //清空之前選擇省份添加的城市項(xiàng)
        c1ele.innerHTML='';
        //獲取用戶選擇的省份
        var p=this.value;
        // 根據(jù)用戶選擇的省垛膝,去data中找省對(duì)應(yīng)的城市數(shù)據(jù)
        var c=data[p];
        //將對(duì)應(yīng)城市數(shù)據(jù)添加到option中
        for (var m in c){
            console.log(m);
            var tmp1=document.createElement('option');
            tmp1.innerText=c[m];
            c1ele.appendChild(tmp1);
            }
        
        }
    
</script>


</body>
</html>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鳍侣,一起剝皮案震驚了整個(gè)濱河市裁着,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拱她,老刑警劉巖二驰,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異秉沼,居然都是意外死亡桶雀,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)唬复,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)矗积,“玉大人,你說(shuō)我怎么就攤上這事敞咧〖罚” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵休建,是天一觀的道長(zhǎng)乍恐。 經(jīng)常有香客問(wèn)我,道長(zhǎng)测砂,這世上最難降的妖魔是什么茵烈? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮砌些,結(jié)果婚禮上呜投,老公的妹妹穿的比我還像新娘。我一直安慰自己存璃,他們只是感情好仑荐,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著纵东,像睡著了一般粘招。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上篮迎,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天男图,我揣著相機(jī)與錄音,去河邊找鬼甜橱。 笑死逊笆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的岂傲。 我是一名探鬼主播难裆,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了乃戈?” 一聲冷哼從身側(cè)響起褂痰,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎症虑,沒(méi)想到半個(gè)月后缩歪,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谍憔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年匪蝙,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片习贫。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡逛球,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出苫昌,到底是詐尸還是另有隱情颤绕,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布祟身,位于F島的核電站奥务,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏月而。R本人自食惡果不足惜汗洒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望父款。 院中可真熱鬧,春花似錦瞻凤、人聲如沸憨攒。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)肝集。三九已至,卻和暖如春蛛壳,著一層夾襖步出監(jiān)牢的瞬間杏瞻,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工衙荐, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捞挥,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓忧吟,卻偏偏與公主長(zhǎng)得像砌函,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容