javascript
2019-03-05 10:36:19 53 举报AI智能生成
走过路过给个赞哈
作者其他创作
大纲/内容
函数
如何创建函数
方法一
function 函数名(参数列表) {
函数体…
}
函数体…
}
1）定义函数的时候不需要定义它的返回值类型。如果函数需要返回结果，那么可以使用return命令直接返回即可；
2）函数的形参定义不需要使用var；
3）js函数是没有重载，后面定义的函数会覆盖前面定义的函数。所以，在一个js文件中，不要出现重复的函数定义。
2）函数的形参定义不需要使用var；
3）js函数是没有重载，后面定义的函数会覆盖前面定义的函数。所以，在一个js文件中，不要出现重复的函数定义。
方法二
var 函数名 = function(参数列表) {
}
}
内置对象
1.string对象
创建string对象的两种方法
1.var s1 = ‘abc’
2.var s2 = new String（‘abc’）
string对象常用方法
1.fontcolor(colorval)
构建一个指定颜色值的font标签，然后把字符串的内容包含起来 str.fontcolor("red")
2.concat()
拼接字符串
3.charAt()
根据索引查找字符
4.charCodeAt()
根据索引查找字符的unicode编码
5.indexOf()
查找字符串中指定字符串的第一次出现的索引值
6.lastIndexOf()
查找字符串中子串最后出现的索引值
7.substring(start, end)
提取字符串指定开始和结束位置的内容
8.substr(start, length)
提取字符串中指定内容，第一个参数开始位置，第二个参数提取字符的长度
9.valueof()
返回字符串的内容
10.length（）
返回字符串长度
s1 == s2 true
s1 === s2 false
s1 === s2 false
区别
1）类型上的区别：方式一创建的字符串类型是String类，而方式二创建的字符串类型是Object类型；
2）处理上的区别：方式一创建的字符串不能够添加额外的属性和方法，而方式创建的字符串可以添加额外的属性和方法；
2.Number对象
创建Number对象的两种方法
1.var 变量名 = 数值
2.var 变量名 = new Number(数值)
Number对象常用方法
1.Number.parseInt :把字符串转换成number
执行parseInt函数的时候，默认它只会把字符串第一个非数字（包含空格）前面字符进行转换。
如果第一个字符是非数字（不包含空格），那么转换结果为NaN
执行parseInt函数的时候，默认它只会把字符串第一个非数字（包含空格）前面字符进行转换。
如果第一个字符是非数字（不包含空格），那么转换结果为NaN
2.Number.toString:可以把一个数值换成指定进制的字符串.
如num.toString(2) 二进制
如num.toString(2) 二进制
3.Math对象
数学类工具
1.Math.abs（）
获取绝对值
2.Math.ceil（）
向上取整数
3.Math.floor（）
向下取整数
4.Math.max（）
求两个数的最大值
5.Math.min（）
求两个数的最小值
6.Math.random（）
获取0~1之间的随机数，但是不包括1
7.Math.round（）
对指定的值进行四舍五入运算
4.Date对象
创建Date对象
dateObj = new Date（）
1.getTime()：获取Date对象的毫秒数
2.getFullYear()：获取日期的年份
3.getMonth()：获取日期的月份，从0开始的
4.getDate()：获取日期的日
5.getHours()：获取日期的小时
6.getMinutes()：获取日期的分钟
7.getSeconds()：获取日期的秒
5.Array对象
创建Array对象
1.var arr1 = new Array(); //定义空数组
2.var arr2 = new Array(10); //定义默认长度的数组
3.var arr3 = new Array(10, 20, 30); //定义数组时候指定数组元素
常用方法
1.concat()：把多个元素或数组拼接成一个新的数组
2.join()：使用指定符号把数组的元素拼接成一个字符串并返回该字符串
3.pop():删除并返回数组的最后一个元素
4.push():往数组中添加一个元素，并返回数组的长度
5.reverse():反转数组元素
6.slice():返回指定开始和结束位置元素所组成的新数组
7.splice():从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素
8.sort():对数组进行排序
6.自定义对象
创建对象的三种方式
1.通过函数创建对象
var 对象名 = new 函数名（参数列表）
2.通过object创建对象
var 对象名 = new Object（）
3.通过JSON语法创建对象
var 变量名 = {
键: 值,
键: 值,
…
};
键: 值,
键: 值,
…
};
7.正则表达式对象
正则表达式对象
var obj = /正则表达式/[模式]
g模式：当查找到符合正则表达式的内容，那么下一次就不会再重新从字符串开始位置重新查找，而是从上一次匹配的字符串的后面继续查找
i模式：忽略大小写
var obj = new RegExp(“正则表达式”)
注意：1）使用new方式创建正则表达式对象，那么正则表达式不需要写反斜杠/；
2）正则对象的参数要使用双引号引起来；
2）正则对象的参数要使用双引号引起来；
正则表达式的方法
匹配内容
test（）
一个字符串是否匹配某个模式 返回True or False
如：var patt = /e/;
patt.test("The best things in life are free!");
如：var patt = /e/;
patt.test("The best things in life are free!");
查找内容
exec（）
该方法用于在字符串里面查找并返回符合正则表达式的内容
替换内容
replace（）
第一个参数是一个正则表达式对象，第二个参数是要替换的内容
javascript组成
1.ECMAScript（基础语法）
描述了JavaScript的基本语法（所有浏览器都支持）；
1.注释
JavaScript：//单行注释 或 /*多行注释*/
2.变量
let 变量名 [= 初始值];
注意事项：
1）let关键字可以不写。变量的类型是根据它的值来确定的。
2）变量名必须以字母或下划线开头；
3）js的变量是区分大小写的；
4）js变量必须要先声明后使用；
5）js变量的类型会随着它的值的改变而发生变化；
注意事项：
1）let关键字可以不写。变量的类型是根据它的值来确定的。
2）变量名必须以字母或下划线开头；
3）js的变量是区分大小写的；
4）js变量必须要先声明后使用；
5）js变量的类型会随着它的值的改变而发生变化；
3.数据类型
1.number：数值型，包含小数、整数、NaN(非数字)
2.string：字符串类型
3.boolean：布尔类型，它的值可以是true或false
4.object：对象类型
5.undefined：该变量没有定义或初始化的时候，那么就是undefined
4.运算符
算术运算符
1.+：加
注意：
前++和前--是先对变量执行++或--操作，然后再对结果进行运算。
后++和后--是先对变量执行运算，运算后再对变量执行++或--操作。
前++和前--是先对变量执行++或--操作，然后再对结果进行运算。
后++和后--是先对变量执行运算，运算后再对变量执行++或--操作。
2.-：减
3.*：乘
4./ ：除
5.% ：求余
6.++：累加 1
7：--累减1
比较运算符
1.==
数值等于 比如‘8’==8 为true
2.===
全等于 比如‘8’==8 为false
3.！=
不等于
4.>
大于
5.<
小于
6.>=
大于等于
7.<=
小于等于
逻辑运算符
1.&& 逻辑非：只有当多个条件同时成立才返回true，否则返回false
2.||逻辑或：只有一个条件成立就返回true，否则返回false；
3.！逻辑非：如果条件为true，那么就返回false，否则返回true
赋值运算符
1.=
2.+=
3.-=
4.*=
5./=
6.%=
5.流程控制
条件判断
if (条件表达式) {
} else if (条件表达式) {
} …
else {
}
} else if (条件表达式) {
} …
else {
}
条件选择
switch (变量) {
case 值1:
…
break; //退出switch
case 值2:
…
break;
..
default: //如果上面case条件都不满足，就执行default后面的js代码。
…
}
case 值1:
…
break; //退出switch
case 值2:
…
break;
..
default: //如果上面case条件都不满足，就执行default后面的js代码。
…
}
循环语句
1.while循环
while循环：先判断条件是否成立。如果条件成立就重复执行大括号中的js代码。直到条件不成立为止。
while (条件) {
….
}
while (条件) {
….
}
do..while循环：先执行大括号中的js代码，然后再判断条件是否成立。如果条件成立就继续执行大括号中的js代码。直到条件不成立为止。
do {
} while (条件);
do {
} while (条件);
2.for循环
for ([初始化语句]; [初始化语句]; [初始化语句]) {}
for （var i in li ）{}
2.DOM：文档对象模型。
节点
节点查找
直接查找
document.getElementById('idname')
document.getElementsByClassName('classname')
document.getElementsByTagName('tagname')
document.getElementsByName('name')
通过关系查找
parentElement
children
firstElementChild
lastElementChild
nextElementtSibling
previousElementSibling
节点操作
创建节点
createElement(标签名) ：创建一个指定名称的元素
添加节点
somenode.appendChild(newnode)
somenode.insertBefore(newnode,某个节点)
删除节点
removeChild()：获得要删除的元素，通过父元素调用删除
替换节点
somenode.replaceChild(newnode, 某个节点);
属性操作
获取文本节点的值
innerText:不管你是赋值还是取值，只能识别纯文本
innerHtml:既可以识别纯文本，也可以识别标签
属性（attribute）操作
elementNode.setAttribute(name,value)
设置属性
elementNode.getAttribute(属性名)
获取属性值
elementNode.removeAttribute(“属性名”）
移除属性值
value属性操作
input
select
textarea
class属性操作
classList.add('hide')
<div class="c1 hide" id="d1">
classList.remove('display')
改变css样式
document.getElementById("p2").style.color="blue";
DOM事件
1.事件类型
onclick:当用户点击某个对象时调用的事件句柄
onfocus:元素获得焦点
onblur:元素失去焦点
onload:一张页面或一幅图像完成加载
onsumbit: 确认按钮被点击
onchange：下拉菜单，和你当前事件不同的时候出发事件
等等。。。。
2.绑定事件
方式一： <div onclick='foo()'></div>
方式二：标签对象.on事件 = function (){}
3.BOM
浏览器对象模型。
window对象
location对象：地址栏
属性
href：设置或获取地址栏的信息
history对象：前进后退按钮
常用方法
back()：后退一步
forward()：前进一步
go(n)：如果正数就前进n步，如果是负数就后退n步
screen对象：包含有关客户端显示屏幕的信息
属性
width：返回显示器屏幕的宽度。
height：返回显示屏幕的高度
等等
document
Document 对象使我们可以从脚本中对 HTML
页面中的所有元素进行访问
页面中的所有元素进行访问
属性
body
提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>
对于定义了框架集的文档，该属性引用最外层的 <frameset>
URL
返回当前文档的 URL
等等
方法
close()
关闭用 document.open() 方法打开的输出流，并显示选定的数据
getElementById()
返回对拥有指定 id 的第一个对象的引用
getElementsByName()
返回带有指定标签名的对象集合
open()
打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()
向文档写 HTML 表达式 或 JavaScript 代码
writeln()
等同于 write() 方法，不同的是在每个表达式之后写一个换行符
navigator
对象包含有关浏览器的信息
属性
appName
返回浏览器的名称
browserLanguage
返回当前浏览器的语言
等等
方法
javaEnabled()
规定浏览器是否启用 Java
属性
window.location：获取location对象
window.document：获取document对象
window.screen：获取screen对象
window.navigator：获取navigator对象
window.history：获取history对象
方法
alert()：弹出一个提示框
open()：弹出一个新的窗口
URL：网址的地址
name：窗口的名字
features：定义窗口特征
close()：关闭窗口
setInterval()：指定毫秒数执行指定的js代码。然后每隔指定毫秒数重复执行。该方法会返回一个定时器ID
clearInterval(id)：根据ID取消定时器
setTimeout()：指定毫秒数后执行指定的js代码一次
编写javascript三种模式
1.HTML中编写
document.write('这是我们的第一个js代码.');
2.引入外部的js文件
script type="text/javascript" src="js/first.js"></script>
3.在HTML元素中
<input type="button" value="click me" onclick="document.write('click button');”/>
0 条评论
下一页
