一、JS简介
1、JS是什么
JS是基于对象和事件驱动的脚本语言，它可以嵌入到html之中，实现与用户交互等功能，它不能够访问本地磁盘，本身是跨平台的
2、JS的作用
JS能够动态的修改html和css代码，还能够动态的校验数据
3、JS的组成
ECMAScript
BOM(浏览器对象模型)
DOM(文档对象模型)
4、JS被引入的方式
(1)内嵌引入
<input type="button" value="点我" οnclick="alert('内嵌引入')"/>
(2)内部引入
写在head标签中
<script type="text/javascript">
alert("内部引入");
</script>
(3)外部引入
写在head标签中
<script type="text/javascript" src="demo1.js"></script>
二、JS基本语法
1、变量
(1)JS中所有变量的类型都可以用var来表示
var x = 1;
x = 'dsaz';
var y = "abcd";
var b = false;
(2)也可以直接定义
x = 1;
2、基本数据类型
(1)number 数字类型
(2)string 字符串类型
(3)boolean 布尔类型
(4)null 空
(5)underfind 未定义
类型转换：
number/boolean转string利用toString()方法
string/boolean转number利用parseInt()方法与parseFloat() 对于string类型的，如果为数字字符串，则将转换为number时，将遇到的第一个字母之后的字符全部去除，只输出前面的字符。
强制转换：
Boolean() 强转为boolean型
Number() 转换为数字
3、引用数据类型
var obj = new Object();
4、运算符
(1)赋值运算符 "="
(2)算数运算符 + - * / %
+：遇到字符串时变成连接符
- * / %： 遇到字符串时先将字符串转为数字再进行运算
(3)逻辑运算符
与：&&
或：||
(4)比较运算符
> < >= <= == ===
===：全等于(类型与值都要相等才为true)
(5)三元运算符 1>0 ? true : false;
(6)类型运算符
typeof：返回数据类型 如 typeof 1 返回number
instanceof ：判断是否为某种类型 如 x instanceof Object; 返回true
5、逻辑语句
(1)if-else
(2)for
(3)switch
(4)for in
var arr = [1,4,6,8];
for(index in arr) index 代表角标
三、JS的内建对象
(1)Number
创建方式：
var num = new Number(value);
vat num = Number(value);//强转
属性和方法：
toString()：转为字符串
valueOf()：返回一个Number对象的基本数字值
(2)Boolean
创建方式：
var bool = new Boolean(value);
vat bool = Boolean(value);//强转
属性和方法：
toString()：转为字符串
valueOf()：返回一个Boolean对象的基本值
(3)String
创建方式：
var str = new String(value);
vat str = String(value);//强转
属性和方法：
length：字符串的长度
charAt()：返回指定位置的字符
charCodeAt()：返回在指定位置的Unicode编码
indexOf()：返回指定字符索引
lastIndexOf()：逆向饭hi字符的索引
split()：将字符串按照指定字符切割为数组
(4)Array
创建方式：
var arr = new Array();创建空数组
var arr = new Array(
size); 创建一个指定长度的数组
var arr = new Array(
element0,
element1, ...,
elementn);创建数组直接填入元素
var arr = []; 创建一个空数组
var arr = [1,3,5,7]直接创建一个已经实例化元素的数组
属性和方法：
length：数组的长度
join()：将数组中的所有元素放入一个字符串，并且每一个字符用指定符号连接
pop()：删除并返回最后的元素
push()：向数组的末尾添加新元素
reverse()：反转数组
sort()：排序数组
(5)Date
创建方式：
var myDate = new Date();
属性和方法：
Date()：返回当日的日期和时间
getDate()：从Date对象返回一个月中的某一天
getDay()：从Date对象返回一周中的某一天
getMonth()：从Date对象返回月份
getFullYear()：从Date对象以思维数字返回年份
(6)Math
Math对象没有构造函数，调用时将Math作为对象就可以调用其所有属性和方法
属性和方法：
PI：圆周率
E：返回常量e
sqrt(x)：返回数的平方根
max(x,y)：返回x和y中数值较大的那个
min(x,y)：返回x和y中数值较小的那个
(7)RegExp
创建方式：
var reg = new RegExp(pattern); 中间传入的参数为正则表达式的字符串
var reg = /^正则规则$/
规则的写法：
[0-9] \d 代表数字
\D 代表非数字
[A-Z] 大写字母
[a-z] 小写字母
[A-z] 任意字母
\w 查找单词字符
\W 查找非单词字符
\s 查找空白字符
\S 查找非空白字符
n+ 代表出现至少一次
n* 出现0次或多次(包括一次)
n? 出现0次或一次
{n} 出现n次
{x,y} 出现x次到y次
方法：
text(str)：检索字符串中指定的值，符合返回true，不符合返回false
比如：校验是否为邮箱
var email = whalewsj@gmail.com
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]$/;
reg.test(email);
四、JS的函数
1、JS函数定义的方式
(1)普通方式
语法：function 函数名(参数列表){方法体}
(2)匿名函数
语法：function(参数列表){函数体}
例如：var method = function() { };
(3)对象函数
语法：new Function(参数列表，函数体);
参数名称与函数体必须使用字符串，最后一个默认为函数体
2、函数的参数
(1)函数的形参没有类型修饰
(2)形参和实参的数量不一定匹配 自带的arguments对象会将传进来的参数进行 封装，它是一个数组。
3、函数的返回值
(1)在定义函数的时候不必标明是否具有返回值
(2)想要有返回值只需要写return就可以了
4、JS中的全局函数
(1)编码解码
将字符串编码为URI：encodeURI 解码某个编码的URI：decodeURI()
将字符串编码为URI组件：encodeURIComponent() 解码一个编码的URI组件：decondeURIComponent()
将某个字符串进行编码：escape() 对由escape()编码的字符串进行解码：unescape()
他们的区别：进行编码的符号的范围不同，实际开发中常使用第一种，第一种只编汉字
(2)强制转换
Number()
String()
Boolean()
(3)转换为数字的函数
parseInt()
parseFloat()
(4)eval()全局函数****
可以将一个字符串当作脚本进行解析运行
五、JS的事件
1、JS的常用事件
(1)onclick：鼠标点击
(2)onchange：域内容被改变
<body>
<select id="city">
<option value="cq">重庆</option>
<option value="qh">青海</option>
</select>
<select id="area">
<option>南岸区</option>
<option>北碚区</option>
<option>渝中区</option>
</select>
</body>
<script type="text/javascript">
var city = document.getElementById("city");
city.onchange = function(){
var optionVal = city.value;
switch(optionVal){
case 'cq':
var area = document.getElementById("area");
area.innerHTML = "<option>南岸区</option><option>北碚区</option><option>渝中区</option>";
break;
case 'qh':
var area = document.getElementById("area");
area.innerHTML = "<option>西宁市</option><option>平安区</option>";
break;
default:
alert("error!");
break;
}
}
</script>
(3)onfocus：获得焦点
(4)onblur：失去焦点
<body>
<label for="txt">用户名:</label>
<input id="txt" type="text"/><span id="action"></span>
</body>
<script type="text/javascript">
var txt = document.getElementById("txt");
txt.onfocus = function(){
var action = document.getElementById("action");
action.innerHTML = "获得焦点";
action.style.color = "green";
}
txt.onblur = function(){
var action = document.getElementById("action");
action.innerHTML = "失去焦点";
action.style.color = "red";
}
</script>
(5)onmouseover：鼠标悬浮
(6)onmouseout：鼠标离开
<style type="text/css">
#div1{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
var div1 = document.getElementById("div1");
div1.onmouseover = function(){
this.style.backgroundColor = "green";//注意这里没有"-"且C变为了大写
}
div1.onmouseout = function(){
this.style.backgroundColor = "red";//注意这里没有"-"且C变为了大写
}
</script>
(7)onload：加载完毕
<script type="text/javascript">
window.onload = function(){
var span1 = document.getElementById("span1");
span1.innerHTML = "加载完毕";
};
</script>
</head>
<body>
<span id="span1"></span>
</body>
2、事件的绑定方式
(1)将事件和响应行为都内嵌到html中
<input type="button" value="绑定方式一" οnclick="alert('内嵌到html中')"/>
(2)将事件内嵌至html中，响应行为用函数进行封装
(3)将事件和响应行为与html完全分离
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="绑定方式一" οnclick="alert('方式一')"/>
<input type="button" value="绑定方式二" οnclick="fun()"/>
<input id="method3" type="button" value="绑定方式三"/>
</body>
<script type="text/javascript">
function fun(){
alert("方式二");
};
//以下是方式三
var btn3 = document.getElementById("method3");
btn3.onclick = function(){
alert("方式三");
}
</script>
</html>
3、this关键字
this经过事件的函数进行传递的是html标签对象
<body>
<input type="button" value="按钮" οnclick="fun(this)"/>
</body>
<script type="text/javascript">
function fun(obj){
alert(obj.type);//输出button
}
</script>
4、阻止事件的默认行为
方式一：
早期的IE：window.event.returnValue = false;
W3C标准：传递过来的事件对象.preventDefault();
<body>
<a href="http://www.baidu.com" οnclick="fun(event)">点我</a><!-- event代表onclick这个事件 -->
</body>
<script type="text/javascript">
function fun(e){
if(e&&e.preventDefault){//W3C标准
alert("W3C标准");
e.preventDefault();
}else{//IE
window.event.returnValue = false;
}
}
</script>
方式二：
<a href="http://www.baidu.com" οnclick="return false">点我吧</a><!-- 方式二 -->
5、阻止事件的传播
IE：window.event.cancelBubble = true;
W3C标准：传递过来的事件对象.stopPropagation();
<body>
<div οnclick="fun1()" style="width:50px;height:50px;background-color: pink;padding:20px;">
<div οnclick="fun2(event)" style="width:50px;height:50px;background-color: red;"></div>
</div>
</body>
<script type="text/javascript">
/*
IE：window.event.cancelBubble = true;
W3C标准：传递过来的事件对象.stopPropagation();
*/
function fun1(){
alert("fun1");
}
function fun2(e){
alert("fun2");
if(e&&e.stopPropagation){
alert("W3C");
e.stopPropagation();
}else{
alert("IE");
window.event.cancelBubble = true;
}
}
</script>
六、JSbom
(1)window对象
①弹出一个框的方法：
提示框：alert("提示信息");
确认框：confirm("确认信息"); 有返回值，点击确认返回true，点击取消返回false
输入框：prompt("提示信息"); 有返回值，点击query返回输入的内容，点击取消返回null
②打开一个网页的方法：
open方法：window.open("url地址");
③定时器：
setTimeout(函数 , 毫秒值); 创建定时器，在设定的毫秒值到达后执行函数
clearTimeout(定时器名称); 清除定时器
setInterval(函数，毫秒值); 创建定时器，按照设定的毫秒值自动重复执行函数
clearInterval(定时器的名称)；清除定时器
<body>
<span>页面将于<span id="span1" style="color:red">5</span>秒钟后跳转，如没有跳转，请<a href="http://www.baidu.com">点击此处</a></span>
</body>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(function(){
var span = document.getElementById("span1");
if(time >= 1){
span.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="http://www.baidu.com";
}
},1000
);
</script>
③location
页面跳转：location.href="要跳转的url地址"
④history
history.back();上一页
history.forword();下一页
七、JSdom
1、文档对象模型
html文件加载到内存之后会形成一颗dom树，在dom树中，一切皆为结点对象，根据这些结点对象可以进行脚本代码的动态修改
2、dom方法
(1)查找元素结点
①getElementById(); 寻找指定的id属性值的元素，返回值为指定id属性值的元素结点，如果这样的元素不存在，就返回null，，注意：该方法只能用于document对象
②gerElementByName(); 返回指定名称的对象集合(数组)
③getElementByTagName 返回指定标签名的对象集合(数组)
(2)查看是否存在子节点
①hasChildNodes();
(3)dom属性
①nodeName 一个字符串，内容为给定结点的名字，它是一个制度属性
②nodeType 返回一个整数，该数值代表着给定结点的类型，它是一个只读属性
1----代表元素结点 2----代表属性结点 3----代表文本结点
③nodeValue 返回给定节点的当前值，给定节点为一个元素节点时返回值为null，给定节点为文本节点时，返回的是该文本的内容，给定节点为属性节点时，返回的时这个属性的值
(4)属性节点
①getAttributeNode() 返回一个指定的属性节点
②getAttribute() 返回一个给定元素的给定属性节点的值
③setAttribute() 设置属性节点
(5)替换节点
①父元素.replaceChild() 将一个给定父元素里的一个子节点替换为另外一个子节点，该方法有两个参数，第一个参数为新的节点，第二个参数为被替换的节点
(6)创建新节点
①createElement() 按照给定的标签名创建一个新的元素节点
②createTextNode() 创建一个包i喊着指定文本的新文本节点
(7)插入节点
①父元素.appendChild() 为给定元素增加一个子节点，该方法通常于createElement()和createTextNode()配合使用
②insertBefore() 在一个节点之前插入一个节点，该方法有两个参数，前者为插入节点，后者为插入节点之后的节点
③父元素.removeChild() 删除给出父元素中的指定节点
(8)innerHTML
该属性可以用来度，写某个指定元素中的HTML内容
如：
<div id="in1">inner</div>
<script>
var div = document.getElementById("in1");//读
alert(div.innerHTML);
div.innerHTML = "<h1>in1</h1>";//写
</script>
7186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
