JavaScript（下）

最新推荐文章于 2024-06-12 21:14:37 发布

xxmuq

最新推荐文章于 2024-06-12 21:14:37 发布

阅读量101

点赞数

分类专栏：前端文章标签： BOM DOM jQuery 事件处理表单操作

本文链接：https://blog.csdn.net/xxmuq/article/details/113693927

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

BOM

浏览器对象模型

screen

浏览器屏幕尺寸

screen.height
768px
screen.width
1366px

location

当前页面URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"

location.assign("https://www.bilibili.com/")	//跳转页面

document

当前页面Html信息

//获取具体文档树节点
<dl id="app">
    <dt>ca</dt>
    <dd>csac</dd>
</dl>
<script>
    'use strict';
    document.getElementById('app');
</script>

document.cookie		//获取cookie

history

浏览器历史记录（不建议使用）

history.back()			//返回上一个页面
history.forward()		//前进下一个页面

DOM

文档对象模型

浏览器页面是一个DOM树形结构

操作DOM的作用：

获得DOM节点

<body>
    <div id="father">
        <ul class="ul">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var father = document.getElementById("father");		//根据id查找节点
        var ul = document.getElementsByClassName("ul");		//根据class查找节点
        var li = document.getElementsByTagName("li");		//根据标签查找节点
    </script>
</body>

更新DOM节点

innerText='';	//修改文本值
修改节点的属性，css操作

删除DOM节点

<body>
    <div id="father">
        <h1>h1</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    <script>
        //获取要删除的节点
        var self = document.getElementById('p1');
        //获取节点的父类
        var father = p1.parentElement;
        //使用父类移除子节点
        father.removeChild(p1);
        //father.removeChild(father.children[0]);
    </script>
</body>

变更DOM节点位置

<body>
    <p id="p1">p1</p>
    <div id="div1">
        <p id="p2">p2</p>
        <p id="p3">p3</p>
        <p id="p4">p4</p>
    </div>
    <script>
        var p1 = document.getElementById('p1');
        var div1 = document.getElementById('div1');
        div1.appendChild(p1);
    </script>
</body>

创建节点

<body>
    <div id="div1">
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>
    <script>
        var p1 = document.getElementById('p1');
        var div1 = document.getElementById('div1');
        var newP = document.createElement('p');
        newP.id = 'p3';
        newP.innerText = 'p3';
        div1.appendChild(newP);
    </script>
</body>

操作表单

<body>
    <form action="#">
        <input type="text" id="text">
        <p>
            <input type="radio" class="sex" id="boy">男
            <input type="radio" class="sex" id="girl">女
        </p>
    </form>
    <script>
        var text = document.getElementById('text');
        text.value = 'wenbenkuang';       //给文本框赋值
        text.value;                       //获得文本框赋值
        var boy = document.getElementById('boy');
        var girl = document.getElementById('girl');
        boy.checked;            //获得单选框的值
        girl.checked = true;    //给单选框赋值
    </script>
</body>

提交表单

<body>
    <form action="#" method="post">
        <p>
            <span>用户名：</span><input type="text" id="user">
        </p>
        <p>
            <span>密码：</span><input type="password" id="password">
        </p>
        <!--绑定事件：被点击-->
        <button type="button" onclick="s()">提交</button>
    </form>
    <script>
        function s() {
            var uname = document.getElementById('user');
            var pwd = document.getElementById('password');
            console.log(uname.value);
            pwd.value = md5(pwd.value);		//md5加密
        }
    </script>
</body>

隐藏加密后的密码

<body>
    <form action="#" method="post">
        <p>
            <span>用户名：</span><input type="text" id="user">
        </p>
        <p>
            <span>密码：</span><input type="password" id="input-password">
        </p>
        <p>
            <input type="hidden" id="password">
        </p>
        <button type="button" onclick="s()">提交</button>
    </form>
    <script>
        function s() {
            var uname = document.getElementById('user');
            var password = document.getElementById('input-password');
            var pwd = document.getElementById('password');
            pwd.value = md5(password.value);
        }
    </script>
</body>

表单绑定提交事件

<body>
    <!--绑定事件：提交表单-->
    <form action="https://www.baidu.com/" method="post" onsubmit="return s()">
        <button type="submit">提交</button>
    </form>
    <script>
        function s() {
            return false;		//返回false将阻止表单提交，注意οnsubmit="return s()"
        }
    </script>
</body>

jQuery

工具文档：https://jquery.cuishifeng.cn/

引入jQuery

<script  src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
//或者去官网下载

公式

$('选择器').事件
选择器参考css选择器，
事件一般是click(function () {})。

<body>
    <a href="" id="a">这是一个链接</a>
    <script>
        $('#a').click(function () {
            alert('1');
        })
    </script>
</body>

事件

//文档加载完后进行事件
$(document).ready(function () {
    alert('1ssdf');
})
//简化
$(function () {
    alert('1ssdf');
})

查看鼠标位置

<head>
    <script  src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <style>
        #divMove{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    mouse：<span id="mouseMove"></span>
    <div id="divMove">
        在这里移动鼠标
    </div>
    <script>
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x：'+e.pageX+'y：'+e.pageY);
        })
    </script>
</body>

元素失去焦点时触发 blur 事件。

<body>
    <input type="text">
    <script>
        $("input").blur(function () {
            alert("Hello World!");
        });
    </script>
</body>
//点击输入框内部再点击输入框外部将触发事件

元素的值发生改变发生 change 事件。

<body>
    <input type="text">
    <script>
        $("input[type='text']").change( function() {
            alert('adav');
        });
    </script>
</body>
//当改变输入框内的值然后点回车，会触发事件

单击触发click事件

<body>
    <input type="button" value="这是一个按钮">
    <script>
        $("input").click( function() {
            alert('adav');
        });
    </script>
</body>
//单击按钮触发事件

双击触发dblclick事件

<body>
    <input type="button" value="这是一个按钮">
    <script>
        $("input").dblclick( function() {
            alert('adav');
        });
    </script>
</body>
//双击按钮触发事件

元素获得焦点触发 focus 事件。

<body>
<input type="text">
<script>
    $("input[type=text]").focus(function(){
        alert('a');
        //this.blur();
    });
</script>
</body>
//点击输入框触发事件。
//this.blur();可以使输入框看得见但无法使用

当键盘或按钮被按下时，发生 keydown 事件。

<body>
    <script>
        $(window).keydown(function(event){
            alert('afada')
        });
    </script>
</body>

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

<head>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <style>
        p{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p></p>
    <script>
        $('p').mousedown(function(event){
            alert('afada')
        });
    </script>
</body>

当鼠标指针离开元素时，会发生 mouseleave 事件。

<head>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <style>
        p{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p></p>
    <script>
        $("p").mouseleave(function(){
            $("p").css("background-color","#FF0000");
        });
    </script>
</body>

当鼠标指针经过元素时，会发生 mouseenter 事件。

<head>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <style>
        p{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p></p>
    <script>
        $("p").mouseenter(function(){
            $("p").css("background-color","#FF0000");
        });
    </script>
</body>
//一般会与鼠标离开事件联用

当调整浏览器窗口的大小时，发生 resize 事件。

<body>
    <script>
        $(window).resize(function(){
            alert("Stop it!");
        });
    </script>
</body>

操作DOM

<body>
    <div id="d1">
        <p name = "p1">dnafndnan</p>
    </div>
    <script>
        /*可以用标签[属性="值"]来定位元素*/
        $('#d1 p[name="p1"]').text();	//获得值
        $('p').text('snjanskjcn');		//设置值
        $('p').html();					//获得html
        $('p').html('<p>p</p>');		//添加html
        $('p').css('color','red');		//设置css样式
        $('p').show();					//显示元素
        $('p').hide();					//隐藏元素
        $("p").hide("slow");			//缓慢隐藏
    </script>
</body>