Android 程序員搞 web 之 webApi （十 二）

Android 程序員搞 web 之 js基礎(chǔ)（十 一） 難點(diǎn)

一、基礎(chǔ)

1、js 分三部分

（1）、ECMAScript 標(biāo)準(zhǔn)：JS 的基本語法；
（2）、DOM:Document Object Model ：文檔對(duì)象模型 ，操作頁面的元素；
（3）、BOM：Browser Object Model ：瀏覽器對(duì)象模型 ，操作的是瀏覽器。

二、DOM 操作

點(diǎn)擊 按鈕顯示 彈框

<body>
<input type="button" id="btn" value="findViewById">
<script>
    document.getElementById("btn").onclick = function () {
        alert("成功找到對(duì)象！")
    }
</script>
</body>
成功調(diào)出彈窗

三、標(biāo)簽的一些屬性設(shè)置

1、點(diǎn)擊事件

<body>
<input type="button" id="btn" value="確定">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("點(diǎn)擊事件")
    }
   
</script>

2、修改 p 標(biāo)簽內(nèi)部的文字

<body>
<input type="button" id="btn" value="確定">
<p id="p1"></p>
<script>

    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var p1 = document.getElementById("p1");
        p1.innerText = "這是一個(gè)p標(biāo)簽";
    }

</script>
</body>

雙標(biāo)簽 設(shè)置文字是使用 innerText 屬性；

3、批量修改某個(gè) 標(biāo)簽內(nèi)容

<body>
<input type="button" id="btn" value="確定">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<script>

    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var ps = document.getElementsByTagName("p");

        for (var i = 0; i < ps.length; i++) {
            ps[i].innerText = "修改成功";
        }
    }

</script>
</body>

ps 返回的數(shù)據(jù) 為數(shù)組。

4、單選框使用

<body>
<input type="button" id="btn" value="切換性別">
<input type="radio" value="1" name="sex1"  id="rad1">男
<input type="radio" value="2" name="sex2">女
<input type="radio" value="3" name="sex3">保密

<script>

    function my$(a) {

        return document.getElementById(a);
    }

    my$("btn").onclick = function () {
        my$("rad1").checked = true;
    }

</script>
</body>
效果

5、下拉框選擇效果

<body>
<input type="button" id="btn" value="選擇">
<select id="sl1">
    <option value="1" id="op1">晴天</option>
    <option value="2" id="op2">陰天</option>
    <option value="3" id="op3">刮風(fēng)</option>
    <option value="4" id="op4">霧霾</option>

    <script src="JsDemoOne.js"></script>
</select>

<script>
    getView$("btn").onclick = function () {
        getView$("op2").selected = true;
    }
</script>
</body>


/**
 *獲取控件id
 * @param id 控件地址
 * @returns {HTMLElement} 控件對(duì)象
 */
function getView$(id) {
    return document.getElementById(id);
}

6、修改 div 的屬性

<body>
<input type="button" id="btn1" value="修改樣式">
<input type="button" id="btn2" value="隱藏">

<div id="div" style="width: 300px ; height: 300px ;background-color: red "></div>

<script src="JsDemoOne.js"></script>
<script>
    getView$("btn1").onclick = function () {
        getView$("div").style.width = "400px";
        getView$("div").style.height = "900px";
        getView$("div").style.backgroundColor = "blue";
    };


    getView$("btn2").onclick = function () {

        if (this.value === "隱藏") {
            getView$("div").style.display = "none";
            this.value = "顯示";
        } else {
            getView$("div").style.display = "block";
            this.value = "隱藏";
        }
    }

</script>
</body>

div 一定需要用 .style 屬性進(jìn)行 尋找下一級(jí)的屬性

7、實(shí)現(xiàn)網(wǎng)頁的開關(guān)的效果

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: black;
        }
    </style>
</head>
<body>
<input type="button" id="btn1" value="關(guān)燈">

<script src="JsDemoOne.js"></script>
<script>

    getView$("btn1").onclick = function () {
        if (document.body.className === "cls") {
            document.body.className = "";
            getView$("btn1").value="關(guān)燈"
        }else {
            getView$("btn1").value="開燈";
            document.body.className = "cls";
        }
    }
</script>
</body>

8、修改表格的背景顏色

<body>
<input type="button" id="btn" value="調(diào)色">

<ul id="uu" style="background-color: #deff72">
    <li>孫悟空</li>
    <li>豬八戒</li>
    <li>沙和尚</li>
    <li>白龍馬</li>
</ul>
<script src="JsDemoOne.js"></script>
<script>
    getView$("btn").onclick=function(){
        getView$("uu").style.backgroundColor = "red"
    }
</script>
</body>

9、阻止超鏈接跳轉(zhuǎn)

<body>
<a  id="aa">百度</a>

<script>
    document.getElementById("aa").onclick = function () {
        return true;
    }
</script> 
</body>

10、表格劃過高亮顯示

<body>
<ol>
    <li>貂蟬</li>
    <li>西施</li>
    <li>楊玉環(huán)</li>
    <li>王昭君</li>
</ol>
 
<script src="JsDemoOne.js"></script>
<script>
    var list = document.getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        list[i].onmouseover = function () {
            this.style.backgroundColor = "blue";
        };
        list[i].onmouseout = function () {
            this.style.backgroundColor = "red";
        }
    }
</script>
</body>

11、根據(jù) name 值獲取標(biāo)簽

<body>
<input type="button" id="btn" value="變身">
<input type="text" value="韓小呆" name="name1">
<input type="text" value="韓小呆" name="name2">
<input type="text" value="韓小呆" name="name1">
<input type="text" value="韓小呆" name="name3">
<input type="text" value="韓小呆" name="name1">
<input type="text" value="韓小呆" name="name4">
<input type="text" value="韓小呆" name="name1">

<script src="JsDemoOne.js"></script>
<script>

    getView$("btn").onclick = function () {
        var list = document.getElementsByName("name1");
        for (var i = 0; i < list.length; i++) {
            list[i].value = "曹曉萌";
        }
    }
</script>
</body>

通過 name 獲取的標(biāo)簽 也是一個(gè)集合。

12、焦點(diǎn)事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        input {
            color: grey;
        }
    </style>

</head>
<body>
<input type="text" value="韓小呆" id="text">

<script src="JsDemoOne.js"></script>
<script>

    var text = getView$("text");

    text.onfocus = function () {
        if (this.value === "韓小呆") {
            this.value = "";
        }
    };

    text.onblur = function () {
        if (this.value === "") {
            this.value = "韓小呆";
        }
    }
</script>
</body>

onfocus 和 onblur 事件

13、獲取自定義屬性

<body>
<ul>
    <li cost="2699">小米9</li>
    <li cost="3499">小米9 pro</li>
    <li cost="1999">小米9 se</li>
    <li cost="2499">小米9 cc9</li>
</ul>

<script src="JsDemoOne.js"></script>
<script>
    var list = document.getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {

        list[i].onclick = function () {
            alert(this.getAttribute("cost"));
        }
    }
</script>
</body>

使用 getAttribute("cost") 方法 ,內(nèi)部填寫 為自定義屬性值

14、動(dòng)態(tài)設(shè)置自定義屬性

<body>
<ul>
    <li>小米9</li>
    <li>小米9 pro</li>
    <li>小米9 se</li>
    <li>小米9 cc9</li>
</ul>
<script src="JsDemoOne.js"></script>
<script>
    var list = document.getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        //動(dòng)態(tài)設(shè)置自定義標(biāo)簽
        list[i].setAttribute("name", list[i].innerText);
        
        list[i].onclick = function () {
            alert(this.getAttribute("name"));
        }
    }
</script>
</body>

15、移除自定義屬性 和 系統(tǒng)屬性

list[i].removeAttribute("name");
移除 的 屬性名
Android 程序員搞 web 之 webApi （十 三）

歡迎關(guān)注.jpg

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容