66-69

時間 2020-02-02

原文原文鏈接

Dom選擇器以及內容文本操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
</head>
<body>
    <div id="i1">
        test1
        <a>test2</a>
    </div>
</body>
</html>

上圖：innerText能夠獲取文本內容html

上圖：innerHTML獲取所有內容瀏覽器

上2圖：innerText還能夠設置值app

上2圖：經過innerText設置的連接內容是文本ide

上2圖：經過innerHTML設置的是一個超連接函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
</head>
<body>
    <div id="i1">
        test1
        <a>test2</a>
    </div>
    <input type="text" id="i2">
</body>
</html>

上圖：當前input標籤中未空，因此獲取的value爲空字體

上圖：在input中輸入內容，而後在獲取obj.value，就能夠看到相關內容。url

上圖：能夠修改內容code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
</head>
<body>
    <div id="i1">
        test1
        <a>test2</a>
    </div>
    <input type="text" id="i2">
    <select id="i3">
        <option value="11">北京1</option>
        <option value="12">北京2</option>
        <option value="13">北京3</option>
    </select>
</body>
</html>

上圖：選擇爲北京2，而後獲取value等於12。orm

上圖：設置value爲13，上面就變成北京3了htm

上圖：查看當前值的index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
</head>
<body>
    <div id="i1">
        test1
        <a>test2</a>
    </div>
    <input type="text" id="i2">
    <select id="i3">
        <option value="11">北京1</option>
        <option value="12">北京2</option>
        <option value="13">北京3</option>
    </select>
    <textarea id="i4"></textarea>
</body>
</html>

上圖：與input操做同樣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="請輸入關鍵字">
    <script>
        function Focus() {
            var tag = document.getElementById('i1');    <!--獲取標籤-->
            var val = tag.value;        <!--獲取標籤當前內容-->
            if(val == "請輸入關鍵字"){
                tag.value = "";     <!--設置內容爲空-->
            }
        }
        function Blur() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length == 0){
                tag.value = '請輸入關鍵字';
            }
        }
    </script>

</body>
</html>

代碼：
onfocus="Focus()表示當鼠標聚焦到標籤時調用Focus函數；
onblur="Blur()表示當鼠標不聚焦時調用Blur函數；
聚焦就清空提示的文字，不聚焦時顯示提示文字；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="請輸入關鍵字">
    <input type="text" placeholder="請輸入關鍵字">
    <script>
        function Focus() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val == "請輸入關鍵字"){
                tag.value = "";
            }
        }
        function Blur() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length == 0){
                tag.value = '請輸入關鍵字';
            }
        }
    </script>

</body>
</html>

代碼：使用placeholder就能夠直接進行文字提示，鼠標聚焦和不聚焦時顯示的功能，但這個一般只在比較新的瀏覽器才支持。

Dom樣式操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="請輸入關鍵字">
    <input type="text" placeholder="請輸入關鍵字">
    <script>
        function Focus() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val == "請輸入關鍵字"){
                tag.value = "";
            }
        }
        function Blur() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length == 0){
                tag.value = '請輸入關鍵字';
            }
        }
    </script>

</body>
</html>

上圖：對className進行多種操做。

上圖：將字體顏色改成紅色，能夠看到圖中字體的顏色以改變。

Dom屬性以及建立標籤

屬性操做

上圖：對當前obj屬性進行set和remove操做。

建立標籤，並添加到HTML中

使用字符串的形式建立

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+">
    <div id="i1">
        <p><input type="text"></p>

    </div>
    <script>
        function AddEle1() {
            //建立一個標籤，將標籤添加到i1裏
            var tag = "<p><input type='text'></p>";
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);  /*將建立好的tag標籤，放到i1底部*/
        }
    </script>
</body>
</html>

代碼：insertAdjacentHTML後面跟的是tag這個字符串
insertAdjacentHTML括號中的參數有4種
beforeBegin
afterBegin
beforeEnd
afterEnd

使用對象的方式建立

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" onclick="AddEle2();" value="+">
    <div id="i1">
        <p><input type="text"></p>

    </div>
    <script>

        function AddEle2() {
            //建立一個標籤，將標籤添加到i1裏
            var tag = document.createElement('input');  /*建立input標籤*/
            tag.setAttribute('type','text');    /*設置input標籤的type=text*/
            tag.style.fontSize ='16px';
            tag.style.color ='red';

            var p = document.createElement('p');
            p.appendChild(tag);

            document.getElementById('i1').appendChild(p); /*在i1標籤中添加p標籤*/
        }

    </script>
</body>
</html>

代碼：appendChild括號中是標籤對象

Dom提交表單以及其餘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.baidu.com">
        <input type="text">
        <input type="submit" value="提交">

    </form>
</body>
</html>

代碼：經過submit來跳轉到https://www.baidu.com，將text中的內容提交

上2圖：咱們點擊提交（submit），就跳轉到了baidu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1" action="https://www.baidu.com">
        <input type="text">
        <input type="submit" value="提交">
        <a onclick="submitForm();">去提交</a>
    </form>

    <script>
        function submitForm() {
            document.getElementById('f1').submit();
        }
    </script>

</body>
</html>

代碼：兩種方式提交；一個是直接使用submit；另外一個是調用函數後，使用submit。

上圖：
點擊提交和去提交均可以跳轉到baidu
這裏表示任何標籤經過調用函數，都是能夠提交的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1" action="https://www.baidu.com">
        <input type="text">
        <input type="submit" value="提交">
        <a onclick="submitForm();">去提交</a>
    </form>

    <script>
        function submitForm() {
            // document.getElementById('f1').submit();
            alert(123);
        }
    </script>

</body>
</html>

代碼：點擊去提交後，應用alert(123)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1" action="https://www.baidu.com">
        <input type="text">
        <input type="submit" value="提交">
        <a onclick="submitForm();">去提交</a>
    </form>

    <script>
        function submitForm() {
            // document.getElementById('f1').submit();
            // alert(123);
            var v = confirm('確認刪除嗎？');
            console.log(v);

        }
    </script>

</body>
</html>

代碼：

上圖：點擊去提交後彈框中有確認和取消；點擊確認後會返回true，點擊取消會返回false；這裏經過console.log(v);將返回的值打印了出來。

location

上圖：location.href 能夠獲取當前url

上2圖：設置當前url，就會跳轉到指定的url

無限定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>

        var obj = setInterval(function () {
            console.log(1);
        },1000);

    </script>

</body>
</html>

代碼：setInterval每隔1秒執行一次（一直執行）。

上圖：打印1，已經執行了38次。

清除計時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>

        var obj = setInterval(function () {
            console.log(1);
            clearInterval(obj);
        },1000);

    </script>

</body>
</html>

代碼：使用clearInterval清除計時器。

上圖：執行了一次就被清除了。

計時定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>

        var obj = setInterval(function () {
            console.log(1);
            clearInterval(obj);
        },1000);

        setTimeout(function () {
            console.log('timeout');
        },5000);

    </script>

</body>
</html>

代碼：定義了5秒鐘後打印'timeout'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="status"></div>
    <input type="button" value="刪除" onclick="DeleteEle();">

    <script>
        function DeleteEle() {
            document.getElementById('status').innerText = "已刪除";    /*插入已刪除*/
            setTimeout(function () {
                document.getElementById('status').innerText = "";
            },5000)     /*5秒後清空已刪除三個字*/
        }
    </script>

</body>
</html>

代碼：

上2圖：點擊刪除就會插入已刪除，過了5秒之後清空。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。