JavaScript学习笔记

JavaScript用于网页和用户之间的交互，完整的JavaScript由语言基础、BOM和DOM组成。

语言基础

Script标签

JavaScript代码必须放在script标签中，script标签可以放在html的任何地方，一般建议放在head标签里，若与多段script代码就会按照从上到下顺序执行。
<script type="text/javascript"></script>

引用外部js文件
<script type="text/javascript" src=""></script>

注释

• 单行注释 /
• 多行注释 /*

声明变量

1. 使用var声明变量
   var a = 10;
2. 不使用var声明变量
   a = 10;

注：变量名命名规则和java一样

基本数据类型

• undefined 声明了但未赋值 var x;
• Boolean 声明布尔类型 var x = true;
• Number 声明数字类型 var a = 10;
• String 声明字符串类型 var a = “hello”;
• null 空对象/对象不存在

注：JavaScript没用字符概念，只有字符串，故单引号和双引号都表示字符串
注：用var定义的变量为动态类型，会根据变量的实际值而改变
注：可用typeof来判断变量当前的类型 document.write(typeof x);

类型转换

1. 伪对象
   JavaScript的基本类型也是伪对象，他们都有属性和方法。

2. 转换为字符串toString()
   var a = 10;
   a.toString();

3. 数字转换为字符串toString()
   toString() 转换为十进制
   toString(2) 转换为二进制
   toString(8) 转换为八进制
   toString(16) 转换为十六进制

4. 转换为数字
   parseInt() 转换为整数
   parseFloat 转换为浮点数
   Number() 转换为数字

注：若被转换的字符串中，同时由数字和字符构成，那么parseInt会一直定位到数字，直到出现非数字字符，返回NaN。Number会直接返回NaN。

1. 转换为Boolean
   转换字符串： 非空即0
   转换数字： 非0即true
   转换对象： 非null即true

2. String()和toString()的区别
   对于null的处理，String()会返回字符串”null”,toString()就会报错，无法继续执行

函数

函数即一段可以重复执行的代码

<script type="text/javascript">
	function print(m){
		document.write(m);
	}
</script>

注：js中形参为可变类型，故不需要先声明

运算符

同Java

条件语句

同Java

错误处理

try catch
同Java

对象

JavaScript中的对象是有着属性和方法的一种特殊数据类型，常见的对象有Number、String、Date、Array等

Number

1. 创建数字对象
   var x = new Number(“123”);

2. 非数字NaN
   可通过函数isNaN来判断是否为数字
   当通过非数字创建Number时就会得到NaN

3. 返回一个数字的小数表达式
   toFixed(2); //保留两位小数点

4. 返回一个数字的科学计数法表达
   toExponential();

5. 返回一个数字对象的基本数字类型
   var a = new Number(“123”);
   var b = a.valueOf(); //基本数字类型

String

1. 创建字符串对象
   var x = new String(“abc”);

2. 字符串长度
   x.length;

3. 返回指定位置的字符
   charAt：返回指定位置的字符
   charCodeAt：返回指定位置的字符对应的Unicode码

4. 字符串拼接
   var a = new String(“123”);
   var b = new String(“abc”);
   a.concat(y);

5. 子字符串出现的位置
   indexOf：返回自子符串第一次出现的位置
   lastIndexOf：返回子字符串最后一次出现的位置
   var a = new String(“abc”);
   a.indexOf(“a”);

6. 比较两段字符串是否相同
   localeCompare比较，相同返回0，不相同返回非0
   var a = new String(“abc”);
   var b = new Strihg(“bac”);
   a.localeCompare(b); //因为b在a前面故返回1

7. 截取一段字符串
   var x = new String(“hello world”);
   x.subString(0,3);

8. 根据分隔符，把字符串转换为数组
   var x = new String(“hello world”);
   x.split(“ “);//通过空格分隔符，得到数字{hello,world}
   x.split(“ “,1);////通过空格分隔符，并保留前一个，得到数字{hello,world}

9. 替换子字符串
   只替换第一个
   var x = new String(“hello world”);
   x.replace(“l”,”o”); //把第一个l替换为o
   替换所有
   var regs = new RegExp(“l”,”g”);
   x.replace(regs,”o”); //所有的l替换为o

数组

JavaScript中的数组时动态的，即长度是可以发生变化的

1. 创建一个数组对象
   var a = new Array();
   var b = new Array(1,2,3);

2. 数组长度
   a.length;

3. 遍历数组
   普通for循环
   增强for循环
   for(i in a){
   a[i];
   }

4. 连接数组
   var a = new Array(1,2,3);
   var b = new Array(a,b,c);
   var c = a.concat(b);

5. 通过指定分隔符，返回一个数组的字符串表达式
   var a = new Array(1,2,1);
   a.join(“”); //返回121
   a.join(“@”); //返回1@2@1

6. 分别在最后位置插入数据和获取数据
   push() 相当于入栈，有参
   pop() 相当于出栈，无参

7. 分别在最开始位置插入数据和获取数据
   unshift() 在最前面加入，有参
   shift() 在最前面删除，无参

8. 对数组内容进行排序
   var x = new Array(3,1,4,2);
   x.sort(); //返回1,2,3,4

9. 自定义排序算法
   用比较函数作为参数传递给sort()
   function compartor(v1,v2){
   return v2-v1; //表示大的在前面
   }
   x.sort(compartor);

10. 对数组进行反转
    x.reverse();

11. 获取子数组
    var a = new Array(1,2,3,4);
    a.slice(1);//相当于[1,+)
    a.slice(1,3);//相当于[1,3)

12. 删除和插入元素
    splice既可以删除元素，也可以插入元素
    var x = new Array(1,2,1,4,5);
    x.splice(3,2); //从位置3开始删除两个元素
    x.splice(3,0,2,3); //从位置3开始删除0个元素，并插入2,3，相当于从3开始插入2,3

日期对象

1. 创建日期对象
   var a = new Date(); //返回当前的具体日期
   var d = new Date(“1996/2/4”); //返回指定日期

2. 分别获取年/月/日
   var a = new Date();
   a.getFullYear(); //返回当前年份
   a.getMonth()+1; //返回当前月份，注：getMonth（）返回的月份是基0的，0代表1月份
   a.getDate(); //返回当前天数

3. 分别获取时：分：秒：毫秒
   var a = new Date();
   a.getHours(); //返回当前时
   a.getMinutes(); //返回当前分
   a.getSeconds(); //返回当前秒
   a.getMillionSeconds(); //返回当前毫秒

4. 获取一周的第几天（星期几）
   getDay()
   例：
   var a = new Date().getDay(); //基值为0，通过日期对象获取数字形式的星期几
   var week = new Array(“星期天”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”);
   document.write(week[day]); //返回星期

5. 修改日期和时间
   例：
   var d=new Date();
   document.write(“修改日期对象的值为世界末日:
   “);
   d.setFullYear(2012);
   d.setMonth(11); //月份时基0的，所以11表示12月
   d.setDate(12);
   d.setHours(0);
   d.setMinutes(0);
   d.setSeconds(0);

Math对象

1. 自然对数和圆周率

• Math.E：自然对数，返回2.718281828459045
• Math.PI：圆周率，返回3.141592653589793

1. 绝对值
   通过方法abs()获取绝对值
   var a = Math.abs(-5);

2. 最大值、最小值
   通过max()和min()
   var a = Math.max(1,5,8,4,2); //返回8
   var b = Math.min(1,5,8,4,2); //返回1

3. 求幂
   通过方法pow(a,a)求一个数的n次方
   var a = Math.pow(3,3); //返回3的立方，即27

4. 四舍五入
   方法round()，小数四舍五入取整
   var a = Math.round(3.4); //返回3

5. 取随机数

   方法random()
   Math.random():一个0-1之间的随机数
   Math.round(Math.random()*5+5):一个5-10之间的随机整数

自定义对象

1. 创建自定义对象
   通过new Object()
   例：

   var obj = new Object();	//创建一个自定义对象
   obj.name = "lousen"; //定义一个属性并赋值
   obj.love = function(){ //定义一个函数love
   	document.write(obj.name+"喜欢猫");
   } 
   obj.love(); //调用函数love

2. 通过function设计一个对象

   function Hero(name){
   	this.name = name;
   	this.love = function(){
   		document.write(this.name+"喜欢");
   	}
   }
   var c1 = new Hero("狂三");
   c1.love();
   var c2 = new Hero("奈叶");
   c2.love();

3. 为已存在的对象，增加新的方法
   通过prototype实现

   function Hero(name){
   		this.name = name;
   		this.love = function(){
   		document.write(this.name+"喜欢");
   	}
   }
   var c1 = new Hero("狂三");
   c1.love();
   var c2 = new Hero("奈叶");
   c2.love();
   Hero.prototype.from = function(){
   document.write(this.name+"来自二次元");
   }
   c1.from();
   c2.from();

BOM

BOM即浏览器对象模型（Brower Object Model）

Window

1. 获取文档显示区域的高度和宽度
   一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。通过window对象可以获取文档显示区域的高度和宽度 （即显示当前状态下内容的高度和宽度，可变）

• window.innerWidth：内容的宽度
• window.innerHeight：内容的高度

1. 获取外部窗体的宽度和高度
   即浏览器的高度和宽度，一般为固定值，根据不同的浏览器而不同

• window.outerWidth：窗体的宽度
• window.outerHeight：窗体的高度

1. 打开一个新的窗口
   window.open(“url”); //不推荐使用，一般情况下优先使用超链接打开新窗口
   Navigator
   打印浏览器相关信息
   navigator.appName; //返回浏览器产品名称
   navigator.appVersion; //返回浏览器版本号
   navigator.appCodeName; //返回浏览器内部代码
   navigator.platform; //返回操作系统
   navigator.Cookies; //返回是否启用Cookies
   navigator.userAgent; //返回浏览器的用户代理报头

Screen

表示用户屏幕的相关信息

1. 返回用户的屏幕大小

• screen.width
• screen.height

1. 返回用户屏幕的可用大小

• screen.avalidWidth
• screen.avalidHeight
  注：因为有任务栏的存在，所以可用区域的高度会比屏幕高度小一点

History

用于记录访问历史

1. 返回上一次的访问
   通过history.back();
   例：
   funcation goback(){
   history.back();
   }

2. 返回上上次
   history.go(-2); //-1表示上一次，-2表示上上次，以此类推

Location

Location表示浏览器的地址栏

1. 刷新当前页面
   location.reload();

2. 跳转到另一个页面

• location = “url”
• location.assign(“url”)

1. 其他属性

• location.protocol:返回协议
• location.hostname:返回主机名
• location.port:返回端口号
• location.host:返回主机名+端口号
• location.pathname:返回访问路径
• location.hash:返回锚点
• location.serach:返回参数列表

弹出框

1. 警告框
   通过alert(),常用于消息提示
   alert(“注册成功！”);

2. 确认框
   通过confirm(),常用于危险性操作的确认提示
   confirm(“是否确认删除？”); //确认返回true，取消返回false

3. 输入框
   通过prompt(),弹出一个输入框供用户输入相关信息，因界面风格问题，很少在实际中使用
   prompt(“请输入用户名：”);

计时器

1. 只执行一次
   setTimeout(函数名,距离开始时间)
   例：

   function test(){
   	document.getElementById("t_1").innerHTML = "测试成功！"; //innerHTML表示修改该元素内容
   } 
   function p(){
   	setTimeout(test(),3000); //1秒等于1000毫秒
   }
   <div id="t_1">
   	<button>点击后，3000毫秒后显示</button>
   </div>

2. 不停的重复执行和终止重复执行
   var t = setInterval(函数名，重复执行的时间间隔毫秒数) //重复执行
   clearInterval(t); //终止重复执行
   即重复执行同一个函数，重复的间隔由第二个参数指定
   例：

   var d = 0;
   var t = setInterval(print,1000); //重复执行
   function print(){  
   	document.getElementById("dt").innerHTML= d++;
   	if(d == 5){
   		clearInterval(t); //终止重复执行
   	}
   }

注：不要在setInterval调用的函数中使用document.write(); 部分浏览器，只会执行一次打印结果，比如firefox有这个问题，其他浏览器没这个问题。

HTML DOM

DOM是Document Object Model(文档对象模型)，DOM是把html里面的各种数据当作对象进行操作的一种思路。

节点概念

DOM把所有的html都转换为节点
整个文档是一个节点
元素是一个节点
元素属性是一个节点
元素内容是一个节点
注释也是节点

已知：

<div id = "d1">hello</div>
var d = document.getElementById("d1");
document; //返回文档节点[object HTMLDocument]
d; //返回元素节点[object HTMLDivElement]
d.attributes[0]; //返回属性节点[object Attr]
d.childNodes[0]; //返回内容节点[object Text]

获取节点

1. 通过id获取元素节点
   var t = document.getElementById();

2. 通过标签名获取元素节点
   var t = document.getElementByTagName();
   注：可以同时获取多个元素节点，形成一个元素数组

3. 通过类名获取元素节点
   var t = document.getElementByClassName();
   注：同标签名，可以返回一个节点数组

4. 通过表单的name获取元素节点
   var t = document.getElementByName();

5. 获取属性节点
   先通过getElementById()获取元素节点,然后通过元素节点的attributes获取其下所有的属性节点
   var t = document.getElementById(“div1”);
   var a = t.attributes;
   a[0].nodeName; //返回第一个属性的名称
   a[0].nodeValue; //返回第一个属性的值
   a[“id”]; //取出名称是id的属性

6. 获取内容节点
   首先通过document.getElementById()获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。

   <html>
   <div id="d1" align="center" class="abc">hello HTML DOM</div>
   <script>
    var  div1 = document.getElementById("d1");
    var content = div1.childNodes[0];
    content.nodeName; //返回内容节点名称#text
    content.nodeValue; //返回内容节点值hello HTML DOM
   </script>
   </html>

节点的属性

1. 节点名称
   nodeName表示一个节点的名字
   例：

   <div id="d1">hello HTML DOM</div>
   var  div1 = document.getElementById("d1");
   document.nodeName 文档的节点名，是 固定的#document
   div1.nodeName 元素的节点名，是对应的标签名 div
   div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
   div1.childNodes[0].nodeName 内容的节点名，是固定的 #text

2. 节点值
   nodeValue表示一个节点值
   例：

   <div id="d1">hello HTML DOM</div>
   var  div1 = document.getElementById("d1");
   document.nodeValue 文档的节点值，是 null
   div1.nodeValue 元素的节点值，是null
   div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
   div1.childNodes[0].nodeValue 内容的节点值，是内容 即：hello HTML DOM

3. 节点类型值
   nodeType表示一个节点类型值

   <div id="d1">hello HTML DOM</div>
   var  div1 = document.getElementById("d1");
   document.nodeType 文档的节点类型，是 9
   div1.nodeType 元素的节点类型，是 1
   div1.attributes[0].nodeType 属性的节点类型，是 2
   div1.childNodes[0].nodeType 内容的节点类型，是 3

4. 修改元素的文本内容
   先通过getElementById()获取元素节点，然后通过 childNodes[0].nodeValue进行 ，或者innerHTML进行
   document.getElementById(“d1”).childNodes[0].nodeValue= “通过childNode[0].value改变内容”;
   document.getElementById(“d1”).innerHTML= “通过innerHTML改变内容”;

5. 获取和修改元素的属性
   元素上的属性，比如id,value可以通过.直接获取和修改
   如果是自定义属性,可以通过以下方式来获取
   getAttribute(“test”) //获取自定义属性test
   attributes[“test”].nodeValue
   例：

   var  div1 = document.getElementById("d1");
   div1.id; //返回d1
   div1.className; //返回c1
   div1.getAttribute("test"); //返回t1

注：class要通过className获取

改变样式

先通过getElementById()获取元素节点，然后再通过style.属性来改变样式
常用样式：

1. 隐藏和显示

   <div id="d1">hello HTML DOM</div>
   var  div1 = document.getElementById("d1");
   div1.style.display = "none"; //设置为隐藏
   div1.style.display = "block"; //设置为显示

2. 改变背景色
   div1.style.backgroundColor = “green”; //设置为绿色

事件

1. 焦点事件

• onfocus：获取焦点
• onblur：失去焦点
  注：一般用于输入框

1. 鼠标事件

• onmousedown：鼠标按下
• onmouseup：鼠标弹起
• onmousemove：鼠标经过
• onmouseover：鼠标进入
• onmouseout：鼠标离开
  注：onmousemove和onmouseover的区别是，前者每次移动都会触发，后者仅触发一次

1. 键盘事件

• onkeydown:键盘按下
• onkeypress:键盘按下
• onkeyup:键盘弹起

1. 点击事件

• onclick:单击事件
• ondbclick:双击事件

1. 变化事件
   onchange
   当组件发生变化时，会触发的事件
   注：对于输入框而言，只有在失去焦点的时候才会触发

2. 提交事件
   onsubmit
   当form表单提交的时候会触发onsubmit事件

3. 加载事件
   onload
   当整个文档加载成功或者一个图片加载成功会触发加载事件

4. 当前组件
   this
   this表示触发事件的组件，可以在调用函数的时候，作为参数传进去
   例：
   onclick=get(this);

节点关系

1. 父节点关系
   先通过getElementById获取元素节点，再通过parentNode获取该节点的父节点
   例：

   <div id="d1">hello HTML DOM</div>
   var div1 = document.getElementById("d1");
   var node = div1.parentNode;

2. 同胞节点关系

• previousSibling:获取前一个同胞节点
• nextSiling:获取后一个同胞节点
  注：标签之间有任何字符、空白、换行都会产生文本元素，获取到的节点为#text，只有两个标签紧挨着才不会。
  例：

  <div1></div1><div2></div2> //div1后一个同胞节点为div2
  <div3></div3> //div2后一个同胞节点为#text

1. 子节点关系

• firstChild:第一个子节点
• lastChild:最后一个子节点
• childNodes:所有子节点
  注：同上，如果父节点与子节点之间有任何字符、空白、换行都会产生文本元素，那么第一个子节点和最后一个子节点都会是#text，因为文本节点的存在，子元素个数返回要加上文本节点

1. childNodes和children的区别
   childNodes会包含文本节点，children不会包含文本节点

创建节点

1. 创建元素节点
   通过createElement创建一个新的元素节点，再通过appendChild把该节点加入到另一个元素节点中
   例：

   var a = document.creatElement("br"); //创建一个元素节点，换行<br>
   var div1 = document.getElementById("div1"); //获取一个元素节点
   div1.appendChild(a);  //把换行放到div1中去

2. 创建文本节点
   通过createElement创建一个新的文本元素节点p，再通过createTextNode创建一个内容节点text，将该内容节点text通过appendChild加入到p中；再获取要加入的元素节点div，通过appendChild把p加入到div中。
   例：

   var p = document.creatElement("p"); //创建一个元素节点，段落
   var text = document.creatTextNode("文本内容"); //创建一个内容节点
   p.appendChild(text); //把内容节点放到段落中
   var div1 = document.getElementById("div1"); //获取一个元素节点
   div1.appendChild(p);  //把段落放到div中去

3. 创建属性节点
   首先通过createElement创建一个新的元素节点a，然后通过createTextNode创建一个内容节点c,将该内容节点c通过appendChild加入到a；通过createAttribute创建一个属性节点href，设置href的属性值，通过setAttributeNode把该属性设置到元素节点a上；获取要加入的元素节点div1，最后用appendChild加入到div1中去。
   例：

   var a = document.creatElement("a"); //创建一个元素节点，超链接
   var c = document.creatTextNode("这是链接"); //创建一个内容节点
   a.appendChild(c); //把内容节点放到超链接中
   var href = document.createAttribute("href"); //创建一个属性节点
   href.nodeValue = "www.lousenjay.info"; //设置属性值
   a.setAttributeNode(href); //把该属性设置到超链接中
   var div1 = document.getElementById("div1"); //获取指定的元素节点，div
   div1.appendChild(a); ////把超链接设置到指定div中

删除节点

1. 删除元素节点
   先分别获取该元素的父节点和该节点，再通过removeChild删除该节点

   <div id = "d1">
   <div id = "d2">被删除</div>
   </div>
   var a = document.getElementById("d1");
   var b = document.getElementById("d2");
   a.remove(b);

2. 删除属性节点
   先获取该元素节点，再调用removeAttribute删除指定属性
   var a = document.getElementById(“al”);
   a.removeAttribute(“href”); //移除id为al的超链接的href属性

3. 删除文本节点
   先通过childNodes[0]获取文本节点，再通过removeChild删除该文本节点
   var p = document.getElementById(“p1”);
   var t = p.childNodes[0];
   p.removeChild(t);
   注：一般通过innerHTML直接设置为空

替换节点

a.获取父节点
b.创建子节点
c.获取被替换的子节点
d.通过replaceChild进行替换

插入节点

1. 追加节点
   把新的节点放在最后面
   a.创建新节点
   b.获取父节点
   c.通过appendChild追加

2. 在指定位置插入
   a.创建新节点
   b.获取父节点
   c.获取需要加入的子节点位置
   d.通过insertBefore插入

最后更新： 2020年07月27日 03:39

原始链接： https://www.lousenjay.top/2018/02/12/JavaScript学习笔记/

Lousen Jay