js页面交互
选择器
<body>
<h1 id="hhh">js页面交互</h1>
<h2 class="hhh2">副标题1</h2>
<h2 class="hhh2">副标题2</h2>
</body>
<script>
// 1. js选择器： js如何与html标签建立起联系
// 1) 通过标签名，id名，类名
let h1 = document.getElementById('hhh');
console.log(h1);
console.log(hhh); //id是标签的唯一标识，所以js通过id名可以直接拿到标签
let h2s=document.getElementsByClassName('hhh2');
// let h2s=document.getElementsByTagName("h2");
console.log(h2s);
console.log(h2s[0]);
console.log(h2s[1]);
//2）同css3选择器 通过id,css或标签，都可以定位到某一个或某几个
// querySelector就是获取一个
// Uncaught SyntaxError: Identifier 'h1' has already been declared 如果这里使用let就会报错
// h1=document.querySelector('#hhh');
h1=document.querySelector('body h1#hhh');
console.log(h1);
h21=document.querySelector('#hhh~.hhh2');
console.log(h21);
// querySelector就是获取多个
h2s=document.querySelectorAll('#hhh~.hhh2');
console.log(h2s);
console.log(h2s[0]);
console.log(h2s[1]);
// 通过伪类直接找到第二个h2标签
h22=document.querySelector('.hhh2:nth-of-type(2)');
console.log(h22)
</script>
修改样式
<body>
<h1 id="hhh">js页面交互</h1>
<h2 class="hhh2">副标题1</h2>
<h2 class="hhh2">副标题2</h2>
<img src="" alt="">
</body>
<script>
// 找目标标签
let h1=document.querySelector('h1');
console.log(h1);
// 修改样式，内容，属性
h1.style.color='red'; //js可以直接修改样式
h1.style.backgroundColor='green';
h1.style.borderRadius='50%'; //css的 - 链接语法对应 js的 小驼峰命名法
//修改内容
h1.innerText='修改后的内容'; //修改标签里的内容
h1.innerHTML='<b>owen好骚啊</b>'; //修改标签里的HTML标签
//修改属性
let img=document.querySelector('img')
if (Math.random() >0.5) {
img.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562264210859&di=0c5f59b938258572a231c1049a3a5769&imgtype=0&src=http%3A%2F%2Fimg5.ph.126.net%2FF9nUurMtslbfvdjT-Tvsyg%3D%3D%2F2483735194511999125.jpg')
} else {
img.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562264211121&di=711c2f7bf55e3df83a9f7568b8188114&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F10%2F20150410H0341_dtVa2.jpeg')
}
</script>
查看样式
<head>
<meta charset="UTF-8">
<title>js页面交互</title>
<style>
h1 {
background-color: orange;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="hhh" style="font-size: 30px">js页面交互</h1>
<h2 class="hhh2">副标题1</h2>
<h2 class="hhh2">副标题2</h2>
</body>
<script>
// 找目标标签
let h1=document.querySelector('h1');
console.log(h1);
//获取样式
//标签.style.属性名 只能获取行间式
let fontsize=h1.style.fontSize;
console.log(fontsize);
//getComputedStyle（ele_name,伪类显示器（通常用null填充））能获取所有方式的样式（内联与外联叫计算后样式）
let bgColor=getComputedStyle(h1,null).backgroundColor;
console.log(bgColor);
fontsize=getComputedStyle(h1,null).fontSize;
console.log(fontsize)
查看内容
<body>
<h1 id="hhh" style="font-size: 30px" owen="saonan"><i>js页面交互</i></h1>
<h2 class="hhh2">副标题1</h2>
<h2 class="hhh2">副标题2</h2>
</body>
<script>
let h1=document.querySelector('h1');
console.log(h1.innerText);
console.log(h1.innerHTML); //获取标签里的html格式,如果标签里只有文本则输出文本
console.log(h1.getAttribute('id'));
console.log(h1.getAttribute('style'));
console.log(h1.getAttribute('owen'))
</script>
表单内容的查看和修改
<body>
<h1 id="hhh" style="font-size: 30px" owen="saonan"><i>js页面交互</i></h1>
<h2 class="hhh2">副标题1</h2>
<h2 class="hhh2">副标题2</h2>
<img src="" alt="">
<input type="text" value="12345">
</body>
<script>
//获取表单内容
let inp=document.querySelector('input');
console.log(inp.value);
console.log(inp.getAttribute('value'));
// 修改表单内容
inp.setAttribute('value','000000000');
console.log(inp.value);
inp.value=67890;
console.log(inp.value);
</script>
事件
<head>
<meta charset="UTF-8">
<title>js页面交互</title>
<style>
h1 {
background-color: orange;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="hhh" style="font-size: 30px" owen="saonan"><i>js页面交互</i></h1>
<h2 class="hhh2">副标题1</h2>
<h2 class="hhh2">副标题2</h2>
<img src="" alt="">
<input type="text" value="12345">
</body>
<script>
//鼠标事件
let h1=document.querySelector('h1');
//onclick,ondbclick,onmouseover,onmouseleave,onmousemove,onmousedown,onmouseup
h1.onclick=function (ev) {
alert(123);
console.log(ev);
//鼠标点击点
console.log(ev.clientX,ev.clientY);
};
//点击和放开h2标签，在h1标签显示
h2=document.querySelector('h2');
h2.onmouseover=function () {
h1.innerText='h2被悬浮了';
h1.style.color='green';
};
h2.onmouseleave=function () {
h1.innerText='h2被放开了';
h1.style.color='red';
};
//为某个标签绑定事件，去控制页面中任何一个标签(绑定事件中的this就代表自身)
let count=1;
h2.onmousemove=function () {
count++;
h1.innerText='鼠标在h1上面游走'+count + '下';
this.innerText='鼠标在h1上面游走'+count + '下';
};
//键盘事件
//只要在窗口下，点击鼠标就可以触发
//onkeydown onkeyup onkeypress
document.onkeydown=function (ev) {
console.log(ev.keyCode);
if (ev.keyCode == 37) {
console.log('你按了左键');
}
else if (ev.keyCode==38) {
console.log('你按了上键');
}
else if (ev.ctrlKey && ev.keyCode==17){
console.log('留言');
}
};
//表单事件
let inp=document.querySelector('input');
let h22=document.querySelector('h2:nth-of-type(2)');
//onchange 当input失去焦点才会触发 oninput 内容改变时触发
inp.oninput=function () {
h22.innerText=this.value;
} ;
inp.onchange=function () {
h22.innerText=this.value;
}