JavaScript知识点概览
知识点
JavaScript中，每一条语句以分号结尾。
打印
document.write( );
<html>
<head>
<title>title>
<meta charset="utf-8">
<script type="text/javascript">
var a = 10;
document.write(a); //页面输出“10”
script>
head>
<body>
body>
html>
数据类型
- 基本数据类型：数字、字符串、布尔值、未定义值、空值。（单引号括起来的字符串只能含有双引号，同理，双引号只能含有单引号。）
- 引用数据类型：数组、对象。
运算符
- 与运算：&& 。有假则假。
- 或运算：|| 。有真则真。
- 非运算：! 。直接取反。
- 条件运算符：三目运算符。条件?表达式1(true):表达式2(false);
类型转换
-
隐式转换：自动进行的转换。
-
显示类型转换
字符串转为数字：1.Number（） 2.parseInt()和parseFloat();前者只是提取整数部分，后者不仅提取整数部分，还提取小数部分。
数字转字符串：1.与空字符串相加 2.toString();
转义字符
- ':英文单引号，":英文双引号
- document.write()中换行用“
” - alter()中换行用“\n”
流程控制
- 条件判断：if…else if…else…
- 选择结构：switch
- 循环结构：while/do…while…/for…
2020/8/27 星期四 10:49:11
函数
//初体验
函数
s
//绑定并调用函数赋值；
函数调用方法
- 直接调用
最常见的调用方式，一般用于“没有返回值的函数”。
- 在表达式中调用
一般用于“有返回值的函数”。
- 在超链接中调用
在a元素的href属性中使用“javascript:函数名”的形式来调用。
请点击
- 在事件中调用
给对应的标签绑定事件，触发进行调用
内置函数
parseInt( ) //提取字符串中的数字，只限提取整数。
parseFloat( ) //提取字符串中的数字，可以提取小数。
isFinite( ) //判断某一个数是否是一个有限数值。
isNaN( ) //判断一个数是否是NaN值。（即非数字的值）
escape( ) //对字符串进行编码
unescape( ) //对字符串进行解码
eval( ) //把一个字符串当做一个表达式去执行
2020/8/30 星期日 11:34:32
JavaScript内置对象
字符串对象(以下str为变量名)
- 获取字符串长度：str.length
- 带小写转换：
转小写：str.toLowerCase()
转大写：str.toUpperCase()
- 获取字符串中第几个字符：str.chartAt(n)；n为0~n数组下标 [空格也是字符串]
- 截取字符串：str.substring(start,end)；[start,end)
- 替换字符串：str.replace(“原字符串”，“替换字符串”)或者（“正则表达式”，“替换字符串"）
- 分割字符串：str.split(“分割符”)或者str.split(“分割符”，截取前N个元素)
- 检索字符串位置：
str.indexOf(“指定字符串”)；有就返回“指定字符串”开始的下标，没有就返回-1
str.lastIndexOf(“指定字符串”)；返回字符串最后出现的下标
数组对象(以下str为数组名)
- 数组的创建：
var 数组名 = new Array(元素1，元素2，。。。，元素n)； //完整形式
简写：var 数组名 = [元素1，元素2，。。。，元素n]
- 数组的获取：document.write(str[0-n]);
- 数组的长度：str.length
- 截取数组某部份：str.slice(strat,end)；[start,end)
- 为数组添加元素：//可同时添加多个元素，以逗号隔开
从数组开头添加元素：str.unshift()
从数组末尾添加元素：str.push()
- 删除数组元素：
删除数组第一个元素：str.shift()
删除数组最后一个元素：str.pop()
- 数组大小比较：str.sort()
- 数组颠倒排序：str.reverse（）
- 将数组元素连接成字符串：str.join(“连接符”)
时间对象
var 对象名 = new Date();
获取星期几：时间对象.getDay() //返回的是数字，比如星期4
weekday[时间对象.getDay()] //返回的是中文，比如星期四
- 用于获取时间的getXxx()方法
getFullYear()：获取年份，四位数
getMonth()：获取月份[0-11]
getDate()：获取日数[1-31]
getHours()：获取小时数[0-23]
getMinutes()：获取分钟数[0-59]
getSeconds()：获取秒数[0-59]
- 设置时间则将前缀改为setXxx()
时间对象.setFullYear(year,month,day)
时间对象.setMonth(month,day)
时间对象.setDate(day)
时间对象.setHours(hour,min,sec,millisec)
时间对象.setMinutes(min,sec,millisec)
时间对象.setSeconds(sec,millisec)
数学对象（无须new，直接调用属性跟方法,如：Math.PI）
- Math对象的属性
PI：圆周率 π
LN2：2的自然对数 ln(2)
LN10：10的自然对数 ln(10)
LOG2E：以2为底的e的对数
LOG10E：以10为底的e的对数
SORT2：2的平方根
SORT1_2：2的平方根的倒数
度数*Math.PI/180 ：用来表示角度
//比如document.write(“sin30：”+Math.sin(30*Math.PI/180))), 输出sin30：0.49999999999999994
- Math对象的方法
max(a,b,c…,n)：返回一组数的最大值
min(a,b,c…,n)：返回一组数的最小值
sin(x)：正弦
cos(x)：余弦
tan(x)：正切
asin(x)：反正弦
acos(x)：反余弦
atan(x)：反正切
atan2(x)：反正切
floor(x)：向下取整
ceil(x)：向上取整
random(x)：生成随机数
- random(x); 只能生成0到1之间的数，不包括1。
- 如果要生成0到10，需要这样写Math.random()*10
- 8~18：Math.random()*10+8
- -8~2：Math.random()*10-8
- 10~0：Math.random()*10-10 //都可以通过带入最小值0，最大值1来取得范围
2020/9/2 星期三 0:51:53
JavaScript核心技术 DOM基础
- 首先解释一下DOM，即文档对象模型（Document Object Model）,是W3C定义的一种标准，我们平时所用的hover，鼠标移到改变颜色等特效都是DOM提供的方法来实现的。可以说，DOM是对元素进行操作的。
- DOM采用“树形结构"，页面中的每一个元素都以”树节点"来表示。
- 比如一个网页的DOM树形结构。html元素为树根，即根元素。html下一层又分为head和body,head当中又分为title和meta；body下又可以分P标签，a标签等等。这样一层一层的，就形成了DOM树形结构。
总结：每个元素就是一个节点，一个节点就是一个对象。所以对元素的操作，可以理解为使用这个对象的属性和方法。
最常见的DOM节点有三种：元素节点、属性节点、文本节点
比如： //div标签就是元素节点，id=“menu”就是属性节点，“你好！"就是文本节点。
值得注意的是，节点 != 元素，而是节点包括元素。
nodeType属性
- nodeType值可以区分节点类型。比如元素节点的nodeType值为1，属性节点为2，文本节点为3。
获取元素
- getElementById( ); //通过id来选中元素。
**注意：**在浏览器页面必须加载完，才能用getElementById(),因为没加载完，可能就找不到对应id名，就会报错。我们可以使用window.onload = function(){ };来告诉浏览器：“先加载完页面，再解析window.onload内部的代码"。 - getElementsByTagName（ ），注意别少写了个“s”。
顾名思义，取标签名进行获取。一个网页中相同标签名有很多，所以他获取的是多个相同的标签元素，也就是获取的一个类数组。那么我们怎么取得想要的那个标签？
这里可以根据数组下标来选择。比如 < div id=“list” >下有多个li标签。需要选中第二个li标签。
var oul = document.getElementById("list")； //为什么不直接写第二句获取li,因为只写第二句就获取的是整个页面的li,写这一句是精确定位。
var oli = document.getElementByTagName("li")；
oli[1] //这就表示取得下的第二个li元素，其中oli.length可以获取类数组长度，可灵活使用。补充：只有1.getElementsByTagName（ ）可以操作动态创建的DOM元素，getElementById( )不能。2.getElementById( )前面只能接document
- getElementsByClassName( );通过class来选中。该方法也多了一个“s"，说明也是获取了一个类数组集合。
- querySelector(" CSS选择器 " )；来选中满足条件的第一个元素。 //比如 document.querySelector("#main/.main");
- querySelectorAll(" CSS选择器 " )；来选中满足条件的所有元素。也可结合数组下标进行选择。
- getElementsByName( );该方法也有“s"，说明也是获取类数组集合。通过表单元素的name，来获取。一般只用于单选按钮和复选框。
- document.title,由于一个页面只有一个title，所以可以直接用此方法修改。 //如 document.title="hello "
- document.body,由于一个页面只有一个body，所以可以直接用此方法修改。
创建元素
理解：最开始在HTML中不存在某些元素，我们可以使用JavaScript创建元素，这种创建方式，我们可以称为“动态DOM操作”。
- 创建元素节点：createElement( )
- 创建文本节点：createTxtNode( )
创建好了节点，那么我们怎么把它们放到HTML中去呢？- A.appendChild(B):将节点B放入节点A中。
如//创建简单元素(不带属性) var e = document.createElement( "元素名" ); var txt = document.createTxtNode( "文本内容" ); e.appendChild(txt); //创建复杂元素（带属性） //比如 var oInput = document.createElement( "input" ); oInput.id="submit"; //给元素属性赋值，即设置属性 oInput.type="button"; oInput.value="提交"; document.body.appendChild(oInput); //将oInput加入到body动态创建图片
var oImg = document.creatElement("img"); oImg.className = "pic"; //注意这里是className而不是class oImg.src = "images/xx.png"; oImg.style.border = "1px solid silver"; //注意这里的样式添加格式 document.body.appendChild(oImg);插入元素
- A.appendChild(B):将元素B插入到A的末尾，比如插入ul的最后一个li
- A.insertBefore(B,ref):将元素B插入到A中的子元素ref 之前 ，比如插入ul的第一个li。
（获取ul下的第一个子元素，我们可以用ul.firstElementChild方法，最后一个是lastElementChild）删除元素
- A.removeChild(B):删除A中的B元素
复制元素
- obj.cloneNode(bool)
obj表示被复制的元素，bool值为真（1/true）,则复制元素及元素下的所有子元素。为假（0/false）则只复制元素本身。替换元素
- A.replaceChild(new,old)
将A元素中的旧元素old,替换成新元素newJavaScript核心技术 DOM进阶
获取HTML属性操作
- 获取HTML属性值： obj.attr
obj为DOM对象，attr为属性名。比如 oBtn.id 表示获取按钮的id属性（oBtn表示按钮创建的对象）- 设置HTML属性值：obj.abbr = "值"
HTML属性操作(对象方法)
- obj.getAttribute(“attr”)
获取元素的某个属性的值，等价于 obj.attr，区别在于**obj.getAttribute(“attr”)**可以获取自定义属性（比如data属性），而obj.attr不能。- obj.setAttribute(“attr”，“值”)
同样的，等同于 obj.abbr = “值” ，区别也在于自定义属性。- obj.removeAttribute(“attr”)
删除属性- obj.hasAttribute(“attr”)
判断元素中是否包含某个属性值，返回的是true/falseCSS属性操作
- 获取CSS属性值：getComputedStyle(obj).attr
attr表示CSS属性名，注意，这里的属性名比如font-size要写成fontSize,需要去掉“ - ”(因为“-”在JS代表减号)，再写成驼峰命名法。
比如getComputedStyle(oBox).backgroundColor- 设置CSS属性值：
1. obj.style.attr = "值"
这个是通过style对象来设置css属性，这里是等价于设置行内样式
比如：oDiv.style.fontSize = "17px";
2. obj.style.cssText = "值"
这个可以不按照驼峰命名法，直接用平常的CSS写法。
如：oDiv.style.cssText = "width：100px;height: 100px;background-color:red;"- getComputedStyle(obj).attr 和 obj.style.cssText 其实都可以获取css属性，区别在于后者只能获取行内式，而不能获取内联式和外联式。前者都可以。
DOM遍历（即查找元素）（两个元素之间的“换行空格”也是一个节点）
查找父元素
- obj.parentNode
顾名思义,查找当前元素的父元素查找子元素
- childNodes、firstChild、lastChild
childNodes获取所有子节点，包括元素节点和文本节点。firstChild第一个子节点。lastChild最后一个子节点。- children、firstElementChild、lastElementChild
children只获取子元素节点、firstElementChild第一个子元素节点、lastElementChild最后一个子元素节点。
如果想要获取指定子元素，可以用children[ i ]来实现。查找兄弟元素
- previousSibling、nextSibling、previousElementSibling、nextElementSibling
previousSibling查找前一个节点、nextSibling查找后一个节点。
previousElementSibling查找前一个元素节点、nextElementSibling查找后一个元素节点。innerHTML 和 innerText
- innerHTML
可以很方便的获取和设置一个元素的“内部元素”（其中获取的是元素节点内部所有的代码内容，包括子元素节点、子属性节点、子文本节点）var oP = document.createElement("p"); //一个属性一个属性地设置 oP.className = "test"; oP.style.border = "1px soild silver"; document.body.appendChild(oP); document.body.innerHTML = ''; //用innerHTML更方便
- innerText
获取和设置一个元素的“内部文本”，注意，仅仅是文本内容。
以前的firefox浏览器不支持innerText。都是用textcontent,因为他兼容所有浏览器。以前的textcontent等价于innerText，而现在这两种方式，所有的浏览器都支持。事件基础
JavaScript下常见的事件有五种：
- 鼠标事件
- 键盘事件
- 表单时间
- 编辑事件
- 页面事件
事件调用方式
- 在script中调用
- 在元素中调用
鼠标事件
- onclick：鼠标单击。不局限于按钮，都可以设置。
oBtn.onclick = function( ){alter("hello"); };- onmouseover：鼠标移入。
oP.onmouseover = function( ){ this.style.color = "black" ;};- onmouseout：鼠标移出。
oP.onmouseout = function( ){ this.style.color = "red" ;}; //一般两者搭配使用- onmousedown：鼠标按下。
oBtn.onmousedown = function( ){ this.style.color = "blue" ;};- onmouseup：鼠标松开。
oBtn.onmouseup = function( ){ this.style.color = "pink" ;}; //一般两者搭配使用键盘事件
- onkeydown：键盘按下
- onkeyup：键盘松开
表单事件
- onfocus和onblur
- onfocus表示获取焦点时触发的事件。onblur表示失去焦点时触发的事件。搭配使用。
- 判断元素是否有焦点，打开浏览器按Tab键，能选中的就是有焦点特性的元素。
- (这个就比如输入框中的提示文本，有焦点的时候，提示文本就会消失，没有焦点时，提示文本就会出现。而这种效果在H5中，可以用placeholder属性实现)
- 另外，比如百度首页，一打开，文本搜索框就自动获取到了焦点。这个是通过 “ focus( )" 实现的。
- onselect
- 选中“单行文本”或“多行文本”中的内容时，就会触发onselect事件。
- 同样的，有时候我们点击搜素框中的文字，会自动选中，这种是通过“ select() ”实现的。一般用this.select()选中当前对象。
- onchange
单选框、复选框、下拉菜单中选择一项时触发。编辑事件
- oncopy：防止页面被复制
document.body.oncopy = function () { return false; } //就算鼠标右键可以复制，但是粘贴不出来。
- onselectstart：防止页面内容被选取
document.body.onselectstart = function () { return false; }
- oncontextmenu：禁止鼠标右键
document.body.oncontextmenu = function () { return false; }页面事件
- onload：表示文档加载完后再执行一个事件
window.onload = function () { ...... }
- onbeforeunload：离开页面之前触发的一个事件
window.onbeforeunload = function () { returnValue = "欢迎下次光临！"; }事件进阶
- 事件处理器：就是前面用到的onclick这一类。
有时候我们需要给同一个元素添加多个相同的事件，但是用JavaScript只能执行最后一个onclick。所以就不能实现。但是事件监听器可以。事件监听器
- 绑定事件：obj.addEventListener(type，fn，false) （为元素添加多个事件就用事件监听器。）
- type 表一个字符串，指的是事件类型。比如单击事件用“click”,鼠标移入事件用“mouseover”，这里不需要加 “ on ”。
- fn 为函数名，或者匿名函数。
- false 表示事件在冒泡阶段调用。
- 解绑事件：obj.removeEventListener(type，fn，false) (其中fn必须是一个具体的函数名，不能匿名)
event对象
event对象的属性
- type：事件类型
- keyCode：键码值,返回的是一个数值，即按键对应的键码值。
- shiftKey：是否按下shfit键，返回布尔值
- ctrlKey：是否按下Ctrl键，返回布尔值
- altKey：是否按下Alt键，返回布尔值
调用这些属性的时候，可以直接用“e.type”,e可写成其他变量名，这是一个隐藏参数，即event对象，写成ev,a都可以。
this
指向当前对象。哪个DOM对象（元素节点）调用了this所在函数，那么this就指向哪个DOM对象。
window对象
一个浏览器窗口就是一个window对象。当我们打开一个窗口，浏览器就自动为页面创建一个window对象。
window对象的子对象
- document：文档对象，用于操作页面元素
一个窗口是一个window对象，窗口里面的HTML文档就是一个document对象，即document对象是window对象的子对象。- location：地址对象，用于操作url元素
- navigator：浏览器对象，用于获取浏览器版本信息
- history：历史对象，用于操作浏览器历史
- screen：屏幕对象，用于操作屏幕宽度
window对象的常用方法
alter()：提示对话框
通常window.alter()可以简写成alter()，下同。alter()中的实现文本换行，用的是“\n”confirm()：判断对话框
confirm()提高文字提示，并有“确认"和”取消"两个按钮，分别对应返回true或false。prompt()：输入对话框
不仅提示文字，还能返回一个输入框中的字符串。open()：打开窗口
window.open(url,target)。url表示新窗口的地址，target表示打开方式，跟a标签中用法一样。close()：关闭窗口
定时器
- setTimeout()：开启“一次性”定时器
setTimeout(code,time); code可以是一段代码或者函数或者函数名(一般不需要带括号，带括号就要在外面加双引号)，time为时间，单位mswindow.onload = function() { setTimeout('alter("你好");'，3000)； }
- clearTimeout()：关闭“一次性”定时器
- setInterval()：开启“重复性”定时器
同setTimeout()语法一样，只是setInterval()是反复执行。- clearInterval()：关闭“重复性”定时器
location对象
其属性有
- href 获取当前页面地址，也可以是设置地址
var url = window.loaction.href; document.write("当前页面地址为："+url);
- search 当前页面地址“ ? ”后面的内容
- hash 当前页面地址“ # ”后面的内容
navigator对象
获取浏览器的类型
- window.navigator.userAgent
document对象
通过window对象，我们可以操作窗口，比如打开窗口、关闭窗口。这些称为“BOM”,即浏览器对象模型。
通过前面所学，可以知道，BOM包括DOM。document对象常用的属性
- document.title，获取文档的title
- document.body，获取文档的body
- document.forms，获取所有forms元素
- document.images，获取所有img元素
- document.links，获取所有a元素
- document.cookies，文档的cookie
- document.URL，获取当前文档的URL，但不能设置地址
- document.referrer，返回使浏览者达到当前文档的URL
document对象常用的方法
- 此处省去document.getXxxByXxx( )这一系列方法介绍，因为前面已经介绍。
- document.write()：输出内容
- document.writeln()：输出内容并换行
2020/9/5 星期六 14:27:25
Edit By zeker , learning notes