JavaScript、jQuery操作页面

gaohuayan

js操作页面三步骤

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作页面的三步骤</title>
</head>
<body>
    <h1>操作页面的三步骤</h1>
    <div class="box">
        <h1>box h1</h1>
    </div>
</body>
<script>
    // 1、获取页面标签
    // 2、设置操作的激活条件 - 事件
    // 3、具体的操作方式 - 内容 | 样式 | 事件 | 文档结构

    // 1
    let body = document.querySelector(\'body\');
    let box = document.querySelector(\'.box\');
    // 父级调用选择器方法，只完成自己内部的检索
    let body_h1 = body.querySelector(\'h1\');
    console.log(body_h1);
    let box_h1 = box.querySelector(\'h1\');
    console.log(box_h1);

    // 2
    body_h1.onclick = function () {
        // console.log(\'你丫点我了\')
        // 3
        if (box_h1.style.color != \'red\') {
            box_h1.style.color = \'red\';
            box_h1.style.backgroundColor = \'orange\';
        } else {
            box_h1.style.color = \'black\';
            box_h1.style.backgroundColor = \'white\';
        }
    }
</script>
</html>

js事件

鼠标事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    let box = document.querySelector(\'.box\');
    // 单击
    box.onclick = function () {
        console.log(\'单击了\', this)
    };
    // 双击
    box.ondblclick = function () {
        console.log(\'双击了\')
    };
    // 右键
    box.oncontextmenu = function () {
        console.log(\'右键了\');
        // 有些事件有系统默认动作，取消默认动作可以返回 false
        return false;
    };
    // 悬浮
    box.onmouseover = function () {
        console.log(\'悬浮了\');
    };
    // 移开
    box.onmouseout = function () {
        console.log(\'移开了\');
    };
    // 移动
    box.onmousemove = function () {
        console.log(\'移动了\');
    };
    // 按下
    box.onmousedown = function () {
        console.log(\'按下了\');
    };
    // 抬起
    box.onmouseup = function () {
        console.log(\'抬起了\');
    };
</script>
</html>

文档事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档事件</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
    <script>
        // 页面加载成功
        window.onload = function () {
            console.log(h1)
        }
    </script>
</head>
<body>
    <h1 id="h1">hhhhh</h1>
</body>
<script>
    let body = document.querySelector(\'body\');
    // 页面滚动事件
    document.onscroll = function (ev) {
        console.log(\'滚动了\');
        // console.log(ev);
        // console.log(window.scrollY);
        if (window.scrollY >= 500) {
            body.style.backgroundColor = \'red\';
        } else {
            body.style.backgroundColor = \'white\';
        }
    }
</script>
</html>

键盘事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>键盘事件</title>
</head>
<body>
    <h1>键盘事件</h1>
    <input type="text">
</body>
<script>
    let inp = document.querySelector(\'input\');

    inp.onkeydown = function () {
        console.log(\'按下\')
    };
    inp.onkeyup = function () {
        console.log(\'抬起\')
    }

</script>
</html>

表单事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单事件</title>
    <style>
        /*表单的内外边框*/
        input {
            border: 2px solid pink;
        }
        input:focus {
            outline: 2px solid yellow;
        }
    </style>
</head>
<body>
<form action="">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="登录">
</form>
</body>
<script>
    let form = document.querySelector(\'form\');
    let submit = document.querySelector(\'[type="submit"]\');
    let usr = document.querySelector(\'[type="text"]\');

    // 表单提交事件：表单默认也有提交数据的动作，也可以取消
    form.onsubmit = function () {
        console.log(\'提交了\');
        return false;
    };

    // 获取焦点
    usr.onfocus = function () {
        console.log(\'获取焦点\')
    };

    // 失去焦点
    usr.onblur = function () {
        console.log(\'失去焦点\')
    };

</script>
</html>

事件对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件对象</title>
</head>
<body>
<input type="text" class="inp">
</body>
<script>
    inp = document.querySelector(\'.inp\');
    inp.onkeydown= function (ev) {
        console.log(ev);
        // console.log(ev.keyCode);

        if (ev.keyCode === 13) {
            console.log(\'回车了\')
        }
        if (ev.ctrlKey && ev.keyCode === 13) {
            console.log(\'消息发送了\')
        }
    };

    document.onclick = function (ev) {
        console.log(ev);
        // 鼠标点击点
        console.log(ev.clientX, ev.clientY);
    }
    
</script>
</html>

js操作内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内容操作</title>
</head>
<body>
    <h1 class="title">标题</h1>
    <input type="text" class="title">
    <button class="btn">改标题</button>
</body>
<script>
    let h1 = document.querySelector(\'h1.title\');
    let inp = document.querySelector(\'input.title\');
    let btn = document.querySelector(\'.btn\');

    // 内容操作：value | innerText | innerHTML
    btn.onclick = function () {
        // 拿到输入框的内容
        inp_value = inp.value;
        if (inp_value) {
            // inp_value = \'\';  // 改的只是一个内存变量
            inp.value = \'\';  // 清空输入框

            // 将内容赋值给h1 innerText | innerHTML
            // console.log(h1.innerText);
            // console.log(h1.innerHTML);
            // 纯文本
            // h1.innerText = inp_value;
            // 文本中的标签会被解析
            h1.innerHTML = inp_value;
        }
    }
</script>
</html>

js操作样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>样式操作</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .sup-box {
            /*width: 400px;*/
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            line-height: 100px;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <!--<div class="box" style="background-color: deeppink;"></div>-->
    <div class="box">文本</div>
</body>
<script>
    let box = document.querySelector(\'.box\');
    // 需求1：单击获取标签的之前背景颜色
    /*
    box.onclick = function () {
        // 注：this.style 本质操作的是行间式（只能获取和设置行间式）
        // bgColor = this.style.backgroundColor;
        // console.log(bgColor);

        // 注：在内联和外联中书写的样式称之为 计算后样式

        // 注：getComputedStyle 能获取计算后样式，也能获取行间式，但是只读
        // getComputedStyle(标签, 伪类).样式;
        bgColor = getComputedStyle(this, null).backgroundColor;
        console.log(bgColor);
        width = getComputedStyle(this, null).width;
        console.log(width, parseInt(width));

        // 只读，会报错
        // getComputedStyle(this, null).backgroundColor = \'rgb(255, 20, 147)\';
    }
    */

    // 需求2：点击修改标签的宽高背景颜色
    /*
    box.onclick = function () {
        this.style.backgroundColor = \'orange\';
        this_style = getComputedStyle(this, null);
        // console.log(parseInt(this_style.width) * 2);
        // 宽放大两倍，高缩小两倍
        this.style.width = parseInt(this_style.width) * 2 + \'px\';
        this.style.height = parseInt(this_style.height) / 2 + \'px\';
    }
    */
    
    // 需求：操作计算后样 - 提取写好计算后样式，通过类名将 js 与 css 建立关联
    box.onclick = function () {
        console.log(this.className);
        // this.className = \'sup-box\';

        /*
        if (this.className === \'box\') {
            this.className = \'sup-box\';
        } else {
            this.className = \'box\';
        }
        */
        // 注：有个空格：空格sup-box
        // this.className += \' sup-box\';

        if (this.className === \'box\') {
            this.className += \' sup-box\';
        } else {
            this.className = \'box\';
        }
    };
</script>
</html>

页面转跳

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面转跳</title>
</head>
<body>
    <button class="b1">自我刷新</button>
    <button class="b2">转跳到9</button>
    <button class="b3">ctrl新开转跳到9</button>
</body>
<script>
    window.owen = \'Owen\';
    let b1 = window.document.querySelector(\'.b1\');
    // 自我刷新
    b1.onclick = function () {
        // console.log(owen);

        // \'\' 代表当前页面链接
        // window.location.href = \'\';
        location.reload();
    };

    let b2 = window.document.querySelector(\'.b2\');
    // 转跳到9*.html
    b2.onclick = function () {
        // 在自身所在标签替换
        window.location.href = \'9、样式操作.html\';
    };

    // ctrl新开转跳到9
    let b3 = window.document.querySelector(\'.b3\');
    b3.onclick = function (ev) {
        // open(\'转跳路径\', \'默认就是_blank\')
        if (ev.ctrlKey) {
            window.open(\'9、样式操作.html\');
        } else {
            window.open(\'9、样式操作.html\', \'_self\');
        }
    }
</script>
</html>

屏幕有滚动条下的两种宽度

去除滚动条剩余的全部宽度

let html = document.querySelector(\'html\');
console.log(html.clientWidth);

不去除滚动条剩余的全部宽度

function getHtmlWidth() {
    let hidden = document.createElement(\'div\');
    hidden.style.width = \'100vw\';
    html.appendChild(hidden);
    width = parseInt(getComputedStyle(hidden, null).width);
    html.removeChild(hidden);
    return width
}
width = getHtmlWidth();
console.log(width);

案例：动态尺寸

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态尺寸</title>
    <style>
        body {
            margin: 0;
            height: 3000px;
        }
        .box {
            /*width: 200px;*/
            /*height: 200px;*/
            /*width: 100%;*/

            background-color: orange;
            position: fixed;
            top: 0;
            left: 0;

            min-width: 900px;
            max-width: 1100px;

            width: 90%;
            margin-left: 5%;

            /*vw viewwidth  vh viewheight*/
            /*width: 90vw;*/
            /*margin-left: 5vw;*/
        }
    </style>
</head>
<body>
    <div class="hidden" style="width: 100vw"></div>
    <div class="box"></div>
</body>
<script>
    let html = document.querySelector(\'html\');

    // 去除滚动条的宽度
    console.log(html.clientWidth);

    // 包含滚动条的宽度
    // let hidden = document.querySelector(\'.hidden\');
    // width = parseInt(getComputedStyle(hidden, null).width);
    // console.log(width);

    function getHtmlWidth() {
        let hidden = document.createElement(\'div\');
        hidden.style.width = \'100vw\';
        html.appendChild(hidden);
        width = parseInt(getComputedStyle(hidden, null).width);
        html.removeChild(hidden);
        return width
    }
    width = getHtmlWidth();
    console.log(width);



    function resizeBox() {
        box_width = parseInt(getComputedStyle(box, null).width);
        box.style.height = box_width / 6 + \'px\';
        if (box_width >= 1100) {
            box.style.marginLeft = (html.clientWidth - 1100) / 2 + \'px\'
        }
    }

    let box = document.querySelector(\'.box\');
    resizeBox();

    window.onresize = function () {
        resizeBox();
    };
</script>
</html>

jq API

http://jquery.cuishifeng.cn/

jq初始

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq初始</title>
</head>
<body>
    <h1>jQuery就是js的工具库 - 一系列功能的集合体</h1>
    <h2>jq内部语法采用的就是原生js</h2>
    <h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2>
    <h2>jq就是优化了原生js鱼页面进行交互的逻辑</h2>
</body>

<!-- CDN 连接 外部资源 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->

<script src="js/jquery-3.4.1.js"></script>
<script>
    // jQuery对象
    console.log(jQuery);
    console.log($);
    console.log(Owen);

    console.log($(\'h1\'));
    $(\'h1\').click(function () {
        $(\'h1\').css(\'color\', \'red\')
    })
</script>
</html>

jq选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <div id="d" class="box"></div>
    <input type="text" id="d2" class="box" />
    <h3 class="h3"></h3>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // jq选择器：$(\'css选择器语法\')
    let $div = $(\'#d\');
    console.log($div);

    let $boxs = $(\'.box\');
    console.log($boxs);

    // jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组
    // 就是通过索引取值
    let div = $div[0];
    console.log(div);

    console.log(document.getElementsByClassName(\'box\')[0]);
    console.log(document.querySelectorAll(\'.box\')[0]);
    console.log($div[0]);
    console.log($boxs[0]);
    console.log($boxs[1]);

    // js如何转换为jq对象
    let $newDiv = $(div);
    console.log($newDiv);

</script>
</html>

jq事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq事件</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let $box = $(\'.box\');
    // $box.click(function () {
    //     // this就是被点击的标签 - js对象
    //     console.log(this);
    //     console.log($(this));
    // });

    // jq对象可以完成事件的批量绑定
    $box.on(\'click\', function () {
        console.log(this);
        console.log(this.innerText);
        console.log($(this));
    });

    // js必须手动循环 绑定
    // let boxs = document.querySelectorAll(\'.box\');
    // for (box of boxs) {
    //     box.onclick = function () {
    //         console.log(this);
    //         console.log($(this));
    //     }
    // }

</script>
</html>

jq内容操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq内容操作</title>
</head>
<body>
    <h1 class="title">标题</h1>
    <input type="text" class="title">
    <button class="btn">改标题</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // js - jsObj.value | jsObj.innerText | jsObj.innerHTML
    // jq - jqObj.val() | jqObj.text() | jqObj.html()
    // 取值：jqObj.text() | jqObj.text(\'新值\') | jqObj.text(fn)

    let $btn = $(\'.btn\');
    let $inp = $(\'input.title\');
    let $h1 = $(\'h1.title\');

    $btn.click(function () {
        let val = $inp.val();
        if (val) {
            // $h1.text(val);
            $h1.html(val);
            $inp.val(function (index, oldValue) {
                // return oldValue.toUpperCase()
                return \'\'
            })
        }
    })
</script>
</html>

jq样式操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq样式操作</title>
    <style>
        .box {
            /*width: 200px;*/
            height: 200px;
            background-color: pink;
        }
        .sup-box {
            /*width: 400px;*/
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            line-height: 100px;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 600px">文本</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let $box = $(\'.box\');

    $box.click(function () {
        // 获取
        let width = $box.css(\'width\');
        console.log(width);

        // 单个设置
        $box.css(\'background-color\', function (i, o) {
            console.log(o);
            return \'red\'
        });

        // 多条设置
        $box.css({
            width: \'100px\',
            height: \'100px\',
            backgroundColor: \'blue\',
        });

        if ($box.hasClass(\'sup-box\')) {
            $box.removeClass(\'sup-box\')
        } else {
            $box.addClass(function (i, o) {
                console.log(i, o);
                return \'sup-box\'
            })
        }
    })
    
</script>
<script>
    // localStorage[\'name\'] = \'owen\';
    // sessionStorage[\'age\'] = 18;
</script>
</html>

分类：

技术点：

相关文章：

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-20
  • 2021-10-12
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-06-04
  • 2022-12-23
  • 2021-12-03
  • 2021-09-27
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode