jQuery总结

原创 已于 2022-09-01 23:04:27 修改 · 407 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #javascript #前端 #css #html

于 2022-09-01 23:01:58 首次发布

目录

基础选择器：

        元素选择器：

​编辑       

        类选择器

​编辑

        id选择器

关系选择器：

        子代选择器

​编辑        后代选择器

​编辑

属性选择器：

        完美匹配：

​编辑

        前缀匹配or完美匹配：

​编辑

        包含：

​编辑

        空格分隔or完美匹配：

​编辑

        结尾or完美匹配： 

​编辑

        开头or完美匹配：

扩展选择器：

        :eq(index)下标选择器

        :even偶数选择器   

​编辑

        :odd奇数选择器

        :first选择器

​编辑

        :last选择器

        :gt(index)选择器

        :lt(index)选择器

DOM操作：

        Class操作：

addClass("类名")

​编辑

removeClass("类名")

​编辑

toggleClass("类名")

hasClass("类名")

        文本操作：

html()：

text()：

val()：

        属性操作：

attr()：

​编辑 ​编辑

removeAttr()：

​编辑

        插入元素并包含指定内容：

wrap()：    

​编辑unwrap()：

wrapAll()：

wrapInner()：

        元素内添加内容：

append()：   

​编辑

prepend()：

        元素外添加内容：

after()：

before()：

        移除：

        替换：

CSS操作：

        css方法：

        height()和width()

        innerHeight()和innerWidth()

        outerHeight()和outerWidth()

​编辑

        offset()

​编辑

        position()

​编辑

事件：

        on事件处理器

        one一次性事件处理器

        off清除事件处理器

​编辑

        鼠标事件：

click()：

mouseenter()和mouseleave()：

mouseover()和mouseout()：

mousemove()：

        表单事件：

        键盘事件：

        浏览器事件：

resize()：

scroll()：

        Event对象的属性

target：

currentTarget：

        Event对象的方法

preventDefault()：

stopPropagation()：

遍历：

        map()和each()

​编辑

js对象和jQuery对象的互转：

        为什么js对象和jQuery对象需要互转？

        js对象 - > jQuery对象($(js对象))

​编辑

        jQuery对象 - > js对象

​编辑

动画：

        show()和hide()

        fadein()和fadeout()

​编辑

        slideDown()和slideUp()

        自定义动画animate()

jQuery方便了我们使用JavsScript进行DOM操作的，首先我们需要知道jQuery的官网，通过官网下载jQuery，我们主要下载的是压缩板的，因为压缩版的大小会更小一些

jQuery官网https://jquery.com/download/

 当我们下载过后需要对jQuery文件进行引用，我们将jQuery文件放到使用的文件夹中 

通过script标签的src属性赋值，添加jQuery文件对应的链接

基础选择器：

        元素选择器：

jQuery通过$("元素名")获取对应的元素集

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = $("div");//相当js的document.getElementsByTagName("div")
        //测试
        div.css("background-color","green");
    </script>
</body>

本来背景色是粉色的，我们通过元素选择器将对应的元素的背景色改为绿色(green)，这里使用的css方法是对css进行操作的，我们后面会讲，这里用来测试

       

        类选择器

jQuery通过$(".类名")获取对应类名的元素集

<head>
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box = $(".box");//相当于js的document.getElementsByClassName("box")
        //测试
        box.css("background-color","green");
    </script>
</body>
</html>

        id选择器

jQuery通过$("#id名")获取对应的元素

<head>
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = $("#box");//相当于document.getElementById("box");
        //测试
        box.css("background-color","green");
    </script>
</body>
</html>

关系选择器：

        子代选择器

定义：

        选择被E元素直接包含的F元素,用>表示

语法：

        E > F

<head>
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul id="ul">
        <li>item 1</li>
        <li>
            <ul>
                <li>item 2.1</li>
                <li>item 2.2</li>
            </ul>
        </li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <script>
        //子代选择器,选择#ul的直接子元素li
        $("#ul>li").css("border","1px solid red");
    </script>
</body>

        后代选择器

定义：

        选择所有被E元素包含的F元素，中间用空格隔开

语法：

        E F

<head>
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul id="ul">
        <li>item 1</li>
        <li>
            <ul>
                <li>item 2.1</li>
                <li>item 2.2</li>
            </ul>
        </li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <script>
        //后代选择器，该元素下的所有li元素
        $("#ul li").css("border","1px solid red");
    </script>
</body>

属性选择器：

        完美匹配：

元素名[属性="value"]

选择指定属性是给定值的元素

<body>
    <a href="#" alt="sxt">sxt</a>
    <a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
    <a href="#" alt="sxtitbaizhan">sxtitbaizhan</a>
    <script>
        //完美匹配"sxt"
        $("a[alt=sxt]").css("border","1px solid red");
    </script>
</body>

        前缀匹配or完美匹配：

元素名[属性 |= "value"]

<body>
    <a href="#" alt="sxt">sxt</a>
    <a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
    <a href="#" alt="sxtitbaizhan">sxtitbaizhan</a>
    <script>
        //前缀匹配or完美匹配“sxt”
        $("a[alt|='sxt']").css("border","1px solid red");
    </script>
</body>

        包含：

元素名[属性*="value"]

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <a href="#" alt="sxt">sxt</a>
    <a href="#" alt="sxtitbaizhan">sxtitbaizhan</a>
    <a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
    <script>
        $("a[alt*='sxt']").css("border","1px solid red");
    </script>
</body>

        空格分隔or完美匹配：

元素名[属性~="value"]

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <a href="#" alt="sxt">sxt</a>
    <a href="#" alt="sxt itbaizhan">sxt itbaizhan</a>
    <a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
    <script>
        $("a[alt~=sxt]").css("border","1px solid red");
    </script>
</body>

        结尾or完美匹配： 

元素名[属性$="value"]

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <a href="#" alt="sxt">sxt</a>
    <a href="#" alt="itbaizhansxt">itbaizhansxt</a>
    <a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
    <script>
        $("a[alt$='sxt']").css("border","1px solid red");
    </script>
</body>

        开头or完美匹配：

元素名[属性^=“value”]

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <a href="#" alt="sxt">sxt</a>
    <a href="#" alt="itbaizhansxt">itbaizhansxt</a>
    <a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
    <script>
        $("a[alt^='sxt']").css("border","1px solid red");
    </script>
</body>

扩展选择器：

当我们使用基础选择器，或者属性选择器，或者关系选择器选择好元素之后，我们都可以通过冒号( : )+扩展选择器对元素再一次选择，就相当于对我们选择的元素再一次过滤，选择更加合适的元素

        :eq(index)下标选择器

在匹配的集合中选择索引值为index的元素。（下标）

index下标计算是从0开始的

<body>
    <ul id="ul">
        <li>item 1</li>
        <li>
            <ul>
                <li>item 2.1</li>
                <li>item 2.2</li>
            </ul>
        </li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <script>
        $("li:eq(0)").css("border","1px solid red");
    </script>
</body>

        :even偶数选择器   

在匹配的集合中选择下标为偶数的元素

注意：下标从0开始计算

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item0</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        //偶数选择器
        $("li:even").css("border","1px solid red");
    </script>
</body>

        :odd奇数选择器

 在匹配的集合中选择下标为奇数的元素

注意：下标从0开始计算

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item0</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        //奇数选择器
        $("li:odd").css("border","1px solid red");
    </script>
</body>

        :first选择器

在匹配元素集中的选择第一个元素

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item0</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        //在匹配的元素集中选择第一个元素
        $("li:first").css("border","1px solid red");
    </script>
</body>

        :last选择器

在匹配的元素集中选择最后一个元素

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item0</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        //在匹配的元素集中选择最后一个元素
        $("li:last").css("border","1px solid red");
    </script>
</body>

        :gt(index)选择器

在匹配的集合中，选择下标大于指定下标的所有元素(index)

注意：下标从0开始计算

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item0</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        //在匹配的集合中选择大于指定下标的所有元素
        $("li:gt(2)").css("border","1px solid red");
    </script>
</body>

        :lt(index)选择器

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item0</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        //在匹配的集合中选择小于指定下标的所有元素
        $("li:lt(2)").css("border","1px solid red");
    </script>
</body>

DOM操作：

        Class操作：

addClass("类名")

向类中添加class属性，值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="box"></div>
    <script>
        //向元素中添加box1 box2类名
        $(".box").addClass("box1 box2");
    </script>
</body>

removeClass("类名")

删除类中指定的类名，如果为空那么类名全部删除 

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="box box1 box2"></div>
    <div class="b b1 b2"></div>
    <script>
        //删除box类名
        $(".box").removeClass("box");
        //删除所有类名
        $(".b").removeClass();
    </script>
</body>

toggleClass("类名")

这是一个开关方法，如果类名存在则删除，不存在则添加

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="box"></div>
    <script>
        //存在则删除
        $("div").toggleClass("box");
        //不存在则添加
        $("div").toggleClass("box1");
    </script>
</body>

hasClass("类名")

判断元素是否包含该类名，返回布尔值

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="box"></div>
    <script>
        //输出div元素是否含有box类名
        console.log($("div").hasClass("box"));  
    </script>
</body>

        文本操作：

html()：

给元素添加内容(可以识别html语句)

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div id="box">hello</div>
    <div id="box1">hello</div>
    <script>
        //添加内容
        $("#box").html("world");
        //识别html语句
        $("#box1").html("<p>hello world</p>");
    </script>
</body>

text()：

作用几乎和html()一样，但是html()可以识别html语句，但是text()无法识别html语句，直接将内容渲染为字符串添加到元素中

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div id="box">hello</div>
    <div id="box1">hello</div>
    <script>
        //添加内容
        $("#box").text("world");
        //识别html语句
        $("#box1").text("<p>hello world</p>");
    </script>
</body>

val()：

获取/设置对应元素的value值

<head>
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <input type="text" value="默认内容">
    <script>
        //获取val值
        console.log($("input").val());
        //设置val值
        $("input").val("设置后的内容");
    </script>
</body>

        属性操作：

attr()：

给元素设置/获取属性

1、一次设置一条属性

2、通过对象的形式设置多条属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box1{
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <p></p>
    <script>
        //设置一条属性
        $("div").attr("class","box1");
        //通过对象的形式设置多条属性
        $("p").attr({
            class:"box1",
            id:"box1"
        })
        //给定需要的属性，获取指定属性值
        console.log($("p").attr("class"));
        
    </script>
</body>
</html>

 

removeAttr()：

删除元素的指定属性，无法全部删除

<head>
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div class="box1" id="box1" style="border:1px solid red;width: 200px;height: 200px;"></div>
    <script>
            $(".box1").removeAttr("style");
    </script>
</body>

        插入元素并包含指定内容：

wrap()：    

创建一个元素，包裹对应元素，如果有多个对应元素，那么每个对应元素包裹一层

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <script>
        //找到p元素，并包裹一层div,如果有多个那么每个包裹一层
        $("p").wrap("<div class='container'></div>")
    </script>
</body>


unwrap()：

删除一层包裹

<head>
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div>
        <p>hello world</p>
    </div>
    <script>
        //找到p元素，删除一层包裹
        $("p").unwrap();
    </script>
</body>

wrapAll()：

wrap()如果有多个元素，每个都包裹一层

而wrapAll()就是如果有多个元素，所有对应元素外面包裹一层

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <script>
        //找到所有p元素，在外面包裹一层div
        $("p").wrapAll("<div class='container'></div>");
    </script>
</body>

wrapInner()：

对应元素里面的内容包裹一层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <script>
        //找到所有p元素，每个对应p元素中的内容包裹一层div
        $("p").wrapInner("<div class='container'></div>");
    </script>
</body>
</html>

        元素内添加内容：

append()：   

在元素内的尾部添加内容

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>hello</p>
    </div>
    <script>
        //在div元素内的尾部添加p标签
        $("div").append("<p>world</p>");
    </script>
</body>

prepend()：

在元素内的头部添加内容

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>hello</p>
    </div>
    <script>
        //在div元素内的头部添加p标签
        $("div").prepend("<p>world</p>");
    </script>
</body>

        元素外添加内容：

after()：

在对应元素的后面添加内容

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>hello</p>
    </div>
    <script>
        //在对应元素后面添加p标签
        $("div").after("<p>world</p>");
    </script>
</body>

before()：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>hello</p>
    </div>
    <script>
        //在对应元素的前面添加内容
        $("div").before("<p>world</p>");
    </script>
</body>
</html>

        移除：

empty()：

删除元素中的内容

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div>
        <p>hello</p>
        <p>world</p>
        <p>你好</p>
    </div>
    <script>
        //移除div里边的内容
        $("div").empty();
    </script>
</body>

remove()：

删除整个元素，包括里面的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div>
        <p>hello</p>
        <p>world</p>
        <p>你好</p>
    </div>
    <script>
        //移除div
        $("div").remove();
    </script>
</body>
</html>

        替换：

replacWith()：

匹配对应的元素并替换为对应的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div>
        <p>hello</p>
        <p>world</p>        
    </div>
    <script>
        //将对应元素替换为指定元素
        $("p").replaceWith("<b>替换后的内容</b>");
    </script>
</body>
</html>

CSS操作：

        css方法：

css方法和attr方法很像，但是css方法只能设置属性值

1、一次设置一个属性

2、通过对象的方式设置多个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script>
        //一次设置一个属性
        $("#box1").css("border","1px solid red");
        $("#box1").css("width","100px");
        $("#box1").css("height","100px");
        //通过对象的方式设置多个属性
        $("#box2").css({
            width:200,
            height:200,
            backgroundColor:"pink"
        })
    </script>
</body>
</html>

        height()和width()

获取对应元素的高度和宽度，不包括padding、边框、margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px;
            margin: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //获取div的高度和宽度，不包括padding、边框、margin
        var width = $("div").width();
        var height = $("div").height();

        console.log("height:"+height);
        console.log("width:"+width);
    </script>
</body>
</html>

        innerHeight()和innerWidth()

获取对应元素的高度和宽度，包括padding内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px;
            margin: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //获取div的高度和宽度，包括padding 不包括边框、margin
        var iwidth = $("div").innerWidth();
        var iheight = $("div").innerHeight();

        console.log("innerheight:"+iheight + " (包括padding)");
        console.log("innerwidth:"+iwidth + " (包括padding)");
    </script>
</body>
</html>

        outerHeight()和outerWidth()

获取对应元素的高度和宽度，包括padding、border，默认不包括margin，可以给定参数true，使包括margin 

不包括margin：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px solid red;
            margin: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //获取div的高度和宽度，包括padding、边框，默认不包括margin
        var owidth = $("div").outerWidth();
        var oheight = $("div").outerHeight();

        console.log("outerheight:"+oheight + " (包括padding+border)");
        console.log("outerwidth:"+owidth + " (包括padding+border)");
    </script>
</body>
</html>

包括margin：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px solid red;
            margin: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //获取div的高度和宽度，包括padding、边框，默认不包括margin
        var owidth = $("div").outerWidth(true);
        var oheight = $("div").outerHeight(true);

        console.log("outerheight:"+oheight + " (包括padding+border+marin)");
        console.log("outerwidth:"+owidth + " (包括padding+border+margin)");
    </script>
</body>
</html>

        offset()

 获取元素与文档的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 50px;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <script>
        //获取box2与文档的距离
        console.log($("#box2").offset());
    </script>
</body>
</html>

        position()

获取元素与父类具有定位功能的距离

如果父类没有定位功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: pink;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <script>
        //获取box2与父类具有定位功能的距离
        console.log($("#box2").position());
    </script>
</body>
</html>

 父类具有定位功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            margin: 50px;
            position: relative;
            background-color: pink;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <script>
        //获取box2与父类具有定位功能的距离
        console.log($("#box2").position());
    </script>
</body>
</html>

事件：

        on事件处理器

需要两个参数，第一个参数是事件类型，第二个参数是触发事件后的行为  

语法：

on(事件类型，触发事件后的行为)

测试：这里我们就先使用click点击事件作为测试，click事件后面会详细讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head> 
<body>
    <button id="btn">按钮</button>
    <script>
        $("#btn").on("click",
        function(){
            console.log("点击了按钮");
        })
    </script>
</body>
</html>

        one一次性事件处理器

one事件处理器的使用方法和on事件处理器一样，但是one事件处理器只会被触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        $("#btn").one("click",
        function(){
            console.log("一次性事件");
        })
    </script>
</body>
</html>

        off清除事件处理器

off删除对应元素的事件,可以传递参数，如果不传递参数那么清除所有事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        $("#btn").on("click",
        function(){
            console.log("点击了按钮");
        });
        $("#btn").on("mouseenter",
        function(){
            console.log("进入了按钮");
        });
        //清除所有事件
        $("#btn").off();
    </script>
</body>
</html>

        鼠标事件：

click()：

点击事件，当鼠标点击拥有该事件的元素就会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        $("#btn").click(function(){
            console.log("点击了按钮");
        });
        //相当于$("#btn").on("click",function(){
        //     console.log("点击了按钮");
        // })
        
    </script>
</body>
</html>

mouseenter()和mouseleave()：

mouseenter()：当鼠标进入触发(不会事件冒泡)

mouseleave()：当鼠标离开触发(不会事件冒泡)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        $("#box").mouseenter(function(){
            console.log("鼠标进入了");
        });
        $("#box").mouseleave(function(){
            console.log("鼠标离开了");
        })
    </script>
</body>
</html>

mouseover()和mouseout()：

mouseover()：鼠标进入触发(会事件冒泡)

mouseout()：鼠标离开触发(会事件冒泡)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box2"></div>
    </div>
    
    <script>
        $("#box").mouseover(function(){
            console.log("鼠标进入了box");
        });
        $("#box").mouseout(function(){
            console.log("鼠标离开了box");
        })
        $("#box2").mouseover(function(){
            console.log("鼠标进入了box2");
        });
        $("#box2").mouseout(function(){
            console.log("鼠标离开了box2");
        })
    </script>
</body>
</html>

mousemove()：

鼠标移动触发该事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        $("#box").mousemove(function(){
            console.log("鼠标移动了");
        });
    </script>
</body>
</html>

        表单事件：

focus()：

获得焦点时触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <script>
        $("#username").focus(function(){
            console.log("获得焦点");
        })
    </script>
</body>
</html>

blur()：

 失去焦点时触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <script>
        $("#username").focus(function(){
            //获得焦点时触发事件
            console.log("获得焦点");
        })
        $("#username").blur(function(){
            //失去焦点时打印输入框内容
            console.log($("#username").val());
        })
    </script>
</body>
</html>

change()：

输入框内容改变过后失去焦点或输入回车触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <script>
        $("#username").change(function(){
            //当触发该事件时输出输入框中的内容
            console.log($("#username").val());
        })
    </script>
</body>
</html>

submit()：

submit事件只能给form表单设置，触发该事件将会提交数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <form action="">
        username:<input type="text" id="username"><br>
        password:<input type="password" id="pwd">
        <input type="submit" id="sub" value="提交">
    </form>
    <script>
        $("#sub").click(function(){
            //当点击提交按钮后，触发form表单的submit事件
            $("form").submit(function(){
                alert("提交了数据");
            })
        })
    </script>
</body>
</html>

 

        键盘事件：

keydown()：

当键盘按下触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <script>
        $("#username").keydown(function(){
            console.log("键盘按下");
        })
    </script>
</body>
</html>

keyup()：

键盘抬起触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <script>
        $("#username").keyup(function(){
            console.log("键盘抬起");
        })
    </script>
</body>
</html>

keypress()：

键盘按下触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <script>
        $("#username").keypress(function(){
            console.log("触发keypress");
        })
    </script>
</body>
</html>

        浏览器事件：

resize()：

当页面两端大小改变时，触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

</head>
<body>
    <div id="box1"></div>
    <script>
        var box1 = $("#box1")
        $(window).resize(
            //当页面两端大小发生改变时，触发该事件
            function(){
                if($(window).width() > 800){
                    //当页面两端大小>800px是，box1显示
                    box1.css("display","block");
                }else{
                    //否则消失
                    box1.css("display","none");
                }
            }
        )
    </script>
</body>
</html>

scroll()：

当页面滚动时触发该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-3.6.1.min.js"></script>
    <style>
        h3{
            height: 500px;
        }
    </style>
</head>
<body>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <h3>标题</h3>
    <script>
        $(window).scroll(
            function(){
                console.log($(window).scrollTop());
            }
        )
    </script>
</body>
</html>

        Event对象的属性

target：

target谁触发了该事件指向谁

currentTarget：

currentTarget当事件冒泡到谁身上就指向谁

<html>

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        #box1 {
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="box1">
        <div id="box2">
            <button id="btn">按钮</button>
        </div>
    </div>
    <script>
        //e.target谁触发了该事件指向谁
        //e.currentTarget当事件冒泡到谁身上就指向谁
        $("#box1").click(
            function (e) {
                console.log(e.target);
                console.log(e.currentTarget);
            }
        )
        $("#box2").click(
            function (e) {
                console.log(e.target);
                console.log(e.currentTarget);
            }
        )
        $("#btn").click(
            function (e) {
                console.log(e.target);
                console.log(e.currentTarget);
            }
        )
    </script>
</body>

</html>

        Event对象的方法

preventDefault()：

阻止浏览器默认行为 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <script>
        $("a").click(
            function(e){
                //停止浏览器默认事件
                e.preventDefault();
                console.log("点击了,但我不跳咋滴");
            }
        )
    </script>
</body>
</html>

stopPropagation()：

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <script>
        $("#box2").click(
            //当点击子级box2，不再事件冒泡到父级box1
            function(e){
                e.stopPropagation();
                console.log("点击了box2");
            }
        )
        $("#box1").click(
            function(){
                console.log("点击了box1");
            }
        )
    </script>
</body>
</html>

遍历：

        map()和each()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        $("li").map(
            //第一个参数：代表每个元素的下标(index)
            //第二个参数：代表每个元素
            function(index,ele){
                //map方法和each方法获得到的都是js对象
                console.log(ele);
            }
        );
        $("li").each(
            //第一个参数：代表每个元素的下标(index)
            //第二个参数：代表每个元素
            function(index,ele){
                //map方法和each方法获得到的都是js对象
                console.log(ele);
            }
        );
        
    </script>
</body>
</html>

js对象和jQuery对象的互转：

        为什么js对象和jQuery对象需要互转？

因为js对象和jQuery对象的方法不能互相使用

        js对象 - > jQuery对象($(js对象))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        //js -> jQuery
        console.log($(document.getElementsByTagName("div")[0]));
    </script>
</body>
</html>

        jQuery对象 - > js对象

1、通过get()，获取一个js对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
    <script>
        //输出第一个对应的li元素(js对象)
        console.log($("li").get(0));
        
    </script>
</body>
</html>

2、通过map()、each()获取多个js对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        $("li").map(
            //第一个参数：代表每个元素的下标(index)
            //第二个参数：代表每个元素
            function(index,ele){
                //map方法和each方法获得到的都是js对象
                console.log(ele);
            }
        );
        $("li").each(
            //第一个参数：代表每个元素的下标(index)
            //第二个参数：代表每个元素
            function(index,ele){
                //map方法和each方法获得到的都是js对象
                console.log(ele);
            }
        );
        
    </script>
</body>
</html>

动画：

        show()和hide()

.show()

执行显示动画

.hide()

执行隐藏动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <button id="show">show</button>
    <button id="hide">hide</button>
    <script>
        var show = $("#show");
        var hide = $("#hide");
        var div = $("div");
        show.click(
            function(){
                //动画一秒后显示div
                div.show(1000);
            }
        )   
        hide.click(
            function(){
                //动画一秒隐藏div
                div.hide(1000);
            }
        )
    </script>
</body>
</html>

        fadein()和fadeout()

.fadeIn()

通过淡入的方式显示匹配元素。

.fadeOut()

通过淡出的方式显示匹配元素

<head>
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <button id="fadein">淡入</button>
    <button id="fadeout">淡出</button>
    <script>
        var fadein = $("#fadein");
        var fadeout = $("#fadeout")
        fadein.click(
            function(){
                $("div").fadeIn(2000);
            }
        )
        fadeout.click(
            function(){
                $("div").fadeOut(2000);
            }
        )
    </script>
</body>

        slideDown()和slideUp()

.slideDown()

用滑动动画显示一个元素

.slideUp()

用滑动动画隐藏一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.1.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <button id="up">up</button>
    <button id="down">down</button>
    <script>
        var show = $("#up");
        var hide = $("#down");
        var div = $("div");
        show.click(
            function(){
                //动画一秒后划出div
                div.slideDown(1000);
            }
        )   
        hide.click(
            function(){
                //动画一秒隐藏div
                div.slideUp(1000);
            }
        )
    </script>
</body>
</html>

        自定义动画animate()

自定义动画

语法:

  选择器.animate(

  {

    动画所执行的操作

   }, 执行时间);

);

        

c_mmmmmmm
关注
jQuery3.6.1.js
10-07
jQuery3.6.1.js
JavaScript -- 12. jQuery
Qlz的博客
12-08 677
jQuery 1 jQuery简介 2 使用jQuery 2.1 下载jQuery 2.2 引用jQuery 3 jQuery的核心函数 3.1 作为工具类使用 3.2 作为函数使用 3.2.1 将一个函数作为$的参数 3.2.2 将选择器字符串作为参数 3.2.3 将DOM对象作为参数 3.2.4 将html代码作为参数 4 jQuery对象 4.1 获取DOM对象 4.2 隐式迭代 4.3 链式调用 5 jQuery常用方法 5.1 jQuery对象复制 5.2 添加容器 5.3 添加子元素 6 事件的
jQuery 样式操作
LUXCC6的博客
12-02 355
一、操作css方法 二、设置类样式方法
升级到 jQuery 3.6.1 遇见的几个坑以及应对方法
Musicwind的专栏
11-24 4966
升级到 jQuery 3.6.1 之后，可能面对的不兼容问题以及对应的解决之道。
【免费下载】 jQuery 3.6.1 下载资源介绍
gitblog_06598的博客
09-20 610
jQuery 3.6.1 下载资源介绍 【下载地址】jQuery3.6.1下载资源介绍 jQuery 3.6.1 下载资源介绍本仓库提供 jQuery 3.6.1 版本的下载资源，适用于前端开发者在项目中使用 项目地址: http...
jquery总结
10-24
**2.3 优点总结** 通过以上代码可以看出，jQuery在以下方面展现出其独特的优势： - **灵活的选择器**：jQuery提供了类似于CSS的选择器，可以快速定位DOM元素。 - **隐式迭代**：在jQuery中，无需手动编写`for`循环...
JQuery入门，JQuery总结
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
jQuery总结1
08-03
6、总结jQuery是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理和动画制作。它的核心优势在于提高了开发效率，降低了代码复杂性，同时具有良好的浏览器兼容性。jQuery通过其独特的选择器语法，使得选取...
jquery总结学习资料JQuery总结
10-16
**jQuery 总结** 在实际开发中，jQuery 可以极大地提高工作效率，减少代码量，使得动态交互和界面美化变得更加简单。然而，随着 ES6 和现代前端框架的崛起，如 React 和 Vue，jQuery 在某些场景下可能不再是首选。...
2022Jquery总结.pptx
01-25
本文将深入探讨2022年jQuery的总结，包括其概念、优点、基本使用方法以及与DOM对象的区别。 首先，jQuery是由John Resig于2006年创立的，它是最受欢迎的JavaScript库之一。jQuery的设计理念是"write less, Do more...
jquery-3.6.1.min.js
11-07
jquery-3.6.1.min.js
struts2-jquery-plugin-3.6.1.jar
10-07
struts2-jquery-plugin
基于最新版Bootstrap 5 前端开发框架 和 最新版jQuery v3.6.1 的JavaScript框架的图书管理系统
LittleSnail的博客
10-03 1166
基于最新版Bootstrap 5 前端开发框架 和 最新版jQuery v3.6.1 的JavaScript框架的图书管理系统
jQuery学习笔记
qq_30166465的博客
11-11 682
建议搭配b站动力节点的jQuery课程食用
提升前端开发效率的利器：jQuery 3.6.1
最新发布
gitblog_06536的博客
09-20 913
提升前端开发效率的利器：jQuery 3.6.1 【下载地址】jQuery3.6.1下载资源介绍 jQuery 3.6.1 下载资源介绍本仓库提供 jQuery 3.6.1 版本的下载资源，适用于前端开发者在项目中使用 项目地址:...
【jquery-3.6.1下载】
qq_53076698的博客
12-10 603
jquery-3.6.1 下载（里边的jquery.txt文件直接使用即可）
jQuery基础
weixin_57575133的博客
11-01 2776
jQuery是一个轻量级的JavaScript框架，是继Prototype之后出现的非常优秀的JavaScript核心库。jQuery的设计宗旨是“Writer Less，Do More”，即倡导写更少的代码，做更多的事情。
CSS基础二
m0_64100645的博客
07-28 352
1.组成content（物品）-->padding（填充物）-->border（包装盒）-->margin（盒子与盒子之间的间距）2.content内容区域由width，height3.padding内边距（内填充）1）只写一个值30px（上下左右）写两个值30px40px（上下、左右）2）单一样式只能写一个值padding-left4.margin外边距（外填充）...
"jQuery总结1：入门函数、优势及基本介绍
总结： 本文主要介绍了jQuery的...最后总结了本文的内容，再次强调了jQuery的优势，并鼓励读者继续深入学习和使用jQuery框架来提高开发效率。同时也提到了jQuery的开源特性，任何人都可以参与贡献代码或使用该框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值