js和jq

复习

"""
1、js变量：不写 | var | let | const
2、js的基本数据类型：值类型：number | string | boolean | undefined  引用类型：object | function 其它： null | Array | Date
3、随机数：parseInt(Math.random() * (n - m + 1)) + m
4、类型转换："" + number => string | +string => number | parseInt(string) => number
5、运算符：/ | ++ | === | &&、||、! | 条件? 结果1:结果2
6、类型的运用：string | [1, 2, 3] splice(index, count, args) | {}
7、流程控制
8、函数
function 函数名(){}
var 函数名 = function (){}
let 函数名 = () => {}
"""

今日内容

"""
1、js操作页面文档
    选择器
    页面内容
    页面样式
    页面事件
    
2、jq操作页面文档
    http://jquery.cuishifeng.cn/
"""

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" ></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" ></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" >文本</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>
posted @ 2019-08-07 15:58  蜗牛少少  阅读(787)  评论(0)  编辑  收藏  举报