JavaScript使用-有解無憂

1 阻止標簽的默認行為

1.阻止超鏈接的默認提交行為，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一個js程式</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
            var name = "Adair";
            var date = new Date();
            location.href = "/xxx/xxxAction/" + name + date;
        }
    </script>
</head>
<body>
    <!--阻止超鏈接的默認提交行為-->
   <a href="javascript:void(0);" onclick="test1();">點擊</a>
</body>
</html>

如圖所示：在這里插入圖片描述
2.阻止表單標簽的默認提交行為，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一個js程式</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
    </script>
</head>
<body>
    <!--阻止表單標簽的默認提交行為-->
    <form action="/xxx/xxxAction" method="post" onsubmit="return false">
        name:<input type="text" name="name" /> </br>
        pwd:<input type="text" name="pwd" /> </br>
        <input type="submit" value="注冊" />
    </form>
</body>
</html>

如圖所示：在這里插入圖片描述
注意：onsubmit = “return 呼叫函式” 以函式的回傳結果決定是否提交表單，

2 事件物件 event【了解】

演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一個js程式</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1(){
            alert("下課！！！！");
            // 需要當前事件的一些要素 可以直接使用event
            alert(event.target);    // 事件源 發生事件的標簽
            alert(event.type);      // 事件屬性 click單擊
            alert(event.clientX);   // 獲取發生事件的橫向坐標 單位：像素點
            alert(event.clientY);   // 獲取發生事件的縱向坐標 單位：像素點
        }
    </script>
</head>
<body>
   <h1 onclick="test1();">下課！！！</h1>
</body>
</html>

如圖所示：在這里插入圖片描述

3 Js事件冒泡【了解】

在這里插入圖片描述
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        #outer{
            border: solid 1px red;
            background-color: red;
            width: 200px;
            height: 200px;
            padding: 20px 20px;
        }
        #inner{
            border: solid 1px blue;
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>
    <meta charset="UTF-8">
    <title>Js事件冒泡</title>
    <script type="text/javascript">
        function test1() {
            alert("外層單擊事件觸發");
        }
        function test2() {
            // 阻止事件冒泡
            event.stopPropagation();
            alert("內層單擊事件觸發");
        }
    </script>
</head>
<body>
    <div id="outer" onclick="test1();">
        outer
        <div id="inner" onclick="test2();">
             inner
        </div>
    </div>
</body>
</html>

如圖所示：在這里插入圖片描述

4 DOM 【重點】

1.什么是DOM Document Object Model 檔案物件模型，
Js會將頁面封裝成一個document物件，頁面當中的每個標簽也會封裝成對應的一個標簽物件，并且以樹狀結構存盤，
目的：方便對頁面結構進行操作，
DOM = 檔案物件模型樹 + 相關操作方法(API)，如圖所示：在這里插入圖片描述
2.相關操作方法
a.獲取標簽物件
document.getElementById(“id值”) ; //通過標簽id屬性值獲取標簽物件，
獲取的時單個標簽物件，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1(){
            // 獲取h1標簽物件
            var h1 = document.getElementById(h);
            alert(h1);
        }
    </script>
</head>
<body>
    <h1 id="h">下課！！！</h1>
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述
b.操作標簽屬性
獲取：標簽物件.屬性名
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1(){
            // 獲取h1標簽物件
           // var h1 = document.getElementById(h);
            // 獲取id屬性值  標簽物件.屬性名
            //alert(h1.id);
            // 獲取輸入框的標簽物件
            var input = document.getElementById(i1);
            // 獲取標簽物件的屬性值
            var name = input.value;
            if (name.length >= 6 && name.length <= 16){
                alert("輸入正確!");
            }else {
                alert("輸入錯誤!");
            }
            alert(name);
        }
    </script>
</head>
<body>
    <h1 id="h">下課！！！</h1>
    姓名：<input id="i1" type="text" name="name">
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述
修改：標簽物件.屬性名 = “值”
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>換燈泡</title>
    <script type="text/javascript" >
        function test1() {
            // 獲取圖片標簽物件
            var image = document.getElementById("img1");
            // 判斷當前圖片src屬性
            if (image.src == "http://localhost:63342/javascript/javascript01/web/images/1.jpg"){
                //  修改src屬性
                image.src = "images/2.jpg";
            }else {
                image.src = "images/1.jpg";
            }
        }
    </script>
</head>
<body>
    <img id="img1" src="images/1.jpg" />
   <input type="button" value="換一批" onclick="test1();" />
</body>
</html>

如圖所示：在這里插入圖片描述
c.操作標簽體文本
獲取：標簽物件.innerText 只獲取內部文本資訊，
標簽物件.innerHTML 獲取內部文本以及子標簽，
修改：
標簽物件.innerText= “文本” 會覆寫標簽內所有內容，
標簽物件.innerHTML= “文本” 會覆寫標簽內所有內容，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
            var div = document.getElementById("d");
           // div.innerText = "TXWang";
           // alert(div.innerHTML);
            div.innerHTML = "TXWang";
        }
    </script>
</head>
<body>
    <div id="d">
        <div>Adair</div>
    </div>
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述 d.標簽物件的常用屬性
標簽物件.parentNode 獲取當前標簽物件的父節點【常用】，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
           var li = document.getElementById("li2");
           var ol = li.parentNode;
           alert(ol);
        }
    </script>
</head>
<body>
    <ol>
        <li>Adair1</li>
        <li id="li2">Adair2</li>
        <li>Adair3</li>
        <li>Adair4</li>
    </ol>
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述
標簽物件.childNodes 獲取當前標簽物件的子節點回傳陣列空格也算子節點，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
           var ol = document.getElementById("l");
            var lis = ol.childNodes;
            alert(lis.length);
            alert(lis[0]);
        }
    </script>
</head>
<body>
    <ol id="l">
        <li>Adair1</li>
        <li >Adair2</li>
        <li>Adair3</li>
        <li>Adair4</li>
    </ol>
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述
標簽物件.firstChild 獲取當前標簽物件的第一個子節點，
標簽物件.lastChild 獲取當前標簽物件的最后一個子節點，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
           var ol = document.getElementById("l");
            alert(ol.firstChild.innerText);
            alert(ol.lastChild.innerText);
        }
    </script>
</head>
<body>
    <ol id="l"><li>Adair1</li>
        <li >Adair2</li>
        <li>Adair3</li>
        <li>Adair4</li>
    </ol>
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述
標簽物件.proviousSibling 獲取當前標簽物件上一個兄弟節點，
標簽物件.nextSibling 獲取當前標簽物件下一個兄弟節點，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
            var li = document.getElementById("l2");
           var l3 = li.nextSibling.nextSibling;
           alert(l3.innerText);
           var l1 = li.previousSibling.previousSibling;
           alert(l1.innerText);
        }
    </script>
</head>
<body>
    <ol id="l">
        <li>Adair1</li>
        <li id="l2">Adair2</li>
        <li>Adair3</li>
        <li>Adair4</li>
    </ol>
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述
e.操作頁面結構對頁面元素的添加或者洗掉
添加：
1.創建標簽物件 document.createElement(“標簽名”);
2.創建文本物件 document.createTextNode(“文本”);
3.在父節點中添加子節點：父節點.appendChild(子節點);
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
            // 創建一個div  <div> Adair </div>
            // 1.創建div標簽物件
            var  div = document.createElement("div");
            // 2.創建文本物件
            var TestNode = document.createTextNode("Adair");
            // 3.將文本放入div標簽中
            div.appendChild(TestNode);
            // 4.將div放入body中
            var body = document.getElementById("bd");
            body.appendChild(div);
        }
    </script>
</head>
<body id="bd">
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述
洗掉：
父節點.removeChild(子節點) ，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
            // 洗掉 父節點.removeChild(子節點)
           var div = document.getElementById("d");
           var body = div.parentNode;
           body.removeChild(div);
        }
    </script>
</head>
<body id="bd">
    <div id="d">Adair</div>
    <input type="button" value="點擊" onclick="test1();">
</body>
</html>

如圖所示：在這里插入圖片描述
小案例分析如圖所示：

演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小案例</title>
    <script TYPE="text/javascript">
        // 動態表格 添加
        function addUser() {
            // 獲取用戶輸入的屬性
            nameText = document.getElementById("name").value;
            emailText = document.getElementById("email").value;
            phoneText = document.getElementById("phone").value;
            // 將獲取的文本資料封裝成文本物件
            var nameNode = document.createTextNode(nameText);
            var emailNode = document.createTextNode(emailText);
            var phoneNode = document.createTextNode(phoneText);
            // 創建td
            var nameTd = document.createElement("td");
            var emailTd = document.createElement("td");
            var phoneTd = document.createElement("td");
            // 創建洗掉按鈕的td
            var delTd = document.createElement("td");
            // 創建洗掉按鈕
            var delInput = document.createElement("input");

            // 物件.屬性名 = "值"
            delInput.type = "button";
            delInput.value="洗掉"
            // 添加單擊事件 事件屬性 也是標簽的一個屬性
            delInput.onclick = function(){
                deleteUser();
            }
            // 把洗掉按鈕放入td中
            delTd.appendChild(delInput);
            // 將文本節點放入對應的td中
            nameTd.appendChild(nameNode);
            emailTd.appendChild(emailNode);
            phoneTd.appendChild(phoneNode);
            // 創建tr
            var tr = document.createElement("tr");
            // 將td放入tr中
            tr.appendChild(nameTd);
            tr.appendChild(emailTd);
            tr.appendChild(phoneTd);
            tr.appendChild(delTd);
            //將tr放入table中
            var table = document.getElementById("tb");
            table.appendChild(tr);
        }
        // 動態洗掉
        function deleteUser(){
            // 洗掉 父節點.removeChild(子節點)
            // 獲取發生事件的源頭標簽
            var btn = event.target;
            // 獲取父節點的父節點
            var tr = btn.parentNode.parentNode;
            // 獲取tr父節點
            var parentNode = tr.parentNode;
            // 洗掉
            parentNode.removeChild(tr);

        }

    </script>
</head>
<body>
    <center>
    name:<input id="name" type="text" />
    email:<input id="email" type="text" />
    phone:<input id="phone" type="text" />
    <input type="button" value="提交" onclick="addUser();" />
    </center>
    <hr/>
    <br/>
    <table id="tb" border="1px" width="75%" align="center" cellspacing="0"cellpadding="0">
        <tr>
            <td>NAME</td><td>EMAIL</td><td>PHONE</td><td>操作</td>
        </tr>
        <tr>
            <td>Adair</td><td>1578533828@qq.com</td><td>15786876143</td><td><input type="button" value="洗掉" onclick="deleteUser();"></td>
        </tr>
        <tr>
            <td>LITiao</td><td>345611145@qq.com</td><td>18275769841</td><td><input type="button" value="洗掉" onclick="deleteUser();"></td>
        </tr>
    </table>
</body>
</html>

如圖所示：在這里插入圖片描述
f.下拉串列相關的屬性
sel.options 獲取當前下拉串列所有的option標簽，
sel.selectedIndex 獲取當前選中option的下標，
sel.value 獲取當前選中option的value值，
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉串列</title>
    <script type="text/javascript">
        function test1() {
            var sel = document.getElementById("city");
            // var option = sel.options;
            // alert(option.length);
            // alert(sel.selectedIndex);
            alert(sel.value);
        }
    </script>
</head>
<body>
    城市：
    <select id="city" onchange="test1();">
        <option value="bj">北京</option>
        <option value="gd">廣東</option>
        <option value="gz">貴州</option>
    </select>
</body>
</html>

如圖所示：在這里插入圖片描述
小案例分析如圖所示：
演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉串列</title>
    <script type="text/javascript">
        var city = {
                    bj:["海淀區","昌平區","東城區"],
                    tj:["武清區","河北區","南開區"],
                    zz:["二七區","金水區","中原區"]
        }
        function test1() {
            // 獲取縣區下拉串列物件
            var  xqSelect = document.getElementById("xq");
            // 清除原有縣區資訊
            xqSelect.innerHTML = "";
            // 1.獲取用戶選擇的城市
            var  ct = document.getElementById("city");
            var cityValue = ct.value;
            // 2.從Json物件中獲取縣區陣列
            var xqs = city[cityValue];
            // 3.遍歷縣區陣列
            for (var  i = 0; i < xqs.length; i ++){
                // 把縣區資訊封裝成文本節點
                var xqTextNodex = document.createTextNode(xqs[i]);
                // 創建option標簽物件
                var xqOption = document.createElement("option");
                // 將縣區文本節點放入option中
                xqOption.appendChild(xqTextNodex);
                // 將option放入縣區下拉串列中
                xqSelect.appendChild(xqOption);
            }
        }
        // 頁面加載完成之后執行的內容
        function init() {
            test1();
        }
    </script>
</head>
<body onl oad="init()">
    城市：
    <select id="city" name="city" onchange="test1()">
        <option value="bj">北京</option>
        <option value="tj">天津</option>
        <option value="zz">鄭州</option>
    </select>
    縣區：
    <select id="xq">
    </select>
</body>
</html>

如圖所示：在這里插入圖片描述

5 BOM Browser Object Model 瀏覽器物件模型window.alert(); // 彈框提示，

演示的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window</title>
    <!--通知瀏覽器以下內容是javascript代碼-->
    <script type="text/javascript" >
        function test1() {
            // 瀏覽器彈框提示
            // window.alert();
            // 確認提示框，引數：提示內容 回傳值：布林值  確定：true 取消：false
            // var result = window.confirm("確定洗掉？");
            // alert(result);
            // 可輸入提示框， 引數：提示內容 回傳值：輸入的內容
            // var input = window.prompt("請輸入您的銀行卡卡號和密碼，中間用#分隔！");
            // alert(input);
            // 定時任務  在指定時間后，執行指定任務 時間單位：毫秒 回傳值：當前定時任務id值
            var timeId = window.setTimeout(function () {
                alert("嘻嘻哈哈");
            },300);
            // 取消定時任務 需要定時任務的id
            window.clearTimeout(timeId);
            // 定時任務 回圈執行 時間單位：毫秒 回傳值：當前定時任務id值
            var interId = window.setInterval(function () {
                alert("一口氣上五樓，不費勁");
            },300);
            // 取消定時任務 需要定時任務的id
            window.clearInterval(interId);
        }
    </script>
</head>
<body>
    <input type="button" value="點擊" onclick="test1();" />
</body>
</html>

如圖所示：在這里插入圖片描述
Location：物件表示地址欄【重點】
location.href = “ url” ; 通過js形式發送請求
發送請求的方式：
1.地址欄
2.超級鏈接
3.表單
4. Js location.href，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/312143.html

標籤：其他

上一篇：JavaScript淺拷貝與深拷貝

下一篇：Vue實作直播功能