jQuery库的介绍与使用

程序员文章站 2022-03-22 10:14:13

文章目录1、jQuery库介绍2、jQuery优势3、jQuery的使用4、jQuery入门5、jQuery页面加载方式6、原生的DOM对象和jQuery对象的互转7、jQuery的选择器8、jQuery的属性操作9、jQuery的节点操作10、jQuery事件绑定11、jQuery动画1、jQuery库介绍jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者...

文章目录

1、jQuery库介绍
2、jQuery优势
3、jQuery的使用
4、jQuery入门
5、jQuery页面加载方式
6、原生的DOM对象和jQuery对象的互转
7、jQuery的选择器
8、jQuery的属性操作
9、jQuery的节点操作
10、jQuery事件绑定
11、jQuery动画

1、jQuery库介绍

jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。
在线的可以访问：http://t.mb5u.com/jquery/
http://www.runoob.com/前端知识的学习网站
最新的文档，英文版的：http://api.jquery.com/
jQuery两种文件解释：

2、jQuery优势

jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。
主要功能有以下几点：

1.像 CSS 那样访问和操作 DOM；
2.修改 CSS 控制页面外观；
3.简化 JavaScript 代码操作；
4.事件处理更加容易；
5.各种动画效果使用方便；
6.让 Ajax 技术更加完美异步加载；
7.基于 jQuery 有大量插件；
8.自行扩展功能插件：jQuery 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼；

3、jQuery的使用

搭建环境
1、首先，下载jQuery库文件；
2、引入jQuery库文件：<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>，如果你不想下载，也可以在有网络连接的情况下使用引用网上的链接；
3、之所以可以使用链接，是因为浏览器有缓存；

4、jQuery入门

入门代码：有自己的一套语法规则；

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery库文件 -->
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('button').click(function(){
					alert("Hello jQuery");
				});
			});
		</script>
	</head>
	<body>
		<button type="button">一个按钮</button>
	</body>
</html>

jQuery库的介绍与使用

代码风格
1、在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号$来起始的，而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：

$(function () {});	 //执行一个匿名函数
$('#box');	 //进行执行的ID元素选择
$('#box').css('color', 'red'); 	//执行功能函数

2、由于 $本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下形式：

jQuery(function () {});
jQuery('#box');
jQuery('#box').css('color', 'red');

3、值得一提的是，执行了.css()这个功能函数后，最终返回的还是jQuery对象，那么也就是说，jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。

$('#box').css('color', 'red').css('font-size', '50px'); //连缀

4、jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//...” ，多行使用“/* ... */”；

5、jQuery页面加载方式

我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹，那么为什么必须要包裹这段代码呢？
原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。在延迟等待加载，JavaScript提供了一个事件为load，方法如下：

window.onload = function () {}; //JavaScript等待加载
$(document).ready(function () {所有代码都放在这}); //jQuery等待加载

JS页面加载的时候，比如你有很多图片、视频加载比较慢，等到这些元素都加载完成，你才能执行；而jQuery页面加载是等你这个结构父标签、子标签啊，加载结束就可以完成，也就是它的加载相对比较快一些；
针对上面的写法，有个简写形式：

$(document).ready(function(){

});
加载的优点，只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码。

简写方案:
$(function () {
	alert("加载了");
});

6、原生的DOM对象和jQuery对象的互转

jQuery 对象虽然是 jQuery 库独有的对象，但它也是通过 JavaScript 进行封装而来的。我们可以直接输出来得到它的信息。

alert($); //jQuery 对象方法内部
alert($()); //jQuery 对象返回的对象，还是 jQuery
alert($('#box')); //包裹 ID 元素返回对象，还是 jQuery

从上面三组代码我们发现：只要使用了包裹后，最终返回的都是 jQuery 对象。这样的好处显而易见，就是可以连缀处理。但有时，我们也需要返回原生的 DOM 对象，比如：

alert(document.getElementById('box')); //[object HTMLDivElement]

jQuery 想要达到获取原生的 DOM 对象，可以这么处理：

alert($('#box').get(0)); //ID 元素的第一个原生 DOM

从上面 get(0)，这里的索引看出，jQuery 是可以进行批量处理 DOM 的；
有的时候，我们需要操作原生的JS对象，有的时候则需要jQuery对象，它们之间的互相转换为：

原生的DOM对象与jQuery对象之间互转：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//原生的JS对象
				var btn = document.getElementById("btn");
				//使用jQuery这个$符号包裹一下原生的JS对象，原生的DOM对象和jQuery对象的转换
				$(btn).css('background','red');

				//jQuery对象
				var btn2 = $("#btn");
				//jQuery对象转为原生的DOM对象，调用get()，里面传入一个索引
				var jObj = btn2.get(0);
				//使用这个原生的对象
				jObj.style.width = "100px";

			});
		</script>
	</head>
	<body>
		<button type="button" id="btn">一个按钮</button>
	</body>
</html>

7、jQuery的选择器

常规选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//jQuery选择一个或者多个标签，采用的是CSS选择器的写法
				
				$('h1').css('color','red');
				
				//如果你仅仅只想设置第一个h1标签的颜色，使用eq()
				$('h1').eq(0).css('color','blue');
			});
		</script>
	</head>
	<body>
		<h1>aaa</h1>
		<h1>aaa</h1>
		<h1>aaa</h1>
	</body>
</html>

进阶选择器
高级选择器

针对高级选择器，如果你不想使用，他有对应的方法，可以使用；

取代选择器的方法：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//$('div p span').css('color','red');
				//等价于下面的代码
				$('div').find('p').find('span').css('color','red');
				//一层一层往下找
				
				//选中全部的ul
				//$('ul>li').css('color','red');
				//等价于下面的代码
				$('ul').children('li').css('color','yellow');
				
				//如何选中第三个h1
				$('h1').eq(0).next('h1').next('h1');
			});
		</script>
	</head>
	<body>
		<div id="">
			<p>
				<span>abc</span>
			</p>
		</div>
		
		<ul>
			<li>bbbb</li>
			<li>bbbb</li>
			<li>bbbb</li>
			<li>bbbb</li>
			<li>bbbb</li>
		</ul>
		
		<h1>ccc</h1>
		<h1>ccc</h1>
		<h1>ccc</h1>
		<h1>ccc</h1>
	</body>
</html>

1.选定同级元素的上一个(prev) 或上面所有元素(prevAll)

$('#box').prev('p').css('color', 'red'); //同级上一个元素
$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素

nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。

$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止
$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止

选定同级元素的上下所有元素siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，及上下相邻的所有元素，进行选定：

$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
//等价于下面：
$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定
$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定

属性选择器
过滤选择器
DOM是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在 JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
获取与设置

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            var text=$('div').html(); //innerHTML
            //获取值
            alert(text);

            $('div').html("<h1>呵呵</h1>");
            //设置值

            //获取文本中的值
            var text1=$('h1').text();//innerText
            alert(text1);

            //设置文本中的值
            $('h1').text('ccccc');

            //获取表单中的值
            var text2=$('input').val();
            alert(text2);

            //设置表单中的值
            $('input').val('李四');

        });
    </script>
</head>
<body>
    <div>
        <span>

        </span>
    </div>

    <input type="text" placeholder="请输入内容：" name="username" value="zhangsan">
</body>
</html>

8、jQuery的属性操作

除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性；
方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mycss{
            color: red;
            font-size: 200px;
        }
    </style>
    <script src="./js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //获取某个元素的属性值
            var text=$('div').attr('id');
            alert(text);

            //如何给div设置属性mycss
            $('div').attr('class','mycss');

            //移除属性
            $('div').removeAttr('class');
        });
    </script>
</head>
<body>
    <div id="mydiv" class="mycss">
        abc
    </div>
</body>
</html>

设置或移除class属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myclass{
            width: 300px;
            height: 800px;
            color: red;
            border: 1px black solid;
        }
    </style>
    <script src="./js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {

            //添加类属性
            $('div').addClass('myclass');

            //移除类属性
            $('div').removeClass('myclass');
        });
    </script>
</head>
<body>
    <div>
        abc
    </div>
</body>
</html>

切换class属性值：

在这里插入代码片

css样式的操作

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点掌握。

jQuery库的介绍与使用

代码示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div>
        abc
    </div>

    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //在jQuery中，要设置属性值，可以去掉横杠变大写也可以直接写横杠
            //但是原生的JS中不允许这样，他只能去横杠，使用大写字母
            //$('div').css('color','red').css('fontSize','100px');

            //这样写比较麻烦，可不可以一次设置完成

            //设置一个JSON对象
            var jsonObj={
                'color':'red',
                'font-size':'100px',
                'background':'blue'
            };

            //直接传递JSON对象
            $('div').css(jsonObj);
        });
    </script>
</body>
</html>

代码示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myclass{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        .myclass2{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $('div').click(function (e) { 
                //因为我们现在要对jquery进行操作，如果你直接写一个this，你选中的还是原生的DOM对象，因为我们要对jquery对象进行操作，因此必须要先包装这个this
                //this.$(selector).toggle();

                $(this).toggleClass('myclass2');
            });

            $('h1').width('200px').css('color','red');
        });
    </script>
</head>
<body>
    <div class="myclass"></div>
    <h1>这是一行文字</h1>
</body>
</html>

9、jQuery的节点操作

DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M” 。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。
为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //现在我想使用jQuery代码给body中设置一个标签进去

            //封装一个idv对象
            var mydiv=$('<div>abc</div>');
            //获取Body对象
            var body=$('body').append(mydiv);
        });
    </script>
</head>
<body>
    
</body>
</html>

在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。

代码示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //现在我想使用jQuery代码给body中设置一个标签进去

            //封装一个div对象
            var mydiv=$('<div>abc</div>');
            //获取Body对象
            var body=$('body').append(mydiv);

            //我现在把这个h1设置进入div里面，最终他呈现的位置是：h2之后与之并列
            $('h1').appendTo('div');

            //在ul之后插入元素
            $('ul').after('<h2>bbbbbbbbbb</h2>');

            //将span标签移到div后面去
            $('span').insertAfter("#mydiv2");
        });
    </script>
</head>
<body>
    <h1>一行标题</h1>
    <div id="mydiv">
        <h2>22222222222</h2>
    </div>

   <ul>
       <li>abc</li>
       <li>abc</li>
       <li>abc</li>
       <li>abc</li>
       <li>abc</li>
   </ul>

   <span>这是span标签</span>

   <div id="mydiv2">nihao</div>
</body>
</html>

jQuery库的介绍与使用
代码示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //包裹方式1：如何在span标签外面包裹一层
            $('span').wrap('<div></div>');

            //移除包裹
            $('span').unwrap();

            //包裹方式2：或者你可以创建一个div元素，然后将这个原生的DOM对象包裹在span标签外面
            var mydiv = document.createElement('div');
            $('span').wrap(mydiv);
        });
    </script>
</head>
<body>
    <span>
        abc
    </span>
</body>
</html>

10、jQuery事件绑定

在 JavaScript 课程的学习中，我们掌握了很多使用的事件，常用的事件有： click、 dblclick、mousedown、mouseup、mousemove、 mouseover、mouseout、change、 select、 submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。
jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数： bind(type, [data], fn)，type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指定元素的处理函数。

绑定事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $('button').bind('click', function () {
                alert("弹框");
            });
        });
    </script>
</head>
<body>
    <button>一个按钮</button>
</body>
</html>

如何一次绑定多个事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            // $('button').bind('click', function () {
            //     alert("弹框");
            // });

            // $('button').bind('mouseover', function () {
            //     $(this).css('background','red');
            // });

            //如果觉得这样写比较麻烦，可以连缀着写
            $('button').bind('click',function(){
                alert("弹框");
            }).bind('mouseover',function(){
                $(this).css('background','red');
            }).bind('mouseout',function(){
                $(this).css('background','yellow');
            });
        });
    </script>
</head>
<body>
    <button>一个按钮</button>
</body>
</html>

解绑事件1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            // $('button').bind('click', function () {
            //     alert("弹框");
            // });

            // $('button').bind('mouseover', function () {
            //     $(this).css('background','red');
            // });

            //如果觉得这样写比较麻烦，可以连缀着写
            $('button').bind('click',function(){
                alert("弹框");
            }).bind('mouseover',function(){
                $(this).css('background','red');
            }).bind('mouseout',function(){
                $(this).css('background','yellow');
            });


            //如何解绑事件
            //如果什么都不屑，解绑所有事件
            $('button').unbind('click');
        });
    </script>
</head>
<body>
    <button>一个按钮</button>
</body>
</html>

解绑事件2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            //绑定多个单击事件
            $('button').bind('click.abc',function(){
                alert('第一次弹框');
            }).bind('click.xyz',function(){
                alert('第二次弹框');
            });

            //如果只想移除第一个单击事件，可以给第一个单击事件起个别名，通过这个别名解绑事件
            $('button').unbind('click.abc');
        });
    </script>
</head>
<body>
    <button>一个按钮</button>
</body>
</html>

事件的简写：

为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。我们称它为简写事件。

jQuery库的介绍与使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $('button').click(function (e) { 
                e.preventDefault();
            }).mouseover(function(){}).mouseout(function(){});
        });
    </script>
</head>
<body>
    <button>一个按钮</button>
</body>
</html>

复合事件：

jQuery 提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功能、智能加载等；

jQuery库的介绍与使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>

    <script>
        $(document).ready(function () {
            // $('button').click(function (e) { 
            //     e.preventDefault();
            // }).mouseover(function(){}).mouseout(function(){});

            //他把移入移出事件看作是一个动作
            $(selector).hover(function () {
                    // over
                    alert("移出来");
                }, function () {
                    // out
                    alert("移进来")
                }
            );
        });
    </script>
</head>
<body>
    
</body>
</html>

注意要把原生的JS对象转为jQuery对象；

事件对象

事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event事件对象，event 对象有很多可用的属性和方法；

jQuery库的介绍与使用

事件之冒泡和默认行为

高级事件

浏览器一打开自动触发我们绑定的事件

Trigger 传递数据，alert("取出trigger传过来的数据"+data1+"和"+data2[0]+"和"+data3.name);
}).trigger('click',['abc',[2,3],{name:'hello'}])；//注意多个数据用[ ] 括起来,data1,data2,data3 指的就是[ ]中的数据；

那么bind在绑定事件的时候也能传递数据,这里要跟trigger传递的数据区分一下，如果是bind传递的数据我们用事件对象e中的data属性取数据；

$('button').bind('click',{age:'23'},function(e,data1,data2,data3) {
alert("取出trigger传过来的数据"+data1+"和"+data2[0]+"和"+data3.name+"和bind中传递的数据要用事件对象e中的data属性去取"+e.data.age);
}).trigger('click',['abc',[2,3],{name:'hello'}]);

高级事件之自定义事件

$('button').bind('myEvent',function(){

           alert('自定义事件');

}).trigger('myEvent');

高级事件之简写事件

.trigger()方法提供了简写方案，只要想让某个事件执行模拟用户行为，直接再调用一个空的同名事件即可。

$('button').bind('click', function() {
     alert("点击了");
}).trigger('click');
//上面的可以简写为如下的:
$('input').click(function () {
	alert('我的第一次点击来自模拟！');}).click(); 
//空的 click()执行的是 trigger()

这种便捷的方法，jQuery 几乎个所有常用的事件都提供了。

blur focusin mousedown resize
change focusout mousenter scroll
click keydown mouseleave select
dblclick keypress mousemove submit
error keyup mouseout unload
focus load mouseover

注意为了语义性更加好,一般不推荐简写方案，当然你要使用也是没有问题的

高级事件之triggerHandler()

jQuery 还提供了另外一个模拟用户行为的方法：.triggerHandler()；这个方法的使用和.trigger()方法一样。

$('input').click(function () {
       alert('我的第一次点击来自模拟！');}).triggerHandler('click');

在常规的使用情况下，两者几乎没有区别，都是模拟用户行为，也可以可以传递额外参数。但在某些特殊情况下，就产生了差异：

1、triggerHandler()方法并不会触发事件的默认行为，而.trigger()会。
2、triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有。
3、triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。
4、trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是jQuery 扩展于 DOM 的机制，并非 DOM 特性。而.triggerHandler()不会冒泡。

11、jQuery动画

1、显示隐藏

jQuery 中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显示内容和隐藏内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $('button').eq(0).click(function(){
                //显示
                //参数可以表示时常
                $('div').show(1000);
            });
            $('button').eq(1).click(function(){
                //隐藏
                $('div').hide(1000);
            });
            $('button').eq(2).click(function(){
                //隐藏
                $('div').toggle(1000);
            });
        });
    </script>
</head>
<body>
    <div></div>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
</body>
</html>

2、下拉上卷

jQuery 提供了一组改变元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顾名思义，向上收缩(卷动)和向下展开(滑动)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $('button').eq(0).click(function(){
                $('div').slideUp(1000);
            });
            $('button').eq(1).click(function(){
                $('div').slideDown(1000);
            });
            $('button').eq(2).click(function(){
                $('div').slideToggle(1000);
            });
        });
    </script>
</head>
<body>
    <div>

    </div>
    <button>上卷</button>
    <button>下拉</button>
    <button>开关</button>
</body>
</html>

3、淡入淡出

jQuery 提供了一组专门用于透明度变化的方法：.fadeIn()和.fadeOut()，分别表示淡入、淡出，当然还有一个自动切换的方法：.fadeToggle()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $('button').eq(0).click(function(){
                $('div').fadeIn(1000);
            });
            $('button').eq(1).click(function(){
                $('div').fadeOut(1000);
            });
            $('button').eq(2).click(function(){
                $('div').fadeToggle(1000);
            });
        });
    </script>
</head>
<body>
    <div>

    </div>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
</body>
</html>

本文地址：https://blog.csdn.net/weixin_45082647/article/details/107370397

jQuery库的介绍与使用

文章目录

1、jQuery库介绍

2、jQuery优势

3、jQuery的使用

4、jQuery入门

5、jQuery页面加载方式

6、原生的DOM对象和jQuery对象的互转

7、jQuery的选择器

8、jQuery的属性操作

9、jQuery的节点操作

10、jQuery事件绑定

11、jQuery动画

EXEC的使用与sp_executesql命令的区别

详细介绍c#消息提示框messagebox的使用

JavaEE的jsp文件引入jQuery库，jq代码无法执行

golang常用库之操作数据库的orm框架-gorm基本使用详解

MySQL数据库命令下的常用操作方法演示与介绍~

vue项目中使用eslint+prettier规范与检查代码的方法

jQuery：live()方法的使用案例

AJAX的跨域与JSONP(为文章自动添加短址的功能)_jquery

bootstrap中插件treeview的介绍与使用

详细介绍javascript使用prototype实现OOP继承的方法