<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1" class="c1">我是段落</p>
<div id="div1">
我是div
<p>我是p标签2</p>
</div>
<div id="div2">
<h1>我是段落1</h1>
<h1>我是段落2</h1>
</div>
<script type="text/javascript">
//1.获取节点
//1.1 直接获取
//通过id值来获取节点;docment.getElementByID(ID属性值)---返回时标签对应的节点对象
//补充：html标签在js全部都是对象，标签的属性就是对象的属性；
// 双标签的内容对应的是innerText和innerHTML属性
// innerHTML指向的是内容的文本和标签；innerText指向内容的文本
pNode = document.getElementById('p1')
console.log(pNode,typeof(pNode),pNode.id)
//通过class值获取节点：document.getElementsByClassName(class属性值)--返回的是数组
nodeArray1 = document.getElementsByClassName('c1')
//根据下标获取元素
cnode = nodeArray1[1]
cnode.title='大师'
//通过标签名获取节点：document.getElementsByTagName(标签名)---返回的是数组
pnodes = document.getElementsByTagName('p')
//通过name属性获取节点（基本没怎么用）：document.getElementsByName(name属性值)
document.getElementsByName()
//1.2 获取父节点
//子节点.parentElement --- 获取指定节点对应的父节点
parentnode = pNode.parentElement
//1.3获取子节点
//获取所有子节点 : 节点.children --- 获取指定节点所有的子节点（不获取孙子节点）
children = parentnode.children
children1 = parentnode.childNodes
//获取第一个子节点
firstnode = parentnode.firstElementChild
//获取最后一个子节点
lastnode = parentnode.lastElementChild
//2.创建节点
//document.createElement(标签名) --- 创建指定标签对应的节点对象
//注意：创建的节点在没有添加在网页中国的时候是不会显示的
inputnode = document.createElement('input')
//3.添加节点
div2node = document.getElementById('div2')
//节点1.appendChild(节点2) --- 在节点1的最后添加节点2
// div2node.appendChild(inputnode)
//节点1.insertBefore(节点2,节点3) -- 在节点1的节点3千插入节点2
div2node.insertBefore(inputnode,div2node.firstElementChild)
//4.拷贝节点 节点.cloneNode() 赋值指定节点，产生一个新的节点
inputnode2 = inputnode.cloneNode()
inputnode2.placeholder='新节点'
div2node.appendChild(inputnode2)
//5.删除节点:
// 节点1.removeChild(节点2) --- 删除节点1中的节点2
div2node.removeChild(div2node.firstElementChild)
// 节点.remove() -- 删除指定节点
div2node.remove()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="" style="background-color: yellow;height: 10000px;">
</div>
</body>
</html>
<script type="text/javascript">
//1.什么是BOM (Browser object model) 浏览器对象模型
//js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
//在使用的时候，window可以省略
//
// num = 10 // 相当于 window.num = 10 window 可以省略
// function func1(){
// Console.log('我是函数')
// }
// window.func1()
//
//2.window的基本操作
//1.open(url,name属性,窗口大小)
//1.打开新的窗口 -- 新的窗口打开
// newwindow1 = window.open('https://www.baidu.com')
//2.打开新的窗口 -- 同时设置宽高
// newwindow2 = open('https://www.baidu.com','','width=400,height=300')
//2.关闭窗口
// 窗口对象.close()
// window.close() / close() 关闭窗口
//关闭其他窗口
// newwindow2.close()
//3.移动窗口
// newwindow2.moveTo(200,200)
//4.获取窗口宽度和高度
//1.获取浏览器能够显示内容的宽度和高度
// console.log(window.innerWidth,window.innerHeight)
//2.获取整个浏览器的宽高
// console.log(window.outerWidth,window.outerHeight)
//3.弹框
//1.只有确定按钮再加提示信息的弹框
alert('提示信息！')
//2. 一个提示信息和一个确定/取消按钮的弹框；根据返回值是true或者false来判断选择的是确定还是取消。
result = confirm('是否删除？')
console.log(result)
//3. 一个提示信息和一个输入框和一个确定/取消按钮的弹框；根据返回值是否是null来判断点击的是确定还是取消
result1 = prompt('提示信息1','输入框中的默认值')
console.log(result1)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font id="font1">5</font><font>秒后跳转！</font>
<script type="text/javascript">
num = 5
f1node = document.getElementById('font1')
t4 = setInterval(function() {
// num--
// if(num==0){
// clearInterval(t4)
window.open('https://www.baidu.com')
}
f1node.innerText = num
},1000)
</script>
</body>
</html>
<script type="text/javascript">
//开始定时
//1.setTimeout --- 开始定时
/*
setTimeout(函数,定时时间，实参对象) --- 指定时间后调用指定函数，并且传入指定的参数
函数 --- 可以是匿名函数，也可以是普通函数的函数名
定时时间 -- 单位是毫秒
实参对象 --- 以对象的方式给函数提供参数
*/
// t1 = setTimeout(function(){
// console.log('时间到！！')
// },2000)
//
// t2 = setTimeout(function(name,age){
// console.log(name,age)
// },2000,'小王',18)
//2.setInterval(函数,定时时间，实参对象)--- 每个指定的时间调用一次函数
// num = 1
// t3 = setInterval(function() {
//
// num++
// console.log('····',num)
// if(num==15){
// clearInterval(t3)
// }
// },1000)
//2.清除定时
//定时对象.clearTimeout()
// clearTimeout(t1)
//
// //
// clearInterval()
// num = 5
// t4 = setInterval(function() {
//
// num--
//// console.log(num)
//
// if(num==0){
// clearInterval(t4)
// window.open('https://www.baidu.com')
// }
// },1000)
//
//
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--事件绑定方式1，不推荐使用！-->
<button onclick="alert('你好')">按钮1</button>
<button id="btn1" onclick="btnclick()">删除1</button>
<br /><br />
<!--事件绑定方式2，推荐使用-->
<button id="btn3">删除</button>
<button class="btn1">删除3</button>
<button class="btn1">删除4</button>
<button class="btn1">删除5</button>
<br /><br />
<!--事件绑定方法3，推荐使用-->
<button id="btn4">按钮</button>
</body>
</html>
<script type="text/javascript">
// js是事件驱动语言
// 1.事件三要素：事件源，事件，事件驱动程序
// 事件源发生某个事件就是做什么事情（事件驱动程序）
// 2.事件的绑定
//1.在标签内部给标签的事件属性赋值
//注意：这种方式绑定的时候，this指向的是window
function btnclick(){
result = confirm('是否删除？')
if(result)
document.getElementById('btn1').remove()
}
//2.通过给节点对象的事件赋值来绑定
//注意: 这种方式绑定的时候，this指向的是事件源
btnnode = document.getElementById('btn3')
//给事件赋函数名
btnnode.onclick = btnclick
btn1nodes = document.getElementById('btn1')
for (x=0;x<btn1nodes.length;x++) {
btn1node = btn1nodes[x]
btn1node.onclick = function () {
result = confirm('是否删除？')
if (result) {
this.remove()
}
}
}
//3.通过addEventListener
// 事件源节点btn4node.addEventListener(事件名称，事件驱动程序)
// 事件名称 --- 事件属性名去掉on
// 事件驱动程序 --- 事件发生后需要调用的函数
// 注意： this是事件源
// 可以给同一个节点的同一个事件绑定不同的事件驱动程序
btn4node = document.getElementById('btn4')
btn4node.addEventListener('click',function () {
alert('你好')
}) // --- 在这个里面要把所有事件前面的on 去掉！！
btn4node.addEventListener('clink',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">我是段落1</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('p标签被点击')
}
//2.onemouseover --- 鼠标悬停事件
pNode.onmouseover = function () {
// alert('鼠标在标签上')
this.style = 'background-color:yellow'
}
//3.onmouseout
pNode.onmouseout = function () {
this.style = 'background-color:pink'
}
//3.键盘事件
//键盘事件一般绑定在输入框对应的标签上
//onkeypress -- 按下弹起
inputnode = document.getElementById('input1')
inputnode.onkeypress = function(evt){
console.log('键盘按下弹起')
console.log(evt)
}
//onkeydown --按键按下 onkeyup --按键弹起
//4.输入框事件
//onchange -- 输入框中的内容的时候按回车发生改变
inputnode2 = document.getElementById('input2')
inputnode2.onchange = function(){
console.log('内容发生改变')
}
//oninput --
inputnode2.oninput = function(){
console.log('正在输入')
}
//5.事件对象
//每个事件驱动程序中，都可以设置一个参数来表示当前事件对象。不同类型的事件对应的事件类型和事件属性不同
//1.鼠标事件对象
// clientx/clienty -- 鼠标的位置到浏览器左边和顶部的距离
// offsetx/offsety -- 鼠标的位置到事件源标签左边和顶部的距离
//2.键盘事件对象
//key -- 哪个键盘被按下
</script>
