JavaScript简易总结.docx
- 文档编号:8175300
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:15
- 大小:19.91KB
JavaScript简易总结.docx
《JavaScript简易总结.docx》由会员分享,可在线阅读,更多相关《JavaScript简易总结.docx(15页珍藏版)》请在冰豆网上搜索。
JavaScript简易总结
#JavaScript
###1.3语句
1.javascript代码的末尾不必须添加分号,但是推荐加上
-**javascript严格区分大小写**
###1.5变量:
-存储信息的“容器”
-**变量的命名规则:
变量名由字母,数字,下划线和$组成,且不能以数字开头**
//申明变量
varusername='zhangsan';
//同时申明多个变量
varusername='zhangsan',age=30,sex='男';
//申明变量但是不赋值
varusername;
//不使用var申明变量
username='zhangsan';
一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
(function(){
vara=3;
varb=5;
})()
###1.6数据类型
**字符串(String)、数字(Number)、布尔(Boolean)、对象(Object)、空(Null)、未定义(Undefined)函数(Function)**
使用typeof检测数据类型
####1.6.1字符串(String)
-使用单引号和双引号定义字符串
-单双引号需要注意的内容
-单双引号没有区别,都不解析变量
-单双引号可以相互嵌套
-不可以嵌套自身,除非使用转义字符转义
####1.6.2数字(Number)
-整型
-浮点型(计算的时候有计算损耗,不建议进行精确计算)
-NaN(Notanumber)
-NaN与任何值运算都为NaN
-NaN与任何值都不想等,包括自身
-isNaN():
判断一个值是否时NaN
####1.6.4数组
//3.简单定义
varcars=['BMW','BYD','Benz'];
//4.数组元素的值可以是任何值
varshoplist=['zhangsan',20,true,null,undefined,[1,2,3],{}];
//5.常用的一种复合数据(瀑布流,AngularJS中$scope.shoplist)
varshoplist=[
{id:
1,username:
"zhangsan",age:
20,sex:
"男"},
{id:
2,username:
"lisi",age:
18,sex:
"女"},
{id:
3,username:
"wangwu",age:
32,sex:
"男"}
];
####1.6.5对象
//1.{}定义对象(jquery中animate,$.ajax({}))
varobj={
username:
"zhangsan",
age:
20,
sex:
"男",
say:
function(){},
eat:
function(){}
}
//2.使用newObject()定义
varobj=newObject();
obj['username']='zhangsan';
obj.age=20;
obj.say=function(){}
//3.使用构造函数定义
functionBall(){
this.x=100;
this.y=100;
this.radius=50;
this.draw=function(){}
}
//通过new关键字生成对象
varb=newBall();
####1.6.6Undefined
-未定义的变量alert(typeofage)
-定义但是未赋值的变量varsex;alert(typeofage)
####1.6.7Null
-将值设置为null清空变量
###1.7数据类型的相互转化
####1.7.2转化为布尔
-Boolean()
-**''00.0NaNfalsenullundefined->false**
-其余都为真('false','0','null')
####1.7.3转化为数值不包含进制之间的转化
-Number()
1.普通字符串->NaN
2.纯数字字符串,数值->原型输出
3.空字符串'',空格字符串'',null->0
4.true->1false->0
5.undefined->NaN
-parseInt()
-**从第一个字符开始查找,直到找到非法字符(非数字)截止,返回找到的数字**
-parseFloat()
-**从第一个字符开始查找,直到找到非法字符(除数字和第一个小数点之外的字符)截止,返回找到的数字**
###1.8运算符++--++=?
:
####1.8.3**连接运算符+**
-+号两边是纯数字:
+代表加法运算
-除此之外,+都是连接运算
-sum+=i等价于sum=sum+i
####1.8.6条件运算符(三元运算符)
3==3?
value1:
value2;
###1.9流程控制:
条件语句
###2.0流程控制-循环语句
####2.0.4for...in...循环
vardata={username:
'张三',age:
20,sex:
'男'};
for(variindata){
console.log(i+'===>'+data[i]);
}
####2.0.5break和continue语句
//break:
终止循环
for(vari=0;i<10;i++){
if(i==4){
break;
}
console.log(i);
}
//最终的结果是:
0123
//跳过当前循环继续执行下一次的循环
for(vari=0;i<10;i++){
if(i==4){
continue;
}
console.log(i);
}
//最终的结果是:
012356789
###2.1**正则表达式**
####2.1.1元字符
-[0-9]:
任意一个数字
-[a-z]:
任意一个小写字母
-[x|y]:
匹配x或者y(匹配其中的一个)
-[^0-9]:
匹配一个任意非数字
-[\d]:
任意一个数字
-[\s]:
任意一个空白字符(\r\n\t)
-[\w]:
约等于A-Za-z0-9_
-^[a-z]{6,12}$:
必须是6-12位的字母
####2.1.2量词
-*相当于{0,}任意数量
-+相当于{1,}至少一个
-?
相当于{0,1}至多一个
-{6,18}
####2.1.3模式修正符
-i:
不区分大小写
-g:
执行全局匹配
-m:
执行多行匹配
###2.2JSON:
只有属性的对象
####2.2.1JSON功能
存储和传输数据的格式
####2.2.2实例
//JS对象
//与普通对象区别:
只有属性,键用引号
{"username":
"zhangsan","age":
20,"sex":
"男"}
####2.2.3JSON方法
-将JSON字符串转化为JSON对象:
JSON.parse()
-将Javascript对象转换为JSON字符串:
JSON.stringify()
###2.3**函数**
####2.3.1函数定义
//1.普通函数
functiondemo(){
console.log('第一种定义函数方式');
}
//2.匿名函数
(function(){
console.log('第二种定义函数方式');
})()
//3.使用Function定义函数
newFunction('x','y','returnx+y;');
####2.3.2函数的特点
-变量的作用域
-在函数外申明的变量为全局变量,函数内可以直接调用
-在函数内使用var申明的变量为局部变量,只能在函数内调用
-在函数内直接定义变量为全局变量
-argument函数内置对象
-函数中内置的的所有参数组成的对象
functiondemo(){
arguments:
直接获取到给demo函数传递的实参
}
demo(23,13,1,5,6);
####2.3.3函数分类
1.功能函数执行一个功能,而不需要返回值
functiontest(){
alert('ok');
}
vart=test();
alert(t);//?
?
?
2.返回值函数
functiondemo(){
return'ok';
}
vard=demo();
alert(d);//?
?
?
###2.4内置对象
####2.4.1Array对象
-arr.length:
获取数组元素的长度
-arr.join(str):
将arr以指定字符连接成字符串
-arr.push():
在数组末尾推入指定元素
-arr.pop():
弹出并返回数组末尾元素
-arr.shift():
弹出并返回数组第一个元素
-arr.unshift():
在数组开头处添加指定元素
-arr.sort([函数:
排序规则]):
排序(默认采用字符串顺序排序,数字排序则需要通过自定义函数实现)
-arr.indexOf():
获取指定元素在数组中的位置,不存在返回-1
-arr.slice(起始位置,结束位置):
获取数组中指定的片段(不包含结束位置)
-arr.splice(起始位置,长度):
从数组中添加或删除元素。
####2.4.2Boolean对象
####2.4.3Date对象
-vard=newDate():
获取当前的日期对象
newDate()
newDate(时间戳)
-d.getFullYear():
年
-d.getMonth():
月(0-11)
-d.getDate():
日(1-31)
-d.getHours():
小时(0-23)
-d.getMinutes():
分钟(0-23)
-d.getSeconds():
秒数(0-23)
-d.getTime():
时间戳(0-999)
####2.4.4Math对象
#####属性
-PI:
圆周率
#####方法
-Math.abs():
绝对值
-Math.ceil():
进一取整
-Math.floor():
舍去取整
-Math.round():
四舍五入
-Math.max():
获取最大值
-Math.min():
获取最小值
-Math.random():
获取随机数
functionrand(m,n){
returnMath.floor(Math.random()*(n-m+1)+m);
}
####2.4.5Number对象
-num.toFixed(num):
保留指定的小数位
####2.4.6String对象
-str.length:
字符串的长度
-str.split(str):
将字符串以指定字符切割
-str.replace(str1|reg,str2):
用str2替换str1的值
-str.slice(start,end):
获取字符串中指定的片段(不包含结束位置)
-str.indexOf(str):
获取字符串中指定字符的位置,不存在返回-1
-str.lastIndexOf(str):
获取字符串中指定字符最后出现的位置,不存在返回-1
####2.4.7RegExp对象
-reg.test(str):
使用正则表达式检验str是否符合要求
##2.BOM(Window对象)
###2.1全局属性和函数
-所有的全局变量是window对象的属性
-所有的全局函数是window对象的方法
-系统方法
-open('1.html','','width=200,height="200'):
打开一个新窗口
-close():
关闭窗口
-setInterval()、setTimeout()、clearInterval()、clearTimeout()
###2.2Navigator对象(浏览器相关的信息)
-navigator.cookieEnabled返回指明浏览器中是否启用cookie的布尔值。
-navigator.userAgent返回由客户机发送服务器的user-agent头部的值。
当前的操作系统、当前使用的浏览器,版本(包含手机端)
###2.3Screen对象(屏幕相关的信息)
-screen.width:
浏览器的宽度
-screen.height:
浏览器的高度
-screen.availHeight:
浏览器可用高度
-screen.availWidth:
浏览器可用宽度
###2.5**History对象(当前那浏览器的历史记录)**
-history.length:
返回浏览器历史列表中URL数目
-history.go(0|-1|1):
加载history列表中的某个具体的页面
-history.pushState(state,'',url)与window.onpopstate()结合使用
###2.6**Location对象(当前浏览器的url地址信息)**
-location.hash:
锚点|做历史记录管理
-location.href:
获取设置当前的URL地址
-location.reload():
刷新
##3.HTMLDOM对象
###3.1DOMDocument对象
####3.1.1Form表单对象
-document.forms[0]
-document.forms['formName']
-document.formName
-表单元素对象:
formObj.inputName
####3.1.3Cookie对象:
存储数据、协助做用户信息识别
document.cookie='username=zhangsan;expires=date;path=/;domain=;secure'
setCookie()
getCookie()
###3.2**DOM功能(通过功能确定DOM是做什么的)**
####3.2.1获取并改变HTML标签
-document.getElementById()
-document.getElementsByTagName()
-document.getElementsByName()
-document.querySelector('css选择器#box.adiv'):
匹配复合条件的第一个元素
-document.querySelectorAll():
匹配所有的复合条件的元素
-ID名直接获取(用于测试,不推荐用于正式环境)
####3.2.2获取并改变HTML属性
-obj.src
-obj.getAttribute()
-obj.setAttribute()
-obj.removeAttribute()
####3.2.3获取并改变CSS样式
-obj.style.width:
只能获取行内的样式,获取不到style标签和link标签之内的样式
-获取最终的样式(兼容)
functiongetStyle(obj,attr){
returnobj.currentStyle?
obj.currentStyle[attr]:
document.defaultView.getComputedStyle(obj,null)[attr];
}
####3.2.4**事件处理**
#####3.2.4.1鼠标事件
-onclick
-ondblclick
-oncontextmenu
-onmouseover
-onmouseout
-onmousedown
-onmouseup
-onmousemove
#####3.2.4.2键盘事件
-onkeydown
-onkeyup
-onkeypress
#####3.2.4.3表单事件
-onfocus
-onblur
-onsubmit
-onchange
-onreset
-onselect
#####3.2.4.4框架对象事件
-onload
-onunload
-onresize
-onerror
-onabort
#####3.2.4.5鼠标键盘属性值
-altKey:
-shiftKey:
-ctrlKey:
-clientX
-clientY
#####3.2.4.6事件冒泡
-JS:
vare=ent||window.event;e.cancelBubble=true
-jquery:
e.stopPropagation()/returnfalse;
区别:
returnfalse;代表终止函数,之后的代码将不执行
e.stopPropagation():
阻止事件冒泡,之后的代码继续执行
#####3.2.4.7千万要注意的事件默认行为
-点击a链接默认跳转页面
-点击提交按钮默认提交表单
-点击鼠标右键出现右键菜单
//阻止a链接跳转(如果要用a链接做点击事件,务必将这里禁止)
<ahref="javascript:
;">XX</a>
<ahref="javascript:
void(0);">XX</a>
//表单
formObj.onsubmit=function(){
//验证不通过,阻止表单提交
returnfalse;
}
document.oncontextmenu=function(){
//阻止浏览器右键菜单
returnfalse;
}
###3.3**DOM节点操作**
####3.2.1标签元素的属性
-attributes:
-className:
-childNodes/children:
-firstChild/firstElementChild:
-lastChild/lastElementChild:
-nextSibling/nextElementSibling:
-previousSibling/previousElementSibling:
-parentNode:
-nodeName:
-nodeType:
-nodeValue:
-innerHTML:
-clientWidth:
-clientHeight:
-offsetHeight:
-offsetWidth
-offsetLeft:
-offsetTop:
-scrollWidth:
-scrollHeight:
-scrollTop:
-scrollLeft:
####3.2.2标签元素的方法
-appendChild()
-insertBefore()
-replaceChild()
-removeChild()
-cloneNode()
this关键字
引用赋值
原型,实例对象,构造函数
闭包
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 简易 总结