JavaScript 杯酒温基础！
转载请注明出处：http://blog.csdn.net/smartbetter/article/details/52765412
今天重温了下Javacript，给大家带来一篇JavaScript博文。相信很多人对于JavaScript都情有独钟，今天我们全面的学习下。说JavaScript（下面简称js）是世界上最流行的脚本语言一点也不为过，js是可以嵌入到html中的一种基于对象和事件驱动的脚本语言，下来我们看看js的特点和用途：
特点：交互性，安全性（js不能访问本地磁盘），跨平台（浏览器中都具备js解析器）
用途：js能动态的修改(增删)html和css的代码，能动态的校验数据
js被引入的方式：
（1）内嵌脚本
<input type="button" value="button" onclick="alert('xx')" /> （2）内部脚本
<script type="text/javascript"> alert("xxx"); </script>（3）外部脚本
首先先创建一个js文件，其次在html中引入
<script type="text/javascript" src="default.js"></script>js代码在不影响html功能的前提下越晚加载越好（优化页面加载）。
1.js基本语法
（1）变量
var x = 5; x = 'js'; var y = "hello"; var b = true;（2）基本数据类型
number：数字类型，string：字符串类型，boolean：布尔类型，null：空类型，underfind：未定义
注意：number、boolean、string是伪对象
类型转换：
number\boolean转成string
toString();
string\boolean转成number
parseInt()
parseFloat()
boolean不能转
string可以将数字字符串转换成number 如果“123abc” 转成123
强制转换：
Boolean() 强转成布尔
数字强转成布尔，非零就是true，零就是false
字符串强转成布尔，非""(空字符串)就是true，空字符串""就是false
Number() 强转成数字
布尔转数字，true转成1，false转成0
字符串转数字，不能强转
（3）引用数据类型
java: Object obj = new Object();
js: var obj = new Object();
var num = new Number();
（4）运算符
1）赋值运算符
var x = 5;
2）算数运算符
+ - * / %
+: 遇到字符串变成连接
-：先把字符串转成数字然后进行运算
*: 先把字符串转成数字然后进行运算
/: 先把字符串转成数字然后进行运算
3）逻辑运算符
&& ||
4）比较运算符
< > >= <= != ==
===: 全等：类型与值都要相等
5）三元运算符
3<2?"大于":"小于"
6）void运算符
<a href="javascript:void(0);">xx</a>7）类型运算符
typeof：判断数据类型 返回我的数据类型
instanceof：判断数据类型 是否是某种类型
var obj = new Object();
alert(typeof obj); //object
alert(obj instanceof Object); //true（5）逻辑语句
(1)if-else
if(9){
alert("true--");
}else{
alert("false--");
}
(2)switch
var x = "js";
switch(x){
case "css":
alert("css"); break;
case "js":
alert("js"); break;
default:
alert("def");
}
(3)for
for(var i = 0;i<5;i++){
alert(i);
}
(4)for in
var arr = [1,2,3,4,"js"];
for(index in arr){ //index代表角标
//alert(index);
alert(arr[index]);
}2.js内建对象
（1）Number
创建方式：
var myNum=new Number(value);
var myNum=Number(value);
属性和方法：
toString():转成字符串
valueOf()：返回一个 Number 对象的基本数字值
（2）Boolean
创建方式：
var bool = new Boolean(value);
var bool = Boolean(value);
属性和方法：
toString():转成字符串
valueOf()：返回一个 Boolean 对象的基本值(boolean)
（3）String
创建方式：
var str = new String(s);
var str = String(s);
属性和方法：
length:字符串的长度
charAt():返回索引字符
charCodeAt:返回索引字符unicode
indexOf():返回字符的索引
lastIndexOf();逆向返回字符的索引
split();将字符串按照特殊字符切割成数组
substr():从起始索引号提取字符串中指定数目的字符
substring():提取字符串中两个指定的索引号之间的字符
toUpperCase();转大写
（4）Array
创建方式：
var arr = new Array();//空数组
var arr = new Array(size);//创建一个指定长度的数据
var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
var arr = [];//空数组
var arr = [1,2,5,"java"];//创建数组直接实例化元素
属性和方法：
length:数组长度
join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
pop():删除并返回最后元素
push()：向数组的末尾添加一个或更多元素，并返回新的长度
reverse();反转数组
sort();排序
（5）Date
创建方式：
var myDate = new Date();
var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
属性和方法：
getFullYear():年
getMonth():月 0-11
getDate():日 1-31
getDay()：星期 0-6
getTime():返回2000年1月1日午夜到指定日期（字符串）的毫秒数
toLocalString();获得本地时间格式的字符串
（6）Math
创建方式：
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，
不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
属性和方法：
PI：圆周率
abs():绝对值
ceil():对数进行上舍入
floor():对数进行下舍入
pow(x,y)：返回 x 的 y 次幂
random():0-1之间的随机数
round():四舍五入
（7）RegExp
创建方式：
var reg = new RegExp(pattern);
var reg = /^正则规则$/;
规则的写法：
[0-9]
[A-Z]
[a-z]
[A-z]
\d 代表数据
\D 非数字
\w 查找单词字符
\W 查找非单词字符
\s 查找空白字符
\S 查找非空白字符
n+ 出现至少一次
n* 出现0次或多次
n? 出现0次或1次
{5} 出现5
{2,8} 2到8次
方法：
test(str):检索字符串中指定的值。返回 true 或 false
需求-校验邮箱：
var email = [email protected]
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
reg.test(email);
3.js的函数
（1）js函数定义的方式
1）普通方式
语法：function 函数名( 参数列表 ){ 函数体 }
示例：
function method(){
alert("xx");
}
method();2）匿名函数
语法：function(参数列表){函数体}
示例：
var method = function(){ alert("yy"); };
method();3）对象函数
语法：new Function(参数1,参数2,…,函数体);
注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
示例：
var fn = new Function("a","b","alert(a+b)");
fn(1,2);（2）函数的参数
1）形参没有var去修饰
2）形参和实参个数不一定相等
3）arguments对象 是个数组 会将传递的实参进行封装
function fn(a,b,c){
//var sum = a+b+c;
//alert(sum);
//arguments是个数组 会将传递的实参进行封装
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
fn(1,2,3,4);（3）返回值
1）在定义函数的时候不必表明是否具有返回值
2）返回值仅仅通过return关键字就可以了 return后的代码不执行
function fn(a,b){
return a+b;
//alert("xx");
}
alert(fn(2,3));（4）js的全局函数
1）编码和解码
encodeURI()//编码 decodeURI()//解码
encodeURIComponet() decodeURIComponent()
escape() unescape()
三者区别：进行编码的符号范围不同，实际开发中常使用第一种
2）强制转换
Number()
String()
Boolean()
3）转成数字
parseInt()
parseFloat()
4）eval()方法
将字符串当作脚本进行解析运行
//var str = "var a=2;var b=3;alert(a+b)";
//eval(str);
function print(str){
eval(str);
}
print("自定义逻辑");4.js的事件
事件，事件源，响应行为
（1）js的常用事件
onclick：点击事件
onchange：域内容被改变的事件
需求：实现二级联动
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
</select>
<select id="area">
<option>海淀</option>
<option>朝阳</option>
</select>
<script type="text/javascript"> var select = document.getElementById("city"); select.onchange = function(){ var optionVal = select.value; switch(optionVal){ case 'bj': var area = document.getElementById("area"); area.innerHTML = "<option>海淀</option><option>朝阳</option>"; break; case 'tj': var area = document.getElementById("area"); area.innerHTML = "<option>南开</option><option>河西</option>"; break; default: alert("error"); } }; </script>onfoucus：获得焦点的事件
onblur：失去焦点的事件
需求： 当输入框获得焦点的时候，提示输入的内容格式，当输入框失去焦点的时候，提示输入有误
<label for="txt">name</label>
<input id="txt" type="text" /><span id="action"></span>
<script type="text/javascript"> var txt = document.getElementById("txt"); //onfocus：为txt绑定事件 txt.onfocus = function(){ //友好提示 var span = document.getElementById("action"); span.innerHTML = "用户名格式最小8位"; span.style.color = "green"; }; txt.onblur = function(){ //错误提示 var span = document.getElementById("action"); span.innerHTML = "对不起 格式不正确"; span.style.color = "red"; }; </script>onmouseover：鼠标悬浮的事件
onmouseout：鼠标离开的事件
需求：div元素 鼠标移入变为绿色 移出恢复原色
#d1{background-color: red;width:200px;height: 200px;}
<div id="d1"></div>
<script type="text/javascript"> var div = document.getElementById("d1"); div.onmouseover = function(){ this.style.backgroundColor = "green"; }; div.onmouseout = function(){ this.style.backgroundColor = "red"; }; </script>onload:加载完毕的事件
需求：等到页面加载完毕在执行onload事件所指向的函数
<span id="span"></span>
<script type="text/javascript"> window.onload = function(){ var span = document.getElementById("span"); alert(span); span.innerHTML = "hello js"; }; </script>（2）事件的绑定方式
1）将事件和响应行为都内嵌到html标签中
<input type="button" value="button" onclick="alert('xx')"/>2）将事件内嵌到html中而响应行为用函数进行封装
<input type="button" value="button" onclick="fn()" />
<script type="text/javascript"> function fn(){ alert("yy"); } </script>3）将事件和响应行为 与html标签完全分离
<input id="btn" type="button" value="button"/>
<script type="text/javascript"> var btn = document.getElementById("btn"); btn.onclick = function(){ alert("zz"); }; </script>this关键字：this经过事件的函数进行传递的是html标签对象
<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
<script type="text/javascript"> function fn(obj){ alert(obj.name); } </script>（3）阻止事件的默认行为
IE：window.event.returnValue = false;
W3C: 传递过来的事件对象.preventDefault();
//IE：window.event.returnValue = false;
//W3C：传递过来的事件对象.preventDefault();
//W3C标准
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE标签
}else{
alert("ie");
window.event.returnValue = false;
}
//通过事件返回false也可以阻止事件的默认行为
<a href="demo11.html" onclick="return false">点击我吧</a>（4）阻止事件的传递
IE：window.event.cancelBubble = true;
W3C: 传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE标签
}else{
alert("ie");
window.event.cancelBubble = true;
} 5.js的BOM
BOM（Browser Object Model），浏览器对象模型。主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript 扩展都被看做BOM的一部分。
(1)window对象
弹框的方法：
提示框：alert("提示信息");
确认框：confirm("确认信息");
有返回值：如果点击确认返回true 如果点击取消 返回false
var res = confirm("您确认要删除吗");
alert(res);
输入框：prompt("提示信息");
有返回值：如果点击确认返回输入框的文本 点击取消返回null
var res = prompt("请输入字符");
alert(res);
open方法：
window.open("url地址");
open("../index.html");
定时器：
setTimeout(函数,毫秒值);
setTimeout(
function(){
alert("xx");
},3000
);
clearTimeout(定时器的名称);
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
};
fn();
setInterval(函数,毫秒值);
clearInterval(定时器的名称)
var timer = setInterval(
function(){
alert("nihao");
},2000
);
var closer = function(){
clearInterval(timer);
};
需求：注册后5秒钟跳转首页，恭喜您注册成功
<span id="second" style="color: red;">5</span>秒后跳转到首页，如果不跳转请<a href="../index.html">点击这里</a>
<script type="text/javascript"> var time = 5; var timer; timer = setInterval( function(){ var second = document.getElementById("second"); if(time>=1){ second.innerHTML = time; time--; }else{ clearInterval(timer); location.href="../ok.html"; } },1000 ); </script>(2)location
location.href="url地址";
(3)history
back(); forward(); go();
<a href="demo2.html">后一页</a>
<input type="button" value="上一页" onclick="history.back()">
<input type="button" value="下一页" onclick="history.forward()">
<input type="button" value="上一页" onclick="history.go(-1)">
<input type="button" value="下一页" onclick="history.go(1)">6.js的DOM
DOM（Document Object Model），文档对象模型。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使得你可以访问页面其他的标准组件。
（1）理解文档对象模型
html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
在dom树当中，一切皆为节点对象
（2）DOM方法和属性
1）DOM方法
查找元素节点：
getElementById() ：返回值id属性值的元素节点，如果不存在返回null。
例如：var inputNode = document.getElementById("id");
getElementsByName()：返回name属性所有元素的节点集合，这个集合可以当作一个数组来处理，
length属性等于当前文档里有着给定name属性的所有元素的总个数。
getElementsByTagName()：返回给定标签名所有元素的节点集合，这个集合可以当作一个数组来处理，
length属性等于当前文档里有着给定标签名的所有元素的总个数。
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
查看是否存在子节点：
hasChildNodes()：用来检查一个元素是否有子节点，返回值是true或false。
2）DOM属性
nodeName：一个字符串，其内容是给定节点的名字。
例如：var name = node.nodeName;
如果节点是元素节点，nodeName返回这个元素的名称
如果是属性节点，nodeName返回这个属性的名称
如果是文本节点，nodeName返回一个内容为#text的字符串
注：nodeName是一个只读属性。
nodeType：返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
注：nodeType是一个只读属性。
nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个属性节点，返回这个属性的值。
如果给定节点是一个文本节点，返回这个文本节点的内容。
如果给定节点是一个元素节点，返回null
注：nodeValue是一个读/写属性，但不能对元素节点的nodeValue属性设置值，但可以为文本节点的nodeValue属性设置一个值。
var v = document.getElementById(“v”);
if(v.firstChild.nodeType == 3)
v.firstChild.nodeValue = “测试”;
下来我们具体看看元素节点、属性节点、文本节点：
元素节点：
//测试元素节点,输出节点名称,节点的类型,节点的值
var liElements=document.getElementsByTagName("v");
for(var i=0;i<liElements.length;i++){
alert(liElements[i].nodeName);
alert(liElements[i].nodeType);
alert(liElements[i].nodeValue);
}属性节点：
//测试属性节点,输出属性节点名称,节点的类型,节点的值
var liElements=document.getElementsByTagName("v");
for(var i=0;i<liElements.length;i++){
var attrElement=liElements[i].getAttributeNode("value")
alert("attrElement.nodeName "+attrElement.nodeName);
alert("attrElement.nodeType "+attrElement.nodeType);
alert("attrElement.nodeValue "+liElements[i].getAttribute("value"));
}文本节点：
//测试元素节点,输出节点名称,节点的类型,节点的值
var liElements=document.getElementsByTagName("v");
for(var i=0;i<liElements.length;i++){
alert(liElements[i].childNodes[0].nodeName);
alert(liElements[i].childNodes[0].nodeType);
alert(liElements[i].childNodes[0].nodeValue);
liElements[i].childNodes[0].nodeValue="北京";
alert(liElements[i].childNodes[0].nodeValue);
//另一种读取方法
alert(liElements[i].firstChild.nodeName);
alert(liElements[i].firstChild.nodeType);
alert(liElements[i].firstChild.nodeValue);
}好了，就介绍到这里，各位看官没事留个言，赞一个，哈~。