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 {
            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>

原文地址：https://www.cnblogs.com/gaohuayan/p/11304745.html

时间： 2024-10-25 13:09:35

JavaScript、jQuery操作页面的相关文章

jQuery操作页面元素之包装元素

一:包装结点:指用指定HTML结构包装现有元素,被包装元素成为结构的子结点.就好像python中的装饰器. 1:wrap(): wrap方法用指定HTML结构包装结点,参数可以是HTML字符串.选择器或者jQuery对象.匹配多个结点时,分别包装各个结点. 2:wrapAll(): wrapAll方法将所有选中的结点包装在一个HTML结构中,参数可以是HTML字符串.选择器或者jQuery对象. 1 <!DOCTYPE html> 2 <html> 3 4 <head>

jQuery操作页面元素之元素插入

1:jQuery提供的append().prepend().appendTo().prependTo().after().before().insertAfter()和insertBefore()等方法可以向文档中插入结点. 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="uft-8"> 6 <title>插入结点</title> 7 <scrip

Jquery 操作页面中iframe自动跟随窗口大小变化，而页面不出现滚动条，只在iframe内部出滚动条

很多时候大家需要iframe自适应所加载的页面高度而不要iframe滚动条,但是这次我需要的是页面不需要滚动条而iframe要滚动条,且iframe自动跟随窗口大小变化.自适应页面大小.下面是代码,下次有时间在来解释下代码. $(document).ready(function(){ //调用函数 var pagestyle = function() { var iframe = $("#iframe"); var h = $(window).height() - iframe.off

Javascript/jQuery根据页面上表格创建新汇总表格

任务背景及需求 按页面上的现成表格,用js生成新的统计表格如下: 实现思路 1,把表格数据抽取出来生成json数组 2,计算表格总数并创建空表格 3,历遍json数组把数据动态插入所有的表格,设值/append Row 4,最后配置好所有表格的属性如thead,rowspan等 详细代码 /** * @create: nelson * @initBPDTable 初始化表格内容 * @调用方式 $("#main_content").initBPDTable(list); */ $.fn

恶补jquery(三)jquery操作DOM

什么是DOM? DOM(Document Object Model,简称DOM),文档对象模型. DOM是w3c的标准.DOM定义了访问HTML和XML文档的标准:W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. Document:即文档,我们创建一个页面并加载到WEB浏览器的时候,DOM模型根据该页面的内容创建一个文档文件. Object:即文件,新建页面成为文档对象,对象关联特征称为文档属性,访问对象函数称对象方法. Model:

JavaScript Dom操作-增删改节点1

一.Dom操作 文档对象模型DOM:一套定义.规范.准则 为了能够让程序JavaScript去操作页面中的元素节点而定义的一套标准 DOM会把文档看作是一棵树,页面中的每个元素就是树上的一个一个节点:同时DOM定义了很多方法.属性等来操作这棵树中的每一个元素(节点)——每个节点称为DOM节点. 1.  节点.children      ——      (没有兼容性问题:只包含元素节点)   获取第一级子元素 childNodes    获取第一级子元素   有兼容性问题(标准浏览器文本和元素视为

JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一.jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能,但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序,在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是,

动态加载页面数据的小工具 javascript + jQuery （持续更新）

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g

通过javascript库JQuery实现页面跳转功能代码

通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum").val();//#gotopagenum是文本框的id属性 location.href = "NewList.aspx?pagenum="+pn;//location.href实现客户端页面的跳转 }); 实例2: 实现跳转:window.location = 'user!add.