JQuery学习笔记

最新推荐文章于 2024-09-20 17:38:49 发布

知识汲取者

最新推荐文章于 2024-09-20 17:38:49 发布

阅读量1.2k

点赞数 4

分类专栏：前端开发 # JavaScript 文章标签： jquery javascript 学习

该文章版权属于知识汲取者，未经允许请勿转载

本文链接：https://blog.csdn.net/qq_66345100/article/details/126453329

版权

前端开发同时被 2 个专栏收录

16 篇文章 4 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

文章目录

JQuery学习笔记

JQuery学习笔记

1、JQuery概述

1.1 什么是JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototpe 之后又一个优秀的JavaScript代码库（框架）于2006年1月由JohnResig发布。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装¹JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

简单来讲JQuery就是一个JS的代码库（基本是函数），它存在的目的就是减少代码量。

常见的JS库：JQuery、Prototpe²、YUI³、Dojo⁴、Ext JS⁵、移动端的zepto

JQuery下载（引用）网址：👉这里

JQueryAPI：👉这里

前端小Demo：👉这里

1.2 JQuery的优点和作用

优点：快速、高效、简洁(轻量级)、灵活、兼容性强、链式编程、隐式迭代、免费开源、支持插件化开发
作用：简化DOM操作、事件处理、动画设计、Ajax交互（大大提高了前端人员的开发速度）

2、JQuery的基本使用

2.1 获取节点

通过$('') 来获取网页中的DOM节点

获取相应标签名的DOM节点 $('tagName')
获取相应类名的DOM节点 $('.className')
获取相应id名的DOM节点 $('#idName')

2.2 入口函数

相当于原生JS中的DOMContentLoaded事件。

一般我们再用JQuery的时候都会使用入口函数，入口函数的作用就是为了提高用户体验，防止报错。

我们都知道，网页加载是需要时间的，如果网页未加载完毕，我们就进行一些操作，可能会达不到我们希望的效果，严重的还可能会报错，所以我们的一些操作是需要在HTML文档加载完毕后，再执行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>页面DOM加载完毕后自动执行JS代码</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<style>
    div {
        height: 100px;
        width: 100px;
        background-color: #000;
    }
</style>
<body>
    <script>
        /* 原生JS写法 */
        document.addEventListener('DOMContentLoaded', function() {
            function hide(obj) { //原生js中没有hide方法，所以自己写一个
                obj.style.display = 'none';
            }
            var div = document.querySelector('#div');
            hide(div);
        });
        /* 1.传统的JQuery写法 */
        $(document).ready(function() {
            $('#div').hide();
        });
        /* 2.现在更常用的简单写法  */
        $(function() {
            $('#div').hide();
        });
        /* onload事件效果和它们一样但有区别 */
        window.onload = function() {
            function hide(obj) { //原生js中没有hide方法，所以自己写一个
                obj.style.display = 'none';
            }
            var div = document.querySelector('#div');
            hide(div);
        };
    </script>
    <div id="div"></div>
</body>
</html>

备注：

onload事件和DOMContentLoaded事件的区别：

onload事件：需要页面的html、css、js、图片等资源都已经加载完之后才会触发 onload 事件，页面需要完全加载才会触发onload事件
DOMContentLoaded事件：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。即页面中的DOM树已经构建完毕就会触发DOMContentLoaded事件

两者相比较，显然DOMContentLoaded事件触发的延迟是比onload事件要小的

2.3 JQuery的顶级对象$

$是JQuery的别称，两者等价
$是JQuery中的顶级对象（地位等同于原生JS中的window）。

只有通过$（或JQuery）将DOM节点包装成JQuery对象才能使用JQuery中的方法。

原生JS获取的DOM节点是DOM对象， console.log(document.querySelector('#div'));结果如下：

JQuery获取的DOM节点是JQuery对象， console.log($('div'));结果如下：

两者不能搞混了，比如：DOM对象中有的style方法，JQuery对象没有；JQuery对象有的hide方法，DOM对象没有

DOM对象和JQuery对象的相互转换：
- DOM对象转换成JQuery对象 $(DOMd对象)
- JQuer对象转换成DOM对象
  - 方法一：$('DOM对象')[index]
  - 方法二：$('DOM对象').get(index)
  和document.querySelectorAll()的选中规则一样，index的含义：若存在多个相同的DOM节点，index表示是第几个（从0开始计数）；若只有一个就填0（填其他的数字是undefined，用undefined去调用DOM对象中的方法会报错）
  
  所以当DOM对象是idName时，即：$('.idName')，就默认index为0，因为id具有唯一性

3、JQuery基础语法

3.1 隐式迭代、排他思想、链式编程

隐式迭代

隐式迭代：就是遍历内部DOM元素(伪数组形式存储)的过程。简单来讲就是把匹配的所有元素在函数的内部进行循环。它能够简化我们的操作，方便我们调用。

具体例子：

$('div').css('background', 'green');
/*
再css方法内部循环遍历所有div节点，改变所有div标签的背景色
有点像css中的标签选择器，也有点像原生JS中的document.querySelectorAll('');
*/

排他思想

排他思想：给当前元素设置样式时，取消其他兄弟元素的样式

实现方法：隐式迭代 + 选择器

<!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>排他思想小练习</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button>1</button><button>2</button><button>3</button><button>4</button>
    <button>5</button><button>6</button><button>7</button><button>8</button>
    <script>
        $(function() {
            $('button').click(function() { //利用隐式迭代给所有的按钮添加点击事件
                $(this).css('background', 'red');//哪个按钮触发点击事件就给哪个添加样式
                $(this).siblings('button').css('background', '');//添加样式的同时取消其他兄弟元素的样式
            });
        })
    </script>
</body>
</html>

拓展：$(this).index()方法能获取触发事件元素的索引号

链式编程

链式编程：就是将多个方法（函数）通过某种方式链接在一起，使多个逻辑块能按流程逐步执行。

其能够实现的原因是因为在JS中，每次使用一个对象来调用它内部的方法，返回值仍为该对象本身，从而使得后面的方法能够被继续调用，如此就可以形成一条链。

上面排他思想的小练习的JQuery代码通过链式编程会变得更加简洁

$(this).css('background', 'red').siblings('button').css('background', '');

3.2 选择器

$('选择器') ，其实里面就是加一个CSS选择器

3.2.1 基础选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-msjqUh2W-1655105396097)(D:/用户/ghp/Pictures/Typora/image-20220612232023620.png)]

3.2.2 层级选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0x710oLT-1655105396098)(D:/用户/ghp/Pictures/Typora/image-20220612232303555.png)]

3.2.3 筛选选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wcXrmBEP-1655105396099)(D:/用户/ghp/Pictures/Typora/image-20220613081114492.png)]

3.2.4 筛选方法

<!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>筛选方法小练习</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <style>
        .nav {
            height: 18px;
            width: 1000px;
            background-color: rgba(255, 255, 255, .5);
        }   
        ul {
            float: left;
            width: 20px;
            height: 24px;
        }
        ul li {
            width: 18px;
            border: 1px solid red;
            list-style: none;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        $(function() {
            /* 隐藏除第一个li外的其他li,实现方法是隐藏索引为偶数的li之后的同辈节点 */
            $($('li:even')).nextAll().hide();
            /* 鼠标悬浮在哪个ul，就显示悬浮ul中所有的li */
            $('.nav>ul').mouseover(function() {
                $(this).children('li').show(); //this表示当前触发了mouseover的ul
            });
            /* 鼠标离开ul,就立即隐藏除第一个li外的其他li */
            $('.nav>ul').mouseout(function() {
                $($('li:even')).nextAll().hide();
            });
        })
    </script>
</body>
</html>

3.3 操作CSS样式

3.3.1 css()方法修改CSS样式

通过设置css()中的参数值来直接修改相应DOM节点的CSS样式

参数只有属性名，则返回属性值

$(this).css('height');//返回选中节点的高度（含单位px）

参数是属性名 和 属性值，可以设置元素的单个CSS样式
```
$(this).css('color','red');
```

参数可以是对象的形式，可以同时设置元素的多个CSS样式

$('div').css({
                height: 100,//可以不带单位
                width: 100 + 'px',
                backgroundColor: 'red'//最后一个可以不打逗号，遇到复合属性采用驼峰命名
            });

3.3.2 样式操作类修改CSS样式

通过为DOM节点添加相应的类名，从而间接修改样式

添加类

$('div').addClass('a');//a为待添加的样式的类名，注意类名前不要加.

移除类

$('div').removeClass('a');//a为待移除的样式的类名

切换类
```
$('div').toggleClass('a');
```

拓展：原生JS中className于addClass的区别

className会直接覆盖掉原来的类名以及它的所有样式，而addClass不会覆盖，它相当于是追加类名，如果追加的类名和原来类名相同，则继承原来类名中的所有样式，同时新增原来没有的样式（相同的样式以追加的为准）

3.4 操作元素

3.4.1 操作元素属性

修改或获取元素⁶固有的属性⁷值 prop()

prop('属性名');//获取属性值
$('a').prop('href');
prop('属性名','属性值');//修改属性值
$('a').prop('href','baidu.com');

修改或获取元素自定义的属性值 attr()

<div data-index='1'></div>

attr('属性名');//类似getAttribute()
$('div').attr('data-index');//获取自定义属性data-index的值
$('div').attr('属性名','属性值');//类似setAttribute()
$('div').attr('data-index','2');//修改自定义属性index的值

用prop()和attr()获取自身不匹配的属性时，会得到undefined

数据缓存 data()

data()是将数据存到内存中，并不会修改DOM元素的结构，浏览器点击检查无法查看到，但是可以打印出来，一旦页面刷新存的数据会被移除

$('div').data('userName',[……]);//可以一次存多个数据
console.log($('div').data('userName'));//打印出userName
//用于获取h5中的data-属性时，可以省略data
$('div').data('index');//和attr方法获取的结果是一样的

3.4.2 操作元素内容

获取或设置普通元素的内容 html()

html();//获取元素的内容，打印时连同标签一起打印出来
html('内容');//设置元素的内容，相当于原生js中的innerHTML()

获取或设置普通元素的文本内容 text()

text();//获取元素的文本内容，不含标签
text('内容');//设置元素的文本内容，相当于原生js中的innerText()

获取表单值 val()

val();//获取元素的表单中的值
val('内容');//设置表单的value值，相当于原生js中的value

3.4.3 元素的遍历、创建、添加、删除

1.元素的遍历

在隐式迭代中只能对同类型的元素进行同样的操作，如果想对不同的元素进行不同的操作就需要使用each()进行遍历操作

$('div').each(function(index,domEle){});

index：表示div的索引号，第几个div（从0开始计数）
domEle：表示索引号对应的div节点，注意是DOM节点，要使用JQuery对象中的方法，需要先转换

//如果要给网页中三个div设置三种不同的颜色
var arr = ['red','green','blue'];
$('div').each(function(i,domEle){
    $(demEle).css('color',arr[i]);
});

$.each()：主要用来处理数据（比如数组，DOM节点。能遍历的范围更广），each()主要用来遍历DOM节点

$.each(object,function(index,ele){});

index：表示div的索引号，第几个div（从0开始计数）
ele：表示索引号对应的object的值

//同样使用$.each()设置颜色，效果和each()是一样的
$.each(arr,function(i, ele){
    $('div').css('color',ele);//ele表示数组的值
});

each()类似于原生JS中的for in，而$.each()类似于原生JS中的for each

2.元素的创建

var li = $('<li>这是要给新创建的li标签</>');

3.元素的添加

element.append();//将待添加的元素添加到元素内部的后面，类似于原生JS中的appendChild()
element.prepend();//将待添加的元素添加到元素内部的前面
element.after();//将待添加的元素添加到元素外部的后面
element.before();//将待添加的元素添加到元素外部的后面

//在网页中ul中新增一个li标签
var li = $('<li>这是要给新创建的li标签</>');
$('ul').append(li);//新增的li在ul中（存在父子关系），且在最后
element.before();//新增的li在ul的外面（存在兄弟关系），且紧接着挨在后面

4.元素的删除

$('div').remove;//删除div,以及div的子节点
$('div').empty();//只删除div的子节点
$('div').html('');//效果和empty()是一样的

3.4.4 操作元素的尺寸、位置

1.操作元素尺寸的方法：

在这里插入图片描述

备注：（针对表中前6个方法）

括号不带参数时，获取相应的值，返值是数值型（不带单位）
括号中可以带参数，参数为数值型（不带单位），改变相应的值，方法中含width就改变width，方法中含height就改变height

2.操作元素位置的方法：

语法	用法
offset()	获取选中元素相对于浏览器窗口原点的偏移坐标值（与父级没有关系）
position()	获取选中元素相对于带有定位的父级元素的偏移坐标值
scrollTop()/scrollLeft()	获取选中元素被卷去的top/top的值

备注：

offset()方法返回的结果是对象，对象中含坐标值
```
//还可以单独获取left、top
$('div').offset().top;//获取的结果就是一个数字
```
里面可以加对象形式的参数来设置left、top（在设置left、top时要加定位）
```
$('div').offset({
    left:100,
    top:100
});
```
position()方法只能获取值（获取的值和offset()一样），不能设置值。当选中元素的父级都没有定位，就以文档（浏览器窗口原点）为主，这个特点类似于绝对定位
scrollTop()/scrollLeft()方法和原生的几乎一样

3.5 操作对象

对象拷贝：

对象的拷贝也可称作对象的继承，对象的复制，对象的合并

$.extend([deep],target,object1……,[objectn])

deep：取值false、true。false表示浅拷贝，true表示深拷贝（默认是false）

深拷贝和浅拷贝的区别主要在于：复杂数据类型（例如对象）的拷贝
- 浅拷贝：只是object对象中复杂数据类型的地址赋给了target，两者本质上是同一个对象，此时去修改object中的复杂数据会影响到target，反之亦然。遇到相同的复杂数据类型会覆盖掉target原本的
- 深拷贝：开辟一个新的空间，完全克隆object中的复杂数据类型，两者不能相互影响了。遇到相同的复杂数据，不会发生覆盖
target：拷贝到的对象
object……：被拷贝的对象，可以同时将多个object拷贝给target

备注：拷贝相当于是取并集，对于不同数据，直接拷贝；对于相同的数据，后面拷贝被对象中的数据会覆盖掉前面对象的数据。

var tObj = {
    id: 1,
    name: 'zhangshan'
};
var obj1 = {
    id: 2,
    class: 2,
};
var obj2 = {
    id: 3,
    value: 3
};
$.extend(tObj, obj1, obj2);
console.log(tObj);

在这里插入图片描述

4、动画

4.1 显示和隐藏

show([speed],[easing],[fn]);//显示
hide([speed],[easing],[fn]);//隐藏
toggle([speed],[easing],[fn]);//显示和隐藏的切换

参数可以省略，表示无动画显示。通常用来：显示设置了display:none;的元素或者设置了hide()的元素
speed：设置动画的时长。预定义值有，slow、nomal、fast，或者用数字表示（注意单位是毫秒，1000表示1s）
easing：设置动画的速度变化。默认是swing( $慢\rightarrow{快}\rightarrow{慢}$ )，可以设置为匀速linear
fn：回调函数。

<!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>显示隐藏演示</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button>显示</button><button>隐藏</button><button>切换</button>
    <div></div>
</body>
<script>
    $(function() {
        $('button:eq(0)').click(function() {
            $('div').show(1000, 'linear', function() {//字符串一定要加引号
                alert("已经显示了！");
            });
        });
        $('button:eq(1)').click(function() {
            $('div').hide(1000, 'linear', function() {
                alert("已经隐藏了！")
            });
        });
        $('button:eq(2)').click(function() {//可以省略任意参数
            $('div').toggle(1000);
        });
    })
</script>
</html>

4.2 滑动

slideDown([speed],[easing],[fn]);//下滑
slideUp([speed],[easing],[fn]);//上滑
slideToggle([speed],[easing],[fn]);//上滑和下滑的切换

参数和4.1是一样的

<!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>滑动效果演示</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button>显示</button><button>隐藏</button><button>切换</button>
    <div></div>
</body>
<script>
    $(function() {
        $('button:eq(0)').click(function() {
            $('div').slideDown(1000, 'linear', function() {//字符串一定要加引号
                alert("已经滑下去了！");
            });
        });
        $('button:eq(1)').click(function() {
            $('div').slideUp(1000, 'linear', function() {
                alert("已经滑上来了！")
            });
        });
        $('button:eq(2)').click(function() {//可以省略任意参数
            $('div').slideToggle(1000);
        });
    })
</script>
</html>

4.3 事件切换

hover([over],out);

over：鼠标经过触发的函数，相当于mouseover
out：鼠标离开触发的函数，相当于mouseout

备注：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。原因是mouseenter不会产生事件冒泡，而mouseover会产生事件冒泡

<!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>hover方法测试</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <style>
        .nav {
            height: 18px;
            width: 1000px;
            background-color: rgba(255, 255, 255, .5);
        }     
        ul {
            float: left;
            width: 20px;
            height: 24px;
        }
        ul li {
            width: 18px;
            height: 22px;
            border: 1px solid red;
            list-style: none;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        $(function() {
            $($('li:even')).nextAll().hide();
            /* 1.传统JQuery写法： */
            $('ul').mouseenter(function() { //鼠标经过,使用mouseover会出bug,忽上忽下
                $(this).children('li').slideDown();
            });
            $('ul').mouseout(function() { //鼠标离开
                $($('li:even')).nextAll().slideUp();
            });
            /* 2.使用hover方法简化写法： */
            $('ul').hover(function() {
                $(this).children('li').slideDown();
            }, function() {
                $($('li:even')).nextAll().slideUp();
            });
            /* 3.使用hover+toggle方法更加简化的写法： */
            $('ul').hover(function() {
                $(this).children('li').slideToggle();
            });
        })
    </script>
</body>
</html>

动画堆积问题：

在4.3中当我们鼠标快速滑动切换时，会出现一段时间的忽上忽下，这是因为一旦触发动画事件，浏览器就会执行动画函数，当一个动画函数在执行过程中，进行多次触发，会造成后续动画函数的堆积，从而形成动画队列，当我们停止滑动时，动画仍在持续

使用stop()方法解决动画堆积问题，stop的作用是停止前面所有的动画，转而执行当前的动画

$(this).children.stop().slideToggle();

4.4 淡入淡出效果

fadeIn([speed],[easing],[fn]);//淡入效果
fadeOut([speed],[easing],[fn]);//淡出效果
fadeToggle([speed],[easing],[fn]);//淡入淡出的切换
fadeTo([speed],opacity,[easing],[fn]);//更改透明度

参数参考4.1

opacity：设置元素透明度，取值0~1（0表示完全透明，1表示不透明）

<!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>淡入淡出效果练习</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<style>
    div {
        height: 100px;
        width: 100px;
        background-color: black;
    }
</style>
<body>
    <button>淡入</button><button>淡出</button><button>切换</button><button>更改透明度</button>
    <div></div>
    <script>
        $(function() {
            $('button:eq(0)').click(function() {
                $('div').fadeIn(1000, 'linear', function() {
                    alert('淡入效果显示成功');
                });
            });
            $('button:eq(1)').click(function() {
                $('div').fadeOut(1000, 'linear', function() {
                    alert('淡出效果显示成功');
                });
            });
            $('button:eq(2)').click(function() {
                $('div').fadeToggle(1000, 'linear');
            });
            var x = 0;
            $('button:eq(3)').click(function() {
                x += .2;
                if (x > 1) x = 0;
                $('div').fadeTo(100, x, 'linear', '');//''表示空，也可省略不写
            });
        })
    </script>
</body>
</html>

4.5 自定义动画

animate(params,[speed],[easing],[fn])

参数参考4.1

params：想要更改的属性样式，以对象的形式传递（遇到复合属性采用驼峰命名）

//一个红色的方块斜着想下移动，移动距离600倍根号2
$('button').click(function(){
    $('div').animate({
        width:100,
        height:100,
        left:600,
        top:600,
        opacity:.7,
        backgroundColor:red
    },1000);
})

5、事件

5.1 事件注册

和传统JS注册事件相比，他能够使用on()，on()方法的优点

很便捷的同时对一个元素绑定多个事件

可以进行事件委派

动态注册元素

注册事件

//单个事件注册方式
$('div').click(function(){});
//多个事件注册方式
$('div').on({
    mouseenter:function(){},
    click:function(){},
    mouseleave:function(){}
});

4.3中事件切换的另类写法，增加一个鼠标悬停效果，作用相当于CSS中hover（一般我们直接用hover就够了）

<!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>事件切换测试</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }      
        .current {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function() {
            $('div').on('mouseenter mouseleave', function() {
                $(this).toggleClass('current');
            });
        })
    </script>
</body>
</html>

事件委派

$('ul').on('click','li',function(){});
事件绑定在ul上，但是可以由ul中的子元素li触发

动态注册事件

on()注册的事件可以对新增的兄弟节点起作用，原生JS不能

$('ul').on('click','li',function(){});
//创建元素
var li = $('<li>这是新增的li</li>');
$('ol').qppend(li);//新增的li标签仍能触发点击事件

5.2 事件删除

off

//删除元素上的所有事件
$('div').off();
//删除元素上的某一个事件
$('div').off('click');
//解除事件委托
$('ul').off('click','li');

拓展：

one：使用one()注册的事件是一次性事件，只会被触发一次
$('div').one('click',function(){});

5.3 自动触发事件

//先给元素绑定事件
$('div').click(function() {
    $(this).css('background', 'aqua');
});

1.小括号法

$('div').click();//刷新页面自动触发div的点击事件

2.trigger法

$('div').trigger('click');

3.triggerhandler法

$('div').triggerHandler('click');

备注：triggerHandler法不会触发元素的默认行为，比如表单使用前面两种方法触发事件获得鼠标焦点，会默认由光标的闪烁，而使用triggerHandler去获得焦点，就不会让光标闪烁

<!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>事件切换测试</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <input type="text">
    <script>
        $(function() {
            $('input').on('focus', function() {
                $(this).val('已经触发了focus事件');
            });
            //方法1：小括号法
            $('input').focus();
            //方法3：triggerHandler法
            $('input').triggerHandler('focus');
        })
    </script>
</body>
</html>

5.4 事件对象

通常使用e或event表示

内部的方法和原生JS中是一样的……

6、解决JQuery开发中遇到的一些问题

6.1 多库共存问题

问题描述：

在实际开发中，项目中一般会使引入很多的JS库。在JQuery中是将$符作为顶级对象，可能其他的JS库也会将$符作为顶级对象，就会造成冲突。

解决方法：

如果是$符冲突：可以将JQuery中的$符换成JQuery

如果$和JQuery都发生了冲突：自定义顶级对象

var x = $.noConflict();//x为自定义的顶级对象名

6.2 服务器压力过大问题

问题描述：

当一个网页被加载时，如果一下就把网页中的图片全都加载完，就会造成服务器的压力过大，网页加载缓慢从而影响到用户体验，同时用户也可能在打开网页后不会阅读完所有的图片。

解决方法：采用图片懒加载技术

JQuery插件库中的：EasyLazyload.js

在这里插入图片描述

结语

三天终于肝完了JQuery😃，Pink老师无敌
接下来的目标就是把JavaWeb给吃透

拿张空白的纸回顾一下🐒 ：
在这里插入图片描述

在面向对象程式设计方法中，封装（英语：Encapsulation）是指一种将抽象性函式接口的实现细节部分包装、隐藏起来的方法，方便使用，同时降低了使用的门槛。 ↩︎
是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。 ↩︎
是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。 ↩︎
提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。 ↩︎
原本是对YUI的一个扩展，主要用于创建前端用户界面。 ↩︎
html中的元素是指：标签起始到标签闭合，以及包括标签本身称做元素（我们一般说的标签可以和元素是一个意思） ↩︎
固有属性就是指元素本身自带的属性（一般编译器会帮你自动生成），例如：a标签的固有属性为href，input标签的固有属性是type ↩︎