JavaScript总结
一、JavaScript初识知识点
1.JS出现新的内容：
1.1 HTMLDOM(文档对象类型)，当网页被加载时，浏览器会创建页面的文档对象模型
1.2 正则表达式(RegExp) 通过关键字new来定义Regexp对象,对象有三个方法test()、exec()以及compile()。
2.js引入方法
<script type="text/javascript" ></scritpt>
<script src="demo.js"></script>
3.js放置的位置
JavaScript可以放在html文档中任何位置，一般放置在head 或者body当中
3.1放在head当中
在head当中放置<script></script>,浏览器解析到head中就会执行这个代码,然后执行其余部分
3.2放在body当中
JavaScript代码在网页读取到该语句的时候就会执行。
3.3放置时要注意html解析的顺序
4.js的注释和语句
js的注释和c语言相同,单行注释//，多行/**/，语句后面要加；号。
5.变量
5.1变量就是一种存储容器，js中定义的方法为var 变量名
5.2变量名必须使用字母或者下划线开始。
5.3变量名由英文字母，数字，下划线组成
5.4变量名不能与关键字重名
5.5变量名区分大小写
5.6变量名规范先声明再赋值
6.函数(方法)
6.1函数是完成某个特定功能的一组语句，调用函数可以节省大量代码
语法如下
function 函数名(形参){
函数体
}
6.2匿名函数
function (){}
6.3function是定义函数的关键字
7.js的互动
7.1 document.write(""); 输出一段话，相当c语言的printf
7.2 对话框
7.2.1 alert("内容")；// 警告对话框，可以放变量名
7.2.2 confirm("内容")；//消息对话框，会有是或否的按钮
7.2.3 prompt("文本","默认值")；
//提示用户进入输入某个值，有返回值，取消则为null
//文本是提示的内容,不可修改，默认值不可以修改，是用户输入的值,
7.3 window.open
window.open(<URL>,<窗口名称>,<参数字符串>)， 打开一个新窗口
7.3.1参数之间逗号及等号前后有空格，该字符串无效，只有删除空格才能正常运行。
7.3.2考虑浏览器兼容问题
二、JavaScript基本操作知识点
1.数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
1.1数字 Number
1.2字符串 String
1.3布尔值 Boolean
1.4null、undefind、NaN
2.运算符
2.1 基本的+ - * / %(求余)
2.2 比较运算符
==(等于) ===(全等（值和类型）)
基本的 > < >= <= !=(不等于)
2.3 逻辑运算符
&& 逻辑与
|| 逻辑或
！ 逻辑否
3.分支结构
3.1 if 只有当指定条件为 true 时，该语句才会执行代码。
if (条件)
{
只有当条件为 true 时执行的代码
}
3.2 If...else 语句
if (条件)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
3.3 If...else if...else 语句
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
3.4 switch
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
4.循环结构
4.1 for 循环
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
4.2 while 循环
while (条件)
{
需要执行的代码
}
4.3 do..while 循环
do
{
需要执行的代码
}
while (条件);//和c语言一样需要加分号
5.Break
break 语句可用于跳出循环。
break 语句跳出循环后，会继续执行该循环之后的代码(如果有的话)
三、JavaScript BOM操作
1.window
1.1 open()打开窗口
1.2 close()关闭窗口
1.3 name 设置或返回窗口的名称。
2.location 获取浏览器地址
2.1 location.href获取整体的网址
2.2 location.reload()刷新页面
2.3 location.host 主机名加端口
2.4 location.hostname 主机名
2.5 location.protocol 获取http:或https:协议
2.6 location.port 端口名
2.7 location.pathname 主机名后面的路径
2.8 location.replace(URL) 跳转到指定页面
2.9 location.hash 设置或返回从井号 (#) 开始的 URL（锚）。
2.10 location.assign() 加载新的文档。
3.history
3.1 history.forward();//前进页面 相当于 history.go(1)
3.2 history.back(); //后退页面 相当于 history.go(-1)
3.3 history.go(0); // 刷新页面
3.4 history.length //返回浏览器历史列表中的 URL 数量。
4.screen
4.1 screen.height //获取屏幕当前高度
4.2 screen.width //获取屏幕当前宽度
4.3 screen.availWidth //获取可用屏幕宽度
4.4 screen.avilheight //获取可用屏幕高度
5.navigator
5.1 navigator.appName //浏览器名称，(网景)
5.2 navigator.appVersion // 返回浏览器的平台和版本信息。
5.3 navigator.cookieEnabled //返回指明浏览器中是否启用 cookie 的布尔值。
5.4 navigator.platform // 返回运行浏览器的操作系统平台。
5.4 navigator.onLine // 返回指明系统是否处于脱机模式的布尔值。
6.定时器
6.1 setInterval(参数1,参数2) 重复循环执行
参数1：表示的是定时器绑定的函数的名称
参数2：表示的是定时器执行的时间 单位是毫秒
6.2 setTimeOut(参数1，参数2) 只执行一次
参数1：表示的是定时器绑定的函数的名称
参数2：表示的是定时器执行的时间 单位是毫秒
6.3 clearInterVal(参数);
参数：表示的是在启动定时器时返回的id（标识）
6.4 clearTimeOut();
参数：表示的是在启动定时器时返回的id（标识）
四、JavaScript DOM 操作
1.DOM是什么？
文档对象模型(Document Object Model) 定义访问的新标准，将HTML呈现为树结构。
1.1元素节点，如<p>,即标签名
1.2文本节点， <span>内容</span>,标签元素中的内容
1.3属性节点：元素属性，如<a>标签 中href
2.获取节点进行操作
2.1 childNodes获取子节点，但是标准下会获取空白节点
2.2 nodeType节点类型1）元素节点（标签）2）文本节点（空白节点）
2.3 children获取第一级子元素的节点
2.4 firstChild获取子元素里的第一个，标准下:firstElementChild
2.6 lastChild获取子元素里的最后一个，标准下:lastElementChild
2.7 nextSibling获取子指定元素的下一个兄弟节点
2.8 previousSibling获取指定元素的上一个兄弟节点
2.9 parentNode获取父节点
2.10 createElement（标签名）创建一个节点
2.11 appendchild（节点）追加一个节点
2.12 insertBefore（节点，原有节点）在已有的元素前面插入
2.13 removeChild（节点）删除一个节点
2.14 replaceChild（节点，已有节点）替换已有的节点
2.id属性值的唯一的，找到id就可以进行相应的操作
语法为document.getElementById("id名")；
2.通过Name获取元素
获取html中标签的name值进行操作
语法为document.getElementsByname("name名");//返回的是一个数组
2.通过TagName获取元素
获取html中的标签名进行操作
语法为document.getElementsByTagName("标签名")；//返回的是一个数组
3.DOM事件
//全局事件
onscroll 事件拖动滚动条时发生
onload 页面加载完成后触发事件
onresize 事件会在窗口或框架被调整大小时发生
onchange 事件会在域的内容改变时发生
//鼠标事件
onclick 鼠标单击触发此事件
oncontextmenu 鼠标右键事件
ondblclick 鼠标双击时触发此事件
onsubmit 事件会在表单中的确认按钮（submit）被点击是发生。
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后松开鼠标时触发此事件
onmouseover 当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 当鼠标离开某对象范围时触发此事件
onmousewheel事件ie、chrome下鼠标滚轮滚动时发生
//键盘事件
onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown 当键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件
3.1 可以绑定到标签当中
<div id="school" onclick="函数名()">
3.2 绑定到DOM对象上
DOM对象.onclick = function () {}
3.3 addEventListener('事件',函数)；//可以绑定多个事件
3.3.1: 如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"
3.3.2: 事件处理函数中的this 指代 DOM节点自身 (w3c标准)
3.3.3: 第一个事件参数,一律把事件名称的'on'去掉 (w3c标准)
3.4去除绑定
removeEventListener('事件',函数)
3.5取消事件的默认效果
事件对象.preventDefault(); // 阻止事件的默认效果, w3c方法
事件对象.returnValue = false; // 设置returnValue 的属性值为false;
4.innerHTML 和 innerText
3.1 innerHTML 属性用于获取或替换HTML元素的内容。
3.2 innerText 修改HTML元素的内容，但不执行html标签
5.显示和隐藏
display属性，网页中显示和隐藏效果
语法 document.getElementById("id名").style.display = value
value值为:
none:隐藏内容
block:显示内容
6.ClassName
改变Class类名,属性设置或返回元素的class 属性。
语法 document.getElementById("id名").ClassName = 新的class名
//可以获取class属性
//修改css的元素的外观
7.This的使用方法
This是指调用上下文
针对函数的应用场景来讨论
函数的4种调用方式
1.全局作用域内
当在全部作用域内使用 this时，它将会指向全局对象，即window对象
2:函数调用
当在全局作用域内调用函数时，this 也会指向全局对象。
3.方法调用
this 指向调用该方法的对象。
4.调用构造函数
在构造函数内部，this 指向新创建的对象。
//欢迎，补充总结,收集了大部分的js总结小知识
博客列表 >JavaScript总结-复习宝典
JavaScript总结-复习宝典
- 前段总结原创转载
- 2017年12月12日 12:46:49463浏览
上一条：谷歌访问助手安装下一条：HTML的小技巧（一）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议