标签：rev 设置 var 控制 命名法 param 自己 red 防止
1.JavaScript:一门客户端脚本语言
2.JavaScript的组成：1、ECMAScript：基本的语法和对象
2、BOM:浏览器模型，与浏览器进行交互
3、DOM:文档模型，与网页内容进行交互
var a = 123;
var b = ‘abc‘;
//连写
var a = 123,b=456;注意：js为弱类型的解释型脚本语言，使用var关键字定义一个变量，数据类型自动判断。
注意：每句代码后可以不写分号，换行即可，习惯上最好加上，增强可读性。
变量类型：
命名规则：
//小驼峰命名法
var getMyClass = "abc";
//字母加下划线
var get_my_name = "abc";
//匈牙利命名风格
object: oDiv = document.getElementById(‘div1‘);
string: sMyName = "abc" //根据数据类型的第一个字母为开头的小驼峰命名法。<script>
window.onload = function(){
//获取标签，通过id
var oDiv = document.getElementById(‘div‘);
//获取标签，通过class属性
var oDiv = document.getElementByClassName(‘div‘);
// 获取标签,写法和css一样
var oDiv = document.querySlector("#id");//如果有多个，获取到第一个
var oDiv = document.querySlectorAll()//获取所有，得到选择集
// 读取属性值
var name =oDiv.className;
var oId = oDiv.id;
// 写(设置)属性
oDiv.style.color = ‘red‘;
oDiv.style.fontSize = "20px";
// 写属性值第二种
var cor = oDiv.style.color;
var oDiv.style[cor] = "red";//自己命名的属性需要通过[]方式
var oDiv.style.cor = ""; //这种是无效的
}
</script>注意1：代码需要写在window.onload =function(){}；中，使得html和css加载完毕后才执行，防止报错。
注意2：如果style中的属性不是行内式，而是由css设置的，那么js第一次是获取不到的，但可以直接设置。
注意3：js代码需要用script标签包裹，可以放置在html代码的任何位置，但css嵌入式只能放在头部。
//读取
var txt = oDiv.innerHTML;
//写入
oDiv.innerHTML = ‘<a href="">哈哈哈哈哈<a/>‘;说明：写入的标签会被解析，从而可以动态添加标签；标签的属性可以在css中写，有效。
==和===的区别：==不会判断数据的类型，直接比较值；=== 会先判断数据的类型，不是同一种类型则不相等。
if(3=="3"){
alert("true")//判断为真
}
if(3==="3"){
alert("true")//判断为假
}
var a = 2;
switch (a){
case 1:
alert(‘1‘);
break;
case 2:
alert(‘2‘);
break;
default:
alert("else");//实例创建，和java相似
var aList = new Array(1,2,3);
//直接创建，内部数据可以是不同的类型；
var aList2 = [1,2,3,‘asd‘，true，null];
// 多维数组
var aList = [[1,2,3],[‘a‘,‘b‘,‘c‘]];var aList = [1,2,3,4];
var n1 = aList.length; //获取数组的长度，n1=4；
var n2 = aList[0]； // 下标获取数据，n2 = 1;
var n3 = (aList.join(‘-‘)) // 数组成员通过分隔符拼接成字符串，n3="1-2-3-4";
var n4 = aList.push(5); //数组后面追加成员
var n5 = aList.pop(); //数组后删除成员
var n6 = aList.unshift(5); //数组前面增加成员
var n7 = aList.shift();; //数组前面面删除成员
var n8 = aList.reverse();//数组翻转
var n9 = aList.indexOf(1);//返回元素1在数组中第一次出现的索引，没有则返回-1；
var n10 = aList.splice(2,1,7,8,9);//从第2个元素开始，删除1个元素，然后在此位置增加‘7,8,9‘三个元素注意点：
aList.join("") // 快速拼接成字符串；
aList.push(5,6,9); // 一次性添加多个成员
aList.pop(2); // 2是没有作用的，里面的任何参数都不会起作用，但不会报错；
aList.unshift(5,8,9);// 在前面一次性增加多个数据
aList.shift(5); //没有效果，这里没有参数，但不会报错。
aList.splice(2); //一个参数时，删除角标2后面的所有元素，包括角标2的元素；
aList.splice(2,1); //两个参数代表从角标2后（包括角标）删除1个元素;
var sName = "abcdfg";
var iNmr = "123456";
var s1 = sName + "dfgh"; //字符串合并操作：“ + ”
var sx = sName[0];//获取字符串角标为0的字符
var s2 = parseInt(iNmr) //将数字字符串转化为整数,得到新的数据
var s3 = parseFloat(iNmr) //将数字字符串转化为小数
var s4 = sName.split() //把一个字符串分隔成字符串组成的数组
var s5 = sName.charAt(3) //获取字符串中角标为3的字符
var s6 = sName.indexOf("g") //查找字符串是否含有某字符,如果没有就返回-1，有返回第一次出现的角标
var s7 = sName.substring() //截取字符串
var s8 = sName.toUpperCase() // 字符串转大写
var s9 = sName.toLowerCase() // 字符串转小写
var sName = "abcdfg";
var s4 = sName.split() //参数为空时返回数组["abcdfg"]
var s4 = sName.split("") //参数为空字符返回数组["a","b","c","d","f","g"];
var s3 = parseFloat("5.6") // s3=5.59999999995,该方法转换数据时存在一定的精度问题
var s3 = parseFloat("5.6")*100/100; // s3 = 5.6
var s7 = sName.substring(start,end)// start为开始的字符串下标，end为结束下标，新的字符串包含start不包含end。
var s7 = sName.substring(start,)
var s7 = sName.substring(start) //以上两种写法可获取从start角标到最后的所有字符；
var str = ‘abcdefg‘;
//先切割成数组，翻转后拼接成字符串。
var str2 = str.split(‘‘).reverse().join(‘‘);for(var i=0;i<length;i++)
{
......
}while(i<length){
......
i++;
}一个扩展应用：数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++)
{
if (aList2.indexOf(aList[i]) == -1) {
aList2.push(aList[i]);
}
}//对数组进行遍历，如果数据在新的数组中不存在就加入。
alert(‘12‘+7); //将7转换成"7",弹出127
alert(parseInt(‘1‘) + 7 ); //转换后，弹出8
alert(parseInt(5.6)); // 去掉小数部分，不是四舍五入，弹出5
alert(‘5.6‘+2.3); // 2.3转换成"2.3"，弹出5.62.3
alert(0.1+0.2); //弹出 0.3000000000000004，精度有问题
alert((0.1*100+0.2*100)/100); //弹出0.3，需要计算处理一下
"4" == 4; //判断为真，==将"4"转换成4；
"3"-2; //结果1；
var s1 = parseInt(‘123abc‘) //结果为123
alert( parseInt(‘abc123‘) ); // 弹出NaN
//说明:以数字开头的字符串通过函数可以转换其中的数字为整形，如果不是开头 则转换失败
alert(isNaN(123abc)) //弹出true
//isNAN（string）：判断是否是纯数字，是返回false,不是返回true
null==undefined:涉及隐式转换，null和undefind都被当做false处理，判断为真
null===undefined:判断为flase，null为Object类型，undefined类型是其本身
!(null):判断为真
!(undefined):判断为真
typeof（）：查看数据类型alert("xxxx")//输出弹窗，但是阻止程序继续运行
console.log()//在控制台输出内容
document.title == "xxxx"//覆盖网页的标题，很少使用
document.write("xxxx")//覆盖body的内容，很少使用
作用：制作动画和异步操作
var time1 = setTimeout(function,1000) //只执行一次的定时器,第一个参数为函数，第二个参数为定时时间，单位ms
clearTimeout(time1) //关闭只执行一次的定时器
var time2 = setInterval(function,1000) // 反复执行的定时器
clearInterval(time2) //关闭反复执行的定时器
注意：反复执行的定时器一旦开启就不会停止，相当于启动了一个线程，会一直消耗cup资源，所有很多时候需要手动关闭。
var timer1 = setInterval(func1,2000);
function funnc1(){
console.log("hhhh");
clearInterval(timer1); //关闭定时器在函数内部
}
//clearInterval(timer1);在外部是无效的注意：关闭定时器的操作需要在定时器函数的内部执行，否则不会成功。
function myalert(){
alert(‘ok!‘);//弹出OK的窗口
}说明：用function定义，其他的写法和java一样。
// 匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert(‘ok!‘);
}说明：匿名函数不能单独存在，必须用一个变量将其引用。
定义：一个打开网页就立即执行的函数 。
作用：当需要在原来的代码基础上增加新的函数时，如果函数名相同，新的函数会覆盖原来的函数，为了避免覆盖，将后一个函数写成封闭函数，一开始就运行。
//写法一
(function(){
......
})();
//写法二
!function(){
.....
}()
//写法三
~function(){
.....
}()function myalert(a,b){
//return a+b;
return [a,b]
}
myalert(1,2);
说明：返回多个参数时需要使用一个数组，不可以直接写return a，b；否则报错！
说明：return关键字可以结束函数运行、阻止程序的默认行为。
Array数组对象
创建:
var arr = new Array(元素列表);、
var arr = new Array(长度)
var arr = [元素列表];
方法;
join();将数组中的元素，按照一定的分隔符拼接为字符串
push（）：向数组的末尾添加一个元素或者多个，并返回新的长度
属性：
length：长度
注意：js中的数组长度是可变的，元素类型也是可以改变的
3、Date对象
创建：
var date = new Date();
方法：
toLocaleString：本地时间格式
getTime：毫秒值
4、Math对象
5、RegExp对象
var reg = new Reg("正则表达式")
reg.test();
JavaScript BOM：
window：所有跟window相关的方法和属性 都可以省略掉window 直接使用
弹框：
警告框：alert()
提示框：pormpt（）
确定：返回输入值 取消：null
确认框：
confirm()
确定：true 取消：fasle
open():打开一个新的网页
close():关闭当前网页
<button onclick="window.close()">点</button>
定时器：
setTimtout(code,mills):延时多久时间后，执行一次
var id= window.setTimeout(function () {
alert("hello java")
},3000)
setInterval():每个多少时间，执行一次
clearTimeout（定时器的id）
clearInterval（定时器id）
注意：code可以是一段代码，也可以是一个方法
location：
href：设置或者获取url
location.href = "http://www.baidu.com"
reload():刷新
history：
back() :后退
forward():前进
go():
go(-1):后退
go(1)：前进
JavaScript DOM:
在每个加载到浏览器的html文档 都会对应的形成一个document树
document对象 可以访问文档中的任意元素
节点（Node）
文档节点：document
元素节点：element
属性节点：attribute
文本节点：text
注意：如果我们可以获取到节点 那么就可以动态的修改节点的属性和方法
获取节点的方式：
getElementById()：通过id获取
getElementsByClassName（）：通过class名
getElementsByName：通过name名获取
getElementsByTagName（）；通过标签名获取
设置获取节点的value：
节点对象.value;
节点对象.value= 值
设置获取节点的标签体
节点对象.innerHTML
节点对象.innerHTML = 值
innerHTML和innerText
innerText只针对于文本，如果文本中有html标签 ，会原样输出
innerHTML：如果文本中有html标签 ，会解析以后输出
设置获取节点的style属性
节点对象.style.属性；
节点对象.style.属性 = 值
设置获取节点的属性
节点对象.属性；
节点对象.属性 = 值
创建节点对象
document.createElement():创建元素节点
添加元素：
appendChild()
document.createTextNode():创建文本节点
添加文本节点：
appendChild()
document.createAttribute():创建属性节点
添加属性节点：
setAttributeNode()
事件介绍:
概念：某些组件，执行某些操作以后，触发了某一段代码的执行
事件：某些操作，单击，双击，按下，移动……
事件源：组件
监听器：代码
注册监听：将事件和事件源，监听器整合在一起的过程
常见事件:
1、点击事件
单击：onclick
双击：ondblclick
事件绑定：
1、通过标签本身的相关属性设置
<button id="btn1" class="aa" onclick="add1()" value="添加元素节点">点击</button>
2、通过element对象绑定事件
document.getElementById("btn2").ondblclick = function (ev) {
add2();
}
2、焦点事件
获取焦点：onfocus
失去焦点：onblur
//失去焦点
function a() {
var elementById = document.getElementById("in");
elementById.style.background = "red";
}
//获取焦点
function b() {
var elementById = document.getElementById("in");
elementById.style.background = "black";
}
3、加载事件
onload：页面加载完成触发
window.onload = function (ev) {}
4、鼠标事件
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseup 鼠标按键被松开。
5、键盘事件
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onkeydown：键盘上的所有按键
onkeypress：无法识别系统按键（回车，箭头）
6、选择和改变
onchange：内容改变
onselect：文本被选择
7、表单事件
onsubmit ：提交
标签：rev 设置 var 控制 命名法 param 自己 red 防止
原文地址：https://www.cnblogs.com/lyhhary/p/hary.html
