2019-05-21day6總結(jié)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

    <p id="p1"  class="c1">我是段落</p>
    <img class="c1" src="img/luffy.jpg" />
    <div id="div1">
        
        我是div
        <p>我是段落2</p>
        
    </div>
    <div id="div2">
        <h1 id="h1">我是標(biāo)題1</h1>
        <h1 id="h2">我是標(biāo)題2</h1>
    </div>
    
    <script type="text/javascript">
        //1.獲取節(jié)點(diǎn)
        //1.1直接獲取
        //a) 通過(guò)id值來(lái)獲取節(jié)點(diǎn):document.getElementById(id屬性值) - 返回對(duì)應(yīng)的標(biāo)簽節(jié)點(diǎn)對(duì)象
        //補(bǔ)充:HTML標(biāo)簽在js全部都是對(duì)象,標(biāo)簽的屬性就是對(duì)象的屬性;雙標(biāo)簽的內(nèi)容對(duì)應(yīng)的是innerText和innerHTML屬性
        //    innerHTML指向的是內(nèi)容中的文本和標(biāo)簽;innerText指向內(nèi)容中的文本
        
        
        //b)通過(guò)class值獲取節(jié)點(diǎn):document.getElementsByClassName(class屬性值) - 返回一個(gè)數(shù)組
        c1nodeArray = document.getElementsByClassName('c1')
        console.log(c1nodeArray)
        
        //根據(jù)下標(biāo)獲取元素
        imgNode = c1nodeArray[1]
        imgNode.title = '路飛'
        
        
        //c)通過(guò)標(biāo)簽名獲取節(jié)點(diǎn):document.getElementsByTagName(標(biāo)簽名) - 返回一個(gè)數(shù)組
        pNodes = document.getElementsByTagName('p')     
        
        //d)通過(guò)name書(shū)信獲取節(jié)點(diǎn):document.getElementsByName(name屬性值)
        //document.getElementsByName()
        
        //1.2獲取父節(jié)點(diǎn)
        //子節(jié)點(diǎn).parentElement - 獲取指定節(jié)點(diǎn)對(duì)應(yīng)的父節(jié)點(diǎn)
        //bodyNode = pNode.parentElement()
        //console.log(bodyNode)
        
        //1.3獲取子節(jié)點(diǎn)
        //a)獲取所有的子節(jié)點(diǎn):節(jié)點(diǎn).children - 獲取自定節(jié)點(diǎn)所有的子節(jié)點(diǎn)(不會(huì)獲取孫子節(jié)點(diǎn))
        children1 = bodyNode.children
        console.log(children1)
        
        //b)獲取第一個(gè)子節(jié)點(diǎn):bodyNode.firstElementChild()
        firstNode = bodyNode.firstElementChild()
        console.log(firstNode)
        
        //c)獲取最后一個(gè)子節(jié)點(diǎn):節(jié)點(diǎn).bodyNode.lastElementChild()
        laseNode = bodyNode.lastElementChild()
        console.log(laseNode)
        
        //2.創(chuàng)建節(jié)點(diǎn)
        //document.createElement() - 創(chuàng)建指定標(biāo)簽對(duì)象的節(jié)點(diǎn)對(duì)象
        //注意:創(chuàng)建的節(jié)點(diǎn)沒(méi)有在添加在網(wǎng)頁(yè)中的是不會(huì)顯示的
        inputNode = document.createElement('input')
        
        
        //3.添加節(jié)點(diǎn)
        Div2Node = document.getElementById('div2')
        //節(jié)點(diǎn)1.appendChild(節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1的最后添加節(jié)點(diǎn)2
        //Div2Node.appendChild(inpuutNode)
        
        //節(jié)點(diǎn)1.Div2Node.insertBefore(節(jié)點(diǎn)2, 節(jié)點(diǎn)3) - 在節(jié)點(diǎn)1中的節(jié)點(diǎn)3前插入節(jié)點(diǎn)2
        Div2Node.insertBefore(inpuutNode, Div2Node.firstChild)
        
        
        //4.拷貝節(jié)點(diǎn)
        //節(jié)點(diǎn).cloneNode() - 復(fù)制指定節(jié)點(diǎn),產(chǎn)生一個(gè)新節(jié)點(diǎn)
        inputNode2 = inpuutNode.cloneNode()
        inputNode2.placeholder = '新節(jié)點(diǎn)'
        Div2Node.appendChild(inputNode2)
        
        //5.刪除節(jié)點(diǎn)
        //a)節(jié)點(diǎn)1.removerChild(節(jié)點(diǎn)) - 刪除節(jié)點(diǎn)1中的節(jié)點(diǎn)2
        Div2Node.removeChild(Div2Node.firstElementChild)
        
        //b)節(jié)點(diǎn).remove() - 刪除指定節(jié)點(diǎn)
        Div2Node.remove()
        
        
        
        pNode = document.getElementById('p1')
        console.log(pNode, typeof(pNode), pNode.innerText,pNode.innerHTML)
        
        divNode = document.getElementById('div1')
        console.log(divNode.innerHTML)
        console.log(divNode.innerText)
        
        
    </script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM操作</title>
</head>
<body>
<div id="" style="background-color: yellow;height: 1000px;"></div>

</body>

</html>
<script type="text/javascript">
//1.什么是BOM
//BOM(browser object model)瀏覽器對(duì)象模型
//js自帶一個(gè)window對(duì)象,指向當(dāng)前瀏覽器;js中所有的全局變量都是綁定在window上的屬性
//在使用的時(shí)候,window可以省略
num = 10 //相當(dāng)于window.num = 10
console.log(window.num, num)

//2.window基本操作
//1)打開(kāi)新的窗口
//open(url,name屬性,窗口大小)
//a)打開(kāi)新的窗口: open(url) - 在新的窗口中打開(kāi)新頁(yè)面,

// new_window = window.open('https://www.baidu.com')
// console.log(new_window)

//b)打開(kāi)新的窗口,同時(shí)設(shè)置窗口的寬度和高度

// new_window2 = open('','','width=400,height=300')

//2)關(guān)閉窗口
//window.close() / close() - 關(guān)閉當(dāng)前窗口
//close()

//關(guān)閉其他窗口
//new_window2.close()

//3)移動(dòng)窗口

// new_window2.moveTo(100, 100)

//4)獲取窗口寬度和高度
//innerWidth/innerHeight - 獲取瀏覽器能夠顯示內(nèi)容的部分的寬高
console.log(window.innerWidth, window.innerHeight)
//outerWidth/outerHeight - 整個(gè)瀏覽器的寬高
console.log(window.outerWidth, window.outerHeight)

//3.彈框
//1)只有確定按鈕再加提示信息的彈框
window.alert('我打我自己!')


//2)一個(gè)提示信息,再加確定和取消按鈕;根據(jù)返回值是true還是false來(lái)判斷選擇的是確定還是取消
result = confirm('你是否要打自己')
console.log(result)


//3)一個(gè)提示信息,再加一個(gè)輸入框和取消確定按鈕;根據(jù)返回值是否是null來(lái)判斷點(diǎn)擊的是取消還是確定
prompt('提示信息1','提示信息2')

</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="tr0" border="" cellspacing="" cellpadding="">
<tr id="tr1">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr id="tr2">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr id="tr3">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>

    </table>



<!--要求:
    1)用js將table的背景顏色設(shè)置為隨機(jī)顏色
    2)將第一列的文字顏色全部變成紅色
    3)在最后插入一行表格,內(nèi)容分別是41,42,43
-->
<script type="text/javascript">
    //產(chǎn)生1-10的隨機(jī)整數(shù)
    //randoNuM = parseInt(Math.random()*9+1)
    
    //產(chǎn)生0-255的隨機(jī)整數(shù)
    //randoNuM1 = parseInt(Math.random()*255+1)
    //console.log(randoNuM1)

    //獲取table節(jié)點(diǎn)
    tableNode = document.getElementById('tr0')
    //產(chǎn)生隨機(jī)顏色值
    red = parseInt(Math.random()*256)
    green = parseInt(Math.random()*256)
    blue = parseInt(Math.random()*256)
    //設(shè)置背景屬性
    tableNode.style.backgroundColor = 'rgb('+red+','+green+','+blue+')'

    
    //2)將第一列的文字顏色全部變成紅色
    //拿所有的tr
    trNodes = tableNode.getElementsByTagName('tr0')
    for(x in trNodes){
        //獲取每個(gè)tr
        trNode = trNodes[x]
        //獲取每一行的第一個(gè)td
        tdNode = trNode.firstElementChild
        //修改文字顏色
        tdNode.style.color = 'red'
    }

    trNode = document.createElement('tr')
    tdNode = document.createElement('td')
    tdNode.innerText = '41'
    trNode.appendChild(tdNode)

</script>


</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>

</html>
<script type="text/javascript">
//開(kāi)啟定時(shí)
//1.setTimeout
/*
setTimeout(函數(shù), 定時(shí)時(shí)間, 實(shí)參對(duì)象) - 指定時(shí)間后調(diào)用指定函數(shù),并且傳入指定的參數(shù),返回一個(gè)定時(shí)器對(duì)象
函數(shù) - 可以是匿名函數(shù),也可以是普通函數(shù)的函數(shù)名
定時(shí)時(shí)間 - 單位是毫秒
實(shí)參列表 - 以對(duì)象的方式給函數(shù)提供參數(shù)
*/
// t1 = setTimeout(function(){
// console.log('我開(kāi)始打我自己')
// },5000)
//
// t2 = setTimeout(function(name, age){
// console.log(name, age)
//
// },5000,age=22, name='我秦始皇打錢')

//t1和t3的功能一樣

// function timeFunc(){
// console.log('endgame')
// }
//
// t3 = setTimeout(timeFunc, 1000)

/*
2)setInterval(函數(shù),定時(shí)時(shí)間,參數(shù)列表) - 每隔指定的時(shí)間調(diào)用一次函數(shù)
 */

// num = 1
// t4 = setInterval(function(){
// num ++
// console.log('我打我自己', num)
// if(num == 10){
// clearInterval(t4)
// }
// },2000)

num = 5
t5 = setInterval(function(){
    num --
    console.log(num)
    if(num == 0){
        clearInterval(t5)
            console.log(open('https://www.baidu.com'))
    }
},1000)




//2.清楚定時(shí)
//clearTimeout(定時(shí)對(duì)象)

</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

<script type="text/javascript">
//1. 開(kāi)啟定時(shí)
/*
1)setTimeout(函數(shù), 定時(shí)時(shí)間, 實(shí)參列表) - 指定時(shí)間后調(diào)用指定函數(shù),并且傳入指定的參數(shù); 返回一個(gè)定時(shí)器對(duì)象
函數(shù) - 可以是匿名函數(shù)盆犁,也可以是普通函數(shù)的函數(shù)名
定時(shí)時(shí)間 - 單位是毫秒
實(shí)參列表 - 函數(shù)提供參數(shù)
*/
t1 = setTimeout(function(){
console.log('時(shí)間到命咐!')
}, 1000)

t2 = setTimeout(function(name, age){
    console.log(name, age)
}, 3000, '小明', 18)


//t1和t3的功能一樣
function timeFunc(){
    console.log('時(shí)間到了')
}
t3 = setTimeout(timeFunc, 1000)

/*
 2)setInterval(函數(shù),定時(shí)時(shí)間,參數(shù)列表) - 每隔指定的時(shí)間調(diào)用一次函數(shù)
 */
num = 1
t4 = setInterval(function(){
    num ++
    console.log('~~~~:',num)
    if(num == 10){
        clearInterval(t4)
    }
}, 2000)


// 2.清除定時(shí)
//clearTimeout(定時(shí)對(duì)象)
clearTimeout(t2)

//clearInterval(定時(shí)對(duì)象)

//練習(xí): 實(shí)現(xiàn)5s后自動(dòng)跳轉(zhuǎn)到百度頁(yè)面

</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id='p1'>5秒后自動(dòng)調(diào)轉(zhuǎn)</p>
<script type="text/javascript">
time = 5
pNode = document.getElementById('p1')
t1 = setInterval(function(){
time --
if(time == 0){
open('https://www.baidu.com')
clearInterval(t1)
}
pNode.innerText = time+'秒后自動(dòng)跳轉(zhuǎn)'
},1000)

    </script>
</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>

    </title>
</head>
<body>
    <!--事件綁定方式1(不推薦使用)-->
    <button onclick="alert('我打我自己')">我打我自己</button>
    <button id="btn1" onclick="btnClick()">刪除1</button>
    <button id="btn1" onclick="btnClick()">刪除2</button>

    <!--事件綁定方式(推薦使用)1-->
    <button id='btn3'>刪除</button>
    <button class="btn1">刪除3</button>
    <button class="btn1">刪除4</button>
    <button class="btn1">刪除5</button>
    <br/>
    
    <!--事件綁定方式3(推薦使用)-->
    <button id="btn4">按鈕</button>
    
    
</body>

</html>
<script type="text/javascript">
//js事件驅(qū)動(dòng)語(yǔ)言
//1.事件三要素:事件源谐岁、時(shí)間醋奠、時(shí)間驅(qū)動(dòng)程序
//事件源發(fā)生某個(gè)事件就做什么事情(事件驅(qū)動(dòng)程序)
//2.事件的綁定
//1)在標(biāo)簽內(nèi)部給標(biāo)簽的事件屬性賦值
//注意:這種方式幫的時(shí)候,this指向的是window
function btnClick(){
console.log(this)
result = confirm('我打我自己1')
if(result){
document.getElementById('btn1').remove()
}
}

//2)通過(guò)給節(jié)點(diǎn)對(duì)象的事件屬性賦值來(lái)綁定
//注意:這種方式幫的時(shí)候,this指向的是事件源
btnNode = document.getElementById('btn3')
//給事件屬性賦函數(shù)名
btnNode.onclick = btnClick

//獲取所有class值是btn1的標(biāo)簽對(duì)應(yīng)的節(jié)點(diǎn)
btn1Nodes = document.getElementsByClassName('btn1')
for(x=0;x<btn1Nodes.length;x++){
    btn1Node = btn1Nodes[x]
    //給事件屬性賦匿名函數(shù)
    btn1Node.onclick = function(){
        result = confirm('是否刪除')
        if(result){
            this.remove()
        }
    }
}

// 3)

/*
a.語(yǔ)法
事件源節(jié)點(diǎn).addEventListener(事件名稱,事件驅(qū)動(dòng)程序)
b.說(shuō)明
事件名稱 - 事件屬性名去掉on
事件驅(qū)動(dòng)程序 - 事件發(fā)生后需要調(diào)用的函數(shù)
c.注意:
this是事件源
可以給同一個(gè)節(jié)點(diǎn)同一個(gè)事件綁定不同的事件驅(qū)動(dòng)程序
*/
btnNode4 = document.getElementById('btn4')
btnNode4.addEventListener('click', function(){
    alert('你好') 
})
btnNode4.addEventListener('click', function(){
    this.style.color = 'red'
})

</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.onload事件 - 頁(yè)面加載完成對(duì)應(yīng)的時(shí)間(標(biāo)簽加載成功)
window.onload = function(){
//卸載這兒的代碼,在頁(yè)面加載完成后才會(huì)執(zhí)行
pNode = document.getElementById('p1')
console.log(pNode)
}
</script>

</head>
<body>
    <p id="p1">我打我自己</p>
    <input type="", name="input1", id="input1", value="" />
    <input type="", name="input2", id="input2", value="" />
</body>

</html>

<script type="text/javascript">
//2.鼠標(biāo)事件
pNode = document.getElementById('p1')
//1)onclick - 鼠標(biāo)點(diǎn)擊事件
pNode.onclick = function(){
alert('我打我自己1111')
}

//2)onmouseover - 鼠標(biāo)懸停事件
pNode.onmouseover = function(){

// alert('我打我自己22222')
this.style = 'background-color:yellow'
}

pNode.onmouseout = function(){
    this.style = 'background-color:red'
}

//3.鍵盤事件
//鍵盤事件一般綁定在輸入框?qū)?yīng)的標(biāo)簽上
//1)onkeypress - 按下彈起
inputNode = document.getElementById('input')
inputNode.onkeypress = function(){
    console.log('鍵盤按下彈起')
}


//2)onkeydown - 按鍵按下、 onkeyup - 按鍵彈起


//4.輸入框時(shí)間
//onchange - 輸入框中的輸入內(nèi)容的時(shí)候按回車
inputNode2 = document.getElementById('input2')
inputNode2.onchange = function(){
    console.log('內(nèi)容發(fā)生改變')
}

//5.事件對(duì)象
//每個(gè)事件驅(qū)動(dòng)程序中,都可以設(shè)置一個(gè)參數(shù)來(lái)表示當(dāng)前時(shí)間對(duì)象伊佃。不同類型的事件對(duì)應(yīng)時(shí)間類型和時(shí)間屬性不同
//1)鼠標(biāo)事件對(duì)象
/*
clientX/clientY - 鼠標(biāo)的位置到瀏覽器左邊和頂部的距離
offsetX/offsetY - 鼠標(biāo)的位置到事件源標(biāo)簽左邊和頂部的距離


2)鍵盤事件對(duì)象
key - 哪個(gè)按鍵被按下

*/

</script>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末窜司,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子锭魔,更是在濱河造成了極大的恐慌例证,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件迷捧,死亡現(xiàn)場(chǎng)離奇詭異织咧,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)漠秋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門笙蒙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人庆锦,你說(shuō)我怎么就攤上這事捅位。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵艇搀,是天一觀的道長(zhǎng)尿扯。 經(jīng)常有香客問(wèn)我,道長(zhǎng)焰雕,這世上最難降的妖魔是什么衷笋? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮矩屁,結(jié)果婚禮上辟宗,老公的妹妹穿的比我還像新娘。我一直安慰自己吝秕,他們只是感情好泊脐,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著烁峭,像睡著了一般容客。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上则剃,一...
    開(kāi)封第一講書(shū)人閱讀 51,590評(píng)論 1 305
  • 那天耘柱,我揣著相機(jī)與錄音,去河邊找鬼棍现。 笑死调煎,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的己肮。 我是一名探鬼主播士袄,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼谎僻!你這毒婦竟也來(lái)了娄柳?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤艘绍,失蹤者是張志新(化名)和其女友劉穎赤拒,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體诱鞠,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挎挖,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了航夺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蕉朵。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖阳掐,靈堂內(nèi)的尸體忽然破棺而出始衅,到底是詐尸還是另有隱情冷蚂,我是刑警寧澤,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布汛闸,位于F島的核電站蝙茶,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蛉拙。R本人自食惡果不足惜尸闸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望孕锄。 院中可真熱鬧,春花似錦苞尝、人聲如沸畸肆。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)轴脐。三九已至,卻和暖如春抡砂,著一層夾襖步出監(jiān)牢的瞬間大咱,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工注益, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留碴巾,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓丑搔,卻偏偏與公主長(zhǎng)得像厦瓢,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子啤月,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355