jQuery

最新推荐文章于 2022-06-09 15:22:38 发布

觅远

最新推荐文章于 2022-06-09 15:22:38 发布

阅读量354

点赞数

分类专栏： web前端文章标签： jquery javascript

本文链接：https://blog.csdn.net/JBY2020/article/details/110252340

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JQuery是一个快速简洁的javaScript框架

参考：菜鸟 https://www.runoob.com/jquery/jquery-tutorial.html

jQuery速查表：https://jquery.cuishifeng.cn/

安装使用

下载地址https://jquery.com/

两个版本：压缩版（精简）Production version - 用于实际的网站中，未压缩（可读性好）Development version - 用于测试和开发

文件引入

从script标签中引入，src属性中为引入的地址，有两种不同的引入方式，本地引入和网络引入，本地引入需要提前下载对应的JQ，网络引入，参考：https://www.runoob.com/jquery/jquery-install.html

或者访问https://www.bootcdn.cn/，引入对应版本的JQ。查看当前网站使用的jq版本，在控制台中输入：$.fn.jquery

jQuery对象

jQuery对象和DOM对象之间的相互转化

DOM转化为jQuery:$(dom对象)

jQuery转化为DOM:jQuery对象.get(index) 或者 jQuery对象[index]

JQuery函数的使用

两种不同的方法，使用$或者jQuery关键字：$(function(){}) 或者jQuery(function(){})

JQuery对象：执行$()所返回的对象

1、作为函数使用，带括号去调用

2、作为对象使用，使用 $. 调用内部函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JQuery.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <button id="btn">点击修改内容</button>
        <p class="cls">这是一个标签</p>
    </div>
    <script>
        $("button#btn").click(function () {
            // 通过打印this可知返回的是DOM对象
            console.log(this);
            // 要转成jQuery对象就需要将其DOM对象写进$()中进行封装，封装后的jQuery对象以数组的形式存储，
            // 所以要再转化为DOM对象就需要使用获取数组元素的方法, .get(index) 或者 [index]
            console.log($(this).get(0));
            // jQuery对象获取和修改html中的内容使用.html() 或者 .text()方法，括号中不带参数为获取内容，带参数为修改
            console.log($("p.cls").html());   // 获取内容，同DOM对象的 .innerHTML 
            $("p.cls").html("点击修改了内容");  // 修改内容,同DOM对象的 .innerHTML="修改后的内容"
        })
    </script>
</body>
</html>

作为函数使用

作为函数使用，函数中的代码等待文档加载完成之后才会被执行

作为一般函数使用，$(回调函数)，当文档加载完成之后，执行回调函数
作为选择器使用，参数为选择器字符串，写法同CSS，用来查找所有匹配的元素，并将这些匹配的元素封装为jQuery对象。这些被封装的元素对象可以直接调用jQuery中的函数。函数方法中传入的参数为回调函数。回调函数中使用this来返回DOM事件对象。
参数作为dom对象$(this)，会将一个DOM对象转化为jQuery对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../JS/jQuery-标准版.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <input type="text" class="ipt" placeholder="请输入内容">
        <button id="btn1">JS获取输入内容</button>
        <button id="btn2">jQuery获取输入内容</button>
        <button id="btn3">jQuery创建标签</button>
        <button id="btn4">jQuery删除标签</button>
    </div>
    <div class="apd"></div>
    <script>
        // 使用JS方法获取输入内容
        var js_btn = document.getElementById("btn1");
        js_btn.onclick = function () {
            var js_ipt = document.getElementsByClassName("ipt")[0].value;
            console.log("使用JS获取到的结果: ----  " + js_ipt);
        }

        // 使用jQuery获取输入内容
        // 定义一个jQ函数
        $(function () {
            // $或者（jQuery）的使用：1、作为函数使用，带括号去调用
            $("#btn2").click(function () {
                // $或者（jQuery）的使用：2、作为选择器使用，参数为选择器字符串，写法同CSS
                // 对象方法中的参数函数为回调函数
                $(".ipt").val();
                console.log("使用jQuery获取的结果: ----  " + $(".ipt").val());
                // $或者（jQuery）的使用：3、参数作为DOM对象$(this)，会将一个DOM对象转化为jQuery对象
                console.log(this);  // 获取DOM对象
                console.log($(this).html());  // 将DOM对象转化为jQuery对象并获取标签中的内容
            });
        });

        $("#btn3").click(function () {
            // 获取和创建标签
            // $或者（jQuery）的使用：4、参数html标签字符串，创建标签对象并封装为jQuery对象
            // 使用创建的jq标签对象的appendTo方法将创建的标签添加到页面指定位置，appendTo方法中的参数为指定添加的位置
            $("<p>创建标签</p>").appendTo("div.apd");
        });

        $("#btn4").click(function () {
            // 删除匹配的元素集合中所有的子节点
            $(".apd p").empty();
        });
    </script>
</body>
</html>

jQuery选择器

选择器速查表：https://jquery.cuishifeng.cn/

基础选择器

jQuery选择器的基本语法与CSS选择器一致，它的选择功能更为强大。使用的时候调用$()，将要匹配选择内容作为参数传入使用，会获取到整个网页中所有匹配的结果，并将结果封装到jQuery对象中返回。返回的结果为对应的htm标签内容。

修改选择器返回的元素style属性使用对象的.css()方法，里面传入的参数为{属性名:属性值}

层次选择器

父元素下的所有子元素：父元素子元素
父元素下的所有直接子元素：父元素>子元素
父元素下的第一个直接子元素：父元素+子元素
父元素下的所有后代兄弟元素：父元素兄弟元素~*

过滤选择器：对原有选择器选择出来的元素在进行筛选

1、选择匹配对象的第一个元素：:first

2、选择匹配对象中最后一个元素：:last

3、选择匹配对象中不是某个元素n的所有元素：:not(n)

4、选择匹配对象中的n-m之间的元素：:lt(m):gt(0)

5、选择匹配对象中第n个元素：:eq(n) 或者 $(匹配元素).eq(n)

6、选择指定内容的元素：:contains(指定内容)

元素操作

class属性操作

添加class属性：jQuery对象.addClass() ，括号中为要添加的class属性值（可以同时添加多个class属性值），通过这种方法让元素在事件发生后自动获取CSS样式。

移除class属性：jQuery对象.removeClass() ，括号中的参数使用同添加属性，需要注意的是，如果括号不传参数，默认移除所有的class属性值。

判断元素是否有对应的class属性值：jQuery对象.hasClass() ，括号中参数同添加属性，返回的值为boolean值，这个判断可以很好使用在逻辑判断中进行元素的操作。

切换class属性：jQuery对象.toggleClass() ，括号中的参数同添加属性，如果当前元素有改class属性值就取消这个属性值，如果没有就添加这个属性值。

标签及属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素操作</title>
    <script src="../JS/jQuery-标准版.js"></script>
</head>
<body>
    <div style="height: 400px; border-radius: 5px; border: 4px solid sandybrown;">
        <h1 style="font-size: 20px;color: sienna;">元素标签操作</h1>
        <div style="margin-top: 10px;" id="box1">
            <button id="btn11" class="添加标签元素">添加标签</button>
            <button id="btn12" class="追加标签元素">追加标签</button>
            <button id="btn13" class="删除标签元素">删除标签</button>
        </div>
        <div id="box2" style="margin-top: 20px">
            <p>为天地立心</p>
            <p>为生民立命</p>
        </div>
    </div>
    <div style="height: 400px; border-radius: 5px; border: 4px solid sandybrown;margin-top: 10px;">
        <h1 style="font-size: 20px;color: sienna;">元素属性操作</h1>
        <div style="margin-top: 10px;" id="box3">
            <button id="btn21" class="修改元素属性">修改属性</button>
            <button id="btn22" class="获取元素属性值">获取属性值</button>
            <button id="btn23" class="移除元素属性">移除属性</button>
        </div>
        <div id="box4" style="margin-top: 20px">
            <p id="p1">为往圣继绝学</p>
            <p id="p2">为万世开太平</p>
            <a href="https://jquery.cuishifeng.cn/">点击</a>
        </div>
    </div>
    <script type="text/javascript">
        // 标签元素操作
        $("#btn11").click(function () {
            // 使用.htnl()方法，如果里面不带参数，获取目标元素标签内部元素标签中的html内容
            console.log($("#box2").html());
            // 如果带有参数，jQuery会自动解析里面的标签内容，并将原来的标签进行覆盖重写
            $("#box2").html('添加一个新的标签：<a href="https://jquery.cuishifeng.cn/">jQuery速查表</a>');
            }
        );

        $("#btn12").click(function () {
            // 将已有的或者创建好的html元素追加到当前页面中
            var html1 = "<p style='font-size: 20px; color: #f20d0d;'>这是一个追加的p标签元素</p>";
            // 创建好的元素不会显示在页面中，只有通过追加的方式显示在页面中
            $("#box2").append(html1);
            }
        );

        $("#btn13").click(function () {
            // 删除匹配的元素集合中所有的“子节点”，清空标签及当前标签上绑定的所有事件
            $("#box2").empty();
            }
        );

        // 修改元素的属性值
        $("#btn21").click(function () {
            // 如果之前有这个属性，则为修改，如果没有则是添加
            $("#box4 a").attr({href:"http://www.shufaai.com/",value:"点击一下"});  // 如果是一个只是修改一个属性，可以直接写成.attr("属性名","属性值")
            }
        );

        $("#btn22").click(function () {
            // 能够获取自带的和我们后面添加的所有属性，如果属性不存在就返回undefined
            console.log($("#box4 a").attr("href"));
            }
        );

        $("#btn23").click(function () {
            // 移除属性,如果同时移除多个属性，属性名之间用空格隔开
            $("#box4 a").removeAttr("href value");
            }
        );

    </script>
</body>
</html>

需要注意的是，对于checked selected disabled这类boolean类型的属性，不能使用arrt获取属性值，这类属性如果没有设置，在用户修改后操作后，元素拥有了这个属性，但是使用arrt获取不到，这时需要使用prop()方法，返回一个boolean值。

jQuery动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script src="JQuery.js"></script>
    <style>
        #box1{
            top: 10px;padding: 10px
        }
        #box2{
            width: 100px;
            height: 100px;
            top: 10px;
            background-color: #ff7950;
            display: none;  /*  设置元素默认隐藏  */
        }
    </style>

</head>
<body>
    <div id="box1">
        <button class="show">显示</button>
        <button class="hide">隐藏</button>
        <button class="toggle">显示隐藏</button>
        <button class="fadein">淡入</button>
        <button class="fadeout">淡出</button>
        <button class="fadeToggle">淡入淡出</button>
        <button class="slide_down">向下划出(显示)</button>
        <button class="slide_up">向上划入(隐藏)</button>
        <button class="slideToggle">划入划出</button>
        <button class="stop">停止</button>
    </div>
    <div id="box2"></div>
    <script>
        // 可传入的参数：
        // 1、动画完成需要的时长（毫秒），默认为400，或者三种预定速度的字符串"slow"（600），"normal"（默认值400）， "fast"（200）
        // 2、动画显示的效果：匀速（线性）"linear"，匀加速"swing"（默认值）
        // 3、动画执行完后的参数：更好使用函数嵌套
        $("#box1 .show").click(function () {
            $("div#box2").show(2000);
        });  // 显示元素
        $("#box1 .hide").click(function () {
           $("div#box2").hide(2000);
        });  // 隐藏元素
        $("#box1 .fadein").click(function () {
            $("div#box2").fadeIn(2000);
        });  // 元素淡入
        $("#box1 .fadeout").click(function () {
             $("div#box2").fadeOut(2000);
        });  // 元素淡出
        $("#box1 .fadeToggle").click(function () {
             $("div#box2").fadeToggle(3000);
        });  // 划入划出，如果元素显示点击后就淡出隐藏，如果隐藏点击后淡入显示
        $("#box1 .toggle").click(function () {
             $("div#box2").toggle(2000);
        });  // 如果元素显示点击后就隐藏，如果隐藏点击后显示
        $("#box1 .slide_up").click(function () {
             $("div#box2").slideUp(2000);
        });  // 向下划出显示
        $("#box1 .slide_down").click(function () {
             $("div#box2").slideDown(2000);
        });  // 向上划入隐藏
        $("#box1 .slideToggle").click(function () {
             $("div#box2").slideToggle(5000,"swing");
        });  // 划入划出，如果元素显示点击后就向上划入隐藏，如果隐藏点击后向下划出显示
        $("#box1 .stop").click(function () {
             $("div#box2").stop();
        });  // 停止动画
    </script>
</body>
</html>

自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #box1{
            top: 10px;padding: 10px
        }
        #box2{
            width: 100px;
            height: 100px;
            top: 10px;
            background-color: yellowgreen;
            display: none;  /*  设置元素默认隐藏  */
        }
    </style>
</head>
<body>
    <div id="box1">
        <button class="act">执行动画效果</button>
    </div>
    <div id="box2"></div>
    <script>
        // 参数1、必须传入，需要执行动画的属性
        // 参数2、可选，执行的时长
        // 参数3、可选，执行动画的速度
        // 参数4、可选，执行动画完成之后需要调用执行的函数
        $("#box1 .act").click(function () {
            $("#box2").show(1000,function () {
                $("#box2").animate({marginLeft:"500"},3000,"linear",function () {
                    $("#box2").animate({marginTop:"500"},3000, "swing",function () {
                        $("#box2").animate({marginLeft:"0"},3000, "swing",function () {
                            $("#box2").animate({marginTop:"0"},3000, "linear",function () {
                                $("#box2").fadeOut(1000,function () {
                                    alert("再见！");});});});});});});});
    </script>
</body>
</html>