欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android 程序员搞 web 之 webApi (十 二)

程序员文章站 2022-06-13 17:01:39
...

Android 程序员搞 js 之 基础(十 一) 难点

一、基础

1、js 分三部分

(1)、ECMAScript 标准:JS 的基本语法;
(2)、DOM:Document Object Model :文档对象模型 ,操作页面的元素;
(3)、BOM:Browser Object Model :浏览器对象模型 ,操作的是浏览器。

二、DOM 操作

点击 按钮显示 弹框

<body>
<input type="button" id="btn" value="findViewById">
<script>
    document.getElementById("btn").onclick = function () {
        alert("成功找到对象!")
    }
</script>
</body>

Android 程序员搞 web 之 webApi (十 二)

三、标签的一些属性设置

1、点击事件

<body>
<input type="button" id="btn" value="确定">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("点击事件")
    }
   
</script>

2、修改 p 标签内部的文字

<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 = "这是一个p标签";
    }

</script>
</body>

双标签 设置文字是使用 innerText 属性;

3、批量修改某个 标签内容

<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 返回的数据 为数组。

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>

Android 程序员搞 web 之 webApi (十 二)

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">刮风</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} 控件对象
 */
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 属性进行 寻找下一级的属性

7、实现网页的开关的效果

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: black;
        }
    </style>
</head>
<body>
<input type="button" id="btn1" value="关灯">

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

    getView$("btn1").onclick = function () {
        if (document.body.className === "cls") {
            document.body.className = "";
            getView$("btn1").value="关灯"
        }else {
            getView$("btn1").value="开灯";
            document.body.className = "cls";
        }
    }
</script>
</body>

8、修改表格的背景颜色

<body>
<input type="button" id="btn" value="调色">

<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、阻止超链接跳转

<body>
<a href="http://wwww.baidu.com" id="aa">百度</a>

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

10、表格划过高亮显示

<body>
<ol>
    <li>貂蝉</li>
    <li>西施</li>
    <li>杨玉环</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、根据 name 值获取标签

<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 获取的标签 也是一个集合。

12、焦点事件

<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”) 方法 ,内部填写 为自定义属性值

14、动态设置自定义属性

<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++) {
        //动态设置自定义标签
        list[i].setAttribute("name", list[i].innerText);
        
        list[i].onclick = function () {
            alert(this.getAttribute("name"));
        }
    }
</script>
</body>

15、移除自定义属性 和 系统属性

list[i].removeAttribute(“name”);
移除 的 属性名

相关标签: Web 开发