jQuery

目录

安装使用

jQuery对象

JQuery函数的使用

作为函数使用

jQuery选择器

元素操作

class属性操作

标签及属性操作

jQuery动画效果

自定义动画


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>

作为函数使用

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

  1. 作为一般函数使用,$(回调函数),当文档加载完成之后,执行回调函数
  2. 作为选择器使用,参数为选择器字符串,写法同CSS,用来查找所有匹配的元素,并将这些匹配的元素封装为jQuery对象。这些被封装的元素对象可以直接调用jQuery中的函数。函数方法中传入的参数为回调函数。回调函数中使用this来返回DOM事件对象。
  3. 参数作为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. 父元素下的所有子元素: 父元素 子元素
  2. 父元素下的所有直接子元素: 父元素>子元素
  3. 父元素下的第一个直接子元素:父元素+子元素
  4. 父元素下的所有后代兄弟元素:父元素 兄弟元素~*

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

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>

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页