js高级学习

最新推荐文章于 2024-08-12 22:28:07 发布

agente

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量665

点赞数 29

分类专栏：前端学习文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/m0_55471400/article/details/140018167

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BOM对象

1.BOM介绍

浏览器对象模型（Browser Object Model ）
作用：把浏览器抽象成为一个对象模型,我们可以使用js模拟浏览器的一些功能。
在这里插入图片描述

2.windows对象

三种弹窗

1. 警告框：提示信息
        alert()
2. 确认框：确认信息
        confirm()
3. 输入框：输入信息
        prompt()

代码：

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

</body>
<script>

    /**
     *  js中的3种弹框
     *      1.alert(); 警告框,代码测试时用的较多。
     *      2.confirm(); 确认框,有返回值，true代表确定，false代表取消。
     *      3.prompt();提示框,返回值就是用户输入的内容。
     *
     */

    //alert("警告框");

    // let res = confirm("您是否确定充值398吗");
    // alert(res);


    let res = prompt("请输入您的CDK");
    alert(res);
</script>
</html>

小结：

1.一般涉及到询问的时候使用确认框
2.alert一般用于测试时，例如查看代码是否正常执行，查看变量的值

两种定时器

定时器
    setInterval(函数调用，时间间隔);  周期性的执行指定函数
    setTimeout(函数调用，时间间隔);  一段时间后执行指定函数

取消定时器
    clearInterval(id_of_setInterval); 取消setInterval的定时器
    clearTimeout(id_of_setTimeout); 取消setTimeout的定时器

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="停止" onclick="stop()">
</body>
<script>


    /**
     *
     *  setInterval(fn,milSec); 周期性的执行指定的函数
     *          fn: 函数
     *          milSec: 毫秒值
     *  clearInterval(id_of_setInterval);   停止setInterval周期性的函数
     *      id_of_setInterval：setInterval方法的返回值
     *
     *
     *   setTimeout(fn,milSec); 指定毫秒后执行指定的函数,只会调用一次
     *          fn: 函数
     *          milSec: 毫秒值
     *
     *    clearTimeout(id_of_setTimeout);   停止setTimeout定时器
     *      id_of_setTimeout：setTimeout方法的返回值
     *
     */
    // let id = setInterval(function () {
    //     console.log(new Date().toLocaleString());
    // },1000);
    //
    // function stop() {
    //     clearInterval(id);
    // }


    let id = setTimeout(function () {
        console.log(new Date().toLocaleString());
    },1000);

</script>
</html>

小结：

setInterval()定时器是常用的

3.location对象

1. location.href   获取浏览器的地址栏中的url
2. location.reload() 重新加载页面
3. location.href=url   访问url地址

代码：

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

<input type="button" value="刷新" onclick="reflush()">
</body>
<script>

    /**
     *  href: 获取或者设置浏览器的url
     *          设置url其实就是页面跳转。
     *
     *  reload(): 重新加载页面
     *
     */

    function reflush() {
        location.reload();
    }


    console.log(location.href);


    location.href="http://www.baidu.com";
</script>
</html>

DOM对象

DOM介绍

文档对象模型（Document Object Model）
作用：把所有页面标签抽象成为一个Document对象，我们可以使用js动态修改标签及属性内容。
在这里插入图片描述
DOM操作：针对html中的标签的增删改查

DOM获取元素

* 第一种：es6之前获取方式
    1）获取一个
        document.getElementById(id属性值)  -> 推荐
    2）获取多个（了解）
        document.getElementsByTagName(标签名)    根据标签名获取，返回数组对象
        document.getElementsByClassName(class属性值)    根据class属性获取，返回数组对象
        document.getElementsByName(name属性值)  根据name属性获取，返回数组对象

* 第二种：es6可根据CSS选择器获取
    1）获取一个
        document.querySelector(id选择器)
    2）获取多个
        document.querySelectorAll(css选择器)   -> 推荐
            标签
            class
            属性
            后代
            并集
            父子
            ....

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04-dom获取元素</title>

</head>
<body>
<form action="#" method="get">
    姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
    密码 <input type="password" name="password"> <br/>
    生日 <input type="date" name="birthday"><br/>
    性别
    <input type="radio" name="gender" value="male" class="radio">男 
    <input type="radio" name="gender" value="female" class="radio"/>女<br/>
    爱好
    <input type="checkbox" name="hobby" value="smoke">抽烟
    <input type="checkbox" name="hobby" value="drink">喝酒
    <input type="checkbox" name="hobby" value="perm">烫头<br/>

    头像 <input type="file" name="pic"><br/>

    学历
    <select name="edu">
        <option value="0">请选择</option>
        <option value="1">入门</option>
        <option value="2">精通</option>
        <option value="3">放弃</option>

    </select><br/>
    简介
    <textarea name="userIntro" cols="30" rows="10">默认值</textarea><br/>
    <input type="reset" value="清空按钮"/>
    <input type="submit" value="提交按钮"/><br/>

</form>

<script>


    /**
     *  document.getElementById(id); 根据标签的id获取标签对象。id是唯一的。
     *  document.getElementsByClassName(className); 根据标签的class的属性值获取标签对象，返回值是一个数组
     *  document.getElementsByTagName(tagName): 根据标签的名字获取标签对象，返回值是一个数组。
     *  document.getElementsByName(name);根据标签的name的属性值获取标签对象。返回值是一个数组。
     */


    // 1.获取id="username"的标签对象(dom: 称为元素)
    let usernameInput = document.getElementById("username");
    console.log(usernameInput);
    // 2.获取class="radio"的标签对象数组 (类选择器: class属性值可以重复)

    let radios = document.getElementsByClassName("radio");
    console.log(radios);
    // 3.获取所有的option标签对象数组(标签选择器)

    let options = document.getElementsByTagName("option");

    console.log(options);

    // 4.获取name="hobby"的input标签对象数组
    let hobbys = document.getElementsByName("hobby");
    console.log(hobbys);
    // 5.获取文件上传选择框

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

DOM操作内容

1. 获取或者修改元素（标签）的纯文本内容，不能识别标签
    语法：
        js对象.innerText; 

2. 获取或者修改元素的html超文本内容，能够识别标签
    语法：
        js对象.innerHTML;

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="mydiv1">
        <a href="http://www.baidu.com">百度</a>
    </div>
    <div id="mydiv2">
        <a href="http://www.baidu.com">百度</a>
    </div>
</body>
<script>


    /**
     *
     *  操作标签体的内容： 指定是开始标签到结束标签之间的内容
     *
     *      innerHTML: 能够识别标签
     *      innerText: 不能识别标签，只能识别文本。
     *
     *   PS:什么标签才有标签体？双标签
     *
     */

    //需求1：通过innerText属性分别获取和操作mydiv1之间的内容
    // let mydiv1 = document.getElementById("mydiv1");
    // //console.log(mydiv1.innerText);
    //
    // mydiv1.innerText = "<font color='red'>文本</font>"


    //需求2：通过innerHTML属性分别获取和操作mydiv2之间的内容

    let mydiv2 = document.getElementById("mydiv2");
    //console.log(mydiv2.innerHTML);
    mydiv2.innerHTML="<font color='red'>文本</font>";
</script>
</html>

在这里插入图片描述

DOM操作属性

    语法: 
        js对象.属性名 获取属性值
        js对象.属性名='新属性值'

代码：

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

</head>
<body>

    <input type="text" id="username" value="张三"> <br>

    钓鱼 <input class="abc" id="fish" type="checkbox" checked> <br>

    学籍：
    <select id="nation" onchange="getValue()">
        <option value="">--请选择--</option>
        <option value="china" selected>中国</option>
        <option value="russia">俄罗斯</option>
        <option value="america">美国</option>
    </select>
</body>
<script>


    /**
     *
     *      对于标签对象属性的更改：
     *
     *          通用语法： 标签对象.属性名=属性值。
     *
     *      1.value属性的值是需要提交给服务器的值。
     *      2.select的value属性就是选中的option的value值。
     *      3.表单的子标签才有value属性。
     *
     *
     */

    let usernameInput = document.getElementById("username");
    console.log(usernameInput.username);


    //需求2： 设置输入框的文本值为李四
    usernameInput.value="李四";




    //需求3：获取复选框的选中状态
    let checkBox = document.getElementById("fish");
    console.log(checkBox.checked);





    //需求4：设置复选框的选中状态
    checkBox.checked=false;


    //需求5：获取下拉列表选中的值
    function getValue() {
        let nationSelect = document.getElementById("nation");
        alert(nationSelect.value);
    }


    console.log(checkBox.id);
    console.log(checkBox.type);
    console.log(checkBox.className);

</script>
</html>

DOM操作样式

1. 设置一个css样式【会用】
    语法: 
        js对象.style.样式名='样式值'
            特点：样式名按照驼峰式命名
                css格式：font-size
                js格式：fontSize

2. 通过class设置样式【重点】
    语法: 
        js对象.className='class选择器名'
            特点：解耦

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07-dom操作样式</title>
    <style>
        #p1{ background-color: red;}
        .mp {
            color: green;
            font-size: 30px;
            font-family: 楷体;
        }

        .mpp {
            background-color: lightgray;
        }
    </style>
</head>
<body>

<p id="p1"  >1. 设置一个css样式</p>
<p id="p2"  >2. 通过class设置样式</p>

<script>


    /**

            标签样式操作：
                1. 标签对象.style.样式名=样式值
                2. 标签对象.className=class选择器


     */

    //需求0.修改p1的样式，背景色改成蓝色
    let p1 = document.getElementById("p1");
    p1.style.backgroundColor="blue";




    // 需求2. 通过class设置样式
    let p2 = document.getElementById("p2");
    p2.className="mp";


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