JavaWeb篇-JavaScript

红太狼 2021-06-10 20:40 411阅读 0赞

### 文章目录 ###

*  JavaScript
 *   *  JavaScript 和 html 代码的结合方式
     *   *  第一种方式
         *  第二种方式
     *  变量
     *  关系(比较)运算
     *  逻辑运算
     *  数组
     *  函数
     *   *  函数的两种定义方式
         *   *  第一种:可以使用function关键字来定义函数
             *  函数的第二种定义方式
         *  隐形参数arguments
     *  JS中自定义对象
     *   *  Object 形式的自定义对象
         *  \{\}花括号形式的自定义对象
     *  JS中的事件
     *   *  onload加载完成事件
         *  onclick单击事件
         *  onblur失去焦点事件
         *  onchange内容发生改变事件
         *  onsubmit表单提交事件
     *  DOM模型
     *   *  正则表达式
         *  Document对象中的方法
         *   *  getElementById方法
             *  getElementsByName方法
             *  getElementsByTagName方法
             *  createElement方法
         *  节点的常用属性和方法
         *   *  方法
             *  属性
         *  Dom查询练习

# JavaScript #

**特点：**

*  交互性（它可以做的就是信息的动态交互）
 *  安全性（不允许直接访问本地硬盘） 3. 跨
 *  平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

## JavaScript 和 html 代码的结合方式 ##

### 第一种方式 ###

只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写JavaScript代码

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            // alert是JavaScript语言提供的一个警告框函数。
            // 它可以接收任意类型的参数，这个参数就是警告框的提示信息
            alert("hello javaScript!");
        </script>
    </head>
    <body>
    
    </body>

### 第二种方式 ###

使用script标签单独引入JavaScript代码文件

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script type="text/javascript" src="1.js"></script>
        <script type="text/javascript">
            alert("国哥现在可以帅了");
        </script>
    </head>
    <body>
    
    </body>

## 变量 ##

**JavaScript 的变量类型：**

*  数值类型： number
 *  字符串类型： string
 *  对象类型： object
 *  布尔类型： boolean
 *  函数类型： function

![在这里插入图片描述][20210405112555507.png]

JS 中的定义变量格式：

var 变量名;

var 变量名 = 值;

示例代码:

## 关系(比较)运算 ##

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>符号</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>等于</td> 
   <td>==</td> 
   <td>做简单的字面值比较</td> 
  </tr> 
  <tr> 
   <td>全等于</td> 
   <td>===</td> 
   <td>除了做字面值比较，还会比较两个变量的数据类型</td> 
  </tr> 
 </tbody> 
</table>

代码示例:

## 逻辑运算 ##

且运算: &&

或运算: ||

取反运算: !

![在这里插入图片描述][20210405112540681.png]

代码示例:

## 数组 ##

JS中数组的定义:

格式:

var 数组名 = \[\];//空数组

var 数组名 = \[1,‘abc’,true\];//定义数组同时赋值

示例代码

## 函数 ##

### 函数的两种定义方式 ###

#### 第一种:可以使用function关键字来定义函数 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70]

示例代码:

#### 函数的第二种定义方式 ####

![在这里插入图片描述][20210405112510725.png]

示例代码:

**注意:js中不允许函数的重载**

### 隐形参数arguments ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 1]

示例代码:

## JS中自定义对象 ##

### Object 形式的自定义对象 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 2]

示例代码:

### \{\}花括号形式的自定义对象 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 3]

示例代码:

## JS中的事件 ##

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FBJu8sfb-1617592864712)(JavaWeb.assets/1617540174373.png)\]

### onload加载完成事件 ###

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            // onload事件的方法
            function onloadFun() { 
                alert('静态注册onload事件，所有代码');
            }
    
            // onload事件动态注册。是固定写法
            window.onload = function () { 
                alert("动态注册的onload事件");
            }
    
        </script>
    </head>
    
    <body>
    
    </body>

### onclick单击事件 ###

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            function onclickFun() {
                alert("静态注册onclick事件");
            }
    
            // 动态注册onclick事件
            window.onload = function () {
                // 1 获取标签对象
                /*
                * document 是JavaScript语言提供的一个对象（文档）<br/>
                * get           获取
                * Element       元素（就是标签）
                * By            通过。。   由。。经。。。
                * Id            id属性
                *
                * getElementById通过id属性获取标签对象
                **/
                var btnObj = document.getElementById("btn01");
                // alert( btnObj );
                // 2 通过标签对象.事件名 = function(){}
                btnObj.onclick = function () {
                    alert("动态注册的onclick事件");
                }
            }
    
        </script>
    </head>
    <body>
        
        <button οnclick="onclickFun();">按钮1</button>
        <button id="btn01">按钮2</button>
    </body>

### onblur失去焦点事件 ###

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            // 静态注册失去焦点事件
            function onblurFun() {
                // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
                // log() 是打印的方法
                console.log("静态注册失去焦点事件");
            }
    
            // 动态注册 onblur事件
            window.onload = function () {
                //1 获取标签对象
               var passwordObj = document.getElementById("password");
               // alert(passwordObj);
                //2 通过标签对象.事件名 = function(){};
                passwordObj.onblur = function () {
                    console.log("动态注册失去焦点事件");
                }
            }
    
        </script>
    </head>
    <body>
        用户名:<input type="text" οnblur="onblurFun();"><br/>
        密码:<input id="password" type="text" ><br/>
    </body>

### onchange内容发生改变事件 ###

<head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script type="text/javascript">
            function onchangeFun() {
                alert("女神已经改变了");
            }
    
            window.onload = function () {
                //1 获取标签对象
                var selObj = document.getElementById("sel01");
                // alert( selObj );
                //2 通过标签对象.事件名 = function(){}
                selObj.onchange = function () {
                    alert("男神已经改变了");
                }
            }
    
    
        </script>
    </head>
    <body>
        请选择你心中的女神：
        
        <select οnchange="onchangeFun();">
            <option>--女神--</option>
            <option>芳芳</option>
            <option>佳佳</option>
            <option>娘娘</option>
        </select>
    
        请选择你心中的男神：
        <select id="sel01">
            <option>--男神--</option>
            <option>国哥</option>
            <option>华仔</option>
            <option>富城</option>
        </select>
    </body>

### onsubmit表单提交事件 ###

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" >
            // 静态注册表单提交事务
            function onsubmitFun(){
                // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
                alert("静态注册表单提交事件----发现不合法");
    
                return flase;
            }
    
            window.onload = function () {
                //1 获取标签对象
                var formObj = document.getElementById("form01");
                //2 通过标签对象.事件名 = function(){}
                formObj.onsubmit = function () {
                    // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
                    alert("动态注册表单提交事件----发现不合法");
    
                    return false;
                }
            }
        </script>
    </head>
    <body>
        
        <form action="http://localhost:8080" method="get" οnsubmit="return onsubmitFun();">
            <input type="submit" value="静态注册"/>
        </form>
        <form action="http://localhost:8080" id="form01">
            <input type="submit" value="动态注册"/>
        </form>
    
    </body>

## DOM模型 ##

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-coXo1Avm-1617592864713)(JavaWeb.assets/1617540578277.png)\]

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-diPxh10Q-1617592864714)(JavaWeb.assets/1617540590011.png)\]

**Document 对象的理解：**

*  第一点：Document 它管理了所有的 HTML 文档内容。
 *  第二点：document 它是一种树结构的文档。有层级关系。
 *  第三点：它让我们把所有的标签 都 对象化
 *  第四点：我们可以通过 document 访问所有的标签对象。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V5MBHMBR-1617592864715)(JavaWeb.assets/1617591929675.png)\]

### 正则表达式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 6]

### Document对象中的方法 ###

document.getElementById(elementId)
    通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
    document.getElementsByName(elementName)
    通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
    document.getElementsByTagName(tagname)
    通过标签名查找标签 dom 对象。tagname 是标签名
    document.createElement( tagName)
    方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
    
    注：
    document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
    如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
    如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
    以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

#### getElementById方法 ####

代码示例:

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" >
            /* * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/> * 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。 * */
            function onclickFun() { 
                // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
                var usernameObj = document.getElementById("username");
                // [object HTMLInputElement] 它就是dom对象
                var usernameText = usernameObj.value;
                // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
                var patt = /^\w{5,12}$/;
                /* * test()方法用于测试某个字符串，是不是匹配我的规则 ， * 匹配就返回true。不匹配就返回false. * */
    
                var usernameSpanObj = document.getElementById("usernameSpan");
                // innerHTML 表示起始标签和结束标签中的内容
                // innerHTML 这个属性可读，可写
                usernameSpanObj.innerHTML = "国哥真可爱！";
    
                if (patt.test(usernameText)) { 
                    // alert("用户名合法！");
                    // usernameSpanObj.innerHTML = "用户名合法！";
                    usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
                } else { 
                    // alert("用户名不合法！");
                    // usernameSpanObj.innerHTML = "用户名不合法！";
                    usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
                }
            }
        </script>
    </head>
    <body>
        用户名：<input type="text" id="username" value="wzg"/>
        <span id="usernameSpan" style="color:red;">
    
        </span>
        <button onclick="onclickFun()">较验</button>
    </body>

#### getElementsByName方法 ####

代码示例:

#### getElementsByTagName方法 ####

代码示例:

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            window.onload = function(){ 
                // alert( document.getElementById("btn01") );
            }
    
    
            // 全选
            function checkAll() { 
                alert( document.getElementById("btn01") );
                // document.getElementsByTagName("input");
                // 是按照指定标签名来进行查询并返回集合
                // 这个集合的操作跟数组 一样
                // 集合中都是dom对象
                // 集合中元素顺序 是他们在html页面中从上到下的顺序。
                var inputs = document.getElementsByTagName("input");
    
                for (var i = 0; i < inputs.length; i++){ 
                    inputs[i].checked = true;
                }
            }
        </script>
    </head>
    <body>
    
        
        兴趣爱好：
        <input type="checkbox" value="cpp" checked="checked">C++
        <input type="checkbox" value="java">Java
        <input type="checkbox" value="js">JavaScript
        <br/>
        <button id="btn01" onclick="checkAll()">全选</button>
    
    </body>

#### createElement方法 ####

代码示例:

### 节点的常用属性和方法 ###

节点的常用属性和方法

#### 方法 ####

通过具体的元素节点调用  
getElementsByTagName()  
方法，获取当前节点的指定标签名孩子节点

appendChild( oChildNode )  
方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

#### 属性 ####

childNodes
    属性，获取当前节点的所有子节点
    firstChild
    属性，获取当前节点的第一个子节点
    lastChild
    属性，获取当前节点的最后一个子节点
    parentNode
    属性，获取当前节点的父节点
    nextSibling
    属性，获取当前节点的下一个节点
    previousSibling
    属性，获取当前节点的上一个节点
    className
    用于获取或设置标签的 class 属性值
    innerHTML
    属性，表示获取/设置起始标签和结束标签中的内容
    innerText
    属性，表示获取/设置起始标签和结束标签中的文本

### Dom查询练习 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>dom查询</title>
    <link rel="stylesheet" type="text/css" href="style/css.css" />
    <script type="text/javascript"> window.onload = function(){ //1.查找#bj节点 document.getElementById("btn01").onclick = function () { var bjObj = document.getElementById("bj"); alert(bjObj.innerHTML); } //2.查找所有li节点 var btn02Ele = document.getElementById("btn02"); btn02Ele.onclick = function(){ var lis = document.getElementsByTagName("li"); alert(lis.length) }; //3.查找name=gender的所有节点 var btn03Ele = document.getElementById("btn03"); btn03Ele.onclick = function(){ var genders = document.getElementsByName("gender"); alert(genders.length) }; //4.查找#city下所有li节点 var btn04Ele = document.getElementById("btn04"); btn04Ele.onclick = function(){ //1 获取id为city的节点 //2 通过city节点.getElementsByTagName按标签名查子节点 var lis = document.getElementById("city").getElementsByTagName("li"); alert(lis.length) }; //5.返回#city的所有子节点 var btn05Ele = document.getElementById("btn05"); btn05Ele.onclick = function(){ //1 获取id为city的节点 //2 通过city获取所有子节点 alert(document.getElementById("city").childNodes.length); }; //6.返回#phone的第一个子节点 var btn06Ele = document.getElementById("btn06"); btn06Ele.onclick = function(){ // 查询id为phone的节点 alert( document.getElementById("phone").firstChild.innerHTML ); }; //7.返回#bj的父节点 var btn07Ele = document.getElementById("btn07"); btn07Ele.onclick = function(){ //1 查询id为bj的节点 var bjObj = document.getElementById("bj"); //2 bj节点获取父节点 alert( bjObj.parentNode.innerHTML ); }; //8.返回#android的前一个兄弟节点 var btn08Ele = document.getElementById("btn08"); btn08Ele.onclick = function(){ // 获取id为android的节点 // 通过android节点获取前面兄弟节点 alert( document.getElementById("android").previousSibling.innerHTML ); }; //9.读取#username的value属性值 var btn09Ele = document.getElementById("btn09"); btn09Ele.onclick = function(){ alert(document.getElementById("username").value); }; //10.设置#username的value属性值 var btn10Ele = document.getElementById("btn10"); btn10Ele.onclick = function(){ document.getElementById("username").value = "国哥你真牛逼"; }; //11.返回#bj的文本值 var btn11Ele = document.getElementById("btn11"); btn11Ele.onclick = function(){ alert(document.getElementById("city").innerHTML); // alert(document.getElementById("city").innerText); }; }; </script>
    </head>
    <body>
    <div id="total">
    	<div class="inner">
    		<p>
    			你喜欢哪个城市?
    		</p>
    
    		<ul id="city">
    			<li id="bj">北京</li>
    			<li>上海</li>
    			<li>东京</li>
    			<li>首尔</li>
    		</ul>
    
    		<br>
    		<br>
    
    		<p>
    			你喜欢哪款单机游戏?
    		</p>
    
    		<ul id="game">
    			<li id="rl">红警</li>
    			<li>实况</li>
    			<li>极品飞车</li>
    			<li>魔兽</li>
    		</ul>
    
    		<br />
    		<br />
    
    		<p>
    			你手机的操作系统是?
    		</p>
    
    		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
    	</div>
    
    	<div class="inner">
    		gender:
    		<input type="radio" name="gender" value="male"/>
    		Male
    		<input type="radio" name="gender" value="female"/>
    		Female
    		<br>
    		<br>
    		name:
    		<input type="text" name="name" id="username" value="abcde"/>
    	</div>
    </div>
    <div id="btnList">
    	<div><button id="btn01">查找#bj节点</button></div>
    	<div><button id="btn02">查找所有li节点</button></div>
    	<div><button id="btn03">查找name=gender的所有节点</button></div>
    	<div><button id="btn04">查找#city下所有li节点</button></div>
    	<div><button id="btn05">返回#city的所有子节点</button></div>
    	<div><button id="btn06">返回#phone的第一个子节点</button></div>
    	<div><button id="btn07">返回#bj的父节点</button></div>
    	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    	<div><button id="btn09">返回#username的value属性值</button></div>
    	<div><button id="btn10">设置#username的value属性值</button></div>
    	<div><button id="btn11">返回#bj的文本值</button></div>
    </div>
    </body>
    </html>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 7]

[20210405112555507.png]: /images/20210516/b6e553201b0046358bf78340649deaaa.png
[20210405112540681.png]: /images/20210516/2450614175e2403aa8723a4b14a4d7a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70]: /images/20210516/cb35c7efeb7f4d2482881d7e28384b6f.png
[20210405112510725.png]: /images/20210516/e8cc1410494540a4862be22f642bd446.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 1]: /images/20210516/6aec5ab916fb4d2e963ee4947002192d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 2]: /images/20210516/966a66aa63054f6e82d0d780ad7b15ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 3]: /images/20210516/50502c8c28364356ad17f30a345a4669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 4]: /images/20210516/c3e6e49fe4a843248d46c892dae2d62f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 5]: /images/20210516/18ee2523b66947878a8ea48c3a8e9082.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 6]: /images/20210516/e7fc3ea5374e4b818d94366de8e83292.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDA4Mzkw_size_16_color_FFFFFF_t_70 7]: /images/20210516/92226ef97a5040fcb4f3acb08c9af83c.png