JavaScript知识总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript知识总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11286字，纯文字阅读大概需要17分钟。
内容图文
一、JS原生态
1．JavaScript 产生的背景和作用
（1）作用: web页面进行相互交互的作用 就是美化页面
（2）JavaScript开始产生的就是因为为了解决表单验证问题
2．JavaScript定义
JavaScript 缩写是JS 正式名JavaScript
标准:ECMAScript标准来进行执行的 这个标准是由微软进行维护
JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言
事件: 当鼠标或者键盘操作文本文档的时候产生的事情 事件就是用户操作
事件驱动: 当产生一种事件的时候调用程序处理事件达到一定的效果的过程我们叫做事件驱动
3．JavaScript 特点
（1）JS是解析型语言
（2）JS 具有跨平台的性质
（3）具有安全和简单的特性
（4）基于对象
4．JavaScript优点
（1）美化页面
（2）表单验证
5．缺点
浏览器兼容性问题
6．开发环境
（1）编辑器: vim sublime np++ 记事本
（2）运行环境: 只要你有支持js的各个浏览器就可以
例如: 火狐 谷歌 ie 360 欧朋 猎豹 。。。。。。
7．JavaScript 和Java是什么关系？
雷锋和雷锋塔的关系
8．JavaScript 特效原理
找需要美化的元素或者对象进行美化即可
找对象 改属性(重点重点重点)
9．JavaScript 严格区分大小写
10．JavaScript能做哪些操作
（1）表单验证
（2）交互式操作
（3）网页特效
（4）web游戏
（5）服务器脚本
11．JavaScript 不能做什么
（1）不能操作数据库
（2）不能操作本地文件
12．如何学习JavaScript
（1）基本语法 ECMAScript
（2）BOM 浏览器对象
（3）DOM 文档对象
13．JavaScript 语法(重点重点重点)
- 注释: //单行注释 /**/ 多行注释 多行注释不能嵌套
- 使用方式
(1) 写在script标签中
例如: <script>alert(1)</script>
(2) 通过事件方式写js
例如: <button onclick="alert('12233444545')">点击</button>
<button onclick="test()">点击</button>
(3) 通过协议方式写js
<a href="javascript:alert('1321314124')">点击</a>
<!-- 事件中return false 可以阻止默认行为 -->
<a href="http://www.4399.com" onclick="return false">去4399玩游戏</a>
<a href="http://lol.qq.com" onclick="return check()">想去玩游戏</a>
(4) 通过外部引入的方式写js
<!-- 4.通过外部引入的方式写js代码 -->
<script src="./js.js">
一旦我们的script标签用于导入外部js文件的时候那么这个script标签里面的所有代码都无效
alert('我是在引入的同时写js代码在里面好暖和好开心');
</script>
- js能在html中的位置有哪些
除了title标签外js都可以出现在我们的html 的任意位置上
- js的执行顺序
请各位以后将你的所有js放置在body标签后面
- 获取元素对象的方式
document.getElementById(‘元素id 的值’)
- JS中严格区分大小写
14．JS的调试方式
（1）alert()弹窗方式法 相当于php中的exit 终止代码继续执行
（2）document.write() 类似于php中的echo 执行完成之后再执行会覆盖所有内容
（3）console.log() 记录到控制台的内容 没有任何弊端
console.dir() 类似于php中的print() 专业打印数组内容
（4）document.title调试动态数据方式
15．跟随鼠标图片
16．奇葩的运算符
（1）奇葩的加号
如果两边是数字那么就是数学运算 只要任何一边是字符串那么就是拼接
（2）+= 同上
（3）对象成员访问符 php对象成员访问符 ->
- 对象成员访问符(.)
.成员访问符 不能解析变量
他会将变量变为属性来访问如果这个变量在对象中存在返回内容 如果不存在则返回undefined
- 对象成员访问符([])
[]成员访问符 可以解析变量
他会解析变量 将变量里面的值去访问我们的对象中的属性如果这个解析之后的变量属性不存在则返回undefined
（4）奇葩的命令执行符 分号;
换行符也可以作为命令执行符操作
换行符如果会产生错误那么就不作为命令执行符操作
17．流程控制
（1）分支结构
- else if 中间必须有一个空格否则报错
- switch case 结构的匹配要报纸一致匹配的类型也要一样
（2）循环结构
- for-in 这是js中foreach
- for(键名变量 in 要遍历的对象){
想要值 通过对象[键名变量]
想要键 直接打印键名变量即可
}
18．定时器(延时器)
（1）单次定时器
- setTimeout(function(){},1000)
- setTimeout(test,1000);
functioin test(){}
清除单次定时器
clearTimeout(定时器变量)
（2）周期定时器
- setInterval(function(){},1000)
- setInterval(test,1000)
function test(){}
清除周期定时器
clearInterval(定时器变量)
（3）单位是毫秒
19．倒计时特效
innerHTML 获取元素文本值的内容
对象.innerHTML 获取文本内容
对象.innnerHTML = 值 赋予文本相应内容
20．轮播图
修改图片的显示路径
对象.src=路径
21．新消息特效
22．等待按钮特效
让按钮不能点击效果
对象.disabled = true;
让按钮能点击效果
对象.disabled = false;
23．获取对象的方式
document.getElementById(‘id值’)---->一个对象
document.getElementsByTagName(‘标签名’)-->一组对象 每个都有一个属性 length长度或者个数
24．全选反选全不选
（1）document.getElementsByTagName
（2）数组不能直接操作属性需要变为单独对象才可以操作(循环操作)
（3）对象.checked=true 多选框前面加上对号
（4）对象.checked =false 多选框前面没有对号
25．数据类型
（1）typeof 查看数据类型
（2）undefined
undefined 定义了变量 但是没有赋值
（3）boolean 布尔型 true false
true != TRUE JS中严格区分大小写
（4）数值类型
- 整数整型
- 浮点数
浮点数运算不精确 不要出现在比较里面 因为精度太高
- 进制
2进制: 0b
8进制: 0
10进制:没有
16进制:0x
- 科学计数法
- 无穷大 Infintiy
a) 最大范围值 MAX_VALUE
b) 最小范围值 MIN_VALUE
- NaN 不是一个数字的数字
NaN参与运算得到的值一定是NaN
isNaN() 如果变量是NaN返回true 否则返回false
（5）手机验证码等待按钮特效
绑定事件
对象.onclick = function(){} 这就是绑定事件
（6）字符串
单双引号 没有差异想用哪个就用哪个 你开心就好 因为没有差异
（7）数据类型转换
- parseInt()
a) 如果把非数值类型转换为数值类型并不是绝对的
b) 如果把一个字符串不是数字或者负号开头的转换为数值 返回结果就是NaN
c) 如果当前非数值类型的值是NULL 返回值是NaN
- parseFloat()
- 典型案例
box.style.left = parseInt(box.style.left) + 10 + 'px';
（8）计算器特效
获取input框中的值使用value 不能使用innerHTML
（9）选项卡特效
a) 对象.style.display = “block” 显示
b) 对象.style.display=”none” 隐藏
26．函数
他和你的字符串内容一样 字符串怎么写他就怎么用
- 函数的定义
a) 直接法(常用)
function 函数名([形参]){
函数体
}
b) 匿名函数方式定义(常用)
var c = function(){}
c) 构造方法(了解即可)
var f= new Function(‘a’,’b’,’return a+b’); 在声明函数的时候最后面的参数一定是函数的函数体内容 前面的所有参数都是函数的形参
d)
- 函数的调用(重点重点重点)
a) 指定调用(常用)
函数名([实参])
注意: 函数声明和调用不在同一个script标签中 必须要先声明后调用
b) 赋值语句中的调用(常用)
var func = function(){}
func()
注意:
匿名定义的函数 必须先声明后调用
因为js变量都是先声明后使用
//将函数的返回值赋值给变量
var demo = func();
//将函数本身赋值给变量
var demo1 = func;
c) 事件调用(常用)
<button onclick="test()">我想早点调用</button>
d) a标签方式调用(常用)
<a href="javascript:test()">点击</a>
<a href="javascript:void(0)" onclick="test()">连接</a>
<a href="javascript:;">嘿嘿嘿</a>
- 函数的一些细节内容
a) js中函数可以重复定义
b) js中没有返回值的函数默认返回undefined
php中没有返回值的函数默认返回 null
c) js函数的返回值没有任何特殊内容返回值后面的内容不在继续执行
d) js中函数可以不传递实参 形参的默认值为undefined
- 函数的参数
a) 如果当前的实参个数大于形参的个数那么多出来的实参就会被省略掉
b) 如果当前的实参个数小于形参的个数那么多出来的形参就会定义为undefined
c) arguments 获取函数的实参的数组对象 他可以把所有实参以数组的形式返回
d) 在函数内部可以直接使用arguments这个对象
e) 所有实参的个数可以通过arguments.length 取值
27．变量作用域(重点重点重点)
（1）函数外面声明的变量就是全局变量
（2）函数可以直接访问全局变量
（3）局部变量就是在函数中使用var声明的变量才是我们的局部变量
（4）局部变量在整个函数中有效(从第一行开始有效 只不过是先声明 不赋值而已) 出了函数外就是没有效果了
（5）如果局部变量和全局变量同名那么函数在函数内部使用的变量是局部变量
（6）形参也是局部变量
（7）变量作用域链(非常重要非常重要)
28．各种各样的函数
（1）匿名函数 没有函数你的函数
（2）回调函数 将函数名以参数的形式传递过去 会自动调用这个函数
（3）递归函数 就是自己调用自己函数
（4）子函数 就是声明在函数里面的函数
（5）自调函数 就是声明函数的时候在后面加上小括号，如果是常规声明方式需要将整个函数也加上小括号包起来 如果上面声明了别的函数请记得需要在上面的函数后面加上分号否则变为自调函数影响操作
（6）自己修改自己函数值的函数 函数体内重新赋值
（7）自宫函数 一次性函数 将函数体内容转换为空
二、对象操作
1．得到对象的方式
（1）声明对象(不常用)
var obj = {name:'abx',size:size,say:function(){
alert('发卡机离开房间');
}}
注意: 上面这种声明方式可以解析变量 访问不存在的成员属性属性值为undefined 调用成员方法obj.say();
（2）对象名称(常用)
var obj = new Object()
（3）找对象(最常用)
document.getElementById()
document.getElementsByTagName();
document.getElementsByClassName();
2．时间对象 Date
//创建时间对象
var date = new Date();
//alert(typeof date);
//alert(date);
//获取年
//获取1900年到现在的年份
// year = date.getYear();
// alert(year);
year = date.getFullYear();
document.write('年:'+year+'<br/>');
//获取月 0-11
month = date.getMonth()+1;
document.write('月:'+month+'<br/>');
//获取日
day = date.getDate();
document.write('日:'+day+'<br/>');
//获取小时
hour = date.getHours();
document.write('小时:'+hour+'<br/>');
//获取分钟
minute = date.getMinutes();
document.write('分钟:'+minute+'<br/>');
//获取秒数
seconds = date.getSeconds();
document.write('秒:'+seconds+'<br/>');
//时间戳
time = date.getTime();
document.write('时间戳:'+time+'<br/>');
//获取时间毫秒
milliseconds = date.getMilliseconds();
document.write('毫秒:'+milliseconds+'<br/>');
//获取星期
weekday = date.getDay();
document.write('星期:'+weekday+'<br/>');
//获取到时区差 单位是分钟
offsettime = date.getTimezoneOffset();
document.write('时区差:'+offsettime+'<br/>');
3．表特效
获取本地时间
locatime= date.toLocaleString();
4．数学对象
Math 本身就是一个对象
abs()：绝对值
ceil()：进一法取整
floor()：退一法取整
max()：最大值
min()：最小值
random()：随机数
round()：四舍五入
5．数组对象
（1）直接定义
arr = [10,20,30];
（2）创建数组对象
arr2 = new Array(10,20,30);
（3）创建数组对象的方式
var obj = new Array();
// obj[0] = 10;
// obj[1] = 20;
// obj[2] = 30;
// console.log(obj);
obj[obj.length] = 10;
obj[obj.length] = 20;
obj[obj.length] = 30;
console.log(obj);
如果你使用直接赋值法声明数组那么他的键名必须赋予值这是在js中如果想要自增请使用对象.length 来进行书写键值自增
toString()：将数组转换为字符串
join()：将数组转换为字符串（可以指定以什么分隔）；
push()：在数组尾部添加元素
unshift()：在数组的头部添加元素
pop()：删除数组最后一个元素
shift()：删除数组中第一个元素
6．随机轮播图
通过随机数得到数组下标 通过数组下标获取到图片名称 将图片名称更替换到页面中即可
三、单按钮点名器
四、双按钮点名器
五、定时器特性
每次点击定时器都会触发定时器这样的定时器会越来越快 解决他的问题只需要加上一个判断 判断你的定时器变量是否为undefined
六、折叠菜单
判断是否显示
对象.style.display=”block”;
对象.style.display=”none”;
七、字符串对象
str = new String(‘字符串内容’);
match()：找到一个或多个正则(字符串)表达式匹配
indexOf()：返回一个字符串第一个出现的位置的索引值(索引从0开始)
substr()：截取字符串 从哪个位置开始取多少个
slice()：截取字符串从哪个位置到哪个位置
search()：匹配和正则表达式的字符串符合的内容 如果能匹配返回当前字符串所在的索引位置，如果匹配不到返回 -1
replace()：指定某个字符替换另外一个字符
八、什么是事件
1．用鼠标或者键盘操作文档的时候产生的一个过程我们叫做事件 其实就是用户操作
2．事件驱动: 当产生事件的时候就会调用程序去执行处理事件达到某个效果 这个过程我们叫做事件驱动
九、事件组成
事件源 事件 事件处理
十、事件的设置
1．标签引入
2．标签绑定
十一、事件对象
鼠标坐标
- clientX 鼠标X轴坐标
e.clientY 鼠标Y轴坐标
十二、事件列表
windows 对象 顶级对象
文档事件
onload 文档加载成功
onunload 关闭窗口的时候触发 IE支持
onbeforeunload 离开页面的时候给予提示信息
图片事件
onload 图片加载成功
onerror 图片加载失败
鼠标事件
onclick 单击事件
ondblclick 双击事件
onmousedown 鼠标按下事件
onmouseup 鼠标弹起事件
onmousemove 鼠标移动事件
onmouseout 鼠标移除事件
onmouseover 鼠标移入事件
onmouseenter 鼠标移入事件
onmouseleave 鼠标移除事件
十三、拖拽div特效
1．首先需要知道你当前坐标相对于元素坐标点坐标
2．移动之后的left和top值是 移动之后的鼠标坐标点减去相对坐标点内容
十四、
内容总结
以上是互联网集市为您收集整理的JavaScript知识总结全部内容，希望文章能够帮你解决JavaScript知识总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。