JavaScript笔记概要
一、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（同）
(2)switch（同）
(3)for（同）
(4)for in
var arr = [1,3,5,7,"js"];
for(index in arr){//index代表角标
//alert(index);
alert(arr[index]);
}
三、js内建对象
(1)Number -- 类型：Object
创建方式：（new 和 强转）
var myNum=new Number(value);
var myNum=Number(value);
属性和方法：
toString():转成字符串 -- 类型：string
valueOf()：返回一个 Number 对象的基本数字值 -- 类型：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到现在的一个毫秒值
属性和方法
toString():打印时间
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 = /^正则规则$/;//以^开头，以$结尾，跟java不同
规则的写法：
[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() -- 只 将中文转换成Unicode码
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:失去焦点的事件
需求： 当输入框获得焦点的时候，提示输入的内容格式
当输入框失去焦点的时候，提示输入有误
<body>
姓名：<input type="text" id="username" name="username"><span id="reminder"></span>
</body>
<script type="text/javascript">
var username = document.getElementById("username");
//聚焦事件
username.onfocus = function(){
//友好提示
var reminder = document.getElementById("reminder");
reminder.innerHTML = "请输入长度大于5的名称";
reminder.style.color = "green";
}
//焦点离开事件
username.onblur = function(){
var usernameValue = username.value;
if(usernameValue.length<5){
//错误提示
var reminder = document.getElementById("reminder");
reminder.innerHTML = "对不起，个提示不正确";
reminder.style.color = "red";
}else{
//格式符合，隐藏
var reminder = document.getElementById("reminder");
reminder.style.display = "none";
}
}
</script>
onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
需求：div元素 鼠标移入变为绿色 移出恢复原色
应用：商品图片大小的改变
<style>
#d1{background-color:red; width:200px; height:200px }
</style>
</head>
<body>
<div id="d1"></div>
</body>
<script type="text/javascript">
var d1 = document.getElementById("d1");
//鼠标移上的事件
d1.onmouseover = function(){
this.style.backgroundColor = "green";//注意此处css的命名格式需要转为驼峰式命名
}
//鼠标移出的事件
d1.onmouseout = function(){
this.style.backgroundColor = "red";
}
</script>
onload:加载完毕的事件
等到页面加载完毕在执行onload事件所指向的函数
等同于将js放到body之后加载
<script type="text/javascript">
window.onload = function(){
var span = document.getElementById("span");
span.innerHTML = "onload事件";
};
</script>
</head>
<body>
<span id="span"></span>
</body>
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标签完全分离 （常用，分理处单独的js文件）
<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(); -- 组织默认
//通过传递事件阻止事件的默认行为
<a href="demo11.html" οnclick="return false">点击我吧</a>
//通过事件返回false也可以阻止事件的默认行为
<a href="demo11.html" οnclick="return false">点击我吧</a>
//ie：window.event.returnValue = false;
//W3c：传递过来的事件对象.preventDefault();
//W3c标准
if(e && e.preventDefault){//方法名指的是方法本身，方法名后加括号，指的是调用方法
alert("w3c");
e.preventDefault();
//IE标准
}else{
alert("ie");
window.event.returnValue = false;
}
4、阻止事件的传播
IE：window.event.cancelBubble = true; -- 取消冒泡
W3c: 传递过来的事件对象.stopPropagation(); -- 停止传播
<body>
<div id="d1" οnclick="fun1(event);" style="background-color:red; width:200px; height:200px; padding:50px; ">
<div id="d2" οnclick="fun2(event);" style="background-color:green; width:200px; height:200px; ">
</div>
</body>
<script type="text/javascript">
function fun1(evnet){
alert("fun1");
}
function fun2(e){
alert("fun2");
if(e&&e.stopPropagation){//停止传播
alert("w3c");
e.stopPropagation();
//IE标签
}else{
alert("ie");
window.event.cancelBubble = true;//取消冒泡
}
}
</script>
六、js的bom（页面的上部分）
(1)window对象
弹框的方法：
提示框：alert("提示信息");
没有返回值
确认框：confirm("确认信息");
有返回值：如果点击确认返回true 如果点击取消 返回false
var res = confirm("您确认要删除吗？");
alert(res);
输入框：prompt("提示信息");
有返回值：如果点击确认返回输入框的文本 点击取消返回null
var res = prompt("请输入密码？");
alert(res);
<input type="button" value="弹出框" οnclick="fun1();" />
<input type="button" value="确认框" οnclick="fun2();" />
<input type="button" value="输入框" οnclick="fun3();" />
<script type="text/javascript">
function fun1(){
alert("这是弹出框");
};
function fun2(){
confirm("确认要删除吗？");
};
function fun3(){
prompt("请输入密码");
};
</script>
open方法：
window.open("url地址");
定时器：
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秒钟跳转首页
<body>
恭喜你注册成功，<span id="second" style="color:red">5</span>秒后跳转到登录界面，如果不跳转，请<a href="demo1.html">点击这里</a>
</body>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(
function(){
var secondnow = document.getElementById("second");
if(time>=1){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="demo1.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)">
七、js的dom
1、理解一下文档对象模型
html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
在dom树当中 一切皆为节点对象
注：属性节点是元素节点的附属，而不是它的子节点
DOM结构：
2、dom方法和属性（NODE接口的特性和方法）
document节点的方法
(1)getElementById()--常用
寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.
var oElement = document.getElementById ( “sID” )
该方法只能用于
document
对象
(2)getElementsByName()
寻找有着给定name属性的所有元素，这个方法将返回
一个节点集合，这个集合可以当作一个数组来处理。这个集合的
length 属性等于当前文档里有着给定name属性的所有元素的总个数。
(3)getElementsByTagName()
寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
(4)hasChildNodes()
该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
varbooleanValue= element.hasChildNodes();
document节点的属性（每个节点都具有这三个属性）
nodeName:一个字符串，其内容是给定节点的名字。
varname = node.nodeName;
* 如果节点是元素节点，nodeName返回这个元素的名称
* 如果是属性节点，nodeName返回这个属性的名称
* 如果是文本节点，nodeName返回一个内容为#text 的字符串
注:nodeName是一个只读属性。
nodeType：返回一个整数，这个数值代表着给定节点的类型。nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
* Node.ELEMENT_NODE ---1 -- 元素节点
* Node.ATTRIBUTE_NODE ---2 -- 属性节点
* Node.TEXT_NODE ---3 -- 文本节点
注：nodeType
是个只读属性
nodeValue：返回给定节点的当前值（字符串）
* 如果给定节点是一个属性节点，返回值是这个属性的值。
* 如果给定节点是一个文本节点，返回值是这个文本节点的内容。
* 如果给定节点是一个元素节点，返回值是 nullnodeValue 是一个 读/写属性，但不能对元素节点的 nodeValue 属性设置值，
但
可以为文本节点的
nodeValue
属性设置一个值。
1.innerHTML方法只是调用获取的是指定元素里面的内容，包括标签，赋值语句用于给页面添加代码
//1.获取元素里面的内容
<div id="d1"><h1>javascript</h1></div>
var div = document.getElementById("d1");
alert(div.innerHTML);
//输出：<h1>javascript</h1>
//2.给页面添加代码
<select id="area"></select>
var area = document.getElementById("area");
area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
转载请注明原文地址: https://ju.6miu.com/read-600155.html
