嘘~ 正在从服务器偷取页面 . . .

HTML 前端学习（9）—— JQauery简介及事件

HTML 前端 JQauery
前端
发布日期:   2022-11-28
更新日期:   2022-11-28
文章字数:   2.3k
阅读时长:   11 分
阅读次数:  

JQuery简介

JQuery 介绍

内部封装了原生的 JS 代码
能够写更少的代码，完成 JS 操作
类似于 python 中的 模块，在前端中模块不叫模块，叫 ”类库“
兼容多个浏览器，不需要考虑兼容问题

宗旨：write less do more


python 导入模块发生了几件事？
    导入模块需要消耗资源
JQuery 在使用时也需要导入，但文件非常小，基本不影响

JQuery 导入

两种导入方式

  1. 在官网将 JQuery 文件下载到本地，并且导入

  2. 直接引入 JQuery 提供的 CDN 服务（基于网络直接加载）

    CDN：内容分发网络

    参考网站：bootcdn

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JQuery 基本语法

JQuery("选择器").action() 
可以简写成
$("选择器").action()

JQuery 查找标签

JQuery 查找标签的返回结果都是 JQuery 对象。

JQuery 标签对象转化为标签对象
    $("span")[0]
标签对象转换为 JQuery 标签对象
    $(document.getElementById("d1"))

id 选择器
    $("#d1")
class 选择器
    $(".c1")
标签选择器
    $("span")

组合、分组、嵌套
    $("div.c1")
    $("dic, .c1, p")
    $("div span")

基本筛选器
    $("ul li");
    $("ul li:first");
    $("ul li:eq(2)"); // 索引第二的标签
    $("ul li:even"); // 索引为偶数的标签
    $("ul li:odd"); // 索引为奇数的标签
    $("ul li:gt(2)"); // 索引大于 2 的标签
    $("ul li:lt(2)"); // 索引小于 2 的标签
     $("ul li:not('#d1')"); // 移除满足条件的标签
    $("div:has('p')"); // 选取出包含一个或多个标签在内的标签

属性选择器
    $("[username='jason']");

表单关键词，只适用于表单标签
    $(":text");
    $(":password");
    还包括表单对象属性
    $(":enabled");
    $(":disabled");
    $(":checked"); // 如果选中，拿所有被选中的标签，同时也会拿到 selected
    $("input:checked");
    $(":selected"); // selected 只拿 selected 的标签

筛选器方法

    $("d1").next(); // 同级别的下一个标签		$("d1").nextAll(); // 同级别下面所有的标签
    $("d1").nextUntil("c1"); // 同级别的所有标签直到 c1 为止，不包含 c1

    $(".c1").prev(); // 上一个标签			$(".c1").prevAll(); // 上面所有标签
    $(".c1").prevUntil("#d2);

    $("#d3").parent(); // 父标签
     $("#d3").parent().parent();
     $("#d3").parents(); // 所有的父标签，一直到 HTML
     $("#d3").parentsUntil("body");

     $("#d2").children(); // 所有的子标签
     $("#d2").siblings(); // 同级别的所有标签

     $("div p");
     等价于
     $("div").find("p");

     $("div span:first);
     等价于
     $("div span").first();

     $("div span").last();

JQuery 操作标签

操作类
        JS 版本
            classList.add()
            classList.remove()
            classList.contains()
            classList.toggle()
        JQuery
            addClass;
            removeClass;
            hasClass;
            toggleClass;
        
        一行代码让第一个 P 标签内容文字变成红色，第二个 P 标签内容文字变成蓝色
        JQuery 的链式操作，JQuery对象调用一个JQuery方法之后返回的是JQuery对象，就意味着还可以继续调用方法
        $("p").first().css("color", "red").next().css("color","blue");
        
    位置操作
        offset(); // 当前标签和页面的定位距离
        position(); // 当前标签和父标签的距离
        $(window).scrollTop(); // 滚动条离页面顶部的距离
        scrollLeft(); 
        
    尺寸
        $("p").height() // 文本高度
        $("p").width() // 文本宽度
        $("p").innerHeight() // 文本 + padding
        $("p").innerWidth() // 文本 + padding
        $("p").outHeight() // 文本 + padding + border
        $("p").outWidth() // 文本 + padding + border
        
    文本操作
        操作标签内部文本
            JS 中
                innerText
                innerHtml
            JQuery 中
                text() // 括号内不加参数就是获取，叫参数就是赋值
                html()
                
    获取值操作
        JS 中
            .value
        JQuery 中
            .val() // 不加参数是获取，加参数是赋值
            文件获取 转成标签对象.files[0]
            
    属性操作
        JS 中
            setAttribute
            getAttribute
        JQuery 中
            对于标签上有的能够看到的属性和自定义属性用 attr
            对于返回布尔值比如 checkbox radio option 是否被选中用 prop
        
            attr(name, value); // 设置属性
            attr(name); // 获取属性
            removeAttr(name); // 移除属性               
            prop，如 .prop("checked"), .prop("checked", true);
            
    在用变量存储变量的时候 
        标签对象：JS 中使用 xxxEle 命名
        JQuery对象：JQuery 中使用 $xxxEle 命名
        
    文档处理
        创建标签
            JS 中
                createElement
            JQuery 中
                $("<p>");
        添加标签
            JS 中
                appendChild();
            JQuery 中
                标签对象.append(); // 内部尾部追加
                JQuery对象.append();
                .prepend(); // 内部头部追加 
                
                .remove(); // 移除标签
                .empty(); // 清空当前标签内部所有的内容
                相当于
                .html("");

JQuery 事件

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery3.6.0.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<button id="d1">点我</button>
<script>
    // $("#d1").click(
    //     function () {
    //         alert("123");
    //     }
    // );
    
    // (功能更强大，支持事件委托)
    $("#d1").on("click", function () {
            alert("123")
        }
    )
</script>
</body>
</html>

克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery3.6.0.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        #d1 {
            height: 200px;
            width: 200px;
            border: 3px solid red;
            background-color: grey;
            color: white;
        }
    </style>
</head>
<body>
<button id="d1">是兄弟就来砍我</button>
<script>
    $("#d1").on("click", function () {
        // this 指代的永远是当前被操作的标签对象
        // console.log(this);
        // 标签对象变成 JQuery 对象
        // $(this);
        // 克隆对象并添加到 body 中
        // 克隆默认不克隆事件
        // $(this).clone().insertAfter($("body"));
        // 克隆事件
        $(this).clone(true).insertAfter($("body"));
    })
</script>
</body>
</html>

模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="JQuery3.6.0.js"></script>
    <style>
        .cover {
            position:fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #4e4e4e;
            z-index: 99;
        }
        .modal {
            position: fixed;
            height: 400px;
            width: 600px;
            background-color: wheat;
            top:50%;
            left:50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 100;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div>我是最下面的</div>
<button id="d1">点我出来</button>
<div class="cover hide"></div>
<div class="modal hide">
    <p>username:
        <input type="text">
    </p>
    <p>username:
        <input type="password">
    </p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>

<script>
    let $coverEle = $(".cover");
    let $modalEle = $(".modal");
    $("#d1").on("click", function () {
        $coverEle.removeClass("hide");
        $modalEle.removeClass("hide");
    })
    $("#d2").click(function(){
        $coverEle.addClass("hide");
        $modalEle.addClass("hide");
    })
</script>
</body>
</html>

左侧菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery3.6.0.js"></script>
    <style>
        .left {
            float: left;
            background-color: darkgrey;
            width: 30%;
            height: 100%;
            position: fixed;
        }

        .title {
            font-size: 33px;
            color: white;
            text-align: center;
        }

        .item {
            border: 1px solid black;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">菜单一
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
        <div class="title">菜单二
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
        <div class="title">菜单三
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
    </div>
</div>

<script>
    $(".title").on("click", function () {
        $(".title").children().addClass("hide") && $(this).children().removeClass("hide");
    })
</script>
</body>
</html>

回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery3.6.0.js"></script>
    <style>
        .hide {
            display: none;
        }

        a {
            text-decoration: none;
        }

        .d2 {
            position: fixed;
            background-color: white;
            right: 20px;
            bottom: 20px;
            height: 50px;
            width: 100px;
        }
    </style>
</head>
<body>
    <a href="" id="d1"></a>
    <div style="height: 500px; background-color: red"></div>
    <div style="height: 500px; background-color: green"></div>
    <div style="height: 500px; background-color: blue"></div>
    <a href="#d1" class="hide d2">回到顶部</a>

    <script>
        $(window).scroll(function () {
            if ($(window).scrollTop() > 300 ){
                $(".d2").removeClass("hide");
            } else {
                $(".d2").addClass("hide");
            }
        })
    </script>
</body>
</html>

自定义用户登录校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery3.6.0.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
<p>username:
    <input type="text" id="username">
    <span></span>
</p>
<p>password:
    <input type="password" id="password">
    <span></span>
</p>
<button id="d1">提交</button>

<script>
    $("#d1").click(function () {
        let username = $("#username").val();
        let password = $("#password").val();

        if (!username) {
            $("#username").next().text("用户名不能为空");
        }

        if (!password) {
            $("#password").next().text("密码不能为空");
        }
    })


    $("input").on("focus", function () {
        $(this).next().text("");
    })
</script>
</body>
</html>

input 框实时监控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery3.6.0.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>
    $("#d1").on("input", function () {
        console.log($(this).val());
    })
</script>
</body>
</html>

hover 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="JQuery3.6.0.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="d1"></div>

<script>
    $("#d1").hover(
        function f1() {
            alert("我来了");
        },
        function f2() {
            alert("我走了");
        }
    )
</script>
</body>
</html>

键盘按键事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery3.6.0.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            alert("你按下了shift键");
        }
    })
</script>
</body>
</html>

文章作者: New Ass
文章链接: https://New-Ass.github.io/2022/11/28/html-qian-duan-xue-xi-9-jqauery-jian-jie-ji-shi-jian/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 New Ass !
HTML 前端 JQauery
赏
  目录