获取元素
document.get Element By Id()
文档 获取 元素 通过
document.getElementById("box").style.background = "blue";
//就通过获取文档中的ID，来改变背景颜色
cssText
-
cssText 获取style中所有内容
-
直接修改cssText会覆盖，style中的所有内容，如果不想覆盖之前的所有内容，可以直接写 style，或者用 +=
box.style.cssText += "width: 400px"; //修改其中的一个样式 box.style.cssText = ""; //清空所有行间样式
-
cssText = "" 可以直接清空所有的行间样式
元素改变的是行间的样式
innerHTML
- innerHTML 元素的内容
- 从元素的开标签到闭合标签之间的所有内容,包括元素中包含的子元素
- 直接设置元素的innerHTML，或替换掉之前的所有内容,如果不想替换只是添加内容用 +=
+号运算符
加法运算
链接两个字符串（包在引号中的一串字符，叫做字符串）
-
+= (a += b --- a = a + b)
cosole.log(1 + 1); //2个数字相加，结果是2； cosole.log("1" + "1"); //2个字符串链接，结果是11；加号有两个作用，一个是加法运算，一个是字符串连接,只有加号左右两侧是数字的情况才会执行加法运算,如果有一次是字符串就会执行字符串连接，连接的结果也是字符串
字符串写法 var deg = 0; var tX = 0; //transform: rotate(0deg) translateX(0px); transform = "rotate(" + deg + "deg) translateX(" + tX + "px)";
函数
- 函数声明
function name(){
要执行的内容；
}
name();
- 有名字的函数
var left = 0;
var t = 100;
function running(){
left += 100;
t += 100;
box.style.left = left + "px";
box.style.top = t + "px";
}
running();
//在写left，width等样式时，一定注意加单位
- 匿名函数
function(){
left += 100;
top += 100;
box.style.left = left + "px";
box.style.top = top + "px";
}
//暂时匿名函数不能直接使用，只能使用在事件中
-
函数调用
事件调用：不加括号
非事件调用：添加括号
什么时候加括号，什么时候不加括号:
- 当浏览器读到这行代码的时候，就执行需要给函数调用加();
- 当某种特定的条件下才执行，不需要加();
window.onload
window.onload 整个页面加载完整
onload事件 加载完整
用来当页面加载完成后，运行js。
window.onload = function(){ //要运行的js代码 }
document.querySelector('Css Selector');
接收一个css选择器(通配，群组，包含，id，类……等等)
如果这个选择器对应的是一组元素，就只找第0个
var box = document.querySelector('.box'); //如果下面有很多个.box的class，那就只对应第0个js下是从0 开始计算
使用class来改变样式
先给一个class设置好需要改变的样式
.hover {
display: block;
}
再通过给需要改变的元素添加class来改变样式
<script type="text/javascript">
window.onload = function(){
var wrap = document.querySelector('.wrap');
var ul = document.querySelector('ul');
wrap.onmouseover = function(){
ul.className = "hover";
};
wrap.onmouseout = function(){
ul.className = "";
};
};
</script>
if判断
-
逻辑运算符
== 相等；！=不等；>= 大于等于 ；<=小于等于；>大于；<小于；
-
if(判断条件)｛
条件成立要执行的内容
｝ else {
条件不成立要执行的内容
}
-
布尔值 （true/false）
var a = 10; var b = 10; if(a != b){ alert("正确"); } else { alert("不正确"); } /* if(布尔值true或false){ 为true时要执行的语句 } else { 为false时要执行的语句 } */一种操作下，会有两种或以上的执行结果，记得用判断
开关
<script type="text/javascript"> window.onload = function() { var btn = document.querySelector('#btn'); var is = true; /* 默认是true*/ btn.onclick = function(){ if(is == true) { alert("正确"); is = false; /* 为true的时候，就改成false，下次就会走else */ } else { alert("错误"); is = true; /* 为false的时候，就改成true，下次就会走if */ } }; }; </script>取反
<script type="text/javascript"> window.onload = function() { var btn = document.querySelector('#btn'); var is = true; /* 默认是true*/ btn.onclick = function(){ if(is) { alert("正确"); } else { alert("错误"); } is = !is; // ! 取反 true 变成false false变成true }; }; </script>布尔值的前缀一般为is
if的四种写法
-
第一种
<script type="text/javascript"> var a = 0; var b = 1; if(a + b < 0) { alert(true); } else { alert(false); } </script> -
第二种
<script type="text/javascript"> var a = 0; var b = 1; // 成立做某件事，不成立啥都不做 if(a + b < 0) { alert(true); } </script> -
第三种
<script type="text/javascript"> var a = 0; var b = 1; if(a + b == 0) { //条件成就执行里边的内容，下边 else if 就不会在执行 alert(0); } else if(a + b == 1) {//上边的条件不成立，就查看本条，条件成就执行里边的内容，下边的内容不执行 alert(1); } else if(a + b == 2) { alert(2); } </script> -
第四种
<script type="text/javascript"> var a = 0; var b = 10; /* if(a + b == 0) { //条件成就执行里边的内容，下边 else if 就不会在执行 alert(0); } else if(a + b == 1) {//上边的条件不成立，就查看本条，条件成就执行里边的内容，下边的内容不执行 alert(1); } else if(a + b == 2) { alert(2); } else { //都不成立 } </script>
可以获取到一组元素的几种选择方式
<script type="text/javascript"> window.onload = function(){ var list = document.querySelector('.list'); var li = list.getElementsByClassName("li"); /* 父级.getElementsByTagName("标签名"); 获取元素下的某个类型的标签 获取的结果是 一组元素(元素集合) 父级.getElementsByClassName("class名"); 获取元素下的某个类型的class 获取的结果是 一组元素(元素集合) 父级.querySelectorAll('css 选择器'); 获取元素下的某个类型的元素 获取的结果是 一组元素(元素集合) */ console.log(li); }; </script>1.一组元素不能在js直接操作
2.一组元素哪怕只有1个，他也是一组元素
3.一组元素在操作的时候，可以使用下标
4.如果需要知道这组元素有几个，可以使用 length属性
window.onload = function(){ var list = document.querySelector('.list'); var li = list.getElementsByTagName("li"); //console.log(li); li[0].style.background = "red"; alert(li.length); }; </script>
循环
循环的样式
<script type="text/javascript"> for(var i = 0; i < 5; i++) { alert(i); } </script>循环执行过程
var i = 0;是初始值 （1） i < 5;是判断条件（2） i++ ；自增（3） alert(i);执行语句（4）
初始值往下走；
判断条件是否成立；
成立后执行语句；
返回来自增；
再进行判断条件是否成立；
一直进行到判断条件不成立；
this
在事件函数中，this代表触发当前事件的元素
例如
<script type="text/javascript"> window.onload = function(){ var li = ul.querySelectorAll('li'); for(var i = 0; i < li.length; i++) { li[i].onclick = function(){ console.log(this); // 在事件函数中，this代表触发当前事件的元素 }; } }; </script>
//console.log中的this 显示当前li的所有元素<li>innerHTML</li>
