一、js的简介
1、js是什么 js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言 特点： (1)交互性 (2)安全性：js不能访问本地磁盘 (3)跨平台：浏览器中都具备js解析器 2、js能做什么 (1)js能动态的修改(增删)html和css的代码 (2)能动态的校验数据 3、js历史及组成 ECMAScript BOM(浏览器对象模型) DOM(文档对象模型) 4、js被引入的方式 (1)内嵌脚本 <input type="button" value="button" οnclick="alert('xxx')" /> (2)内部脚本 <script type="text/javascript"> alert("xxx"); </script> (3)外部脚本 首先先创建一个js文件 其次在html中引入 <script type="text/javascript" src="demo1.js"></script> js代码放在哪？ 放在哪都行 但是在不影响html功能的前提下 越晚加载越好二、js基本语法 1、变量 (1) var x = 5; x = 'javascript'; var y = "hello"; var b = true; (2) x = 5; 2、原始数据类型 (1)number:数字类型 (2)string：字符串类型 (3)boolean:布尔类型 (4)null:空类型 (5)underfind:未定义 注意：number、boolean、string是伪对象 类型转换： number\boolean转成string toString(); string\boolean转成number parseInt() parseFloat() boolean 不能转 string 可以将数字字符串转换成number 如果“123a3sd5” 转成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);">xxxxxx</a> (7)类型运算符 typeof:判断数据类型 返回我的数据类型 instanceof：判断数据类型 是否是某种类型 var obj = new Object(); alert(typeof obj);//object alert(obj instanceof Object);//true 5、逻辑语句 (1)if-else //条件: //数字非0 字符串非空====true if(9){ alert("true--"); }else{ alert("false--"); } (2)switch var x = "java"; switch(x){ case "css": alert("css"); break; case "js": alert("js"); break; case "java": alert("java"); break; default: alert("def"); } (3)for for(var i = 0;i<5;i++){ alert(i); } (4)for in var arr = [1,3,5,7,"js"]; for(index in arr){//index代表角标 //alert(index); alert(arr[index]); }三、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():返回1970年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 = haohao_827@163.com var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/; reg.test(email);四、js的函数 1、js函数定义的方式 (1)普通方式 语法：function 函数名(参数列表){函数体} 示例： function method(){ alert("xxx"); } method(); (2)匿名函数 语法：function(参数列表){函数体} 示例： var method = function(){ alert("yyy"); }; method(); (3)对象函数 语法：new Function(参数1,参数2,...,函数体); 注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式 示例： var fn = new Function("a","b","alert(a+b)"); fn(2,5); 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,4,8); 3、返回值 (1)在定义函数的时候不必表明是否具有返回值 (2)返回值仅仅通过return关键字就可以了 return后的代码不执行 function fn(a,b){ return a+b; //alert("xxxx"); } 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("自定义逻辑");五、js的事件 事件 事件源 响应行为 1、js的常用事件 onclick:点击事件 onchange:域内容被改变的事件 需求：实现二级联动 <select id="city"> <option value="bj">北京</option> <option value="tj">天津</option> <option value="sh">上海</option> </select> <select id="area"> <option>海淀</option> <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><option>东城</option>";
break;
case 'tj':
var area = document.getElementById("area"); area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>"; break; case 'sh': 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"); 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{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" οnclick="alert('xxx')"/> (2)将事件内嵌到html中而响应行为用函数进行封装 <input type="button" value="button" οnclick="fn()" /> <script type="text/javascript"> function fn(){ alert("yyy"); } </script> (3)将事件和响应行为 与html标签完全分离 <input id="btn" type="button" value="button"/> <script type="text/javascript"> var btn = document.getElementById("btn"); btn.onclick = function(){ alert("zzz"); }; </script> ****this关键字 this经过事件的函数进行传递的是html标签对象 <input id="btn" name="mybtn" type="button" value="button123" οnclick="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" οnclick="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; } 六、js的bom (1)window对象 弹框的方法： 提示框：alert("提示信息"); 确认框：confirm("确认信息"); 有返回值：如果点击确认返回true 如果点击取消 返回false var res = confirm("您确认要删除吗？"); alert(res); 输入框：prompt("提示信息"); 有返回值：如果点击确认返回输入框的文本 点击取消返回null var res = prompt("请输入密码？"); alert(res); open方法： window.open("url地址"); open("../jsCore/demo10.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="../jsCore/demo10.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="../jsCore/demo10.html"; } }, 1000 ); </script> (2)location location.href="url地址"; (3)history back(); forward(); go(); <a href="demo7.html">后一页</a> <input type="button" value="上一页" οnclick="history.back()"> <input type="button" value="下一页" οnclick="history.forward()"> <input type="button" value="上一页" οnclick="history.go(-1)"> <input type="button" value="下一页" οnclick="history.go(1)">