17-JS特效-DOM操作
2018-10-30 本文已影响0人
雪妮爸爸
一、复习。
1、value,innerHTML,innerText.
- 标签的value属性。
- innerHTML获取双闭合标签里面的内容。（识别标签）；
- {设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)}
- innerText获取双闭合标签里面的内容。（不识别标签）；
- {设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）}
- ps
2、document对象。
-
00内置对象-window。
1.所有全局的变量都是window的属性。
2.所有全局的函数都是window的方法。
动态跳转
window.location.href = "http://www.baidu.com";
-
01-获取整个网页的document对象。
console.log(document);
-
02-获取网页中document的所有子节点。
console.log(document.childNodes);
-
03-document和Body的区别。
document是虚拟存在的，是整个网页的最高管理者，总体节点就分为：1.文档声明，2.html结构。
body则指的是网页的具体内容。body是document的一部分。
-
04-获取html元素。
1.如何获取：
确定对象（要找谁），根据独特标记。
2.获取方式：
document.getElementsByTagName('div')[0];
document.getElementsByClassName('box')[0];
document.getElementById('my_box');
document.getElementsByName('my_div')[0];
document.querySelector('#my_box');
document.querySelectorAll('div')[0];
｛1.querySelector、querySelectorAll方法中的参数和CSS选择器完全一致。
2.querySelector和querySelectorAll的区别在于querySelector用来获取一个元素，而querySelectorAll可以获取多个元素。
3.querySelector将返回匹配到的第一个元素，如果没有匹配的元素则返回Null；querySelectorAll返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。｝
-
05-document常见的内置属性和方法。
直接获取元素方法。 document.head;//直接获取头部 document.body;//直接获取body document.title // 直接获取title
3、JS中的事件。
-
01-基本概念。
事件三要素：事件源，事件，事件驱动程序。 事件源.事件属性 = 事件指令 -
02-二维码的显示和隐藏。
注意：cursor 属性规定要显示的光标的类型（形状）。cursor:pointer; -
03-图标切换。$符
含义和用法：
$在JS中本身只是一个符号而异，在JS里什么也不是。但在JS应用库JQUERY的作者将之做为一个自定义函数
名了，这个函数是获取指定网页元素的函数，使用非常之频繁，所以好多新手不知道，还以为$是JS的什么特
殊语法。
后来，可能有些程序员JQUERY用得多了，发现$这个函数很好用，很方便，所以，在不用JQUERY的情况，一
般自己也会自定义一个$函数。
终极写法
<style>
*{margin:0;
padding:0;
list-style:none;}
#box{
border:1px solid #cccccc;
width:360px;
height:70px;
padding-top:360px;
margin:100px auto;
background:url("images/01big.jpg") no-repeat;
}
ul{display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="li01"><img src="images/01.jpg" alt=""></li>
<li id="li02"><img src="images/02.jpg" alt=""></li>
<li id="li03"><img src="images/03.jpg" alt=""></li>
<li id="li04"><img src="images/04.jpg" alt=""></li>
<li id="li05"><img src="images/05.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload = function () {
var box = document.getElementById('box');
var allLi = document.getElementsByTagName('li');
for(var i = 0;i < allLi.length;i++){
var sLi = allLi[i];
sLi.index = i + 1;
sLi.onmouseover = function () {
box.style.background = 'url("images/0' + this.index + 'big.jpg") no-repeat'; }
}
}
</script>
二、常用的事件补充。
1.百度换肤。
vertical-align:top;与上面的内容无缝链接。
在for循环中出现同步和异步的问题时，应该用this。
<script>
window.onload = function () {
// 1. 获取需要的标签
var box = document.getElementById("box");
var allLis = box.getElementsByTagName("li");
// 2. 遍历监听
for(var i=0; i<allLis.length; i++){
// 2.1 取到当个li
var sLi = allLis[i];
sLi.index = i+1;
console.log(sLi.index);
// 2.2 绑定事件
sLi.onclick = function () {
document.body.style.background = 'url("images/'+ this.index +'.jpg") no-repeat';
}
}
}
</script>
2.选中和取消选中。
checked
- HTML <input> 标签的 checked 属性。带有一个预选定复选框的 HTML 表单
- HTML DOM checked 属性。checkboxObject.checked=true|false
checked 属性设置或返回 checkbox 是否应被选中。
语法
checkboxObject.checked=true|false
说明
该属性保存了 checkbox 的当前状态，不管何时，这个值发生变化的时候，onclick 事件句柄就会触发（也可能触发 onchange 事件句柄）。
3.transform的运用。
tansform（translate，rotate，scale；）
4.输入焦点处理。
outline 属性。outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
input的placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
.onfocus//输入框获得焦点
.onblur//输入框失去焦点
5.parselnt
Math.celi()：向上取整
Math.foor():向下取整
Math.round()：四舍五入
parseFloat() 函数可解析一个字符串，并返回一个浮点数。
parseInt(num) 函数可解析一个字符串，并返回一个整数。
6.表单验证。
isNaN() 函数用于检查其参数是否是非数字值。
如果是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果是其他值,则返回 false。
JS中className添加类。
-
实现版
-
优化版
三、简单轮播图。（后面讲！！！！！！）
四、排他思想。
1.this
-
this所在的函数在哪个对象中，this就指向这个对象。
-
例外：
- 定时器中
- 在事件中间，函数中的this就指向数据源。
2.排他思想。
你有我无，我有你无。
含义： 关于排他思想，我的理解就是先排除掉其他的(包括自己) ，最后再给自己(this)加想要的效果。
循环是同步执行，一次执行完，就会导致给btn添加事件都是最后一个。利用闭包，或者给元素添加属性可以解决。
