2019-05-21day6总结

<!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">我是标题1</h1>
        <h1 id="h2">我是标题2</h1>
    </div>
    
    <script type="text/javascript">
        //1.获取节点
        //1.1直接获取
        //a) 通过id值来获取节点:document.getElementById(id属性值) - 返回对应的标签节点对象
        //补充:HTML标签在js全部都是对象,标签的属性就是对象的属性;双标签的内容对应的是innerText和innerHTML属性
        //    innerHTML指向的是内容中的文本和标签;innerText指向内容中的文本
        
        
        //b)通过class值获取节点:document.getElementsByClassName(class属性值) - 返回一个数组
        c1nodeArray = document.getElementsByClassName('c1')
        console.log(c1nodeArray)
        
        //根据下标获取元素
        imgNode = c1nodeArray[1]
        imgNode.title = '路飞'
        
        
        //c)通过标签名获取节点:document.getElementsByTagName(标签名) - 返回一个数组
        pNodes = document.getElementsByTagName('p')     
        
        //d)通过name书信获取节点:document.getElementsByName(name属性值)
        //document.getElementsByName()
        
        //1.2获取父节点
        //子节点.parentElement - 获取指定节点对应的父节点
        //bodyNode = pNode.parentElement()
        //console.log(bodyNode)
        
        //1.3获取子节点
        //a)获取所有的子节点:节点.children - 获取自定节点所有的子节点(不会获取孙子节点)
        children1 = bodyNode.children
        console.log(children1)
        
        //b)获取第一个子节点:bodyNode.firstElementChild()
        firstNode = bodyNode.firstElementChild()
        console.log(firstNode)
        
        //c)获取最后一个子节点:节点.bodyNode.lastElementChild()
        laseNode = bodyNode.lastElementChild()
        console.log(laseNode)
        
        //2.创建节点
        //document.createElement() - 创建指定标签对象的节点对象
        //注意:创建的节点没有在添加在网页中的是不会显示的
        inputNode = document.createElement('input')
        
        
        //3.添加节点
        Div2Node = document.getElementById('div2')
        //节点1.appendChild(节点2) - 在节点1的最后添加节点2
        //Div2Node.appendChild(inpuutNode)
        
        //节点1.Div2Node.insertBefore(节点2, 节点3) - 在节点1中的节点3前插入节点2
        Div2Node.insertBefore(inpuutNode, Div2Node.firstChild)
        
        
        //4.拷贝节点
        //节点.cloneNode() - 复制指定节点,产生一个新节点
        inputNode2 = inpuutNode.cloneNode()
        inputNode2.placeholder = '新节点'
        Div2Node.appendChild(inputNode2)
        
        //5.删除节点
        //a)节点1.removerChild(节点) - 删除节点1中的节点2
        Div2Node.removeChild(Div2Node.firstElementChild)
        
        //b)节点.remove() - 删除指定节点
        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)浏览器对象模型
//js自带一个window对象,指向当前浏览器;js中所有的全局变量都是绑定在window上的属性
//在使用的时候,window可以省略
num = 10 //相当于window.num = 10
console.log(window.num, num)

//2.window基本操作
//1)打开新的窗口
//open(url,name属性,窗口大小)
//a)打开新的窗口: open(url) - 在新的窗口中打开新页面,

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

//b)打开新的窗口,同时设置窗口的宽度和高度

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

//2)关闭窗口
//window.close() / close() - 关闭当前窗口
//close()

//关闭其他窗口
//new_window2.close()

//3)移动窗口

// new_window2.moveTo(100, 100)

//4)获取窗口宽度和高度
//innerWidth/innerHeight - 获取浏览器能够显示内容的部分的宽高
console.log(window.innerWidth, window.innerHeight)
//outerWidth/outerHeight - 整个浏览器的宽高
console.log(window.outerWidth, window.outerHeight)

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


//2)一个提示信息,再加确定和取消按钮;根据返回值是true还是false来判断选择的是确定还是取消
result = confirm('你是否要打自己')
console.log(result)


//3)一个提示信息,再加一个输入框和取消确定按钮;根据返回值是否是null来判断点击的是取消还是确定
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的背景颜色设置为随机颜色
    2)将第一列的文字颜色全部变成红色
    3)在最后插入一行表格,内容分别是41,42,43
-->
<script type="text/javascript">
    //产生1-10的随机整数
    //randoNuM = parseInt(Math.random()*9+1)
    
    //产生0-255的随机整数
    //randoNuM1 = parseInt(Math.random()*255+1)
    //console.log(randoNuM1)

    //获取table节点
    tableNode = document.getElementById('tr0')
    //产生随机颜色值
    red = parseInt(Math.random()*256)
    green = parseInt(Math.random()*256)
    blue = parseInt(Math.random()*256)
    //设置背景属性
    tableNode.style.backgroundColor = 'rgb('+red+','+green+','+blue+')'

    
    //2)将第一列的文字颜色全部变成红色
    //拿所有的tr
    trNodes = tableNode.getElementsByTagName('tr0')
    for(x in trNodes){
        //获取每个tr
        trNode = trNodes[x]
        //获取每一行的第一个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">
//开启定时
//1.setTimeout
/*
setTimeout(函数, 定时时间, 实参对象) - 指定时间后调用指定函数,并且传入指定的参数,返回一个定时器对象
函数 - 可以是匿名函数,也可以是普通函数的函数名
定时时间 - 单位是毫秒
实参列表 - 以对象的方式给函数提供参数
*/
// t1 = setTimeout(function(){
// console.log('我开始打我自己')
// },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(函数,定时时间,参数列表) - 每隔指定的时间调用一次函数
 */

// 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.清楚定时
//clearTimeout(定时对象)

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

<script type="text/javascript">
//1. 开启定时
/*
1)setTimeout(函数, 定时时间, 实参列表) - 指定时间后调用指定函数，并且传入指定的参数; 返回一个定时器对象
函数 - 可以是匿名函数，也可以是普通函数的函数名
定时时间 - 单位是毫秒
实参列表 - 函数提供参数
*/
t1 = setTimeout(function(){
console.log('时间到！')
}, 1000)

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


//t1和t3的功能一样
function timeFunc(){
    console.log('时间到了')
}
t3 = setTimeout(timeFunc, 1000)

/*
 2)setInterval(函数,定时时间，参数列表) - 每隔指定的时间调用一次函数
 */
num = 1
t4 = setInterval(function(){
    num ++
    console.log('~~~~:',num)
    if(num == 10){
        clearInterval(t4)
    }
}, 2000)


// 2.清除定时
//clearTimeout(定时对象)
clearTimeout(t2)

//clearInterval(定时对象)

//练习: 实现5s后自动跳转到百度页面

</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id='p1'>5秒后自动调转</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+'秒后自动跳转'
},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事件驱动语言
//1.事件三要素:事件源、时间、时间驱动程序
//事件源发生某个事件就做什么事情(事件驱动程序)
//2.事件的绑定
//1)在标签内部给标签的事件属性赋值
//注意:这种方式帮的时候,this指向的是window
function btnClick(){
console.log(this)
result = confirm('我打我自己1')
if(result){
document.getElementById('btn1').remove()
}
}

//2)通过给节点对象的事件属性赋值来绑定
//注意:这种方式帮的时候,this指向的是事件源
btnNode = document.getElementById('btn3')
//给事件属性赋函数名
btnNode.onclick = btnClick

//获取所有class值是btn1的标签对应的节点
btn1Nodes = document.getElementsByClassName('btn1')
for(x=0;x<btn1Nodes.length;x++){
    btn1Node = btn1Nodes[x]
    //给事件属性赋匿名函数
    btn1Node.onclick = function(){
        result = confirm('是否删除')
        if(result){
            this.remove()
        }
    }
}

// 3)

/*
a.语法
事件源节点.addEventListener(事件名称,事件驱动程序)
b.说明
事件名称 - 事件属性名去掉on
事件驱动程序 - 事件发生后需要调用的函数
c.注意:
this是事件源
可以给同一个节点同一个事件绑定不同的事件驱动程序
*/
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事件 - 页面加载完成对应的时间(标签加载成功)
window.onload = function(){
//卸载这儿的代码,在页面加载完成后才会执行
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.鼠标事件
pNode = document.getElementById('p1')
//1)onclick - 鼠标点击事件
pNode.onclick = function(){
alert('我打我自己1111')
}

//2)onmouseover - 鼠标悬停事件
pNode.onmouseover = function(){

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

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

//3.键盘事件
//键盘事件一般绑定在输入框对应的标签上
//1)onkeypress - 按下弹起
inputNode = document.getElementById('input')
inputNode.onkeypress = function(){
    console.log('键盘按下弹起')
}


//2)onkeydown - 按键按下、 onkeyup - 按键弹起


//4.输入框时间
//onchange - 输入框中的输入内容的时候按回车
inputNode2 = document.getElementById('input2')
inputNode2.onchange = function(){
    console.log('内容发生改变')
}

//5.事件对象
//每个事件驱动程序中,都可以设置一个参数来表示当前时间对象。不同类型的事件对应时间类型和时间属性不同
//1)鼠标事件对象
/*
clientX/clientY - 鼠标的位置到浏览器左边和顶部的距离
offsetX/offsetY - 鼠标的位置到事件源标签左边和顶部的距离


2)键盘事件对象
key - 哪个按键被按下

*/

</script>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351