js（JavaScript）
一.js的简介
1.什么是js
js可以嵌套到HTML中（基于对象）和（事件触发）的脚本语言
特点
A.交互性
B.安全性 js不能直接访问本地磁盘
C.跨平台 浏览器只要具备js解析器
2.js能干嘛
1）js动态修改（新增、删除）HTML标签和CSS代码
2）js动态做校验数据
3）js的历史及组成
ECMAScript(js的基本语法和对象) BOM(浏览器对象模型) DOM(文档对象模型)
4）js的引用方式
A.内嵌脚本
<input type="button" value="button" οnclick="alert('XXX')"/>
B.内部脚本
<input type="button" value="button"/>
<script type="text/javascript">
alert('XXX');
</script>
C.外部脚本
1.创建一个js文件
2.在HTML中引入js脚本
<input type="button" value="button"/>
<script type="text/javascript" src="demo1.js"></script>
总结：
1.JS往哪儿放
在不影响HTML页面加载效果情况下，越晚加载越好
2.编程建议 <script>引入外部文件的时候 标签中不建议写脚本内容
二.js的基本语法
1)变量
var a=12;
a="javascript";
a='哈哈';
var b=true;
2)原始数据类型(了解)
1)number:数字类型
2)string:字符串类型
3)boolean:布尔类型
4)null:空类型
5)undefined:未定义的
注意：
number string boolean 伪对象
数据类型转换
number boolean 转 string
toString()
string boolean 转 number
parseInt()
parseFloat()
boolean类型 parseInt() 不能转 number NaN
string类型 parseInt()可以转 number '123哈哈456' 转'123'
string number 转 boolean
Boolean()
number转 boolean 可以 非0为true 0为false
string转boolean 可以 非空为true 空为false
string boolean 转 number
Number()
boolean类型 Number() 可以转 number true 1 false 0
string类型 Number() 如果是数字可以转 如果 '123哈哈' 转换结果 NaN
3)引用数据类型
java:Object obj=new Object();
js: var obj=new Object();
4)运算符
1.赋值运算符
=
var a=5;
2.算术运算符
+ - * / % ++ --
+:遇到字符串 连接符 拼接
-:遇到字符串 转为数字 Number() 再计算
*:遇到字符串 转为数字 Number() 再计算
/:遇到字符串 转为数字 Number() 再计算 7/2=3.5 number
3.逻辑运算符
&& ||
4.比较运算符
> < >= <= == !=
== ：忽略数据类型的 值比较
===：全等 比较值与数据类型
5.三目运算符
3>2?"大于":"小于"
6.void运算符
<a href="javascript:void(0)">点击我吧</a>
7.类运算符
typeof() :判断数据类型 返回 数据的该类型
instanceof:判断类型 返回 布尔值
alert(typeof(obj));//object
alert(obj instanceof Object);//true
5)逻辑语句
if:条件
number转 boolean 可以 非0为true 0为false
string转boolean 可以 非空为true 空为false
switch:
jdk1.7 string
for:
for in *****
var arr=[1,2,3,"aa",true];
for(index in arr){
alert(arr[index]);
}
三.js的内置对象
1.Number
var myNum=new Number(value);
var myNum=Number(value);
方法：
toString 把数字转换为字符串，使用指定的基数。
valueOf 返回一个 Number 对象的基本数字值。
2.Boolean
var flag=new Boolean(value); //构造函数
var flag=Boolean(value); //转换函数
方法：
toString() 把逻辑值转换为字符串，并返回结果。
valueOf() 返回 Boolean 对象的原始值。
3.String
new String(s);
String(s);
方法
length 字符串的长度
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
split() 把字符串分割为字符串数组。
substring() 提取字符串中两个指定的索引号之间的字符。
substr() 从起始索引号提取字符串中指定数目的字符。
toUpperCase() 把字符串转换为大写
4.Array
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
var arr=[];
var arr=[1,"aa"];
属性：
length 设置或返回数组中元素的数目。
方法：
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
sort() 对数组的元素进行排序
5.Date
var myDate=new Date()
方法
getFullYear() 从 Date 对象以四位数字返回年份
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 ****
6.Math
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，
像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把
Math 作为对象使用就可以调用其所有属性和方法。
方法：
PI 返回圆周率（约等于3.14159）。
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。
sqrt(x) 返回数的平方根。
pow(x,y) 返回 x 的 y 次幂。 **
random() 返回 0 ~ 1 之间的随机数。 ***
7.RegExp
var reg=new RegExp(pattern);
可选参数： attributes
var reg=/^正则表达式$/
属性方法：
[0-9]:数字
[A-Z]:A-Z
[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 检索字符串中指定的值。返回 true 或 false
四.js的函数
1.js函数定义方式
A.普通函数
语法：
function 函数名(参数列表){函数体}
实例：
function method(){
alert("XXX");
}
method();
B.匿名函数(闭包)
语法：
var 函数名=function(){}
案例：
var method=function (){
alert("XXX");
}
method();
C.对象函数(了解)
语法：
new Function(参数1,参数2，参数3);
注意点：
1.形参只能是string类型 ,最后一个只能是函数体
2.函数体也是string
案例：
var fn=new Function("a","b","alert(a+b)");
fn(2,22);
2.函数中的参数问题
1.形参不用var来修饰
2.形参和是实参个数可以不一样(只多不少)
案例：
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,5);
3.函数中返回值问题
1.定义函数的时候不用定义返回值类型 var
2.返回值可以通过return体现
案例：
function fn(a,b){
return a+b;
}
alert(fn(2,3));
4.js中的全局函数
1）编码问题
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURIComponent() 把字符串编码为 URI 组件。
unescape() 对由 escape() 编码的字符串进行解码。
escape() 对字符串进行编码。
2）强转
parseInt()
parseFloat()
3)
Number()
Boolean()
4)*****
eval(); 计算 javascript字符串 把它们作为脚本代码执行
五.js的事件****
事件
事件源
响应行为
1)事件的绑定方式***
A.将事件与响应行为内嵌到HTML代码中
<input type="button" value="button" οnclick="alert('XXX')"/>
B.将事件内嵌到HTML代码中，将响应行为封装成函数**
<input type="button" value="button" οnclick="fn()"/>
<script type="text/javascript">
function fn(){
alert('XXX');
}
</script>
C.事件与响应结果完全从HTML分离出来***
<input type="button" value="button123" id="btn"/>
<script type="text/javascript">
var btn=document.getElementById("btn");
//alert(btn.value);
btn.οnclick=function fn(){
alert('XXX');
}
</script>
2)常用的事件
A.onclick()点击事件
B.onchange()用户改变域的内容
当用户改变域内容会触发该事件
实现二级菜单联动
案例：
<body>
<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>
</body>
<script type="text/javascript">
var city=document.getElementById("city");
city.οnchange=function(){
var option=city.value;
// alert(option);
switch(option){
case 'bj':
var area= document.getElementById("area");
area.innerHTML="<option value='cp'>昌平区</option><option value='hd'>海淀区</option><option value='cy'>朝阳区</option>";
break;
case 'tj':
var area= document.getElementById("area");
area.innerHTML="<option value='tg'>塘沽区</option><option value='nk'>南开区</option>";
break;
case 'sh':
var area= document.getElementById("area");
area.innerHTML="<option value='pd'>浦东区</option>";
break;
}
}
</script>
C.onblur 元素失去焦点
onfocus 元素获得焦点
案例：
<body>
<label for="txt">用户名:</label>
<input type="text" name="username" id="txt"/><span id="active"></span>
</body>
<script type="text/javascript">
var txt=document.getElementById("txt");
//元素获取焦点事件
txt.οnfοcus=function(){
//绑定友好提示
var span= document.getElementById("active");
span.innerHTML="用户名最少长度是六位";//动态绑定文字
span.style.color="green";
}
//元素失去焦点事件
txt.οnblur=function(){
//绑定友好提示
var span= document.getElementById("active");
//alert(txt.value);
if(txt.value.length<6){
span.innerHTML="对不起您的格式有误";
span.style.color="red";
}else{
span.innerHTML="√";
span.style.color="green";
}
}
</script>
D.onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
案例：
<body>
<div id="d1">div</div>
</body>
<script type="text/javascript">
var div=document.getElementById("d1");
div.οnmοuseοver=function(){
this.style.backgroundColor="green";
}
div.οnmοuseοut=function(){
this.style.backgroundColor="red";
}
</script>
E.
onload 某个页面或图像被完成加载
等待页面加载完成之后，在执行onload事件里面的代码
案例：
<script type="text/javascript">
window.οnlοad=function(){
var span =document.getElementById("s");
span.innerHTML="HELLOJS";
}
</script>
</head>
<body>
<span id="s"></span>
</body>
3)阻止事件的默认行为
IE:window.event.returnValue=false;(IE低版本)
w3c:传递过来的事件对象.preventDefault();
案例：
<body>
<!-- <a href="http://www.baidu.com">点击我吧</a> -->
<!-- <a href="demo1.html" οnclick="fn(event)">点击我吧</a> -->
<a href="demo1.html" οnclick="return false">点击我吧</a>
</body>
<script type="text/javascript">
function fn(e){
//IE:window.event.returnValue=false;(IE低版本)
//w3c:传递过来的事件对象.preventDefault();
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();//return false;
}else{
alert("ie");
window.event.returnValue=false;
}
}
</script>
4）js中的冒泡事件 阻止事件传播
IE:window.event.cancelBubble=true;//IE低版本
w3c:传递过来的事件对象.stopPropagation();
案例：
<body>
<div οnclick="fn1()" style="width: 100px; height: 100px; background-color: blue; padding: 50px;">
<div οnclick="fn2(event)" style="width: 100px; height: 100px; background-color: red;">
XXX
</div>
</div>
</body>
<script type="text/javascript">
function fn1(){
window.alert("fn1");
}
function fn2(e){
//window.alert("fn2");
// IE:window.event.cancelBubble=true;//IE低版本
// w3c:传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
alert("fn2");
e.stopPropagation();
}else{
alert("ie");
alert("fn2");
window.event.cancelBubble=true;
}
}
</script>
六.js的BOM
BOM(浏览器对象模型)
alert();
window.alert();
1)window对象
弹框方式
提示弹框 alert();
确认弹框 confirm();
确认弹框有返回值：点击确定 true 点击取消（叉） false
输入弹框 prompt();
输入框有返回值 ：点击确定返回输入框的值 点击取消 null ""
open()
案例：
window.open("../jsCode/demo1.html");
定时器
A.setTimeout(函数,毫秒值); 过多少毫秒值后调用该函数 （只调用一次）
案例：
window.setTimeout(function() {
alert("XXX");
}, 3000);
B. clearTimeout(参数);
案例：
<body>
<input type="button" value="button" οnclick="closer()"/>
</body>
<script type="text/javascript">
/* window.setTimeout(function() {
alert("XXX");
}, 3000); */
var timer;
var fn=function(){
alert("XXX");
timer=setTimeout(fn, 3000);
}
var closer=function(){
window.clearTimeout(timer);
}
fn();
</script>
C.setInterval(函数，毫秒值);//过多少毫秒之后 重复调用该函数
clearInterval(参数);清除定时任务
案例：
<body>
<input type="button" value="button" οnclick="closer()"/>
</body>
<script type="text/javascript">
var timer=setInterval(function() {
alert("nihao");
}, 3000);
var closer=function(){
window.clearInterval(timer);
}
</script>
案例：
注册成功之后，5秒钟跳转到某个页面
<body>
恭喜您，终于注册成功了，<span id="s" style="color: red; font-size: 100px;">5</span>秒钟页面自动跳转，如果不跳转<a href="../jsCode/demo1.html">点击这里</a>
</body>
<script type="text/javascript">
var time=5;
var timer;
timer=window.setInterval(function() {
var span=document.getElementById("s");
if(time>=1){
span.innerHTML=time;
time--;
}else{
//页面跳转 事件结束
window.clearInterval(timer);
location.href="../jsCode/demo1.html";
}
}, 1000);
</script>
2.location对象
location.href="链接地址";
location对象不能省
window.location.reload();//页面重新刷新
3.history对象
历史记录
back()
forward()
go()
案例：
<a href="demo8.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)"/>
七.js中DOM
DOM(文档对象模型)****
文档对象模型：用来操作页面元素
DOM：document节点
作用：通过他对页面元素进行操作和定位
NODE操作
1.NODE的元素
A.元素类型
B.文本类型
C.文档类型
D.属性类型
E.注释类型
2.NODE的获取方式
1）通过元素获取
document.getElementById("elementid");******
document.getElementsByName("name");***
document.getElementsByTagName("input");***
document.getElementsByClassName("classname");
2)通过NODE关系获取引用
document.parentNode;//获取该元素的父节点
document.childNode;//获取该元素的子节点
document.firstChild;//获取该元素的第一个子节点
document.lastChild;//获取该元素的最后一个子节点
document.nextSibling;//获取该元素的下一个兄弟节点
document.previousSibling;//获取该元素的上一个兄弟节点
3)NODE的属性
节点中文 nodeType nodeName nodeVale
元素 1 tagname null
属性 2 attr 属性值
文本 3 #text 文本值
注释 8 #comment 注释的文字
文档 9 #document null
4)NODE节点的增删改查
A.创建一个节点
1)创建一个元素的节点 document.createElement();
2)创建属性节点：object.attr=val;
object.setAttribute(sttr,value);
3)创建一个文本节点
object.innerTHML=val;
object.createTextNode();
B.添加节点
1.parentNode.appendChild(newNode);
说明 ：
向节点子节点末尾追加一个新的子节点， 如果文档中存在新的节点 ，将其从文档中删除，重新插入新的节点
2.parentNode.insertBefore(newNode,exisingNode);
说明：
如果文档中存在新的节点 ，将其从文档中删除，重新插入新的节点
3.parentNode.replace(newNode,oldNode);
说明：
如果文档中存在新的节点 ，将其从文档中删除，重新插入新的节点
4.parentNode.removeChild(node);
说明：
找到 文档中存在 的节点，删除其子节点
-----------------------------------------------------------------------------------------------
总结：
1.定位页面
<input type="text" name="uname" id="txt"/>
document.getElementById("txt");
document.getElementsByName("uname");
document.getElementsByTagName("input");
2.可以查看和修改属性
setAttribute(name,value);
getAttribute(name);
3.空格换行的处理
使用层级关系访问节点
document.parentNode;//获取该元素的父节点
document.childNode;//获取该元素的子节点
document.firstChild;//获取该元素的第一个子节点
document.lastChild;//获取该元素的最后一个子节点
document.nextSibling;//获取该元素的下一个兄弟节点
document.previousSibling;//获取该元素的上一个兄弟节点
4.节点的操作
创建节点： createElement("节点名");
元素前添加新的节点：insertBefore("新节点","旧节点");
节点后拼接新节点：appendChild(新节点);
删除子节点：removeChild(节点);
克隆节点：cloneNode(deep); //false 只克隆该标签 true 克隆所有标签
替换节点：replaceChild(新,旧);
5.NODE操作表格
table对象中的属性和方法
属性：rows获取所有行
方法：
insertRow(行下标);
deleteRow(行下标);
tableRow属性和方法
属性：
cells获取所有单元格
rowIndex:获取行位置下标
方法：
insertCell(单元格下标);
deleteCell(单元格下标);
tableCell属性和方法
属性：
innerHTML:设置文本的HTML标签
innerText:设置文本内容（纯文本）
className:类样式
小结：
js可以修改CSS样式
1）元素对象 setAttribute("style","CSS样式");
2）通过className绑定CSS样式