java day25 javascript（下）

最新推荐文章于 2024-05-31 15:46:23 发布

wzyyj

最新推荐文章于 2024-05-31 15:46:23 发布

阅读量167

点赞数

分类专栏： java学习日记文章标签： javascript dom css js web

本文链接：https://blog.csdn.net/qq_43642864/article/details/111655468

版权

java学习日记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、DOM（文档对象模型）

1.1 概述

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：

在这里插入图片描述

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素。
JavaScript 能够改变页面中的所有 HTML 属性。
JavaScript 能够改变页面中的所有 CSS 样式。
JavaScript 能够对页面中的所有事件做出反应。

1.2 查找HTML元素方法

通过 id 找到 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
方法：document.getElementById(“id属性值”);
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

通过标签名找到 HTML 元素
方法：getElementsByTagName(“合法的元素名”);

通过类名找到HTML 元素
方法：getElementsByClassName(“class属性的值”)

通过标签的name属性找到HTML元素
方法：getElementsByName(“标签的name属性”)

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div" class="div" name="div">今天周三了</div>
<div class="div" name="div">明天平安夜了</div>
<div class="div">后天圣诞节了</div>

<script>
    var id = document.getElementById("div");
    console.log(id)
    console.log("--------------")
    var className = document.getElementsByClassName("div");
    for (var i = 0; i < className.length; i++) {
        console.log(className[i])
    }
    console.log("--------------")
    var tagName = document.getElementsByTagName("div");
    for (var i = 0; i < tagName.length; i++) {
        console.log(tagName[i])
    }
    console.log("--------------")
    var element = document.getElementsByName("div")[1];     //获取标签属性name为div的第二个标签对象
    console.log(element)
    console.log("--------------")
    element.innerText="元旦要放假啦！！！！！！";
</script>

</body>
</html>

运行效果：
在这里插入图片描述

1.3 DOM操作节点

1.3.1 改变元素样式（css）

对象.style.property=新样式
将property替换成真实的css属性名

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var flag=true;
        function btn() {
            var element = document.getElementsByTagName("h1")[0];
            if (flag){
                element.style.color="#00FFFF"
                element.style.fontSize="20px"
                flag=false;
            }else {
                element.style.color="red";
                element.style.fontSize="50px"
                flag=true;
            }
        }
    </script>
</head>
<body>
    <input type="button" onclick="btn()" value="变化">
    <h1 style="color: red; font-size: 50px">圣诞节快乐</h1>

</body>
</html>

1.3.1 改变元素内容（css）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function btn() {
        var div = document.getElementsByTagName("div")[0];
        //innerHTML会解析标签
        //innerText会以纯文本的形式添加内容
        div.innerHTML="<h1>祝大家后天圣诞节快乐</h1>"
    }
</script>
<body>
    <div>祝大家明天平安夜快乐</div>
    <input type="button" value="change" onclick="btn()">
</body>
</html>

1.3.1 改变元素属性（css）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var flag = true;
        function btn() {
            var img = document.getElementsByTagName("img")[0];
            if (flag){
                img.src="../img/节日快乐.png";
                flag=false;
            }else {
                img.src="../img/火箭.png"
                flag=true;
            }
        }
    </script>
</head>
<body>
<input type="button" onclick="btn()" value="change">
<img src="../img/火箭.png">

</body>
</html>

1.3.4 节点的添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            height: 30px;
            width: 100px;
        }

    </style>
    <script>
        function btn() {
            //创建img标签节点
            var img = document.createElement("img");
            //给img标签节点赋值
            img.src="../img/节日快乐.png"
            var boby = document.getElementsByTagName("body")[0];
            boby.appendChild(img)
        }

    </script>
</head>
<body>

    <input type="button" value="add" onclick="btn()"><br/>
    <img src="../img/火箭.png">

</body>
</html>

1.3.4 节点的克隆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            background-color: darkorange;
            border:  0px;
            border-radius: 10px;
            width: 100px;
            height: 50px;
            font-size: 20px;
            outline: none;
        }
        input:hover{
            background-color: yellow;
            border: 0px;
            border-radius: 10px;
            width: 100px;
            height: 50px;
            font-size: 20px;
        }
    </style>
    <script>
        function btn() {
            //1.获取需要克隆的节点对象
            var ul = document.getElementsByTagName("ul")[0];
            //2.使用克隆方法克隆新的img标签
            // cloneNode()默认为false,只能克隆标签本身和属性，不克隆内容
            var newUl = ul.cloneNode();
            //3.添加新的标签对象到指定父标签中
            document.getElementsByTagName("body")[0].appendChild(newUl);
        }
    </script>
</head>
<body>
<input type="button" value="add" onclick="btn()"><br/>
<ul style="color: red">
    牛奶
    <li>酸奶</li>
    <li>甜奶</li>
</ul>
</body>
</html>

1.3.4 节点的删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script>
        //页面加载完毕再自动执行onload事件
        onload = function () {
            //1.获取所有的删除超链接
            var dels = document.getElementsByClassName("del");
            for(var i in dels){
                //2.给每个删除超链接添加点击事件
                dels[i].onclick = function () {
                    //获取当前a标签的父标签td标签
                    var td = this.parentElement;
                    //获取td标签的父标签tr标签
                    var tr = td.parentElement;
                    //删除tr标签
                    tr.remove();
                }
            }
        }
    </script>-->
    <script>
        //页面加载完毕再自动执行onload实现
        onload=function () {
            //1.获取所有的删除超链接
            var dels = document.getElementsByClassName("del");
            for(var i in dels){
                //2.给每个删除超链接添加点击事件
                dels[i].onclick=function () {
                    //获取当前a标签的父标签的td标签
                    var td = this.parentElement;
                    //获取td标签的父标签tr标签
                    var tr = td.parentElement;
                    tr.remove()
                }
            }
        }
    </script>
</head>
<body>
<table border="1" cellspacing="0">
    <tr>
        <th>全选<input type="checkbox"></th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>梓亮</td>
        <td>钢丝球</td>
        <td>
            <a href="#">编辑</a>/
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>方蓝</td>
        <td>打篮球</td>
        <td>
            <a href="#">编辑</a>/
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>银珍</td>
        <td>打乒乓球</td>
        <td>
            <a href="#">编辑</a>/
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>玲苑</td>
        <td>打羽毛球</td>
        <td>
            <a href="#">编辑</a>/
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td colspan="4" style="text-align: center">
            <a href="#">删除选中</a>
        </td>
    </tr>
</table>
</body>
</html>

2、BOM（浏览器对象模型）

浏览器对象模型(Browser Object Model),是一个用于访问浏览器和计算机屏幕的对象集合。我们可以通过全局对象window来访问这些对象。

2.属性

window.document 是一个BOM对象，表示的是当前所载入的文档(即页面)，但它的方法和属性同时也属于DOM对象所涵盖的范围

window.frames 是当前页面中所有框架的集合

window.navigator 用于反应浏览器及其功能信息的对象

window.screen 提供浏览器以外的环境信息

window.location

href属性：控制浏览器地址栏内容
reload()：刷新页面
reload(true)：刷新页面，不带缓存
assign()：加载新的页面
replace()：加载新的页面（注意：不会再浏览器的历史记录表中留下记录）

window.history

window.history.length:获取历史记录的长度
back():上一页
forward():下一页
go(num): 具体到哪一页当num<0时，跳转到自己后方的第num个记录
当num>0时，跳转到自己前方的第num个记录

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/input.css">
    <script>
        function btn() {
            var flag = confirm("你长得不帅！")
            if (flag){
                alert("你有自知之明！")
            }else {
                alert("真不要脸！")
            }
        }
    </script>
</head>
<body>
<input type="button" value="点击" onclick="btn()">
</body>
</html>

3、事件

HTML DOM 允许我们通过触发事件来执行代码。·
比如以下事件：
元素被点击。
页面加载完成。
输入框被修改。

本例改变了 id=“id1” 的 HTML 元素的样式，当用户点击按钮时

3.1 onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            background-color: #56fff2;
        }
    </style>
    <script>
        function btn() {
            open("https://www.baidu.com/")
        }
    </script>
</head>
<body>
<h1 onclick="btn()">标题标签</h1>
</body>
</html>

3.2 onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload = function () {
            //省份的下拉框对象
            var province = document.getElementById("province");
            //城市的下拉框对象
            var city = document.getElementById("city");
            province.onchange = function () {
                //根据省份的下拉框选项改变城市下拉框的选项
                if(this.value == "guangdong"){
                    city.innerHTML = "<option>广州</option>" +
                        "<option>深圳</option>";
                }else if(this.value == "guangxi"){
                    city.innerText = "";
                    change1("南宁",city);
                    change1("桂林",city);
                }
            }
            function change1(str,city) {
                var option1 = document.createElement("option");
                option1.innerText =str;
                city.appendChild(option1);
            }
        }
    </script>
</head>
<body>
    <select id="province">
        <option value="select">省份</option>
        <option value="guangdong">广东</option>
        <option value="guangxi">广西</option>
    </select>
    <select id="city">
        <option>城市</option>
    </select>
</body>
</html>

3.3 onmouseover、onmouseout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/input.css" type="text/css">
    <script>
    onload = function () {
        var input1 = document.getElementById("input1");
        var input2 = document.getElementById("input2");
        //鼠标移入事件
        input2.onmouseover = function () {
            //把同意变成不同意
            input1.value = "不同意";
            //把不同意改变成同意
            input2.value = "同意";
        }
        //鼠标移出事件
        input2.onmouseout = function () {
            input1.value = "同意";
            input2.value = "不同意";
        }
    }

    function btn() {
        alert("11")
    }
</script>
</head>
<body>
    <h1>老板，今天我要请个假</h1>
    <input type="button" style="width: 100px;height: 50px" value="同意" id="input1" onclick="btn()">
    <input type="button" style="width: 100px;height: 50px" value="不同意" id="input2" onclick="btn()">
</body>
</html>

3.3 onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function btn() {
            //获取用户名文本框的对象
            var username = document.getElementById("username");
            //获取密码框的对象
            var password = document.getElementById("password");
            if(username.value == "" || username.value == null){
                alert("用户名为空");
                return false;
            }
            if(password.value == "" || password.value == null){
                alert("密码为空");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<form action="https://www.baidu.com" onsubmit="return btn()">
    账号:<input type="text" id="username"><br/>
    密码:<input type="text" id="password"><br/>
    <input type="submit">
</form>
</body>
</html>

4、cookie

Cookie 用于存储 web 页面的用户信息。

4.1 什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

4.2 cookie的创建

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。
JavaScript 中，创建 cookie 如下所示：

document.cookie=“username=John Doe”;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addCookie() {
            var date = new Date();
            date.setTime(date.getTime()+1000*60*60);
            document.cookie = "password=123456; expires="+date.toGMTString();

        }
        function getCookie() {
            alert(document.cookie)

        }
        function delCookie() {
            var date=new Date();
            document.cookie = "password=123456 expires="+date.toGMTString();
        };
    </script>
</head>
<body>
    <input type="button" onclick="addCookie()" value="保存cookie">
    <input type="button" onclick="getCookie()" value="获取cookie">
    <input type="button" onclick="delCookie()" value="删除cookie">
</body>
</html>

5、js对象

JavaScript 对象是拥有属性和方法的数据。

5.1 构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function User(name,age) {
            this.name = name;
            this.age = age;
            //代表当前对象存在一个test的函数
            this.test = function () {
                alert("test方法");
            }
        }
        var user = new User("zs",18);
        //user.test();
        alert(user.name+":"+user.age);
    </script>
</head>
<body>

</body>
</html>

5.2 通过Object创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var user = new Object();
        user.name="wzy";
        user.id="1716040309";
        alert(user.name+":"+user.id)
        user.test=function () {
            alert("test方法")
        }
        user.test();
    </script>
</head>
<body>

</body>
</html>

5.3 使用JSON格式创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var json={
            name:'wzy',
            age:18,
            test:function () {
                alert("test方法")
            }
        };
        alert(json.name+":"+json.age)
        json.test()
    </script>
</head>
<body>
</body>
</html>

6、定时器

js 定时器有以下两个方法：

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

6.1 setInterval()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload=function () {
            //第一个参数为执行方法，第二个参数为延迟执行时间
            timer = setTimeout(function () {
                alert(1)
            },3000)
        };

        function btn() {
            clearTimeout(timer)
        }
    </script>
</head>
<body>
<input type="button" value="取消定时" onclick="btn()">
</body>
</html>

6.2 setTimeout()

循环定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload=function () {
            timer = setInterval(function () {
                alert("循环定时器")
            },2000)
        }
        function btn() {
            clearInterval(timer)
        }
    </script>
</head>
<body>
    <input type="button" onclick="btn()" value="清理循环定时器">
</body>
</html>

时间显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload=function () {
            setInterval(function () {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth();
                var day = date.getDate();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();
                var milliSeconds = date.getMilliseconds()
                var span = document.getElementsByTagName("span")[0];
                span.innerText = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds+":"+milliSeconds;
            },1)
        }
    </script>
</head>
<body>
<span style="text-align: center"></span>
</body>
</html>

wzyyj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
java day25 javascript（下）

1、DOM（文档对象模型）1.1 概述通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。JavaScript 能够改变页面中的所有 HTML 元素。JavaScript 能够改变页面中的所有 HTML 属性。JavaSc
复制链接

扫一扫