>### A.今天学什么？
#### 1.使用昨天学习的内容制作一个小例子
- ##### 1.1如何实现点击一个按钮，达到全选多选项的效果
- for循环，onclick事件，input框的checked属性
```
// body
<body>
<button id="btn">一键全选</button>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
<script>
var btn = document.getElementById("btn");
var inputs = document.getElementsByTagName("input");
btn.onclick = function () {
for(var i = 0;i<inputs.length;i++){
/* checked属性可以控制是否选中多选项 */
inputs[i].checked = true;
}
}
</script>
</body>
```
- ##### 1.2实现再点击一下，全部不选。
- 使用三目运算符或者if else
- inputs[i].checked = (inputs[i].checked === true)?false:true;
- 可简化为inputs[i].checked = inputs[i].checked !== true
#### 2.使用js修改标签样式
- ##### 2.1修改语法：element.style.attr = value;
- margin-top这样的，要写成marginTop
```
// body
<body>
<p id="p">hello world</p>
<button id="btn">change</button>
<script>
/*
* 修改样式：
* element.style.attr = value;
* margin-top这样的，要写成marginTop
* */
var btn = document.getElementById("btn");
var p = document.getElementById("p");
btn.onclick = function () {
p.style.backgroundColor="red";
}
</script>
</body>
```
- ##### 2.2使用css和js实现隔行变色效果
- css选择器 :nth-child()，odd代表奇数项，even代表偶数项，下标从1开始。
- js实现--利用for循环，下标是否可以整除2来决定加什么颜色
```
// css
<style>
/* css实现 */
/*
:nth-child选择器，odd代表奇数项
even代表偶数项
从1开始而不是从0开始
*/
/*ul li:nth-child(odd){
color: red;
}
ul li:nth-child(even){
color: green;
}*/
</style>
// body
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// js实现
var lis = document.getElementsByTagName("li");
for (var i = 0;i < lis.length;i++){
if (i%2 === 0){
lis[i].style.color = "green";
}
else{
lis[i].style.color = "red";
}
}
</script>
</body>
```
- ##### 2.3原生js这种方法获取样式，只能获取内联样式，有局限性
- 在接下来的例子中，第一次进入页面需要点击两次，第一次给div添加了内联样式display: block
- 实例：显示隐藏
```
// css
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
// body
<body>
<div id="div" style="display: block"></div>
<button id="btn">显示/隐藏</button>
<script>
var btn = document.getElementById("btn");
var div = document.getElementById("div");
btn.onclick = function () {
/* 原生js的这种获取样式的方法，只能获取内联样式，
所以第一次进入页面需要点击两次，第一次给div添加了内联样式display: block */
var value = div.style.display;
alert(value);
// div.style.display = (value === "block")?"none":"block";
if (value === "block"){
div.style.display = "none";
}
else{
div.style.display = "block";
}
}
</script>
</body>
```
- ##### 2.4另一种方法获取样式
- 适用于高级浏览器--getComputeStyle(element,null).attr 第二个参数一般为null
```
// css
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
// body
<body>
<div id="test"></div>
<script>
/*
* element.style.attr ，有局限性：只能获取内联样式
* */
var div_test = document.getElementById("test");
// var value = div_test.style.width;
// div_test.style.background = "green";
// console.log(value); // 获取不到 为一个空白值
/* 在chrome下获取内部样式表和外部样式表的方法 */
// getComputeStyle(element,null).attr
var value = getComputedStyle(div_test,null).width;
alert(value);
</script>
</body>
```
- ##### 2.5给标签对象增加样式名
- element.className = "";
- 如果想多个样式，直接按格式写就行"current aa" 这样
```
// css
<style>
.current{
color: red;
}
.aa{
background-color: #3388ff;
}
</style>
// body
<body>
<p id="p" class="aa">hello world</p>
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
var p = document.getElementById("p");
// 这种方法给p加了样式以后，class=""之中就变为current了
// 如果想多个样式，直接按格式写就行"current aa" 这样
btn.onclick = function () {
p.className = "current aa";
}
</script>
</body>
```
#### 3节点
- ##### 3.1获取节点中的文本内容
- element.textContent，可以获取节点中所有的文本内容
```
// body
<body>
<p class="one">hello world <span>good</span></p>
<script>
var p = document.getElementsByTagName("p")[0];
/* element.textContent，可以获取节点中所有的文本内容 */
var nodeContent = p.textContent;
alert(nodeContent); // hello world good
</script>
</body>
```
- ##### 3.2节点类型
- 元素节点，nodeType=1
- 属性节点，nodeType=2
- 文本节点，nodeType=3
- node.nodeValue方法
- 只有文本节点和注释节点才能被获取内容，属性节点得到的为属性名；其他都是null，。不是重点
```
// body
<body>
<p class="one">hello world <span>good</span></p>
<script>
var p = document.getElementsByTagName("p")[0];
/* element.textContent，可以获取节点中所有的文本内容 */
var nodeContent = p.textContent;
alert(nodeContent); // hello world good
// node.nodeValue方法
// 只有文本节点和注释节点才能被获取内容，其他都是null，
// 属性节点得到的为属性名
// 不是重点
alert("属性节点"+p.getAttributeNode("class").nodeValue); // one
alert("元素节点"+p.nodeValue); // null
alert("文本节点"+p.firstChild.nodeValue);
// 节点类型，元素节点 nodeType=1；属性节点 nodeType=2；文本节点 nodeType=3
alert(p.nodeType); // 1 元素节点
alert(p.getAttributeNode("class").nodeType); // 2 属性节点
alert(p.firstChild); // [object text] 并不是span标签
alert(p.firstChild.nodeType); // 3 文本节点
</script>
</body>
```
- ##### 3.3增加节点
- document.createElement("element"); 创建一个元素节点
- document.createTextNode("text"); 创建一个文本节点
- node.appendChild(); 添加一个子节点，末尾添加
- node.insertBefore(node1,node2); 在node2节点之前添加node1节点
```
// body
<body>
<div id="parent">
<p id="one">hello world</p>
</div>
<button id="add">add</button>
<script>
// 利用js，点击按钮，在div中增加一个p标签，内容为first
var add = document.getElementById("add");
var parent = document.getElementById("parent");
var one = document.getElementById("one");
add.onclick = function () {
/* document.createElement("element")
* 创建一个元素节点
* document.createTextNode("text")
* 创建一个文本节点
* node.appendChild();
* 添加一个子节点，末尾添加
* */
var p = document.createElement("p");
var text = document.createTextNode("first");
p.appendChild(text);
console.log(p); // <p>first</p>
parent.appendChild(p);
// 在one节点之前添加p节点
parent.insertBefore(p,one);
}
</script>
</body>
```
- ##### 3.4删除节点
- 语法 -- parentNode.removeChild(node);
```
// body
<body>
<ul id="parent">
<li>hello world</li>
</ul>
<button id="btn">btn</button>
<script>
/*
* 删除节点 语法
* parentNode.removeChild(node);
* */
var btn = document.getElementById("btn");
var parent = document.getElementById("parent");
var li = document.getElementsByTagName("li")[0];
btn.onclick = function () {
parent.removeChild(li);
}
</script>
</body>
```
- ##### 3.5替换节点
- 语法 -- parentNode.replaceChild(newNode,targetNode);
```
// body
<body>
<div id="parent">
<p id="child">hello world</p>
</div>
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
var parent = document.getElementById("parent");
var child = document.getElementById("child");
btn.onclick = function () {
var h4 = document.createElement("h4");
var text = document.createTextNode("哈哈哈哈，想不到吧");
h4.appendChild(text);
// parentNode.replaceChild(newNode,targetNode);
parent.replaceChild(h4,child);
}
</script>
</body>
```
- ##### 3.6克隆节点
- 语法 -- node.cloneNode(true);
- 获得body -- document.body
```
// body
<body>
<p>hello world</p>
<script>
var p = document.getElementsByTagName("p")[0];
var p2 = p.cloneNode(true);
console.log(p2);
// 给body增加一个p
document.body.appendChild(p2);
</script>
</body>
```
#### 4.DOM事件
- ##### 4.1 focus和blur
- onfocus --> 获取焦点
- onblur --> 失去焦点
- 在事件中，this指向正在执行事件的对象。
```
// body
<body>
<input type="text" id="input" />
<script>
/*
* onfocus --> 获取焦点
* onblur --> 失去焦点
* 在事件中，this指向正在执行事件的对象。
* */
var input = document.getElementById("input");
input.onfocus = function () {
this.style.backgroundColor = "red";
};
input.onblur = function () {
this.style.backgroundColor = "green";
}
</script>
</body>
```
- ##### 4.2 mouse
- onmouseover --> 鼠标移动到某元素上时
- onmouseout --> 鼠标移出时
```
// body
<body>
<p id="test">hello world</p>
<script>
/*
* onmouseover --> 鼠标移动到某元素上时
* onmouseout --> 鼠标移出时
* */
var p = document.getElementById("test");
p.onmouseover = function () {
this.style.color = "red";
};
p.onmouseout = function () {
this.style.color = "green";
}
</script>
</body>
```
- ##### 4.3 onload
- window.onload 整个DOM树加载以及相关图片资源加载完成之后，执行相关代码
- 在.js文件中使用该事件，也可以在html文件顶部引入js，一样可以获取到标签对象
```
// index.js
window.onload = function () {
var p = document.getElementsByTagName("p")[0];
console.log(p);
};
```
```
// onload.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>onload</title>
<!--<script>
/*
* window.onload 整个DOM树加载以及相关图片资源加载完成之后，执行相关代码
* */
window.onload = function () {
var p = document.getElementsByTagName("p")[0];
console.log(p);
}
</script>-->
<!-- 这样的话，从js文件夹引出来的也可以放在顶部使用 -->
<script src="js/index.js"></script>
</head>
<body>
<p>hello world</p>
</body>
</html>
```
- ##### 4.4 change
- onchange --> 域的内容发生改变时触发
```
// body
<body>
<input type="text">
<script>
// onchange --> 域的内容发生改变时触发
var input = document.getElementsByTagName("input")[0];
input.onchange = function () {
this.value = "change";
}
</script>
</body>
```
- ##### 4.5 submit
- onsubmit --> 表单被提交时触发，要获取form表单对象，而不是submit对象
```
// body
<body>
<form action="">
<input type="text" />
<button type="submit">提交</button>
</form>
<script>
// onsubmit --> 表单被提交时触发，要获取form表单对象
// 而不是submit对象
var sub = document.getElementsByTagName("form")[0];
sub.onsubmit = function () {
alert("提交失败");
}
</script>
</body>
```
- ##### 4.6 浏览器改变事件
- window.onresize --> 浏览器窗口发生改变时触发
- window.onscroll --> 窗口滚动条滚动时触发
```
// css
<style>
div{
height: 1000px;
background-color: red;
}
</style>
// body
<body>
<div></div>
<script>
window.onresize = function () {
alert("浏览器窗口发生改变时触发");
};
window.onscroll = function () {
alert("窗口滚动条滚动时触发");
};
</script>
</body>
```
- ##### 4.7键盘触发事件
- onkeydown --> 键盘按下时触发
- onkeyup --> 键盘释放时触发
- onkeypress --> 在键盘按键按下并释放一个键时触发
- event.keyCode --> 键盘每个键对应的键盘码
- 显示还可以输入多少字的实例如下代码块2
```
// body
<script>
/*
* onkeydown --> 键盘按下时触发
* onkeypress --> 在键盘按键按下并释放一个键时触发
* onkeyup --> 键盘释放时触发
*
* event.keyCode --> 键盘每个键对应的键盘码
*
* */
document.onkeydown = function (ev) {
alert(ev.keyCode);
}
</script>
</body>
```
```
// css
<style>
em{
color: red;
}
</style>
// body
<body>
<p>你还可以输入<em id="show">150</em>/150个字</p>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<script>
var show = document.getElementById("show");
var txt = document.getElementById("txt");
txt.onkeyup = function () {
// 获取内部文本长度
var length = txt.value.length;
show.innerHTML = 150 - length;
}
</script>
</body>
</html>
```
#### 5.BOM-window
- ##### 5.1 window是什么
- js的顶级作用域就是window
- 全局变量是window的属性
- 方法也是window的方法
```
// body
<script>
/*
* js的顶级作用域就是window
* 全局变量是window的属性
* 方法也是window的方法
* */
var a = 10;
console.log(window.a); // 10
/* this指向 */
function b() {
console.log(this);
}
window.b(); // window
</script>
</body>
```
- ##### 5.2 window.confirm()方法
- window.confirm("txt") --> 会弹出一个确定和取消的弹框，
- 有返回值，确定返回true，取消返回false
- 实例
```
// body
<body>
<div>
<span id="mi">小米8</span>
<button id="btn">btn</button>
</div>
<script>
// confirm方法有返回值 确定返回true，取消返回false
// var result = window.confirm("是否取消");
// alert(result);
var btn = document.getElementById("btn");
var mi = document.getElementById("mi");
btn.onclick = function () {
var result = window.confirm("你确定不要小米吗？");
if (result){
mi.style.display = "none";
}
else{
mi.style.display = "inline-block";
mi.style.color = "red";
}
}
</script>
</body>
```
#### 6.小米登录框实现
- ##### 6.1使用方法
- 使用标签名获取标签对象集合 -- document.getElementsByTagName("TagName");
- 使用class名获取对象集合 -- document.getElementsByClassName("className");
- onclick事件
- 给对象添加属性 obj.属性名 = "";
- for(var i = 0;i < 集合.length;i++){循环体} 循环
- 修改className属性
- 给对象修改样式
```
// html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小米登录页</title>
<style>
*{margin: 0;padding: 0}
.form{
width: 400px;
border: 1px solid #eee;
text-align: center;
margin: 50px auto;
box-shadow: 0 0 10px 5px #333;
}
li{
list-style: none;
display: inline-block;
}
ul{
line-height: 50px;
border-bottom: 1px solid #eee;
}
.content{
position: relative;
height: 200px;
}
/* 这里是直系后代，而不是内部的所有div */
.content>div{
position: absolute;
width: 100%;
height: 100%;
}
.saoma{
display: none;
}
input{
width: 360px;
height: 40px;
margin-top: 20px;
}
.current{
color: orangered;
}
</style>
</head>
<body>
<div class="form">
<ul>
<li class="current">账号登录</li>
<li>扫码登录</li>
</ul>
<div class="content">
<div class="account child">
<div><input type="text" /></div>
<div><input type="password" /></div>
<div><input type="submit" value="立即登录" /></div>
</div>
<div class="saoma child">
<img src="images/01.png" alt="扫码登录">
</div>
</div>
</div>
<script>
var lis = document.getElementsByTagName("li");
var contents = document.getElementsByClassName("child");
/*console.log(lis);
console.log(contents);*/
// 1.点击li，让正在被点击的className = "current"，其他的className = ""
// 对所有的li进行遍历，然后给他们一个点击事件。即使外部循环结束了，点击事件仍然存在。
for(var i = 0;i < lis.length;i++){
// 自定义一个index属性给lis中的li
lis[i].index = i;
// 给li添加一个点击事件
lis[i].onclick = function () {
// 先将所有li的class清空
// 这里不要用 var x in lis 除了索引还会遍历出很多其他的属性，造成报错
for(var x = 0;x < lis.length;x++){
lis[x].className = "";
}
//当前项的li的className = "current"
this.className = "current";
// 可以得到0 1 看出是哪个li
console.log(this.index);
// 先将所有的content隐藏
for (var y = 0;y < contents.length;y++){
contents[y].style.display = "none";
}
// 让对应的content出现
contents[this.index].style.display = "block";
}
}
</script>
</body>
</html>
```
#### 7.sHover
- ##### 7.1sHover是什么
- 它是一个简单的原生js插件。它可以让你的展示图片感应鼠标进入方向，从而让悬浮层做出不同的运动效果，多个图片放在一起效果更酷炫噢！它的使用和设置都非常方便，更重要的是它能用在几乎所有的浏览器上啊！（至少IE5及以上吧）
- ##### 7.2使用简单
- sHover是一个纯原生JavaScript编写的小组件，不需要引入JQuery或其他插件就可以使用。使用非常简单，引入sHover的js文件之后，只需一行代码，即可让你的图片展示瞬间炫酷起来
- ##### 7.3多样设置
- 有很多不同的效果可以在创建默认的效果之后进行设置，并且设置方法非常简单。可以设置悬浮层在运动时的许多状态。
- ##### 7.4超强兼容
- 它的在所有新版本的浏览器上都能完美运行，除此之外，它甚至能在IE5及以前的浏览器上运行，并且效果几乎没有影响
- ##### 7.5官方主页
- http://www.jq22.com/demo/sHover-master20150718/
```
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sHover</title>
<script src="js/sHover.min.js"></script>
<style>
#item1{
overflow: hidden;
border:1px solid #333;
width:280px;
height:180px;
color: white;
}
.sIntro{
background: #333;
}
</style>
</head>
<body>
<div id="item1" class="sHoverItem">
<img id="img1" src="images/01.jpg">
<span id="intro1" class="sIntro">
<h2>h2标题</h2>
<p> 段落内容 </p>
<button>按钮</button>
</span>
</div>
<script>
var a = new sHover("sHoverItem", "sIntro");
a.set({
slideSpeed: 5,
opacityChange: true,
opacity: 80
});
</script>
</body>
</html>
```
