jQuery基础

JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）

JQuery特点： 1. 轻量级 2. 富应用 3. DOM操作 4. 事件处理 5. 运动动画 6. AJAX 7. 跨浏览器（不再考虑浏览器兼容） 8. 链式调用 9. 隐式迭代 10. 丰富的插件库 ......

一，jQuery引用和语法

1.jQuery引用

下载JQuery的js文件，在本地进行引用(推荐) 官网地址：https://jquery.com/

下载之后复制到项目的js文件夹下，使用引用注入

<script src="js/jquery3.6.0.js"></script>

2.语法

1 基础语法

$(selector).action()

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

$(selector).action()

jQuery 的 action() 执行对元素的操作比如：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有元素

$("p.test").hide() - 隐藏所有 class="test" 的元素

$("#test").hide() - 隐藏 id="test" 的元素

2 文档就绪事件

//通过选择器选择documen内置对象，当document对象ready也就是加载完成的时候，调用方法。（类似于原生js的
window.onload）
$(document).ready(function(){
// 开始写 jQuery 代码...
});
//或者
$().ready(function(){
// 开始写 jQuery 代码...
});
//或者
$(funtion(){
// 开始写 jQuery 代码...
});

推荐使用最后一种，简洁

二，jQuery选择器

JQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1.标签选择器

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf8">
      <title></title>
      <script src="js/jquery3.6.0.js"></script>
      <script>
          //等待dom元素加载完毕，类似于js原生代码的window.onload
          $(document).ready(function() {
          //选择所有button元素，当button被点击时，调用函数
          $("button").click(function() {
          //选择所有p标签，将p标签隐藏
                 $("p").hide();
               })
          });
    </script>
  <style>
     .div1 {
           width: 200px;
           height: 200px;
           backgroundcolor: red;
         }
  </style>
  </head>
  <body>
       <p>段落1</p>
       <p>段落2</p>
       <p>段落3</p>
       <button>点击我隐藏所有段落 </button>

  </body>
</html>

2.id选择器

页面中元素的 id 应该是唯一的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					// $("div p").hide(3000);
					// $("div > p").hide(3000);
					$("p+span").hide(3000);
				});
			});
		</script>
	</head>
	<body>
		<div>
			<p>aa</p>
			<span>span1</span>
		</div>
		<button id="btn">确定</button>
	</body>
</html>

3.class选择器

同id选择器一样，只不过是将id标签换为class标签

4.层次选择器

通过DOM元素间的层次关系来获取元素，主要层次关系包括父子、后代、相邻、兄弟关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<title></title>
		<script src="js/jquery3.6.0.js"></script>
		<style>
			.div1 {
				width: 200px; height: 200px; backgroundcolor: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是一个段落</p>
		</div>
		<button>隐藏段落</button>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					//后代选择器
					// $("div p").hide();
					//子选择器
					$("div>p").hide();
				});
			});
		</script>
	</body>
</html>

5.简单过滤选择器

过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；

简单过滤是使用最广泛的一种。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					// var a = $("ul>li:first").html();
					// console.log(a);
					// var b = $("ul>li:last").html();
					// console.log(b);
					
					//获取索引值为偶数的元素
					//  $("ul>li:even").each(function(){
					// 	console.log($(this).html());
					// });
					
					//获取索引值为奇数的元素
					$("ul li:odd").each(function(){
							console.log($(this).html());
					})
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ul>
		<button id="btn">确定</button>
	</body>
</html>

6 .属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以"["开始，以"]"结束。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
                     //获取属性为userName的值
					// var a =  $("input[name='userName']").val();
					var a =  $("input[name^='user']").val();
					console.log(a);
				});
			});
		</script>
	</head>
	<body>
		<input type="text" name="userName"/>
        <button id="btn">确定</button>
	</body>
</html>

7.子元素过滤选择器

获取所有父元素中指定的某个元素

first-child:获取每个父元素下的第一个子元素
           first:获取第一个父元素下的第一个子元素
           last-child：获取每个父元素下的最后一个子元素
           last：获取最后一个父元素下的最后一个子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
		
			$(function() {
				// $("ul li:first-child").each(function() {
				// 	console.log($(this).html());
				// });
				
				// $("ul li:last-child").each(function() {
				// 	console.log($(this).html());
				// });
				
				$("ul li:first").each(function() {
					console.log($(this).html());
				});
				
				$("ul li:last").each(function() {
					console.log($(this).html());
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ul>

		<ul>
			<li>列表项4</li>
			<li>列表项5</li>
			<li>列表项6</li>
		</ul>
		<button id="btn">确定</button>
	</body>
</html>

8.表单对象属性过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
                   //选择复选框被鼠标选中的内容
					$("input[name='hobby']:checked").each(function(){
						console.log($(this).val());
					});
                   //选择下拉框被鼠标选中的内容
					var a = $("#star option:selected").text();
					console.log(a);
				});
			});
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="bsb"/>篮球
		<input type="checkbox" name="hobby" value="ftb"/>足球
		<select id="star">
			<option value="1">巨蟹座</option>
			<option value="2">白羊座</option>
			<option value="3">处女座</option>
		</select>
		<button id="btn">确定</button>
	</body>
</html>

9.表单选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
			    //选择表单所有复选框
				$("#btn").click(function(){
					$(":checkbox:checked").each(function(){
						console.log($(this).val());
					});
				});
			});
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="bsb"/>篮球
		<input type="checkbox" name="hobby" value="ftb"/>足球
	
		<button id="btn">确定</button>
	</body>
</html>

三，JQuery事件

常见事件

1.ready()

该方法允许我们在文档完全加载完后执行函数

简化版：$(function(){ })

2.click()和dbclick()

click:鼠标单击事件

dbclick:鼠标双击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
                //鼠标单击事件
				$("#btn").click(function(){
					$(":input").each(function(){
						console.log($(this).val());
					});
				});
                //鼠标双击事件
              	$("#btn").dbclick(function(){
					$(":input").each(function(){
						console.log($(this).val());
					});
				});
			});
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="bsb"/>篮球
		<input type="checkbox" name="hobby" value="ftb"/>足球
		<select id="star">
			<option value="1">巨蟹座</option>
			<option value="2">白羊座</option>
			<option value="3">处女座</option>
		</select>
		<button id="btn">确定</button>
	</body>
</html>

3.mouseenter(),mouseleave(),mousedown(),mouseup()

mouseenter() :当鼠标指针穿过元素时，会发生 mouseenter 事件

mouseleave():当鼠标指针离开元素时，会发生 mouseleave 事件

mousedown():当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件

mouseup():当在元素上松开鼠标按钮时，会发生 mouseup 事件

使用方法同click()相同

4.hover()

hover():方法用于模拟光标悬停事件当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave),包含2个函数

格式：

hover(function(){},function(){});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("tbody tr").hover(function(){
					$(this).css("background-color","aqua");
					$(this).css("color","red");
				},function(){
					$(this).css("background-color","white");
					$(this).css("color","blue");
				});
				$("tbody tr").dblclick(function(){
					$(this).remove();
				})
			});
		</script>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="4" width="600" id="tb1" >
			<thead>
				<tr >
					<th>名称</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>java</td>
					<td>100</td>
					<td>34</td>
					<td>444</td>
				</tr>
				<tr>
					<td>c++</td>
					<td>211</td>
					<td>22</td>
					<td>44</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

5.焦点事件

focus():当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点

blur():当元素失去焦点时，发生 blur 事件。

使用方法同click()

四，DOM操作元素

1.获得DOM节点

1 获取元素节点

通过选择器获得

2 获得文本节点

text()：设置或返回所选元素的文本内容

text()只输出标签内的文本内容，和js的innerText方法一样

html()：设置或返回所选元素的内容（包括 HTML 标记）

打印当前标签内的文本内容，如果有子标签，则把子标签本身和子标签内的文本一起打印这个和js的innerHTML差不多

val()：设置或返回表单字段的值元素的值是通过 value 属性设置的。

该方法大多用于 input 元素。

在text中插入新子标签时，会将标签当做文本打印

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
                   //打印元素标签内容
					var a =  $("p").html();
					console.log(a); 
                    //打印文本内容
					console.log($("p").text());
					
					$("p").html("<span>span</span>");
					// $("p").text("<span>span</span>");
                    //返回值
					var b = $(":text").val();
					console.log(b);
					b = b + " hello";
					$(":text").val(b);
					
				});
			});
		</script>
	</head>
	<body>
		<p>aa</p>
		<input type="text" name="userName"/>
		<button id="btn">dd</button>
	</body>
</html>

3.获得属性节点

利用JQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。

attr()方法的参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字

当参数是两个时，第一个参数是属性的类型，第二个参数是属性的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
                 //为p设置一个title属性的值，内容为：这是段落
                 $("p").attr("title","这是段落");
				  var node = $("p").attr("title");
					  console.log(node);
				});
			});
		</script>
	</head>
	<body>
		<p>aa</p>
		<input type="text" name="userName"/>
		<button id="btn">dd</button>
	</body>
</html>

4.获得父亲，兄弟，子节点

$().parent(selector)：获取父节点

$().parents(selector)：获取祖先元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					//获取父亲节点
				   var a = $("p").parent();	
				   console.log(a.html());
				   //获取祖先节点
				   $("p").parents("body").each(function(){
					    console.log($(this).html());
				   });
				  
				});
			});
		</script>
	</head>
	<body>
		<div>
			<p>qq</p>
		</div>
		<button id="btn">aa</button>
	</body>
</html>

$().previousSibling()：获取上一个兄弟节点

$().prevAll()：获取之前所有的兄弟节点

$().nextSibling()：获取下一个兄弟节点

$().nextAll()：获取之后所有的兄弟节点

$().siblings()：获取所有的兄弟节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function() {
				$("#btn").click(function() {
					var p2 = $("#p2");
					//获取当前元素的前一个兄弟节点
					var p1 = p2.prev();
					console.log(p1.html());
					//获取当前元素后一个兄弟节点
					var p3 = p2.next();
					console.log(p3.html());
					console.log("-------");
					//获取当前元素的之前的所有兄弟节点
					p2.prevAll().each(function() {
						console.log($(this).html());
					});
					console.log("-------");
					//获取当前元素的之后的所有兄弟节点
					p2.nextAll().each(function() {
						console.log($(this).html());
					});
					//获取当前元素的所有兄弟节点
					console.log("-------");
					p2.siblings().each(function() {
						console.log($(this).html());
					})
				})
			})
		</script>
	</head>
	<body>
		<div>
			<p id="p0">aqa</p>
			<p id="p1">aa</p>
			<p id="p2">affa</p>
			<p id="p3">aaaffa</p>
			<p id="p4">aaaffaaaa</p>
		</div>
		<button id="btn">确定</button>
	</body>
</html>

$().children()：获取所有直接子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function() {
				$("#btn").click(function() {
					//获取当前元素下所有的子节点
					$("div").children().each(function() {
						console.log($(this).html());
					})
					//获取当前元素下指定的子孙元素
					console.log($("div").find("#p2").html());
					//这里通过find方法获取div的子孙元素span
					console.log($("div").find("span").html());
					//.find方法需要指定参数否则会返回undefined
					console.log($("div").find().html());
				});
			})
		</script>
	</head>
	<body>
		<div>
			<p id="p0">aqa</p>
			<p id="p1">aa</p>
			<p id="p2">affa</p>
			<p id="p3">aaaffa</p>
			<p id="p4">
				aaa
				<span>111</span>
			</p>
		</div>
		<button id="btn">确定</button>
	</body>
</html>

2:新增DOM节点

插入节点方法

append()：向每个匹配的元素内部末尾插入内容

appendTo()：将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中

prepend()：向每个匹配的元素内部头部插入内容

prependTo()：将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中

after()：在每个匹配的元索之后插入内容

insertAfter()：将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面：

before()：在每个匹配的元素之前插入内容

insertBefore()：将所有匹配的元素插入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B) 的操作，即不是将B插入到A前面，而是将A插入到B前面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					//append方法表示在当前元素的内部的尾部插入一个新元素
					//该方法的调用者是父元素，方法的参数时子元素
					
					// $("div").append("<p>aa</p>");
					//appendTo方法表示把新元素插入到父元素内部的尾部
					//该方法的调用者时子元素，方法的参数是父元素
					// $("<p>gg</p>").appendTo("div");
					 
					//  //prepend方法表示在当前元素的内部的最前面插入一个新元素
					//  //该方法的调用者是父元素，方法的参数时子元素
					// $("div").prepend("<p>cc</p>");
					// //prependTo方法表示在当前父9元素的内部的最前面插入一个新元素
					// //该方法的调用者是子元素，方法的参数是父元素
					// $("<p>bb</p>").prependTo("div");
					
					//after方法在当前元素后插入新元素，新元素和当前元素是兄弟关系
					//方法的调用者时当前元素，参数是新元素
					$("div").after("<p>44</p>");
					//insertAfter方法表示把新元素插入到当前元素的后面，新元素和当前元素是兄弟关系
					//方法的调用者是新元素，参数是当前元素
					$("<p>44</p>").insertAfter("div");
					//before方法在当前元素前面插入新元素，新元素和当前元素是兄弟关系
					//方法的调用者时当前元素，参数是新元素
					$("div").before("<p>55</p>");
					//insertBefore方法表示把新元素插入到当前元素的前面，新元素和当前元素是兄弟关系
					//方法的调用者是新元素，参数是当前元素
					$("<p>55</p>").insertBefore("div");
				})
			})
		</script>
	</head>
	<body>
		<div>
		<p>pp</p>
		</div>
		<button id="btn">确定</button>
	</body>
</html>

3.更新DOM节点

修改DOM节点内容

使用.attr()方法时，传入两个参数来进行更改，html()方法中加入参数修改节点的值

即获取DOM节点时，添加要修改的内容作为参数来更改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					//attr修改属性
					$("a").attr("href","http://www.sina.com.cn")
				    $("a").attr("target","_blank");
					//html修改文本
					$("a").html("新浪");
				})
			})
			
		</script>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<button id="btn">确定</button>
	</body>
</html>

复制节点

复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为,使用clone()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					//clone表示复制元素
					 var p = $("#l1").clone();
					 $("ul").append(p);
					
			
				})
			})
		</script>
	</head>
	<body>
		<ul>
			<li id="l1">列表项1</li>
			<li id="l2">列表项2</li>
		</ul>
		<button id="btn">确定</button>
	</body>
</html>

替换节点

replaceWith()：将所有匹配的元素都替换成指定的HTML或者DOM 元素

replaceAll():与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					//replaceWith方法用新元素替换当前元素
					//方法调用者是当前元素，参数是新元素
					$("#l1").replaceWith("<li>44</li>");
					replaceAll方法用新元素替换当前元素
					//方法调用者是新元素，参数是当前元素
					$("<li>99</li>").replaceAll("#l2");
				})
			})
		</script>
	</head>
	<body>
		<ul>
			<li id="l1">列表项1</li>
			<li id="l2">列表项2</li>
		</ul>
		<button id="btn">确定</button>
	</body>
</html>

4.删除节点

remove()：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

detach()：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

empty()：该方法可以清空元素中的所有的后代节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"> </script>
		<script>
			$(function(){
				$("#btn").click(function(){
					$("#l1").hover(function(){
						$(this).css("color","red");
					},function(){
						$(this).css("color","black");
					});
					
					// setTimeout(function(){
					// 	//remove会删除掉元素上绑定的事件，detach不会删除事件
					// 	// var l1 = $("#l1").remove();
					// 	var l1 = $("#l1").detach();
					// 	$("ul").append(l1);
					// },2000);
					
					//empty方法删除该元素下的所有子元素
					$("ul").empty();
				})
			})
		</script>
	</head>
	<body>
		<ul>
			<li id="l1">dd</li>
			<li id="l2">hh</li>
		</ul>
		<button id="btn">确定</button>
	</body>
</html>

5.更改css

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.font20{
				font-size: 20px;
				color: red;
			}
			
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//addClass在当前元素上添加类样式
				$("#btn").click(function(){
					$("p").addClass在当前元素上添加样式类("font20");
				});
				//removeClass在当前元素上删除类样式
				$("#btn1").click(function(){
					$("p").removeClass("font20");
				});
				//toggleClass是addClass和removeClass操作的切换
				$("#btn2").click(function(){
					$("p").toggleClass("font20");
				});
			})
		</script>
	</head>
	<body>
		<p>aa</p>
		<button id="btn">addClass</button>
		<button id="btn1">removeClass</button>
		<button id="btn2">toggleClass</button>
	</body>
</html>

toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性

五，jQuery动画

hide():隐藏

show():元素显示

toggle():元素隐藏和现实的切换

fadeOut():淡出

fadeIn():淡入

fadeToggle():淡出淡入切换

slideUp():方法用于向上滑动元素

slideDown():方法用于向下滑动元素

slideToggle():向上向下滑动元素切换

animate():自定义动画

可在括号中设置时间，调整动画效果，单位为毫秒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
		</style>
		<script src="js/jquery-3.6.0.js"></script>
	    <script>
			$(function(){
				//hide:隐藏
				$("#btn").click(function(){
					$("div").hide(3000);
				});
				//show:元素显示
				$("#btn1").click(function(){
					$("div").show(3000);
				});
				//toggle元素隐藏和现实的切换
				$("#btn2").click(function(){
					$("div").toggle(3000);
				});
				//fadeOut淡出
				$("#btn3").click(function(){
					$("div").fadeOut淡出(3000);
				});
				//fadeIn淡入
				$("#btn4").click(function(){
					$("div").fadeIn(3000);
				});
				//fadeToggle淡出淡入切换
				$("#btn5").click(function(){
					$("div").fadeToggle(3000);
				});
				//slideUp方法用于向上滑动元素
				$("#btn6").click(function(){
					$("div").slideUp(3000);
				});
				//slideDown方法用于向下滑动元素。

				$("#btn7").click(function(){
					$("div").slideDown(3000);
				});
				//slideToggle向上向下滑动元素切换
				$("#btn8").click(function(){
					$("div").slideToggle(3000);
				});
				//animate自定义动画
				$("#btn9").click(function(){
					$("div").animate({
						"margin-top":"50px",
						"margin-left":"100px"
						},3000);
				});
			})
		</script>
	</head>
	<body>
		<div>&nbsp;</div>
		<button id="btn">hide</button>
		<button id="btn1">show</button>
		<button id="btn2">toggle</button>
		<button id="btn3">fadeOut</button>
		<button id="btn4">fadeIn</button>
		<button id="btn5">fadeToggle</button>
		<button id="btn6">slideUp</button>
		<button id="btn7">slideDown</button>
		<button id="btn8">slideToggle</button>
		<button id="btn9">animate</button>
	</body>
</html>

最后的练习

创建表单页面，在控制台打印出输入的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			body {
				margin: 0px;
			}

			.main {
				width: 100%;
				font-family: "方正舒体";
			}

			.top {
				width: 100%;
				height: 20px;
				background-color: aliceblue;
			}

			.center {
				width: 100%;
				height: 20px;

			}

			.sp {
				height: 18px;
				font-size: 25px;
				margin-top: 3px;

			}

			.sp1 {
				border-bottom: 5px solid aqua;
			}

			.bottom {
				width: 100%;
				height: 600px;
				margin-top: 30px;
				margin-left: 50px;
				font-size: 20px;

			}

			input {

				margin-top: 20px;
				border-radius: 5px;

			}

			.inp {
				width: 300px;
				height: 20px;
				border: 2px solid aqua;
			}

			select {
				width: 120px;
				height: 30px;
				margin-top: 5px;
				border-radius: 5px;
				font-family: "方正舒体";
				border: 2px solid aqua;
			}

			textarea {
				margin-top: 15px;
				border-radius: 5px;
				border: 2px solid aqua;
			}

			button {
				width: 80px;
				height: 30px;
				margin-top: 15px;
				margin-left: 40px;
				background-color: aqua;
				border-radius: 3px;
				font-family: "方正舒体";
				font-size: 20px;
				border: 2px solid aqua;
			}

			button:hover {
				background-color: darkgrey;
				color: aqua;
			}
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function() {
				$("#btn").click(function() {
					//获取每个输入的值
					var userName = $("input[name='userName']").val();
					var passWord = $("input[name='pwd']").val();
					var sex = $("input[name='sex']:checked").val();
					var hobbys = [];
					var arrys = $("input[name='hobby']:checked");
					for (var i = 0; i < arrys.length; i++) {
						hobbys[i] = $(arrys[i]).val();
					}
					var star = $("#star option:selected").val();
					var remark = $("#remark").val();
                    //声明变量存放值
					var con = {};

					con.userName = userName;
					con.passWord = passWord;
					con.sex = sex;
					con.hobby = hobbys;
					con.star = star;
					con.remark = remark;

					console.log(con);
				    return false;
				});
			});
		</script>
	</head>
	<body>
		<div class="main">
			<div class="top">
				<span><b>位置：</b>首页 -> 表单</span>
			</div>
			<div class="center">
				<div class="sp">
					<span class="sp1"><b>注册信息</b></span>
				</div>
				<hr />
			</div>
			<div class="bottom">
				<form>
					账号:<input class="inp" type="text" name="userName" placeholder="请输入账号" /><br />
					密码:<input class="inp" type="password" name="pwd" placeholder="请输入密码" /><br />
					性别:<input type="radio" name="sex" value="male" />男
					<input type="radio" name="sex" value="female" />女<br />
					爱好:<input type="checkbox" name="hobby" value="basketball" />篮球
					<input type="checkbox" name="hobby" value="football" />足球
					<input type="checkbox" name="hobby" value="dance" />跳舞<br />
					星座:<select name="star" id="star">

						<option value="白羊座">白羊座</option>
						<option value="巨蟹座">巨蟹座</option>
						<option value="狮子座">狮子座</option>
						<option value="处女座">处女座</option>
					</select><br />
					备注:<textarea id="remark" name="remark" rows="5" cols="50"></textarea><br />
					<button id="btn">注册</button>
				</form>
			
			</div>
		</div>
	</body>
</html>