[JavaScript知识库]JavaScript笔记

JavaScript

• JavaScript = ECMAScript(所有客户端脚本的标准语言) + JavaScript自己特有的东西(BOM+DOM)

一、ECMAScript

1、基本语法

（1）与html结合方式

• 内部JS：

  定义<script>，标签内容就是js代码

• 外部JS：

  定义<script>，通过src属性引入外部的js文件

• 注意：<script>可以定义在html页面的任何位置，但定义的位置会影响执行的顺序

（2）注释

1. 单行注释：//

2. 多行注释：/**/

（3）数据类型

• 原始数据类型（基本数据类型）：

  • number：数字。整数/小数/NaN（not a number，一个不是数字的数字类型）

  • string：字符串。"abc"、"a"、'abc' 都为字符串

  • boolean：true和false

  • null：一个对象为空的占位符

  • undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

• 引用数据类型：对象

（4）变量

• Java语言是强类型语言，而JavaScript是弱类型语言

  • 强类型：在开辟变量储存空间时，定义了空间将来储存数据的数据类型。只能储存固定的数据类型。

  • 弱类型：在开辟变量储存空间时，不定义空间将来储存数据的数据类型。可以存放任意类型的数据类型。

• 语法：

  var 变量名 ?= ?初始化值

• 输出：document.write( );

• 查看变量的数据类型：typeof( );

（5）运算符

1. 一元运算符：只有一个运算数的运算符 ++，--，+（正号），-（负号）

   • 注意：在JS中，如果运算数不时运算符所要求的类型，那么JS引擎会自动将运算数进行类型转换

     • String转number：如果字面值是数字，按字面值转换；如果字面值不是数字，则转为NaN（不是数字的数字）

       eg：var num = + "123";  //num是number数据类型的值

     • boolean转number：true转为1，false转为0

       eg：var falg = + true;   //falg是number数据类型的值，值为1

2. 比较运算符：

   • 类型相同：直接比较

     • 字符串： 按照字典顺序比较，按位逐一比较

   • 类型不同：先进行类型转换，再比较

     • ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

（6）流程控制语句

2、基本对象

（1）Function：函数（方法）对象

1. 创建：

   • function 方法名称(形式参数列表){

     方法体

     }

   • var 方法名 = function(形式参数列表){

     方法体

     }

2. 属性：

   • length()：代表参数的个数

3. 特点：

   • 方法定义式中，返回值类型可以不用写，形参的类型也可以不用写

   • 方法是一个对象，如果定义名称相同的方法，会覆盖

   • 再JS中，方法的调用只与方法的名称有关，和参数列表无关

   • 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

4. 调用：

   • 方法名称(实际参数列表)

//求任意个数的和（形参列表省略）
function add() {
 ? ?var sum = 0;
 ? ?for (var i = 0; i<arguments.length;i++)
 ?  {
 ? ? ? ?sum += arguments[i];
 ?  }
 ? ?return sum;
}
var sum = add(1,2,3,4);
alert(sum);

（2）Array：数组对象

1. 创建：

   • var arr = new Array(元素列表); * 当元素列表中只有一个数时，代表数组的长度

   • var arr = [元素列表];

2. 方法：

   • join(参数)：将数组中的元素按照指定的分隔符拼接为字符串

   • push()：箱数组的末尾添加一个或更多的元素，并返回新的长度

3. 属性：

   • length()：数组的长度

4. 特点：

   • JS中，数组元素的类型可变

   • JS中，数组长度是可变的

（3）Date：日期对象

1. 创建：

   • var date = new Date();

2. 方法：

   • toLocaleString()：返回当前Date对象对应的时间本地字符串格式

   • getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值

（4）Math：数学对象

1. 创建：

   • Math对象不用创建，直接使用。Math.方法名();

2. 方法：

   • random()：返回0~1之间的随机数。[0，1)

   • ceil(x)：向上取整

   • fllor(x)：向下取整

   • round(x)：四舍五入

3. 属性：

   • Math.PI

//取1~100之间的随机数
Math.ceil(Math.random()*100)+1

（5）RegExp：正则表达式对象

1. 正则表达式：

   1. 单个字符：[ ]

      特殊符号代表特殊含义的单个字符：

      • \d：单个数字字符 [0-9]

      • \w：单个单词字符 [a-zA-Z0-9]

   2. 量词符号：

      • ?：出现0次或1次

      • *：出现0次或多次

      • +：出现1次或多次

      • {m，n}：表示 m<= 数量 <=n * m如果缺少：{，n}：最多n次 * n如果缺少：{m，}：最少m次

   3. 开始结束符号：

      • ^：开始

      • $：结束

2. 正则对象：

   1. 创建：

      • var reg = new RegExp("正则表达式");

      • var reg = /正则表达式/;

   2. 方法：

      • text(参数)：验证指定的字符串是否符合正则定义的规范

var reg1 = new RegExp("\\w{6,12}");//此定义形式需要有两个/
var reg2 = /^\w{6,12}$/;
?
var userName1 = "zhangsan";
var userName2 = "abc";
?
var flag1 = reg2.test(userName1);
var flag2 = reg2.test(userName2);
?
alert(flag1);//true
alert(flag2);//false

（6）Global：全局对象

1. 特点：

   • 全局对象：这个Global中封装的方法不需要对象就可以直接调用。方法名();

2. 方法：

   • encodeURI()：url编码

   • decodeURI()：url解码

   • encodeURIComponent()：url编码（编码的字符类更多）

   • decodeURIComponent()：url解码

   • parseInt()：将字符串转为数组

     • 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

   • isNaN()：判断一个值是否为NaN

     • NaN六亲不认，连自己都不认。NaN参与的==比较全部为false

   • eval()：将JavaScript字符串，作为脚本代码来执行

var str = "传智播客";
var encode = encodeURI(str);
document.write(encode+"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var decode = decodeURI(encode);
document.write(decode+"<br>");//传智播客
?
var jscode = "alert(123)";
document.write(jscode);//alert(123)
eval(jscode);//123

Number、String、Boolean

二、BOM

（1）Window：窗口对象

1. 方法：

   1. 与弹出框有关的方法：

      • alert( )：显示带有一段消息和一个确认按钮的警告框

      • confirm( )：显示带有一段消息以及确认按钮和取消按钮的对话框

        • 如果用户点击确认按钮，则方法返回true

        • 如果用户点击取消按钮，则方法返回false

      • prompt( )：显示可提示用户输入的对话框

        • 返回值为获取用户输入的值

   2. 与打开关闭有关的方法：

      • open("目标地址")：打开一个新的浏览器窗口。返回新的浏览器对象

      • close( )：关闭浏览器窗口

        • 默认window.close()，关闭当前的浏览器窗口

      <body>
       ? ?<input id="openBtn" type="button" value="打开新窗口">
       ? ?<input id="closeBtn" type="button" value="关闭新窗口">
      ?
       ? ?<script>
       ? ? ? ?var newWindow;
       ? ? ? ?//打开窗口
       ? ? ? ?var openBtn = document.getElementById("openBtn");
       ? ? ? ?openBtn.onclick = function () {
       ? ? ? ? ? ?newWindow = open("https://www.baidu.com");//返回打开的新窗口的window对象
       ? ? ?  }
       ? ? ? ?//关闭新窗口
       ? ? ? ?var closeBtn = document.getElementById("closeBtn");
       ? ? ? ?closeBtn.onclick = function () {
       ? ? ? ? ? ?newWindow.close();//将打开的新窗口关闭
       ? ? ?  }
       ? ?</script>
      </body>

   3. 与定时器有关的方法：

      参数：* js代码或者方法对象 * 毫秒值

      • setTimeout( ) ：在指定的毫秒数后调用函数或计算表达式。

      • clearTimeout( )：取消由 setTimeout() 方法设置的 timeout。

      • setInterval( ) ：按照指定的周期（以毫秒计）来调用函数或计算表达式。

      • clearInterval( )：取消由 setInterval() 设置的 timeout。

      //定时器
      <body>
       ? ?<script>
       ? ? ? ?function fun() {
       ? ? ? ? ? ?alert("boom~~");
       ? ? ?  }
       ? ? ? ?
       ? ? ?//setTimeout(fun(),3000);
       ? ? ? ?var clock = setTimeout(fun,3000);//设置定时器
       ? ? ? ?
       ? ? ? ?clearTimeout(clock);//取消定时器
       ? ?</script>
      </body>
      ?
      ?
      //轮播图
      <body>
       ? ?<img id="img" src="Image/1.jpg">
      ?
       ? ?<script>
       ? ? ? ?var num = 1;
       ? ? ? ?function fun() {
       ? ? ? ? ? ?num++;
       ? ? ? ? ? ?if(num>5)
       ? ? ? ? ?  {
       ? ? ? ? ? ? ? ?num = 1;
       ? ? ? ? ?  }
      ?
       ? ? ? ? ? ?var img = document.getElementById("img");
       ? ? ? ? ? ?img.src = "Image/" + num + ".jpg";
       ? ? ?  }
      ?
       ? ? ? ?setInterval(fun,3000);//设置循环定时器
       ? ?</script>
      </body>

2. 特点：

   • Window对象不需要创建可以直接使用。window.方法名();

   • window可以省略。方法名();

3. 属性：

   • 获取其他BOM对象：history、location、Navigator、Screen

   • 获取DOM对象：document

（2）Location：地址栏对象

1. 创建（获取）：

   1. window.location

   2. location

2. 方法：

   • reload( )：重新加载当前文档（刷新）

3. 属性：

   • href：设置或返回完整的URL

location.reload();
location.href = "https://www.baidu.com";

<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>自动跳转页面</title>
?
 ? ?<style>
 ? ? ? ?p{
 ? ? ? ? ? ?text-align : center;
 ? ? ?  }
 ? ? ? ?span{
 ? ? ? ? ? ?color: red;
 ? ? ?  }
 ? ?</style>
</head>
<body>
 ? ?<p>
 ? ? ? ?<span id="time">5</span>秒之后，自动跳转到首页...
 ? ?</p>
?
 ? ?<script>
 ? ? ? ?var second = 5;
 ? ? ? ?var time = document.getElementById("time");
 ? ? ? ?function fun() {
 ? ? ? ? ? ?second--;
 ? ? ? ? ? ?if(second <= 0){
 ? ? ? ? ? ? ? ?location.href = "https://www.baidu.com";
 ? ? ? ? ?  }
 ? ? ? ? ? ?time.innerHTML = second;
 ? ? ?  }
        //设置定时器
 ? ? ? ?setInterval(fun,1000);
 ? ?</script>
</body>

（3）History：历史记录对象

1. 创建（获取）：

   • window.history

   • history

2. 方法：

   • back( )：加载 history 列表中的前一个 URL

   • forward( )：加载 history 列表中的下一个 URL

   • go(参数)：加载 history 列表中的某个具体页面

     • 参数如果为 正数，则前进几个历史记录

     • 参数如果为 负数，则后退几个历史记录

3. 属性：

   • length( )：返回当前窗口历史列表中的 URL 数量

（4）Navigator：浏览器对象

（5）Screen：显示器屏幕对象

三、DOM

（1）document：文档对象

1. 创建（获取）：

   • window.document

   • document

2. 方法：

   1. 获取Element对象：

      • getElementById( )：根据id属性值获取对象。id属性值一般唯一

      • getElementsByTagName( )：根据元素名称（标签）获取元素对象们。返回值是一个数组 div......

      • getElementsByClassName( )：根据class属性值获取元素对象们。返回值是一个数组

      • getElementsByName( )：根据name属性值获取元素对象们。返回值是一个数组

   2. 创建其他DOM对象：

      • createElement：创建元素节点

      • createComment：创建注释节点

      • createTextNode：创建文本节点

   3. 属性：

（2）Element：元素对象

1. 创建（获取）：

   • 通过document来获取和创建

2. 方法：

   • setAttribute( )：设置属性

   • removeAttribute( )：删除属性

<body>
 ? ?<a>点我试一试</a>
 ? ?<input type="button" id="btn_set" value="设置属性">
 ? ?<input type="button" id="btn_remove" value="删除属性">
?
 ? ?<script>
 ? ? ? ?//设置属性（超链接）
 ? ? ? ?var btn_set = document.getElementById("btn_set");
 ? ? ? ?btn_set.onclick = function () {
 ? ? ? ? ? ?var element_a = document.getElementsByTagName("a")[0];
 ? ? ? ? ? ?element_a.setAttribute("href","https://www.baidu.com");
 ? ? ?  }
 ? ? ? ?//删除属性（超链接）
 ? ? ? ?var btn_remove = document.getElementById("btn_remove");
 ? ? ? ?btn_remove.onclick = function () {
 ? ? ? ? ? ?var element_a = document.getElementsByTagName("a")[0];
 ? ? ? ? ? ?element_a.removeAttribute("href");
 ? ? ?  }
 ? ? ? ?
 ? ?</script>
</body>

（3）Node：节点对象

1. 特点：其它五个的父对象；所有的dom对象都可以被认为是一个节点

2. 方法：

   • CRUD DOM树：

     • appendChild( )：向节点的子节点列表的结尾添加新的子节点

     • removeChild( )：删除（并返回）当前节点的指定子节点

     • replaceChild( )：用新节点替换一个子节点

<body>
 ? ?<div id="div1">
 ? ? ? ?<div id="div2">div2</div>
 ? ? ?  div1
 ? ?</div>
?
?
 ?  //href="javascript:void(0)保留可以被点击，但去除了点击后跳转到href指定的url
 ? ?<a href="javascript:void(0)" id="del">删除子节点</a>
 ? ?<a href="javascript:void(0)" id="add">添加子节点</a>
?
 ? ?<script>
 ? ? ? ?//删除子节点
 ? ? ? ?var del = document.getElementById("del");
 ? ? ? ?del.onclick = function () {
 ? ? ? ? ? ?var div1 = document.getElementById("div1");
 ? ? ? ? ? ?var div2 = document.getElementById("div2");
 ? ? ? ? ? ?div1.removeChild(div2);
 ? ? ?  }
 ? ? ? ?//添加子节点
 ? ? ? ?var add = document.getElementById("add");
 ? ? ? ?add.onclick = function () {
 ? ? ? ? ? ?var div1 = document.getElementById("div1");
 ? ? ? ? ? ?var div3 = document.createElement("div");
 ? ? ? ? ? ?div3.setAttribute("id","div3");
 ? ? ? ? ? ?div3.innerHTML = "div3";
 ? ? ? ? ? ?div1.appendChild(div3);
 ? ? ?  }
 ? ?</script>
</body>

1. 属性：

   • parentNode( )：返回当前节点的父节点

四、HTML DOM

（1）innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>动态表格</title>
 ? ?<style>
 ? ? ? ?div{
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?margin: 50px;
 ? ? ?  }
 ? ? ? ?table{
 ? ? ? ? ? ?border: 1px solid black;
 ? ? ? ? ? ?margin: auto;
 ? ? ? ? ? ?width: 500px;
 ? ? ?  }
 ? ? ? ?tr,td{
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?margin: auto;
 ? ? ? ? ? ?border: 1px solid black;
 ? ? ?  }
 ? ?</style>
</head>
<body>
 ? ?<div>
 ? ? ? ?<input type="text" id="id" placeholder="请输入编号">
 ? ? ? ?<input type="text" id="name" placeholder="请输入姓名">
 ? ? ? ?<input type="text" id="gender" placeholder="请输入性别">
 ? ? ? ?<input type="button" id="btn_add" value="添加">
 ? ?</div>
?
 ? ?<table>
 ? ? ? ?<tr>
 ? ? ? ? ? ?<th>编号</th>
 ? ? ? ? ? ?<th>姓名</th>
 ? ? ? ? ? ?<th>性别</th>
 ? ? ? ? ? ?<th>操作</th>
 ? ? ? ?</tr>
 ? ? ? ?<tr>
 ? ? ? ? ? ?<td>1</td>
 ? ? ? ? ? ?<td>迪丽热巴</td>
 ? ? ? ? ? ?<td>女</td>
 ? ? ? ? ? ?<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
 ? ? ? ?</tr>
 ? ? ? ?<tr>
 ? ? ? ? ? ?<td>2</td>
 ? ? ? ? ? ?<td>古力娜扎</td>
 ? ? ? ? ? ?<td>女</td>
 ? ? ? ? ? ?<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
 ? ? ? ?</tr>
 ? ? ? ?<tr>
 ? ? ? ? ? ?<td>3</td>
 ? ? ? ? ? ?<td>扎尔巴哈</td>
 ? ? ? ? ? ?<td>男</td>
 ? ? ? ? ? ?<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
 ? ? ? ?</tr>
 ? ? ?  //this代表此标签，即<a>
 ? ?</table>
?
 ? ?<script>
 ? ? ? ?document.getElementById("btn_add").onclick = function () {
 ? ? ? ? ? ?//获取输入的三个文本框的值
 ? ? ? ? ? ?var id = document.getElementById("id").value;
 ? ? ? ? ? ?var name = document.getElementById("name").value;
 ? ? ? ? ? ?var gender = document.getElementById("gender").value;
?
 ? ? ? ? ? ?var table = document.getElementsByTagName("table")[0];
 ? ? ? ? ? ?//添加一行（使用innerHTML追加）
 ? ? ? ? ? ?table.innerHTML += "<tr>\n" +
 ? ? ? ? ? ? ? ?" ? ? ? ? ?  <td>"+id+"</td>\n" +
 ? ? ? ? ? ? ? ?" ? ? ? ? ?  <td>"+name+"</td>\n" +
 ? ? ? ? ? ? ? ?" ? ? ? ? ?  <td>"+gender+"</td>\n" +
 ? ? ? ? ? ? ? ?" ? ? ? ? ?  <td><a href=\"javascript:void(0)\" onclick=\"delTr(this)\">删除</a></td>\n" +
 ? ? ? ? ? ? ? ?" ? ? ?  </tr>";
 ? ? ?  }
 ? ? ? ?//删除行的函数
 ? ? ? ?function delTr(obj) {
 ? ? ? ? ? ?//<a>的父节点是<td>，<td>的父节点是<tr>，<tr>的父节点是<table>
 ? ? ? ? ? ?var table = obj.parentNode.parentNode.parentNode;
 ? ? ? ? ? ?var tr = obj.parentNode.parentNode;
 ? ? ? ? ? ?table.removeChild(tr);//删除table的子节点tr
 ? ? ?  }
 ? ?</script>
?
</body>
</html>

（2）控制元素样式

<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>DOM</title>
?
 ? ?<style>
 ? ? ? ?.d1{
 ? ? ? ? ? ?border: 1px solid green;
 ? ? ? ? ? ?width: 100px;
 ? ? ? ? ? ?height: 200px;
 ? ? ?  }
 ? ?</style>
</head>
<body>
 ? ?<div id="div1">div1</div>
 ? ?<div id="div2">div2</div>
 ? ?<script>
 ? ? ? ?//1.使用元素的 style 属性来设置
 ? ? ? ?var div1 = document.getElementById("div1");
 ? ? ? ?div1.onclick = function () {
 ? ? ? ? ? ?div1.style.border = "1px solid red";
 ? ? ? ? ? ?div1.style.width = "200px";
 ? ? ? ? ? ?div1.style.fontSize = "20px";
 ? ? ?  }
 ? ? ? ?//2.提前定义好类选择器的样式，通过元素的 className 属性来设置其 class 属性值
 ? ? ? ?var div2 = document.getElementById("div2");
 ? ? ? ?div2.onclick = function () {
 ? ? ? ? ? ?div2.className = "d1";
 ? ? ?  }
 ? ?</script>
</body>

五、事件

• 概念：某些组件被执行了某些操作后，触发某些代码的执行

  • 事件：某些操作。如：点击、双击、键盘按下、鼠标移动

1. 点击事件

• onclick：单击事件

• ondblclick：双击事件

2. 焦点事件

• onfocus：获得焦点

• onblur：失去焦点（常用于表单校验）

3. 加载事件

• onload：一张页面或一张图像完成加载

4. 鼠标事件

• onmousedown：鼠标按钮被按下

  • 定义方法时，在function的括号中定义一个形参，接受event对象

  • event对象的 button 属性可以获取鼠标按钮的哪个键被点击了。左键返回0、滚轮返回1、右键返回2

• onmouseup：鼠标按钮被松开

• onmousemove：鼠标被移动

• onmouseover：鼠标移到某元素之上

• onmouseout：鼠标从某元素移开

5. 键盘事件

• onkeydown：某个键盘按键被按下

• onkeyup：某个键盘按键被松开

• onkeypress：某个键盘按键被按下或松开

6. 表单事件

• onsubmit：确认按钮被点击

  • 可以阻止表单被提交。若返回true，则表单被提交；若返回false，则表单不会被提交

• onreset：重置按钮被点击

7. 选择和改变事件

• onchange：域的内容被改变

• onselect：文本被选中

DOM简单学习：

• document.getElementById("id值")：通过元素的id获取元素对象

• innerHTML：修改标签体的内容

<body>
?
 ? ?<img id="light" src="Image/1.jpg">
 ? ?<h1 id="title">悔创阿里杰克马</h1>
?
 ? ?<script>
 ? ? ? ?var light = document.getElementById("light");//通过元素的id获取元素对象
 ? ? ? ?alert("我要换图片啦");
 ? ? ? ?light.src = "Image/2.jpg";
?
 ? ? ? ?var title = document.getElementById("title");
 ? ? ? ?alert("我要换内容啦");
 ? ? ? ?title.innerHTML = "不识妻美刘强东";//修改标签体的内容
 ? ?</script>
?
</body>

事件简单学习：

• 绑定事件：

  1. 直接再html标签上，指定事件的属性（操作），属性值就是JS代码

     • onclick：点击事件

  <body>
  ?
   ? ?<img id="light" src="1.jpg" onclick="fun()">
  ?
   ? ?<script>
   ? ? ? ?function fun() {
   ? ? ? ? ? ?alert(我被点了);
   ? ? ?  }
   ? ?</script>
  ?
  </body>

  1. 通过JS获取元素对象，指定事件属性

  <body>
  ?
   ? ?<img id="light" src="1.jpg">
  ?
   ? ?<script>
   ? ? ? ?function fun() {
   ? ? ? ? ? ?alert("我又被点了");
   ? ? ?  }
  ?
   ? ? ? ?var light = document.getElementById("light");
   ? ? ? ?light.onclick = fun;
   ? ?</script>
  ?
  </body>

• 灯泡开关

<body>
?
 ? ?<img id="light" src="Image/lightOFF.jpg">
?
 ? ?<script>
 ? ? ? ?var flag = false;
 ? ? ? ?function fun() {
 ? ? ? ? ? ?if(flag){
 ? ? ? ? ? ? ? ?light.src = "Image/lightOFF.jpg";
 ? ? ? ? ? ? ? ?flag = false;
 ? ? ? ? ?  }else{
 ? ? ? ? ? ? ? ?light.src = "Image/lightON.jpg";
 ? ? ? ? ? ? ? ?flag = true;
 ? ? ? ? ?  }
 ? ? ?  }
?
 ? ? ? ?var light = document.getElementById("light");
 ? ? ? ?light.onclick = fun;
 ? ?</script>
 ? ?
</body>