这篇内容比较乱，关于js。
input是html中的标签，标签下的属性type:
- button是按钮
- checkbox是单选项
- text是文本输入框
- title是提示文字
div是html中的标签，实际就是一个块，添加css样式颜色等，之后就会显示出来。
div的属性display，none是不显示，block是显示。
id是属性，任何标签都可以添加id属性，div，link等
js是添加交互，功能（点击，按钮，翻页等），就是添加动的东西，是修改样式。html写的东西js都能修改。唯独css中的class在js中要写成className。
js设置css时，要选取元素的属性，使用的是document.getElementById(‘id’).style.属性名
需要在样式style之下选择。
如果是设置input的value，则是document.getElementById(‘id’).value=’内容’
js事件： 就是用户的操作，点击，鼠标的移入或者移出
- on click 点击
- 鼠标的移入 onmouseover
- 鼠标的移出 onmouseout
js中的alert是弹出
onclick是js的事件，添加到标签的属性中，可以用来调用函数。
js中获取元素的方法：
- document.getElementById(‘id名’) 获取某一个元素
- document.getElementsByTagName 获取的是一组元素，返回的是数组
通过style只能取到行间中样式，就是写在标签中的样式。如果样式是写在之间的，就取不到。 对于非行间的样式，IE要用currentstyle取出来。chrom 火狐要用getcomputestyle方法。
第一个js点击事件：
<!DOCUMENT HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<title> hello </title>
</HEAD>
<body>
<input type="button" name="" value="点击" onclick="alert('陈志强')">
<!-- 双引号单引号不能同时出现 ， onclick就是事件，点击就会弹出陈志强-->
</body>
</HTML>
id是作为css的选择符存在，但是在js中有更多的用处。
下列代码功能：鼠标移入：显示div1；鼠标移出：隐藏div1。
<!DOCTYPE html>
<html>
<head>
<title> second</title>
<meta charset="utf-8">
<style type="text/css">
# 默认是不显示div1的
#div1 {width: :200px; height: 100px; background: #CCC; border: 1px; display: none; }
</style>
</head>
<body>
<input type="checkbox" name="" onmouseover="div1.style.display='block';"
onmouseout="div1.style.display='none'">
# div是一个块的存在
<div id="div1">
hello world
</div>
</body>
</html>
“div1.style.display=’block’：div1的style属性下的display设置为block，即显示出来，隐藏就是none。
实际在onmouseover=”div1.style.display=’block’;” 这里是存在问题的：div1是元素，此处的使用是直接拿来用的，并没有获取，这是存在兼容问题的。
正确的方式是： “document.getElementById(‘div1’).style.display=’block’;”
要先使用document.getElementById(‘元素的名称’) 这样的方式来获取元素。
<!DOCTYPE html>
<html>
<head>
<title> second</title>
<meta charset="utf-8">
<style type="text/css">
#div1 {width: :200px; height: 100px; background: #CCC; border: 1px; display: none; }
</style>
</head>
<body>
<input type="checkbox" name="" onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none'">
<div id="div1">
hello world
</div>
</body>
</html>
同样要注意双引号和单引号的问题。
js函数
js函数和css中的class是相似的。css中的class这写好之后，在需要的地方拿来直接用。
css的样式写在style之间，js的函数写在script之间。 当css样式写在css文件的时候，要使用link链接进来。link标签是不写在style之间的。
js中定义变量要用 var 关键字。 变量就是给一个东西起一个别名，好处就是不再写更多的重复的代码。
以下是js中定义函数， 注意其中的格式：
<script type="text/javascript">
function togreen()
{
// 定义变量的关键字是 var
var odiv = document.getElementById('div1')
odiv.style.width='500px';
odiv.style.height='2000px';
odiv.style.background = 'green';
}
function tored()
{
// 定义变量的关键字是 var
var odiv = document.getElementById('div1')
odiv.style.width='200px';
odiv.style.height='100px';
odiv.style.background = 'red';
}
</script>
函数的格式：
function 函数名(参数可以为空)
{
......
.....
.....
}
函数名字是随意定义。函数定义之后就是调用，函数名()即可。
函数在body中调用要双引号引起来，在script中是不需要的。
在js中，不论要操作什么，都要先选出来才能操作，就像和某人说一件事情要先把他叫过来，js是同样的。选择的方法就是使用document.getElmentById或者其他的方法。
无论是什么标签，都是可以加id属性的。 包括link。
任何标签下的属性都是可以被修改的，包括link中的href。
html中怎么写，js就是怎么写的，只是使用的方法不同。唯一例外的是，html中的class在js中要写成className。
换肤例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<link id="div1" rel="stylesheet" type="text/css" href="css1.css">
<style type="text/css">
</style>
<script type="text/javascript">
function skin1(){
odiv = document.getElementById('div1');
odiv.href = "css2.css"
}
function skin2() {
odiv = document.getElementById("div1");
odiv.href = "css1.css"
}
</script>
</head>
<body>
<input type="button" name="" value="1" onclick="skin1()">
<input type="button" name="" value="2" onclick="skin2()">
</body>
</html>
css文件：
# css1文件
@charset "utf-8"
body {
background: :black;
}
input {
width: 200px;
height: 1000px;
background: yellow;
}
# css2文件
@charset "utf-8"
body {
background: red;
}
input {
width: 3300px;
height: 20px;
background: blue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function addtext(){
var ch=document.getElementById('txt1');
ch.value = 'dsdsd s';
ch.title = 'dsdsdsdefwgerggerg '
}
</script>
</head>
<body>
<input id="txt1" type="text" name="">
<input type="button" name="" value="change" onclick="addtext()">
</body>
</html>
if 条件语句
if(条件)
｛
条件成立，执行语句1
｝
else
｛
条件不成立，执行语句2
｝
js函数传参
function 函数名(参数)
｛
语句
｝
函数名(实参)
参数的位置就是占位符，只是顶替而已，就是python的形参，调用函数时传递的才是实参。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
function setcolor(color)
{
var odiv = document.getElementById('div1')
odiv.style.background = color
}
</script>
</head>
<body>
<input type="button" name="" value="blue" onclick="setcolor('blue')">
<input type="button" name="" value="green" onclick="setcolor('green')">
<input type="button" name="" value="black" onclick="setcolor('black')">
<div id="div1"></div>
</body>
</html>
注意：
onclick=”setcolor(‘blue’)” 里面的是参数，不是变量。
获取元素的方式:
使用点链接，一般使用这样的方式：
var odiv = document.getElementById(‘div1’)
odiv.style.background = color使用中括号，当函数传参的时候，使用这个方法，具体的名字可以随意的指定
function setstyle(name， value) { var odiv = document.getElementById('div1') # 如果是input下的value odiv[name] = value
# 如果是style下：
odiv.style[name] = value
}
# 调用
setstyle(name, value)
通过style加的样式，都是加在行间的。
样式优先级：
*通配符<标签<id<行间
因为优先级原因，所以最好是对于同一个元素要从头至尾的要么操作style要么操作class
提取行间事件
写在行间的事件，比如onclick，这就是行间事件。写行间事件有隐患，也狠麻烦。
提取事件
用js为元素添加事件
就是吧onclick事件放置在js的script中，obtn.onclick=函数名()
js函数也可以不写名字，匿名函数，直接调用即可。
obtn.onclick= function ()
{
.....
....
}
大部分js函数是没名字的。
使用window.onload= function(){….}，加载所有的代码之后执行，这是在使用提取行间事件时必须的。
前端要求，行为（js），样式（css）， 结构（html）三者分离。 就是说：
- 别加行间样式，使用style或者css问价完成css样式
- 别加行间事件，使用script，用函数完成事件调用。
提取行间事件就是为了三者分离。
全选，不选和反选案例
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function() {
var obt1 = document.getElementById('bt1');
var obt2 = document.getElementById('none');
var obt3 = document.getElementById('fan');
// 获取一个标签下另一个标签
var oinput = document.getElementById('div1');
var ach = oinput.getElementsByTagName('input');
obt1.onclick = function(){
for(var i=0;i<ach.length;i++){
ach[i].checked = true;
}
};
obt2.onclick = function(){
for(var i=0;i<ach.length;i++){
ach[i].checked = false;
}
};
obt3.onclick = function(){
for(var i=0;i<ach.length;i++){
if(ach[i].checked == true){
ach[i].checked = false
}
else{
ach[i].checked = true
}
}
};
};
</script>
</head>
<body>
<input id='bt1' type="button" name="" value="全选"><br>
<input type="button" name="" value="不选" id='none'><br>
<input type="button" name="" value="反选" id='fan'><br>
<div id='div1'>
<input type="checkbox" name=""> <br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
</div>
</body>
</html>
### 选项卡
this：指的是当前事件发生的元素。在对元素循环执行的时候，使用this指的就是当前操作的对象。
通过html添加的自定义的属性，浏览器是不认的。但是通过js添加的属性是可以的。
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*.active active是类名*/
#div1 .active {background: yellow}
#div1 div {width: 200px; height: 200px; background: red; border: 2px; display: none; }
</style>
<script type="text/javascript">
window.onload = function(){
var odiv = document.getElementById('div1')
var oinput = odiv.getElementsByTagName('input')
var odivv = odiv.getElementsByTagName('div')
// 这部分是对按钮的操作，按下某一个按钮，显示黄色，其他的按钮没有黄色
for(var i=0;i<oinput.length;i++){
// 这句是添加属性index，值为i
// 这里是通过js添加自定义属性，通过html添加自定义属性浏览器是不认的
oinput[i].index = i;
oinput[i].onclick = function(){
for(var i=0;i<oinput.length;i++){
oinput[i].className = '';
odivv[i].style.display = 'none';
}
// this指向的是当前操作的元素
// 因为是类，html的class在这里要用classname
this.className = 'active';
// 上面已经添加index属性，这里取出来index的值，以此确定到底是哪个div要操作
odivv[this.index].style.display = 'block';
}
};
}
</script>
</head>
<body>
<div id='div1'>
<!-- 添加类属性 -->
<input class='active' type="button" name="" value="教育">
<input type="button" name="" value="培训">
<input type="button" name="" value="出国">
<input type="button" name="" value="写作">
<div style="display: block;">1111</div>
<div>222</div>
<div>3333</div>
<div>4444</div>
</div>
</body>
</html>
简易日历
innerhtml：js最有用的东西。直接修改某个标签下面的内容，而不是仅仅修改某一个标签的属性值了。
从文本框里面拿文字只要使用input标签的属性value属性值就好。
innerHTML就是吧某个内容放置在odiv标签下去，作为内容。
innerHTML还可以取出某个标签之间的内容，比如
还可以通过innerHTML来往html之间添加html元素，什么内容都是可以往里面放的。
value是给input用的，是属性；innerhtml是给span，div等标签用的。
数组
字符串优先级
js基础
ecmascript：角色是解释器，核心部分
dom：操作html的能力 关键字 document.getElementById等方法。
bom： 浏览器操作模型 关键字 window.onload， 或者alert弹出等。
查看类型： typeof a
类型转换： parseint方法将字符串转换为数字，如果不是数字返回的是NaN，如果其中包含了数字了，则会从左到右的找到非数字的地方返回前面的数字。但是只能转换整数，不能处理小数，处理小数要用，parseFloat 。parseint是很常用的东西。
注意：js中如果2个都是NaN，NaN和NaN是不相等的。 所以不能使用NaN==NaN这样的方式判断，要使用isNaN方法判断。如果是的，返回true，不是的返回false。
以上是显示转换，也是指定转换类型的强制转换。
隐士转换：
== ：自动的先转换类型，再比较
=== ： 不自动的转换类型比较
#####变量作用域
局部变量：
闭包:函数包含函数 父函数 子函数
js中命名要使用命名前缀 函数取名的时候不需要前缀。
首字母大写。
取模是 % ：就是取余 隔行变色
js中还有else if语句 python中的是elif 作用相同。
选择条件： switch
重点：
三目运算符：是if的简写，写法：条件?条件成立执行的语句:条件不成立的语句;
简单的语句用三目很好，复杂就不好了。
break： 停止循环
contuin：跳出本次的循环
真：true 非空，非零（包含负数）非空字符串
假： false， 零 空字符串 ，null 空对象 定义的变量但是未赋值的。
循环：
数组：使用for（var i=0;i<odiv.length;i++）这样的方式最好
json：使用for(var i in json) 这样的方式最好
函数返回值
arguments：在函数内部使用，接受的是不定长参数，数组形式。
function sum(){
argument代表的就是传递进来的参数。
var result = 0
for(var i=0;i<arguments.length;i++){
result+=arguments[i]
}
}
alert(sum(1,2,34,5,6,7,5,3))