devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript快速入门+文档查询【详解】_javascript文档

作者：知新_RL | 2024-05-25 06:42:05

赞

踩

javascript文档

目录

1. js简介

2.js引入方式

3. JS基础语法(ECMAScript)

4. js函数和事件【js的核心】

5.js对象

 6.BOM对象

7.DOM对象        

8.案例全选全消

1. js简介

        1.什么是js

        JavaScript，简称js，是web开发中不可缺少的脚本语言，不需要编译就能运行（解释型语言）。在传统的web开发里，它“寄生”在html体内放在服务器上，随网络传输到客户端，在浏览器里运行

        2.js作用

        监听用户的动作：使用的是js的事件监听机制

        可以操作浏览器的行为：比如让浏览器弹窗、历史记录的前进、后退等等

        可以改变网页的内容：可以修改html标签、标签的属性、标签的样式，然后页面显示的效果就会随之改变

2.js引入方式

         内部js：在html里任意位置添加<script> 在这里写js代码 </script>标签，在标签内部写js代码

        外部js：把js代码写到单独的js文件里，html中使用<script src="js文件路径"></script>引入js文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>引入js</title>
  7. </head>
  8. <body>
  9.     
  10.     
  11.     <!-- 引入方式1. 在html里直接添加script标签，把js代码写在script标签内部 -->
  12.     <script>
  13.         alert("内部js");
  14.     </script>
  15.  
  16.     <!-- 引入方式2. 把js代码写在单独的js文件里，html中使用script标签引入js文件 -->
  17.     <script src="./js/demo.js"></script>
  18. </body>
  19. </html>

3. JS基础语法(ECMAScript)

        1.基础语法

        区分大小写

        每行结尾的分号可有可无

        注释的写法：

                单行注释：// 注释内容

                多行注释：/* 注释内容 */

        js常用的打印输出语句有：

        

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>js基础语法</title>
  7. </head>
  8. <body>
  9.     hello, javascript
  10.  
  11.     
  12.     <script>
  13.         //1. js区分大小写
  14.         //2. 每行结尾的分号可写可不写
  15.         //3. 注释的写法和Java一样
  16.  
  17.         // 使用浏览器弹窗
  18.         window.alert("JavaScript简称js");
  19.  
  20.         // 把内容输出到页面上
  21.         document.write("JavaScript借鉴了Java，但两者没有关系");
  22.  
  23.         // 把内容打印到浏览器控制台。
  24.         // 使用浏览器打开此页面后，按F12，找到“Console”或者“控制台”就能看到输出的内容
  25.         console.log("布兰登·艾克用了10多天就创建了JavaScript语言");
  26.     </script>
  27. </body>
  28. </html>

        

        2.变量和常量定义

        在js中，变量的声明和java中还是不同的。首先js中主要通过如下3个关键字来声明变量的：

     命名规范：和Java相似

                组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

                数字不能开头

                建议使用驼峰命名

             

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>js变量定义</title>
  7. </head>
  8. <body>
  9.     
  10.     <script>
  11.         //js中一切变量定义都使用：let，无论是什么类型的变量
  12.         //  老版本的js(ECMAScript5)中，使用var定义变量。从ECMAScript6开始，建议使用let定义变量
  13.         let v1 = 3;
  14.         let v2 = "hello";
  15.         let v3 = true;
  16.         let v4 = new Date();
  17.  
  18.         //js中的常量定义使用：const
  19.         //  常量不允许修改值，执行代码时会报错（打开浏览器的F12，控制台里可看到报错信息）
  20.         const PI = 3.14;
  21.         PI = 3.1415;
  22.     </script>
  23. </body>
  24. </html>

        3.数据类型和运算符

        虽然js是弱类型语言，但是也有数据类型，分为 ：原始类型 和 引用类型

        

        

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>js的数据类型</title>
  7. </head>
  8. <body>
  9.     
  10.     <script>
  11.         //使用`typeof`函数判断变量的类型
  12.         console.log(typeof 3); //number
  13.         console.log(typeof "3") //string
  14.         console.log(typeof true) //boolean
  15.         console.log(typeof null) //object
  16.         console.log(typeof undefined) //undefined
  17.  
  18.         let v;
  19.         console.log(typeof v) //undefined。声明变量但未初始化，是undefined
  20.     </script>
  21. </body>
  22. </html>

         js的运算符：绝大多数还是和java中一致

           

        

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>运算符</title>
  7. </head>
  8. <body>
  9.     
  10.     <script>
  11.         //算术运算符：+, -, *, /, %, ++, --
  12.         //赋值运算符：+=, -=, *=, /=, %=, =
  13.         //比较运算符：>, <, >=, <=, ==, !=, ===, !==
  14.         //逻辑运算符：&&, ||, !
  15.         //三元运算符
  16.  
  17.         console.log(3 == "3") //结果是true。因为==只比较值，只要值相同，结果就是true
  18.         console.log(3 === "3")//结果是false。因为===比较值和类型，只有两个都相同，结果才是true
  19.     </script>
  20. </body>
  21. </html>

        4.流程控制语句

        js的流程控制语句和Java非常相似，也有：

                if, else, else if：用于条件判断

                for，while，do while：用于循环遍历

        用法也和Java的流程控制语句几乎相同，所以这里只介绍一个特殊情况：if判断

                js里条件判断，通常用于判断boolean值

                js也能对任意类型的值进行if判断：

        数字类型的0，对象类型的null，字符串类型的""，还有undefined判断为false

 

  1. <html>
  2.     <head>
  3.         <title></title>
  4.     </head>
  5.     <body>
  6.         
  7.         <script>
  8.         	if(0){
  9.                console.log("0判断为true")
  10.             }else{
  11.                console.log("0判断为false")
  12.             }
  13.             
  14.             if(""){
  15.                 console.log("空字符串判断为true")
  16.             }else{
  17.                 console.log("空字符串判断为false")
  18.             }
  19.             
  20.             if(null){
  21.                 console.log("null判断为true")
  22.             }else{
  23.                 console.log("null判断为false")
  24.             }
  25.             
  26.             if(undefined){
  27.                 console.log("undefined判断为true")
  28.             }else{
  29.                 console.log("undefined判断为false")
  30.             }
  31.         </script>
  32.     </body>
  33. </html>

4. js函数和事件【js的核心】

   1.函数名两种:    

        普通函数：有名称的函数，通过函数名来调用函数

        匿名函数：没有名的函数，要么赋值给一个变量然后通过变量名调用，要么把函数直接作为其它函数的实参     

注意：

  • js里没有函数重载，同名函数会覆盖掉

  • js的形参不需要声明类型，直接写形参名称即可

  • js的函数不写返回值类型，如果需要返回，在函数里直接return即可

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>js的函数</title>
  7. </head>
  8. <body>
  9.     
  10.     <script>
  11.         //js的函数：相当于Java里的方法，都是用于复用代码的
  12.         
  13.         //1. 普通函数。不需要写返回值类型；形参不需要写类型；
  14.         function add(a, b){
  15.             return a+b;
  16.         }
  17.         let res = add(3, 5);
  18.         console.log(res)
  19.  
  20.         //2. 匿名函数。通常赋值给一个变量，通过变量名调用函数；也可以把匿名函数直接作为另外一个函数的实参
  21.         let fn = function(a, b){
  22.             return a * b;
  23.         }
  24.         let res2 = fn(3, 5);
  25.         console.log(res2)
  26.     </script>
  27. </body>
  28. </html>

        2.案例轮播图:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>轮播图</title>
  8. </head>
  9.  
  10. <body>
  11.  
  12. <!--
  13.     轮播图，需求：
  14.         打开页面之后，页面上显示一张图片
  15.         每间隔2秒钟，切换一张图片
  16.     分析：
  17.         1. 无论图片如何切换，必须要显示图片：就必须要使用img标签
  18.         2. 每间隔2秒钟做一些事情：周期性的执行任务，setInterval(函数对象, 2000)
  19.         3. 如何切换图片？只要把img的src属性值修改，就可以切换图片
  20.             需要使用js修改img的src属性值：document.getElementById("image").src = "新值"
  21. -->
  22.  
  23. <img src="./image/1.jpg" alt="" id="image" width="500px">
  24. <script>
  25.     //1. 把资料里的1.jpg到5.jpg拷贝到 VSCode的image文件夹里
  26.     //2. 创建html页面，实现轮播图
  27.     let image = document.getElementById("image");
  28.     let filename = 1;
  29.     setInterval(function() {
  30.         if(++filename > 5){
  31.             filename = 1;
  32.         }
  33.         image.src = "./image/" + filename + ".jpg";
  34.     }, 2000);
  35. </script>
  36. </body>
  37. </html>

         3.js事件

                事件：用户的一些动作，或者浏览器的一些状态变化。js提供了监听事件的一些属性

                事件源：事件发生在哪。通常是html标签上

                响应行为：事件发生后，要执行的代码、实现的功能

            常见事件：

        绑定语法：        

                普通函数方式绑定，语法：<input type="button" value="按钮" onclick="show()">

                匿名函数方式绑定，纯js方式绑定，

                语法：document.getElementById("事件源标签id").onclick= function(){}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件绑定1</title>
  6. </head>
  7. <body>
  8. <!--
  9. 需求：按钮点击时弹窗“点我干嘛”
  10. 分析：监听到按钮上发生  “被点击了” 事件时，要弹窗“点我干嘛”
  11.     事件源：按钮
  12.     事件：单击事件，要使用“onclick"监听到
  13.     响应行为： 弹窗“点我干嘛”
  14. 实现：
  15.     在事件源标签上加属性onclick，值是js代码“调用一个函数”
  16. -->
  17. <input type="button" value="按钮1" onclick="show()">
  18. <input type="button" value="按钮2" id="btn2">
  19.  
  20. <script>
  21.     function show(){
  22.         alert("点我干嘛1");
  23.     }
  24.     
  25.     document.getElementById("btn2").onclick = function(){
  26.         alert("点我干嘛2");
  27.     };
  28. </script>
  29. </body>
  30. </html>

        案例：鼠标控制轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>轮播图</title>
  7. </head>
  8. <body>
  9. <img src="./image/1.jpg" alt="" id="image" width="500px" onmouseenter="stop()" onmouseleave="start()">
  10. <script>
  11. 	//定义一个变量，用于存储定时器的id；在清除定时器时要使用
  12.     let timer;
  13.     
  14.     //直接调用一次start方法，页面一打开就开始
  15.     start();
  16.  
  17.     //开始轮播方法
  18.     function start(){
  19.         let image = document.getElementById("image");
  20.         let filename = 1;
  21.         timer = setInterval(function() {
  22.             if(++filename > 5){
  23.                 filename = 1;
  24.             }
  25.             image.src = "./image/" + filename + ".jpg";
  26.         }, 2000);
  27.     }
  28.  
  29.     //停止轮播方法
  30.     function stop(){
  31.         clearInterval(timer)
  32.     }
  33. </script>
  34. </body>
  35. </html>

5.js对象

        1.Array对象

        js的数组，更加类似于Java的集合，因为js数组的长度可变

        定义数组：

                let 变量名 = new Array(元素1, 元素2, 元素3, ...); 
                let 变量名 = [ 元素1, 元素2, 元素3, ... ]; 

        遍历于存储：

                arr[索引] = 值;
                let v = arr[索引];

常用属性名与方法：     

        

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>js数组</title>
  7. </head>
  8. <body>
  9.     
  10.     <script>
  11.         //1. 定义数组
  12.         //  new Array(元素1,元素2,...)
  13.         let arr1 = new Array("A", 1, true);
  14.         console.log(arr1)
  15.         
  16.         //  [元素1,元素2,...]
  17.         let arr2 = ["B", 2, false];
  18.         console.log(arr2)
  19.  
  20.  
  21.         //2. 循环遍历
  22.         let arr = ["A", "B", "C", "D", "E"];
  23.         for (let i = 0; i < arr.length; i++) {
  24.             console.log(arr[i])
  25.         }
  26.  
  27.         //3. length属性。
  28.         console.log("arr长度：", arr.length); //5
  29.         //  设置数组长度。
  30.         //     如果设置的值小，就截断数组；如果设置的值大，就扩容数组，没有值的元素是undefined
  31.         arr.length = 3;
  32.         console.log("设置arr长度为3后：", arr); // A, B, C
  33.  
  34.         //4. 常用方法
  35.         //  循环遍历forEach
  36.         arr.forEach(function(value){
  37.             console.log("arr遍历元素值：", value)
  38.         })
  39.         //  尾部添加元素
  40.         arr.push("hello")
  41.         console.log("arr尾部添加元素hello后：", arr); //A, B, C, hello
  42.         //  从索引2开始，删除1个元素
  43.         arr.splice(2, 1)
  44.         console.log("arr删除索引1元素后：", arr) //A, B, hello
  45.     </script>
  46. </body>
  47. </html>

  2.String对象

    定义字符串：

        let 变量名 = new String("hello"); 
        var 变量名 = "hello";

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>js字符串</title>
  7. </head>
  8. <body>
  9.     
  10.     <script>
  11.         //定义字符串：
  12.         let str = " hello, world ";
  13.  
  14.         console.log("str字符串的长度：", str.length)
  15.         console.log("从str中查找wo：", str.indexOf("wo"))
  16.         console.log(str.trim())
  17.         console.log("从str中截取索引3到索引5的子串：", str.substring(3,5))
  18.     </script>
  19. </body>
  20. </html>

        3.JSON对象【重点】

        JSON对象：JavaScript Object Notation，JavaScript对象标记法，是通过JavaScript标记法书写的文本，通常作为数据传输的格式。        

        json使用场景

        可以作为配置文件的格式。例如我们的讲义所用的typora软件，其配置文件就是json格式的

        可以作为前后台交互的数据载体。前后台交互时，我们需要传输数据，为了方便双方解析数据，可以采用json格式

         

json常用方法：

        

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JS-对象-JSON</title>
  8. </head>
  9. <body>
  10.     
  11. </body>
  12. <script>
  13.     // json格式的字符串  ==> json对象
  14.     let jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
  15.     let obj = JSON.parse(jsonstr);
  16.     console.log(obj.name);
  17.  
  18.     // json对象  ==> json格式的字符串
  19.     console.log(JSON.stringify(obj));
  20. </script>
  21. </html>

 6.BOM对象

        BOM：Broswer Object Model，浏览器对象模型。BOM对象提供了操作浏览器的方法，我们通过BOM对象可以让浏览器弹窗、切换历史记录等等。

        1.window对象

        window对象是所有bom对象的顶级对象，可以通过window.来获取其它4个bom对象，只是window.通常省略不写

        

        2.location对象

        location是指代浏览器的地址栏对象，常用于获取或者设置浏览器的地址信息：

  1. <html>	
  2.     <head>
  3.         <title>location对象 </title>
  4.     </head>
  5.     <body>
  6.         
  7.         <script>
  8.         	//获取浏览器地址栏信息
  9.             alert(location.href);
  10.             //设置浏览器地址栏信息
  11.             location.href = "https://www.itcast.cn";
  12.         </script>
  13.     </body>
  14. </html>

7.DOM对象        

1.DOM：Document Object Model 文档对象模型。JavaScript 将 HTML 文档的各个组成部分封装为对象，通过这些对象我们可以操作HTML的标签、属性、样式等等。

  • Document：整个文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment：注释对象

2.DOM操作的API 

要想通过DOM操作网页，主要有两个步骤：

  • 想操作哪个标签，就获取哪个标签对象：Element

  • 通过Element对象，操作标签的属性、内容、或样式

操作标签的属性

操作标签的属性很简单，通常是：

  • 获取属性值：let v = 标签对象.属性名

  • 设置属性值：标签对象.属性名 = 值

操作标签的内容

所谓标签的内容，就是开始标签和结束标签中间的部分。例如：<div> 这里是标签的内容 </div>

  • 获取标签内容：let v = 标签对象.innerHTML

  • 设置标签内容：标签对象.innerHTML = "新内容"，会把标签里旧内容覆盖掉

  1. <html>
  2.     <head>
  3.         <title>获取标签</title>
  4.     </head>
  5.     <body>
  6.         帐号：<input type="text" name="username" id="username" class="item"> <br>
  7.         密码：<input type="password" name="password" class="item"> <br>
  8.         性别：<input type="radio" name="gender" value="male">男
  9.              <input type="radio" name="gender" value="female">女 <br>
  10.         
  11.         <script>
  12.         	//根据id获取标签：
  13.             let usernameInput = document.getElementById("username");
  14.             console.log(usernameInput);
  15.             
  16.             //根据tagName获取标签：
  17.             let inputArray = document.getElementsByTagName("input");
  18.             console.log(inputArray);
  19.             
  20.             //根据name属性值获取标签：
  21.             let genderRadios = document.getElementsByName("gender");
  22.             console.log(genderRadios);
  23.             
  24.             //根据class属性值获取标签：
  25.             let items = document.getElementsByClassName("item");
  26.             console.log(items);
  27.         </script>
  28.     </body>
  29. </html>
  30.  
  31.  
  32. --------------------
  33. <html>
  34.     <head>
  35.         <title>操作属性</title>
  36.     </head>
  37.     <body>
  38.         <input type="password" id="pwd"> 
  39.         <input type="button" value="查看密码" onmousedown="showPwd()" onmouseup="hidePwd()">
  40.         
  41.         <script>
  42.         	function showPwd(){
  43.                 document.getElementById("pwd").type="text";
  44.             }
  45.             function hidePwd(){
  46.                 document.getElementById("pwd").type="password";
  47.             }
  48.         </script>
  49.     </body>
  50. </html>
  51.  
  52.  
  53. ----------------------
  54. <html>
  55.     <head>
  56.         <title>操作标签内容</title>
  57.     </head>
  58.     <body>
  59.         <div id="d1">
  60.             hello
  61.         </div>
  62.         
  63.         <script>
  64.         	let d1 = document.getElementById("d1");
  65.             console.log(d1.innerHTML);
  66.             
  67.             d1.innerHTML = "JavaScript";
  68.         </script>
  69.     </body>
  70. </html>

8.案例全选全消

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         table {
  8.             width: 500px;
  9.             margin: 0 auto;
  10.             border-collapse: collapse;
  11.         }
  12.  
  13.         td, th {
  14.             border: 1px solid blue;
  15.             text-align: center;
  16.         }
  17.  
  18.     </style>
  19. </head>
  20. <body>
  21. <table>
  22.     <tr>
  23.         <th style="width:100px;">
  24.             <input type="checkbox" id="checkall" title="全选/全消" onclick="check()" />
  25.             <input type="button" value="反选" onclick="inverse()">
  26.         </th>
  27.         <th>学号</th>
  28.         <th>姓名</th>
  29.         <th>年龄</th>
  30.     </tr>
  31.     <tr>
  32.         <td>
  33.             <input type="checkbox" class="item"/>
  34.         </td>
  35.         <td>1</td>
  36.         <td></td>
  37.         <td></td>
  38.     </tr>
  39.     <tr>
  40.         <td>
  41.             <input type="checkbox" class="item"/>
  42.         </td>
  43.         <td>2</td>
  44.         <td></td>
  45.         <td></td>
  46.     </tr>
  47.     <tr>
  48.         <td>
  49.             <input type="checkbox" class="item"/>
  50.         </td>
  51.         <td>3</td>
  52.         <td></td>
  53.         <td></td>
  54.     </tr>
  55.     <tr>
  56.         <td>
  57.             <input type="checkbox" class="item"/>
  58.         </td>
  59.         <td>4</td>
  60.         <td></td>
  61.         <td></td>
  62.     </tr>
  63.     <tr>
  64.         <td>
  65.             <input type="checkbox" class="item"/>
  66.         </td>
  67.         <td>5</td>
  68.         <td></td>
  69.         <td></td>
  70.     </tr>
  71.     <tr>
  72.         <td>
  73.             <input type="checkbox" class="item"/>
  74.         </td>
  75.         <td>6</td>
  76.         <td></td>
  77.         <td></td>
  78.     </tr>
  79. </table>
  80.  
  81. <!--
  82. 需求：
  83.     点击checkall的时候，如果checkall是选中状态，设置所有的item都设置为选中状态；
  84.     点击checkall的时候，如果checkall是未选中状态，设置所有的item都设置为未选中状态；
  85. -->
  86. <script>
  87.     function check(){
  88.         //checked是一个true或fasle状态，v是true或false
  89.         //1. 先获取checkall的状态：选中、取消
  90.         let v = document.getElementById("checkall").checked;
  91.  
  92.         //2. 把checkall的状态设置给所有的item
  93.         let items = document.getElementsByClassName("item");
  94.         for(let i=0; i<items.length; i++){
  95.             items[i].checked = v;
  96.         }
  97.     }
  98.  
  99.     /**
  100.      * 反选：
  101.      *  思路1：获取所有的item，循环遍历每一个，获取选中状态取反
  102.      *  思路2：获取所有的item，循环遍历每一个，模拟一次点击操作
  103.      */
  104.     function inverse(){
  105.         let items = document.getElementsByClassName("item");
  106.         for(let i=0; i<items.length; i++){
  107.             items[i].checked = !items[i].checked;
  108.         }
  109.     }
  110. </script>
  111. </body>
  112. </html>

  9.JS对象手册

   我们这是学入门和一些常用的属性，很多还是用要查  

        我们可以打开W3school在线学习文档，来到首页，在左侧栏找到浏览器脚本下的JavaScript，如下图所示：

        

                       

        

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/620943
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号