一 js简介
1 js组成
1 ECMAScript BOM(浏览器对象模型) DOM(文档对象模型)
2 js 引人方式内嵌脚本
(1)内嵌脚本
<input type="button" value="button" onclick="alert('xxx')" />
(1)内部脚本
<script type="text/javascript">
alert("xxx");
</script>
(1)外部脚本
首先先创建一个js文件
其次在html中引入
<script type="text/javascript" src="demo1.js"></script>
二 js基本语法
1 变量
(1) var x = 5; x = ‘fefe’; x = true;
(2) x = 6;
(3) 变量名第一字符必须是字母、下划线(_)或美元符号($)余下可以是下划线、美元符
号、字母、数字。
2 原始数据类型
(1)number:数字类型
(2)string:字符串类型
(3)boolean:布尔类型
(4)null:空类型
(5)underfind:未定义
类型转换
Number/boolean转成字符串 toString()默认模式 toString(2 8 16)基模式
String/boolean转成number boolean不能转换 parseInt() parseFloat()
parseInt(“010”) 8 parseInt(“010”, 10) 10
强制转换
Boolean() 空字符串、0、undefined、null为false 其他true
Number() false null 为0 undefined、对象、不规则字符 NaN
3 引用数据类型
var obj = new Object();
4 运算符
(1)赋值运算符 =
(2)算数运算符 + - * / %
+: 遇到字符串变成连接
-:先把字符串转成数字然后进行运算
*: 先把字符串转成数字然后进行运算
/: 先把字符串转成数字然后进行运算
(3)逻辑运算符 && || !
(4)比较运算符 < > <= >= != == ===类型和值
(5)三元运算符 3<2?"大于":"小于"
(6)void运算符 <a href="javascript:void(0);">xxxxxx</a>
(7)类型运算符 typeof instanceof
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 myNnm = new Number(value) var myNum = Number(value)
属性方法 toString() valueOf()
2 Boolean
创建方法 var bool = new Booleanr(value) var bool = Boolean(value)
属性方法 toString() valueOf()
3 String
创建方法 var str = new String(value) var str = String(value)
属性 length
方法 charAt() charCodeAt() indexOf() lastIndexOf() split()
Substr() substring()
4 Array
创建方法
Array() 空字符串 Array(size) 指定长度 Array(element0, ) var arr=[] [1,”srt” ]
属性方法 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()星期 getTime()
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 = /^正则表达式$/
四 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对象是个数组,将传递的实参封装
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)eval()方法
将字符串当作脚本进行解析运行
//var str = "var a=2;var b=3;alert(a+b)";
//eval(str);
function print(str){
eval(str);
}
print("自定义逻辑");
五 js事件
1 js常用事件
Onclick: 点击事件 onchangea:域内容被改变事件 onfocus:获得焦点的事件 onblur:
失去焦点事件 onmouseover 鼠标悬浮事件 onmouseout:鼠标离开事件 onload:加载
完毕事件。等到页面加载完毕在执行onload事件所指向的函数
2 事件的绑定方式
(1)将事件和响应行为都内嵌到html标签中
<input type="button" value="button" onclick="alert('xxx')"/>
(2)将事件内嵌到html中而响应行为用函数进行封装
<input type="button" value="button" onclick="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标签对象
3 阻止事件的默认行为
IE: window.evnet.returnValue = false;
W3c: 传递过来的事件对象.preventDefault();
4 阻止事件的传播
IE:window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
六 js的bom
1 window对象
提示框:alert(“提示信息”)
确认框:confirm(“确认信息”) 返回值 确认返回true 取消返回false
输入框:prompt(“提示信息”) 返回值 确认返回输入框文本 取消返回false
open方法:window.open("url地址");
定时器:setTimeout(函数,毫秒值); clearTimeout(“定时器名称”);
SetInterval(函数,毫秒值); clearInterval(定时器名称)
2 location
Location.href = “url地址”;
3history
Back(): forward(): go()
七、js的dom
1、理解一下文档对象模型
html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代
码的动态修改
在dom树当中 一切皆为节点对象
2、dom方法和属性
笔记见代码
javascript总结
最新推荐文章于 2024-09-22 11:17:00 发布