JQ基础笔记

最新推荐文章于 2024-03-19 18:52:19 发布

皮卡丘#￥%3￥&

最新推荐文章于 2024-03-19 18:52:19 发布

阅读量136

点赞数

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

本文链接：https://blog.csdn.net/weixin_47280394/article/details/127030261

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、jQuery基本使用

1. JS库

JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
jQuery 是一个快速、简洁的 JavaScript 库
学习jQuery本质：就是学习调用这些函数（方法）

2. jQuery的入口函数

// 第一种方法 推荐

$(function(){
    ...   // 此处是页面DOM加载完成的入口 
})

// 第二种方法
$(document).ready(function(){
    ... //此处是页面DOM加载完成的入口
})

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕，jQuery 帮我们完成了封装
相当于原生 js 中的 DOMContentLoaded
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css 文件、图片加载完毕才执行内部代码

3. jQuery的顶级对象$

$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替
$是 jQuery 的顶级对象，相当于原生 JavaScript 中的 window。
把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

4. jQuery对象和DOM对象**

DOM对象：用原生js获取过来的对象
jQuery对象: 用jQuery方式获取过来的对象是jQuery对象。
- 本质：通过$把DOM元素进行了包装(伪数组形式存储)
jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript的属性和方法（重点）
- DOM对象：var myDiv = document.querySelector(‘div’);
- jQuery对象： $(‘div’);

<body>
    <div></div>
    <span></span>
    <script>
        // 1. DOM 对象:  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div');   // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象:用jquery方式获取过来的对象是jQuery对象。 
		//    本质:通过$把DOM元素进行了包装
        $('div'); 		// $('div')是一个jQuery 对象
        $('span'); 		// $('span')是一个jQuery 对象
        console.dir($('div'));
        // 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>
</body>

5. DOM 对象转换为 jQuery 对象

语法：$(DOM对象)
$(‘div’)

6. jQuery 对象转换为 DOM 对象

第一种方法：$(‘video’)[0].play()

$(‘div’)[index] index是索引号
第二种方法
$(‘div’).get(index) index是索引号

<body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们直接获取视频，得到就是jQuery对象
        // $('video');
        // (2) 我们已经使用原生js 获取过来就是DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo).play();  jquery里面没有play 这个方法


        // 2.  jQuery对象转换为DOM对象
        // myvideo.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>

二、jQuery常用API

1. jQuery选择器

1.1 jQuery基础选择器

console.log($('.nav'));

1.2 jQuery层级选择器

console.log($('ul li'));

1.3 jQuery隐式迭代

遍历内部DOM元素(伪数组形式存储)的过程就叫做 隐式迭代
简单理解: 给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

<body>
    <div>粉色</div>
    <div>粉色</div>
    <div>粉色</div>
    <script>
        $('div').css('background-color', 'pink');
    </script>
</body>

1.4 jQuery筛选选择器

$(function () {
            console.log($('ul li:first'));
            $('ul li:last').css('color', 'blue');
            $('ul li:eq(2)').css('color', 'red');
            $('ol li:odd').css('color', 'yellow');
            $('ol li:even').css('color', 'pink');
        })

1.5 jQuery筛选方法

$(function () {
            // 1.父 返回的是亲爸爸，不返回爷爷
            console.log($(".son").parent());
            // 2.子
            // 2.1 返回亲儿子，相当于子代选择器
            // $(".nav").children("p").css("color", "red");
            // 2.2 返回所有的孩子，包括孙子
            $(".nav").find("p").css("color", "blue");
            // 3.兄弟 除自己以外的所有兄弟
            $(".item").siblings("li").css("color", "pink");
            // 4.选择第n个
            $("ol li").eq(2).css("color", "yellow");
            // 相当于$("ol li:eq(2)").css("color", "yellow");
        })

1.6 jQuery排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

1.7 jQuerty链式编程

$(this).css("background-color", "pink").siblings().css("background-color", "");

2. jQuery样式操作

2.1 jQuery修改样式css方法

参数只写属性名, 则返回属性值
参数是属性名, 属性值, 逗号分隔, 是设定一组样式。属性需要加引号, 值是数字可不加单位和引号
参数可以是对象形式, 方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号

$(function () {
            // 操作css方法
            // 1.参数只写属性名, 则返回属性值
            console.log($("div").css("width"));
            // 2.参数是属性名, 属性值, 逗号分隔, 是设定一组样式。属性需要加引号, 值是数字可不加单位和引号
            $("div").css("width", "200px");
            // 3.参数可以是对象形式, 方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
            // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
            $("div").css({
                width: 400,
                height: 400,
                backgroundColor: "yellow"
            })
        })

2.2 jQuery设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点

$(function () {
            $("div").click(function () {
                // 1.添加类
                // $(this).addClass("current");
                // 2.删除类
                // $(this).removeClass("current");
                // 3.切换类
                $(this).toggleClass("current");
            })
        })

2.3 jQuery类操作和className区别

原生 JS 中的 className 会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作，不影响原先的类名

3. jQuery效果

3.1 显示与隐藏效果

show([speed,[easing],[fn]])
- 参数都可以省略，无动画直接显示。
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
建议：平时一般不带参数，直接显示隐藏即可

$(function () {
            $("button").eq(0).click(function () {
                $("div").show(1000);
            })
        })
        $(function () {
            $("button").eq(1).click(function () {
                $("div").hide();
            })
        })
        $(function () {
            $("button").eq(2).click(function () {
                $("div").toggle();
            })
        })

3.2 滑动效果

$(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);


            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()

                $("div").slideToggle(500);

            });

        });

3.3 事件切换

hover([over,]out)
- over: 鼠标移到元素上要触发的函数(相当于mouseenter)
- out: 鼠标移出元素要触发的函数(相当于mouseleave)
- 如果只写一个函数，则鼠标经过和离开都会触发它

$(".nav>li").hover(function () {
                $(this).children("ul").stop().slideToggle();
            })

3.4 淡入淡出及调整透明度效果

$(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);

            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);

            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);

            });
        });

3.5 自定义动画方法

animate(params,[speed],[easing],[fn])
- params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。
- 其余参数都可以省略。

$(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 500,
                    top: 500,
                    width: 200,
                    height: 200,
                    opacity: .4
                }, 1000)
            })
        }

4. jQuery属性操作

4.1 元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。
获取

$("a").prop("href");

设置

$("a").prop("title","我们都挺好~");

4.2 元素自定义属性值attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。
获取

$("div").attr("index");

设置

$("div").attr("index",4);

4.3 数据缓存data()

data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
附加数据语法

$("span").data("uname","andy");

获取数据语法

$("span").data("uname");
// 这个方法获取data-index h5自定义属性，不用写 data- 返回的是数字型(2)
$("div").data("index");

5. jQuery文本属性值

5.1 普通元素内容html()

相当于原生innerHTML

console.log($("div").html());
 $("div").html("123");

5.2 普通元素文本内容text()

相当于原生innerText

console.log($("div").text());
$("div").text("111");

5.3 获取设置表单值 val()

console.log($("input").val());
$("input").val("666");

6. jQuery元素操作

6.1 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历
语法一

// 语法一
$("div").each(function(index,domEle){xxx;})

each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
里面的回调函数有2个参数: index是每个元素的索引号,demEle是每个DOM元素，不是jQuery对象
所以想要使用jQuery方法，需要给这个dom元素转换为jquery对象 $(domEle)

$("div").each(function (i, domEle) {
                console.log(i);
                $(domEle).css("color", a[i]);
                // parseInt()将字符型转化成数值型
                sum += parseInt($(domEle).text());

            })

语法二

// 语法二
$.each(Object,function(index,element){xxx;})

$.each() 方法可用于遍历任何对象，主要用于数据处理,比如数组,对象
里面的函数有2个参数: index 是每个元素的索引号,element遍历内容

var a = ["red", "blue", 'yellow'];
        $(function () {
            // 遍历数组
            $.each(a, function (i, ele) {
                console.log(i);
                console.log(ele);
            })

            // 遍历对象
            $.each({
                name: "zzj",
                age: 18
            }, function (i, ele) {
                console.log(i);
                console.log(ele);
            })
        })

6.2 创建元素

// 创建元素
            var li = $("<li>2</li>");
            var div = $("<div>后来的</div>")

6.3 添加元素

内部添加
- 把内容放入匹配元素内部最后面：element.append("内容")
- 把内容放入匹配元素内部最前面：element.prepend("内容")
外部添加
- 外部添加把内容放到目标元素后面：element.after("内容")
- 外部添加把内容放到目标元素前面：element.before("内容")
关系
- 内部添加元素，生成之后，它们是父子关系
- 外部添加元素，生成之后，它们是兄弟关系

// 添加元素
            //   内部添加
            $("ul").append(li);
            // $("ul").prepend(li);
            //   外部添加
            // $(".text").before(div);
            $(".text").after(div);

6.4 删除元素

删除匹配的元素(本身)：element.remove()
删除匹配的元素集合中所有的子节点：element.empty()
清空匹配的元素内容：element.html("")

// 删除元素
            // $("ul").remove();
            // $("ul").empty();
            $("ul").html("");

remove 删除元素本身
empt() 和 html(“”) 作用等价，都可以删除元素黎曼的内容，只不过 html 还可以设置内容。

7. jQuery尺寸

在这里插入图片描述

以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位

8. jQuery位置操作

8.1 offset() 设置或获取元素偏移

offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
该方法有两个属性 left、top.
- offset().top用于获取距离文档顶部的距离，
- offset().left 用于获取距离文档左侧的距离
可以设置元素的偏移：offset({ top: 10, left: 30 });

$(".son").offset();
$(".son").offset().top;

$(".son").offset({
    top: 200,
    left: 200
});

8.2 position()获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
该方法有2个属性 left、top。
- position().top 用于获取距离定位父级顶部的距
- position().left 用于获取距离定位父级左侧的距离
这个方法只能获取偏移，不能设置偏移

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
        })
    </script>
</body>

8.3 scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧

scrollTop()方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>

三、jQuery事件

1. jQuery事件注册

$("div").click(function() {
                $(this).css("background", "purple");
            });

2. jQuery事件处理

2.1 事件处理 on()绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
on() 方法优势1 ：可以绑定多个事件，多个处理事件处理程序。

 $("div").on({
                mouseenter: function () {
                    $(this).css("background", "skyblue");
                },
                click: function () {
                    $(this).css("background", "purple");
                },
                mouseleave: function () {
                    $(this).css("background", "pink");
                }
            });

如果事件处理程序相同：

$("div").on("mouseenter mouseleave", function () {
                $(this).toggleClass("current");
            })

on()方法优势2 ：可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$("ul").on("click", "li", function () {
                alert(11);
            })
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

on()方法优势3：动态创建的元素，click()没有办法绑定事件，on() 可以给未来动态生成的元素绑定事件

$("ol").on("click", "li", function () {
                alert(22);
            });
            var li = $("<li>222</li>");
            $("ol").append(li);

2.2 事件处理 off()解绑事件

off() 方法可以移除通过on()方法添加的事件处理程序。

$("div").off(); // 这个是接除了div身上的所有事件
$("div").off("click");  //这个是解除了div身上的点击事件
$("ul").off("click","li"); //这个是解绑事件委托

如果有些事件只想执行一次就不再执行，可以使用one() 方法

$("p").one("click",function(){
    alert(11);
})

2.3 自动触发事件trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

// 1.元素.事件()
$("div").click();

// 2.元素.trigger("事件")
$("div").trigger("click");

// 3.元素.triggerHandler("事件") 不会触发元素的默认行为
$("div").triggerHandler("click");

triggerHandler 模式不会触发元素的默认行为，这是和前面两种的区别。

3.jQuery事件对象

事件被触发，就会有事件对象的产生
阻止默认行为: event.preventDefault() 或者 return false
阻止冒泡 : event.stopPropagation()

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");

            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</head>

<body>
    <div></div>
</body>

四、jQuery其他方法

1. jQuery对象拷贝

$.extend([deep],target,object1,[objectN])

deep:如果设为true为深拷贝，默认为false 浅拷贝
target: 要拷贝的目标对象
object1:待拷贝到第一个对象的对象
objectN:待拷贝的第N个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址),修改目标对象不会影响被拷贝对象
深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起

<script>
        var targetObj = {
            name: 'L',
            msg: {
                sex: 'man'
            }
        }
        var obj = {
            name: 'zzj',
            xh: 21008,
            msg: {
                age: 18
            }
        }

        // 1.浅拷贝，对于复杂数据类型，复制地址，如果修改会影响原来的对象
        $.extend(targetObj, obj);
        targetObj.msg.age = 20;
        console.log(targetObj);
        console.log(obj);

        // 2.深拷贝，直接复制内容，如果修改不会影响原来的对象
        $.extend(true, targetObj, obj);
        targetObj.msg.age = 20;
        console.log(targetObj);
        console.log(obj);
    </script>

2. jQuery多库共存

jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

解决方案：
1.把里面的 $ 符号统一改为 jQuery。 比如 jQuery(’‘div’’)
2.jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            // 2. 让jquery 释放对$ 控制权 让用自己决定
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        })
    </script>
</head>

<body>
    <div></div>
    <span></span>
</body>