Web前端入门——JavaScript基础总结
参考资料
http://www.lvyestudy.com/les_js/js_list.aspx
章节排序及内容以书籍为准
知识梳理：
1、基本语法
数据类型——选择与循环——函数——字符串——数组对象——时间对象——数学对象
2、dom
获取对象——操作元素——操作样式——DOM操作——遍历DOM
3、补充
事件——监听器——对话框
js引入：
标签
外部
第二十五章——语法基础
1、常量与变量
- 变量
由字母、下划线（_）或美元符号组成，且第一个字符不能是数字；
不能是系统关键字和保留字；
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名：
| Array | Date | eval | function | hasOwnProperty |
| Infinity | isFinite | isNaN | isPrototypeOf | length |
| Math | NaN | name | Number | Object |
| prototype | String | toString | undefined | valueOf |
- 常量
常量名全部大写
2、数据类型
所有变量都用var声明，var可以省略
- 基本数据类型
（1）数字型（Number型）
（2）字符串型（String型）
（3）布尔型（Boolean型）
（4）空值（null型）
（5）未定义值（undefined型）
- 特殊数据类型
对象型（Object型）
3、运算符
（1）算术运算符：%、++、--；
（2）比较运算符：==；
（3）赋值运算符：*=，/=；
（4）逻辑运算符：&&；
（5）条件运算符：条件 ? 表达式1 : 表达式2;；
- 字符串型→数值型
parseInt("字符串") //将字符串型转换为整型
parseFloat("字符串") //将字符串型转换为浮点型- 数值型→字符串型
任何变量与字符串相加，都会向字符串转型
变量.toString()5、注释
//单行注释内容
/*多行注释内容*/第二十六章——流程控制
- if与if else
支持嵌套结构
- while与for
{}不能省略
- break与continue
跳出循环
- switch
switch(表达式) { case 取值1: 语块1;break; case 取值2: 语块3;break; …… case 取值n: 语块n;break; default: 语句块; }
第二十七章——函数
1、定义
function 函数名(参数1,参数2,….,参数n)
{
//函数体语句
return 表达式;
}2、调用
- 直接调用
- 表达式
- 事件
- 超链接调用
第二十八章——字符串对象
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| concat() | 连接字符串。 |
| indexOf() | 检索字符串。 |
| lastIndexOf() | 从后向前搜索字符串。 |
| replace() | 替换匹配的字符串。 |
| search() | 检索匹配的值字符串，返回一个整数 |
| split() | 把字符串分割为字符串数组。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| toString() | 返回字符串。 |
第二十九章——数组对象
1、创建
var 数组名=new Array(n);var 数组名=new Array(元素1,元素2,...元素n);- 长度
数组名.length2、数组方法
| 方法 | 说明 |
|---|---|
| slice() | 获取数组中的某段数组元素 |
| unshift() | 在数组开头添加元素 |
| push() | 在数组末尾添加元素 |
| shift() | 删除数组中第一个元素 |
| pop() | 删除数组最后一个元素 |
| toString() | 将数组转换为字符串 |
| join() | 将数组元素连接成字符串 |
| concat() | 多个数组连接为字符串 |
| sort() | 按照自定义规则，将数组元素进行排序 |
| reverse() | 将数组元素反向 |
- 排序sort()方法
function asc(a,b){
//升序比较函数
function asc(a,b)
{
return a-b;
}
//降序比较函数
function des(a,b)
{
return b-a;
}
//创建数组的同时对元素赋值
var arr=new Array(3,9,1,12,50,21);
arr.sort(asc);
arr.sort(des);
}第三十章——时间对象
var 日期对象名 = new Date();var 日期对象名 = new Date(日期字符串);
日期字符串可以是以下几种形式：
"2015-5-3"
"May 3,2015"
"2015/5/3"| 方法 | 说明 |
|---|---|
| getFullYear() | 返回一个表示年份的4位数字 |
| getMonth() | 返回值是0（一月）到11（十二月）之间的一个整数 |
| getDate() | 返回值是1~31之间的一个整数 |
| getHours() | 返回值是0~23之间的一个整数，来表示小时数 |
| getMinutes() | 返回值是0~59之间的一个整数，来表示分钟数 |
| getSeconds() | 返回值是0~59之间的一个整数，来表示秒数 |
| 方法 | 说明 |
|---|---|
| setFullYear(year,month,day) | 可以设置年、月、日 |
| setMonth() | 可以设置月、日 |
| setDate() | 可以设置日数 |
| setHours(hour,min,sec,millisec) | 可以设置时、分、秒、毫秒 |
| setMinutes() | 可以设置分、秒、毫秒 |
| setSeconds() | 可以设置秒、毫秒 |
| 方法 | 说明 |
|---|---|
| toString() | 将日期时间转换为普通字符串 |
| toUTCString() | 将日期时间转换为世界时间（UTC）格式的字符串 |
| toLocaleString() | 将日期时间转换为本地时间格式的字符串 |
- 日期对象.toString()
- 日期对象.toUTCString()
- 日期对象.toLocaleString()
- 获取星期
getUTCDay()获得整数第三十一章——数学对象
| 方法 | 说明 |
|---|---|
| ceil(x) | 对数进行上舍入 |
| floor(x) | 对数进行下舍入 |
| max(x,y) | 返回x和y中的最大值 |
| min(x,y) | 返回x和y中的最小值 |
| random() | 返回0~1之间的随机数 |
| round(x) | 把数四舍五入为最接近的整数 |
Math.random()第三十六章——windows对象
| 方法 | 说明 |
|---|---|
| open()、close() | 打开窗口、关闭窗口 |
| setTimeout()、cleanTimeout() | 设置或取消“一次性”执行的定时器 |
| setInterval()、clearInterval() | 设置或取消“重复性”执行的定时器 |
- 打开窗口
window.open(URL, target);- 关闭当前窗口
window.close();
close();
this.close();- 关闭子窗口
窗口名.close();- 定时器
参数code可以是一段代码，也可以是一个调用的函数名；
var 变量名 = setTimeout(code , time);
var 变量名 = setInterval (code , time);
- location对象
self.location.href="/url" 当前页面打开URL页面- alert()对话框
alert(变量+"HTML;\nCSS;\nJavaScript;\njQuery;\n")；- confirm()方法
confirm(message)- prompt()方法
输入并返回用户输入的字符串
var name = prompt("请输入你的名字");
第三十七章——document对象
document对象，即文档对象。顾名思义，用于操作HTML文档。包含了标题（document.title）、URL（document.URL）等属性
浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口的HTML文档生成一个document对象
| 方法 | 说明 |
|---|---|
| document.write() | 输入文本到当前打开的文档 |
document.write("输出的内容")第三十二章——DOM基础
DOM，全称“Document Object Model（文档对象模型）”
获取的对象一般以o开头，表示这是一个DOM对象，document 通常是整个 DOM 树的根节点
1、节点
DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容（根节点、父节点、子节点、兄弟节点）
常见的节点：元素节点、属性节点、文本节点
只有元素节点才能拥有子节点
2、document对象获取元素
- getElementById()
通过id选中元素
- getElementsByName()
通过此方法来取得表单元素，因为一般元素没有name属性
- getElementsByTagName()
通过标签名来获取多个元素，可以动态操作DOM
- getElementsByClassName（）
通过类名class属性得到一个“类数组”
- 选择器
与css选择器写法完全一样
document.querySelector("选择器"); document.querySelectorAll("选择器");
3、创建节点
var e = document.createElement("元素名"); //创建元素节点
var t = document.createTextNode("文本内容"); //创建文本节点
e.appendChild(t); - 操作属性
每一个节点都可以看做一个对象对它赋值
var oIn = document.createElement("input");
oIn.id = "submit";
oIn.type = "button";
oIn.value = "提交";
document.body.appendChild(e);4、插入节点
- fObj.appendChild(obj)
将obj插入父节点内部的末尾
- fObj.insertBefore(new,old)
将old插入父节点内部指定位置之前
5、删除节点
删除此节点内部的某个节点。
Obj.removeChild();6、复制节点
Obj.cloneNode(bool)（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；
7、替换节点
替换当前节点内部的子节点
obj.replaceChild(new,old)第三十三章——DOM进阶
1、HTML对象属性
obj是DOM对象，attr是属性名
- 获取
obj.attr
- 设置
obj.attr="值"2、HTML对象方法
- obj.getAttribute("attr")
与 obj.attr 等价
- obj.setAttribute("attr","值")
与 obj.attr="值" 等价
- obj.removeAttribute("attr")
也可以使用 对象(元素节点).className=""
- obj.hasAttribute("attr")
返回一个布尔值
3、css属性操作
attr属性名要转换成“驼峰式”的命名
- 获取
getComputedStyle(obj).attr
getComputedStyle(obj)["attr"]- 设置
设置行内样式，为style属性设置值
obj.style.attr="值";
obj.style["attr"]="值";
- 多个css属性
语句遵循css写法
obj.style.cssText="语句"4、css类名操作
obj.className = "值";
obj.setAttribute("class","值");
5、DOM遍历
obj.parentNode 获取当前节点的父节点| 属性 | 说明 |
|---|---|
| childNodes | 获取当前节点的子节点集合 |
| firstChild | 获取当前节点的第一个子节点 |
| lastChild | 获取当前节点的最后一个子节点 |
| previousSibling | 获取当前节点的前一个兄弟节点 |
| nextSibling | 获取当前节点的后一个兄弟节点 |
| 属性 | 说明 |
|---|---|
| children | 获取所有的元素节点 |
| childElementNodes | 获取当前节点的子节点集合 |
| firstElementChild | 获取当前节点的第一个子节点 |
| lastElementChild | 获取当前节点的最后一个子节点 |
| previousElementSibling | 获取当前节点的前一个兄弟节点 |
| nextElementSibling | 获取当前节点的后一个兄弟节点 |
6、innerHTML和innerText
obj.innerHTML=
"绿叶学习网
JS入门教程";
| HTML代码 | innerHTML返回值 | innerText返回值 |
|---|---|---|
绿叶学习网 |
"绿叶学习网" | "绿叶学习网" |
绿叶学习网 |
"绿叶学习网" | "绿叶学习网" |
| "" | ""（空字符串） |
innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记
innerText属性与inerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容
第三十四章——事件处理器
不能为同一个元素添加多个相同事件
1、调用
- 在script标签中
var 变量名 = document.getElementById("元素id");//获取某个元素，并赋值给某个变量
变量名.事件处理器 = function()
{
……
}- 元素中调用
onclick="alert('绿叶学习网')"
onclick="alertMessage()"
2、鼠标事件
| 事件 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| ondbclick | 鼠标双击事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移出事件 |
| onmousemove | 鼠标移动事件 |
| onmousedown | 鼠标按下事件 |
| onmouseup | 鼠标松开事件 |
3、键盘事件
| 事件 | 说明 |
|---|---|
| onkeydown | 按下键事件（包括数字键、功能键） |
| onkeypress | 按下键事件（只包含数字键） |
| onkeyup | 放开键事件（包括数字键、功能键） |
4、表单事件
| 事件 | 说明 |
|---|---|
| onfocus | 获取焦点时触发的事件 |
| onblur | 失去焦点时触发的事件 |
| onselect | 选中文本框时触发的事件 |
| onchange | 选项元素发生变化时 |
5、编辑事件
| 事件 | 说明 |
|---|---|
| oncopy | 防止页面内容被复制 |
| onselectstart | 防止页面内容被选取 |
| oncontextmenu | 禁用鼠标右键 |
6、页面事件
| 事件 | 说明 |
|---|---|
| onload | 加载完成时 |
| onbeforeunload | 页面离开时 |
第三十五章——事件监听器
事件监听器可以为同一个事件添加多个相同事件
1、事件监听器
type是一个字符串，指事件类型
fn是一个函数名，或一个匿名函数
false表示冒泡阶段调用
- 绑定事件
obj.addEventLister(type，fn,false);
- 解绑事件
obj.removeEventLister(type，fn,false);对于事件处理器可以使用“obj.事件名=null”来实现
2、event对象
每次调用一个事件的时候，js都会默认给事件函数添加一个隐藏的参数即event对象，一般是第一个传入
| 属性 | 描述 |
|---|---|
| type | 事件类型 |
| keyCode | 键码值 |
| ctrlKey | 返回当事件被触发时，”CTRL” 键是否被按下。 |
| shiftKey | 返回当事件被触发时，”SHIFT” 键是否被按下。 |
| shiftKey | 返回当事件被触发时，”SHIFT” 键是否被按下。 |
3、this
哪个DOM对象调用了this所在的函数，那么this指向的就是哪个DOM对象