JavaScript详解

  • JavaScript详解已关闭评论
  • 453 次浏览
  • A+
所属分类：Web前端
摘要

方式二：新建一个js文件，在HTML中连接该文件也可以实现，就像css一样和HTML分开
便宜好用的国外VPS推荐
目录

一、快速入门

1.JavaScript的两种引入方式

方式一：直接在html里面写 目的：实现简单的弹窗

点击查看代码 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <!--script标签内，写JavaScript代码，可以放在head标签里，也可以放在body标签里-->     <script>         <!--弹窗，打开页面时弹出一个窗口，并显示有hello，world-->         alert('hello,world');     </script> </head> <body>  </body> </html>

运行结果图

JavaScript详解
方式二：新建一个js文件，在HTML中连接该文件也可以实现，就像css一样和HTML分开

JavaScript详解
注意script标签必须是成对出现，

2.基本语法

点击查看代码 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <!--Javascript严格区分大小写-->     <script>         //单行与多行注释与Java中注释的方式一样         /*1.定义变量  变量类型  变量名 = 变量值；*/         var score =100;//这里不写分号也没事         var name = "twq";//这里不写var也没事，就算不写变量名都可以，是不感觉可以随心所欲了         if(score>60 && score <70){             alert('小子，你很危险呀');         }else if(score > 70 && score < 80){             alert('革命尚未成功，同学  仍需努力呀！！');         }else{             alert('不要骄傲哦！');         }     </script> </head> <body>  </body> </html>

调试方法参照下图：

JavaScript详解

JavaScript详解

JavaScript详解

3.数据类型

(1)number

js不区分小数和整数，Number

点击查看代码 
123//整数123 123.1//浮点数123.1 1.123e3//科学计数法 -99//负数 NaN//not a number Infinity//表示无限大

界面在浏览器上运行结果图

JavaScript详解

(2)字符串

和Java的一样

(3)布尔值

JavaScript详解

(4)逻辑运算

① && 两个都为真，结果为真
② | | 一个为真，结果为真
③ ！真即假，假即真

(5)比较运算符

① = 赋值
② == 等于(类型不一样，值一样，也会判断为true)
③ === 绝对等于（类型一样，值一样结果为true）
注意：这是Java的一个缺陷，坚决不要使用==比较

须知：

  • NaN===NaN，这个与所有的数值都不相等，包括自己
  • 只能通过isNaN(NaN)来判断这个数据是否是NaN

JavaScript详解

(6)浮点数

尽量避免使用浮点数进行运算，存在精度问题！

JavaScript详解

(7)数组

java的数值必须是相同类型的对象，JS中需不要这样！

JavaScript详解
如果数组下标越界会报undefined

JavaScript详解

(8)对象

对象是大括号，数组是中括号 每个属性之间用逗号隔开，最后一个属性之后不需要逗号

点击查看代码 
<script>         console.log((1/3)===(1-2/3));         console.log(Math.abs(1/3-(1-2/3))<0.00000001);         //保证代码的可读性，尽量使用[]         var arr=[1,2,3,4,5,'hello',null,true];         new Array(1,12,3,4,5,'hello');         var person ={             name:"Twq",             age:23,             tags:['js','java','web','...']         }      </script>

运行结果图

JavaScript详解

4.严格检查模式

点击查看代码 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script>         /*前提是IDEA需要设置支持ES6语法         *'use strict'严格检查模式，预防Javascript的随意性导致产生的一些问题如：         *       ①定义变量不写变量类型在没有写严格检查时不会报错，但是加上这严格检查之后就会报错         * 必须要写在JS的第一行         * 局部变量建议都使用let去定义 */         'use strict';         /*let是块作用域，就会好比在for循环里用let定义了一个块变量         在循环的外部则无法使用该变量，var是函数作用域，在循环里面定义的         变量在循环外面也可以可以访问*/         let i = 1;     </script> </head> <body> </body> </html>

二、详解数据类型

1.字符串

(1)正常字符串，我们使用单引号或者双引号包裹

(2)注意转义字符

①'
②n
③u4e2d   unicode字符格式：u####

④41  Ascll字符

JavaScript详解

(3)多行字符串编写

JavaScript详解

(4)模板字符串

点击查看代码 
<script>         //tab 上面 esc下面         let name = "Twq";         var msg =`你好呀，${name}`//在Java中连接两个字符串用加号，二JS可以使用$符号连接     </script>

运行结果图

JavaScript详解

(5)字符串长度

JavaScript详解

(6)字符串内容的不可变性

JavaScript详解

(7)大小写转换

JavaScript详解

(8)查找

JavaScript详解

(9)substring

JavaScript详解

2.数组

(1)长度

Array可以包含任意的数据类型

JavaScript详解
注意:假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

(2)indexOf,通过元素获得下标索引

JavaScript详解
在数组里字符串的1和数字1是不同的

(3)slice()

截取Array的一部分，返回一个新数组，类似于String中的substring

(4)尾部压入和弹出push(),pop()

从尾部压入和弹出元素

JavaScript详解

(5)unshift(),shift()

unshift()压入到头部 shift()弹出头部的第一个元素

JavaScript详解

(6)sort()

JavaScript详解

(7)元素反转

JavaScript详解

(8)concat()

JavaScript详解
注意:concat()并没有修改原来的数组的值，只是会返回一个新的数组

(9)连接符join

打印拼接数组，使用特定的字符串连接

JavaScript详解

(10)多维数组

JavaScript详解

3.对象

(1).使用一个不存在的对象属性，不会报错！undefined

JavaScript详解

(2)动态的删减属性

JavaScript详解

(3)动态的添加属性

JavaScript详解

(4)判断属性值是否在这个对象中

JavaScript详解

(5)判断一个属性是否是这个对象自身拥有的hasOwnProperty()

JavaScript详解

4.Map和Set

(1)Map

点击查看代码 
 <script>         var map = new Map([['tom',100],['jack',900],['haha',80]])         console.log(map.get('jack'))         map.set('admin',90);//新增或修改         map.delete('tom');//删除         for(let x of map){             console.log(x)         }     </script>

运行结果图

JavaScript详解

(2)Set

无序不重复的集合

点击查看代码 
 <script>         var set = new Set([1,1,1,3]);         set.add(2);//添加一个元素         set.delete(3);//删除一个元素         for(let x of set){             console.log(x)         }         console.log(set.has(1))//集合中是否包含1     </script>

运行结果图

JavaScript详解

四、函数

1.定义函数

(1)定义方式一

点击查看代码 
<script>     function abs(x){         if(x >= 0){             return x;         }         else{             return -x;         }     } </script>

运行结果

JavaScript详解

一旦执行到return代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined

（2）方式二：

点击查看代码 
var abs = function(x){         if(x >= 0){             return x;         }         else{             return -x;         }     }

①参数问题：JS函数调用时可以传任意个参数，也可以不传参数都不会报错，如果想要报错可以手动定义一个异常

点击查看代码 
<script>     var abs = function(x){         if(typeof x !== 'number'){//如果参数x的类型不是一个数             //手动定义异常             throw 'Not a number';         }         if(x >= 0){             return x;         }         else{             return -x;         }     } </script>

运行结果

JavaScript详解
②假设参入的参数有多个
可以使用arguments关键词
arguments：代表传递进来的所有参数，是一个数组

点击查看代码 
<script>     var abs = function(x){         if(typeof x !== 'number'){//如果参数x的类型不是一个数             //手动定义异常             throw 'Not a number';         }         for(let i =0; i<arguments.length;i++){             console.log(arguments[i])         }         // if(x >= 0){         //     return x;         // }         // else{         //     return -x;         // }     } </script>

运行结果图

JavaScript详解
③使用reset获取当前除已定义的参数以外的所有参数

点击查看代码 
<script>     var abs = function(a,b,c,...rest){         console.log("a->"+a);         console.log("b->"+b);         console.log("c->"+c);         console.log(rest);     } </script>

运行结果

JavaScript详解

2.变量的作用域

（1）在JavaScript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用-(非要想实现的话可以后面研究一下闭包)

JavaScript详解

（2）如果两个函数是用来相同的变量名，只要在函数内部，就不冲突

点击查看代码 
<script>         'use strict'         function twq(){             var x = 1;             x = x+1;         }         function twq1(){             var x = x +1;         }              </script>

（3）内部函数可以访问外部函数的成员，反之则不行

点击查看代码 
<script>         'use strict'         function twq(){             var x = 1;             function twq1(){                 var y = x +1;             }             var z = y +1;         }     </script>

JavaScript详解

(4)当内外函数变量重名时

在JS中函数查找变量从自身函数开始，由‘内’ 向 ‘外’查找，假设外部存在两个同名的函数变量，则内部函数会屏蔽外部函数的变量。

点击查看代码 
<script>         'use strict'         function twq(){             var x = 1;             function twq(){                 var x = 'A';                 console.log('inner'+x);             }             console.log('outer'+x);             twq();         }         twq();     </script>

JavaScript详解

（5）提升变量的作用域

点击查看代码 
<script>         'use strict'         function twq(){             var x = 'x' + y;             console.log(x);             var y = 'y';         }         twq();     </script>

运行结果图

JavaScript详解
由此结果可知JS执行引擎，自动提升了y的声明，但是不会提升y的赋值

（7）全局对象window

默认所有的全局变量，都会自动绑定在window对象中

点击查看代码 
 <script>         'use strict'         var x = 'xxx';         alert(x);         alert(window.x);     </script>

JavaScript详解

（8）局部作用域（let)

循环中使用var时

点击查看代码 
<script>         'use strict'         function aaa(){             for (var i = 0; i < 100; i++) {                 console.log(i);             }             console.log(i+1);         }     </script>

JavaScript详解
let关键字，解决局部作用域冲突的问题

点击查看代码 
 <script>         'use strict'         function aaa(){             for (let i = 0; i < 100; i++) {                 console.log(i);             }             console.log(i+1);         }     </script>

JavaScript详解

(9)常量const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改这样的值

点击查看代码 
<script>         'use strict'         var PI = '3.14';         console.log(PI);         PI = '213';//可以改变这个值         console.log(PI)     </script>

JavaScript详解
在ES6引入了常量关键字const

点击查看代码 
<script>         'use strict'         const PI = '3.14';         console.log(PI);         PI = '213';//可以改变这个值         console.log(PI);     </script>

JavaScript详解

3.方法

(1)定义方法

①方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

点击查看代码 
<script>         'use strict'         var person = {             name:'唐',             birth:1999,             //方法             age:function (){                 //今年-出生的年 为它的年龄                 var now = new Date().getFullYear();//获取当前的年份                 return now - this.birth;             }         }     </script>

运行结果图

JavaScript详解
②方式二：

点击查看代码 
<script>         'use strict'         function getAge(){             //今年-出生的年 为它的年龄             var now = new Date().getFullYear();             return now - this.birth;         }         var person = {             name:'唐',             birth:1999,             //方法             age:getAge//这里只需要将方法名天在这里即可         }         //kuangshen.age() ok         //getAge() NaN 直接调用getAge()其内部的this指的是window     </script>

运行结果图

JavaScript详解

(2)apply

getAge.apply(person,[])  this指向了person,参数为空

JavaScript详解

五、内部对象

1.标准对象

JavaScript详解

2.Date

(1)基本使用

JavaScript详解

(2)转换

JavaScript详解

3.JSON

在JS中一切皆为对象，任何JS支持的类型都可以用JSON来表示：

格式：

  • 对象都用{ }
  • 数组都用[]
  • 所有的键值对都使用key:value

(1)JSON字符窜和JS对象的相互转化

点击查看代码 
<script>     var user={         name:'twq',         age:3,         sex:'男'     }     //对象转化为JSON字符串{}     var jsonUser = JSON.stringify(user);          //JSON字符串转化为对象 参数为JSON字符串     var obj = JSON.parse('{"name":"twq","age":3,"sex":"男"}');  </script>

运行结果图

JavaScript详解

六、面向对象编程

1.原型(父类)

点击查看代码 
<script>     var student={         name:'twq',         age:23,         run:function (){             console.log(this.name+' is running.....')         }     }     var xiaoming={         name:'xiaoming'     }     xiaoming.__proto__=student; </script>

运行结果图

JavaScript详解

2.class继承

(1)class关键字，是在ES6引入的

点击查看代码 
<script>   class Student{      constructor(name) {//构造器       this.name =name;     }     hello(){       alert('hello')     }   }   var st1 = new Student("小明");   var st2 = new Student("小红");  </script>

JavaScript详解

(2)继承

点击查看代码 
<script>   class Student{      constructor(name) {//构造器       this.name =name;     }     hello(){       alert('hello')     }   }   var st1 = new Student("小明");   var st2 = new Student("小红");   class primeStudent extends Student{     constructor(name,grade) {       super(name);       this.grade = grade;     }     myGrade(){       alert('我是一名小学生');     }   }   var st3 = new primeStudent("小刚",23); </script>

JavaScript详解

JavaScript详解
本质：查看对象原型

JavaScript详解

七、操作BOM对象(重点)

1.浏览器介绍

(1）javascript和浏览器的关系

JavaScript诞生就是为了能够让它在浏览器中运行 BOM：浏览器对象模型

(2）window

window代表浏览器的窗口

JavaScript详解

(4）Navigator(了解)

Navigator，封装了浏览器的信息

JavaScript详解
大多数时候，我们不会使用navigator对象，因为会被人为修改

(5）screen

屏幕的尺寸

JavaScript详解

(6）location(重点)

location代表当前页面的URL信息

点击查看代码 
host: "localhost:63342" href:"http://localhost:63342/Java02/JavaScript/tang/%E5%86%85%E9%83%A8%E5%AF%B9%E8%B1%A1/class%E7%BB%A7%E6%89%BF.html?_ijt=sibusl004num53m4li95rdnuvg" protocol: "http:" reload: ƒ reload()//刷新页面 //设置新的地址 location.assign('https://www.cnblogs.com/twq46/')

(7）document

document代表当前的页面，HTML DOM文档树

JavaScript详解
获取具体的文档树节点

点击查看代码 
<body> <dl id="app">     <dt>java</dt>     <dd>javaSE</dd>     <dd>javaEE</dd> </dl> <script>     var dl = document.getElementById('app'); </script> </body>

JavaScript详解
获取cookie

JavaScript详解
劫持cookie原理：对于有病毒的网站，可能就会存在获取你的cookie的JS代码，一旦他们获得你的cookie值，就可以登录的你的账号进行操作，比如你在登录淘宝账号之后，天猫网站也会自动登录上，这就是因为天猫会获取你登录淘宝账号的cookie值，从而用这些信息自动去登录天猫网站
服务器端可以设置cookie：httpOnly,就可以保证信息安全

JavaScript详解

（8）history

history代表浏览器的历史记录

JavaScript详解

八、操作DOM对象(重点)

1.核心

浏览器网页就是一个dom树形结构

JavaScript详解

  • 跟心Dom节点
  • 遍历dom节点：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个新的节点

2.获得dom节点

点击查看代码 
<body> <div id="father">     <h1>标题</h1>     <p id="p1">段落1</p>     <p class="p2">段落2</p> </div> <script>     var h1 = document.getElementsByTagName('h1');//获取标签选择器     var p1 = document.getElementById('p1');//获取id选择器     var p2 = document.getElementsByClassName('p2');//获取类选择器     var father = document.getElementById('father');//获取id选择器     console.log(father.children);//获取父节点下的所有子节点     // console.log(father.firstChild);//获取父节点下的第一个节点     // console.log(father.lastChild);//获取父节点下的最后一个节点  </script> </body>

运行结果图

JavaScript详解

3.更新节点

点击查看代码 
<body> <div id="div">  </div> <script>     var div1 = document.getElementById('div');     console.log(div1);     div1.innertext='123'//修改网页内容的值 </script> </body>

运行结果图 可以解析HTML文本标签

div1.innerHTML='<strong>123</strong>'

JavaScript详解

JavaScript详解
操作JS：属性使用字符串包裹

JavaScript详解

4.删除节点

（1）删除节点的步骤：

①先获取父节点,如：p1.parentElement; ②在通过父节点删除自己:father.remove(p1.parentElement); 也可以直接通过下图删除指定节点

JavaScript详解
还可通过数组来删除

JavaScript详解
注意:删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

5.插入节点

我们获得了某个DOM节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干，会产生覆盖

（1）追加

目的：将div外面的p标签加到div内部

点击查看代码 
<body> <p id="js">TWQ</p> <div id="div">     <p id="'se">javaSE</p>     <p id="ee">JavaEE</p>     <p id="me">javaME</p> </div>  <script>     var js = document.getElementById('js');     var div = document.getElementById('div'); </script> </body>

运行结果图

JavaScript详解

（2）创建一个标签并实现插入

目的：新建一个p标签并将其加入div标签中

点击查看代码 
<body> <!--<p id="js">TWQ</p>--> <div id="div">     <p id="'se">javaSE</p>     <p id="ee">JavaEE</p>     <p id="me">javaME</p> </div>  <script>     // var js = document.getElementById('js');     var div = document.getElementById('div');     var newp = document.createElement('p')//创建一个p标签     newp.id = 'newp';//设置id选择器的名称,等价于<p id="newp"></p>     newp.innerText="Twqwq123"//等价于<p id="newp">Twqwq123</p> </script> </body>

运行结果图

JavaScript详解

目的：实现创建一个标签自带属性和值，并加入到div标签中

点击查看代码 
<body> <div id="div">     <p id="'se">javaSE</p>     <p id="ee">JavaEE</p>     <p id="me">javaME</p> </div>  <script>     var div = document.getElementById('div');     //创建一个带值的标签     var myScript = document.createElement('script');     myScript.setAttribute('type','text/javascript');  </script> </body>

运行结果图

JavaScript详解

九、操作表单

1.获得表单的值

点击查看代码 
<body> <p>     <span>用户名:</span><input type="text" id="username"> </p> <script>     var input_text = document.getElementById('username');     //得到输入框的值     input_text.value  </script> </body>

运行结果图

JavaScript详解

2.修改表单的值

点击查看代码 
<body> <p>     <span>用户名:</span><input type="text" id="username"> </p> <script>     var input_text = document.getElementById('username');      //得到输入框的值     input_text.value      // //修改输入框的值     input_text.value='124'; </script> </body>

运行结果图

JavaScript详解

3.获取与修改单选框的状态

点击查看代码 
<body> <p>     <span>用户名:</span><input type="text" id="username"> </p> <p>      <span>性别：</span>     <input type="radio" name="sex" value="man" id="boy">男     <input type="radio" name="sex" value="girl" id="women">女  </p> <script>     var input_text = document.getElementById('username');      var boy_radio = document.getElementById('boy');     var girl_radio = document.getElementById('women');      //得到输入框的值     input_text.value      //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值     boy_radio.checked;//查看返回的结果，是否为true，如果为true,则被选中     girl_radio.checked = true;//赋值      </script> </body>

运行结果图

JavaScript详解

4.表单提交验证

(1)表单验证放在按钮上

点击查看代码 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> <!--    MD5工具类-->     <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> </head> <body> <form action="#" method="post">     <p>         <span>用户名：</span><input type="text" id="username" name="username">     </p>     <p>         <span>密码：</span><input type="password" id="password" name="password">     </p> <!--    绑定事件 onclick 被点击-->     <button type="submit" onclick="aaa()">提交</button> </form> <script>     function aaa(){         var uname = document.getElementById('username');         var pwd = document.getElementById('password');         console.log(uname.value);         console.log(pwd.value);         //MD5算法，可对自己提交的密码进行加密，防止别人抓包的的时候抓到你提交的用户名及密码信息         pwd.value = md5(pwd.value);         console.log(pwd.value)     } </script> </body> </html>

运行结果 由以下的运行结果知，提交之后，抓包提到的密码是经过MD5算法加密之后的

JavaScript详解

(2)验证作用于表单上

点击查看代码 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> <!--    MD5工具类-->     <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> </head> <body> <!-- 表单绑定提交事件 onsubmit:绑定一个提交检测的函数，true,false 将这个结果返回给表单，使用onsubmit接收 --> <form action="https://www.cnblogs.com/" method="post" onsubmit="return aaa()">     <p>         <span>用户名：</span><input type="text" id="username" name="username">     </p>     <p>         <span>密码：</span><input type="password" id="input_password" >     </p>     <input type="hidden" id="md5_password" name="password">  <!--绑定事件 onclick 按钮被点击时-->     <button type="submit">提交</button> </form> <script>     function aaa(){         alert(1);         var uname = document.getElementById('username');         var pwd = document.getElementById('input_password');         var md5pwd = document.getElementById('md5_password');                  md5pwd.value = md5(pwd.value);         return true;//如果改为true,点击提交之后就可以跳转到博客园界面     } </script> </body> </html>

运行结果图

JavaScript详解

十、jQuery

1.获取jQuery

jQuery库，里面存在大量的JavaScript函数

点击查看代码 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> <!--    方式一：线上导入的方式--> <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>--> <!--    方式二：可以再jQuery官网下载          若在官网点击下载仅是在网页打开了一个文档，并没有实现文档的下载         可以按 alt + 鼠标左键或 option + 左键即可以文档的形式下载，然后导入项目中-->     <script src="lib/jquery-3.6.0.min.js"></script> </head> <body> <a href="" id="text_jquery">点我</a> <script>     document.getElementById('id');     //选择器就是css的选择器     $('#text_jquery').click(function (){         alert('你好，jQuery')     }) </script> </body> </html>

运行结果图

JavaScript详解

JavaScript详解

2.选择器

点击查看代码 
<script>   //jQuery css中的选择器它全都能使用   $('p').click();//标签选择器   $('#id1').click();//id选择器   $('.class1').click();//class类选择器    </script>

3.jQuery事件

JavaScript详解

点击查看代码 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>   <script src="lib/jquery-3.6.0.js"></script>   <style>     #divMove{       width: 500px;       height: 500px;       border: 1px solid red;     }   </style> </head> <body> <!--要求：获取鼠标当前的一个坐标--> mouse:<span id="mouseMove"></span> <div id="divMove">   在这里点击试试  </div> <script> //当网页元素加载完毕之后，响应事件 //document:当前网页 //ready:网页加载完之后要做的事 // $(document).ready(function (){ // // }) //上诉可简化为 $(function (){   $('#divMove').mousemove(function (e){     $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)   }) }); </script> </body> </html>

运行结果图

JavaScript详解

4.操作DOM元素

点击查看代码 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="lib/jquery-3.6.0.js"></script> </head> <body> <ul id="test-ul">     <li class="js">javaScript</li>     <li name="python">python</li> </ul> <script>     $('#test-ul li[name=python]').text();//获取div标签下的ul里li的name=python的值     $('#test-ul li[name=python]').text('设置的值');//修改div标签下的ul里li的name=python的值      //css的操作     $('#test-ul li[name=python]').css({"color","red"}) </script> </body> </html>

运行结果图

JavaScript详解

便宜好用的国外VPS推荐