• JavaScript、jQuery操作页面


    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 {
                 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 {
                 200px;
                height: 200px;
                background-color: pink;
            }
            .sup-box {
                /* 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 {
                /* 200px;*/
                /*height: 200px;*/
                /* 100%;*/
    
                background-color: orange;
                position: fixed;
                top: 0;
                left: 0;
    
                min- 900px;
                max- 1100px;
    
                 90%;
                margin-left: 5%;
    
                /*vw viewwidth  vh viewheight*/
                /* 90vw;*/
                /*margin-left: 5vw;*/
            }
        </style>
    </head>
    <body>
        <div class="hidden" style=" 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 {
                 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 {
                /* 200px;*/
                height: 200px;
                background-color: pink;
            }
            .sup-box {
                /* 400px;*/
                height: 100px;
                background-color: orange;
                border-radius: 50%;
                line-height: 100px;
                text-align: center;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="box" style=" 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({
                 '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>
    
  • 相关阅读:
    eclipse快捷键
    eclipse跑jfinal项目遇到的种种坑,java.lang.NoSuchMethodError
    ./configure ,make ,make install命令
    解决docker,ubuntu镜像中没有vi/vim
    使用qr生成二维码
    shell重定向
    ubuntu16.04启动rabbitmq报错
    HandlerMapping
    springMVC中绑定参数的常用注解
    mybatis的缓存机制
  • 原文地址:https://www.cnblogs.com/gaohuayan/p/11304745.html
Copyright © 2020-2023  润新知