jQuery学习笔记

最新推荐文章于 2022-11-07 09:12:10 发布
最新推荐文章于 2022-11-07 09:12:10 发布
阅读量224 收藏 2
点赞数
分类专栏： WEB基础 前端框架 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangcsdn111/article/details/84036983
版权

jQuery 笔记

文章目录

1. 什么是jQuery

query是查询的意思，jQuery就是用JavaScript更加方便的查询和控制页面组件。jQuery是一个伟大的JavaScript框架，压缩后只有不到100k，兼容CSS3兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+，opera9.0+）.jQuery可以使用户更加方便的额处理HTML documents、event、实现动画效果，并且提供了AJAX交互，同时又很多成熟插件可以选择。

简而言之，jQuery是一个JavaScript的框架，可以简化我们对DOM的操作，达到做的的更少，实现的更多这一目的。

1. 引入jQuery

在页面中引入jQuery文件，jQuery无论是哪个版本，都有两个文件，带min和不带min的。带min是压缩后的版本。压缩前版本用于测试和学习，压缩后版本用于实际使用，加载速度快。

<script src = "jquery-1.11.3.js" type = "text/javascript" charset="utf-8">
</script>

2. jQuery的基础语法

$(selector).action( )

  • 美元符号“$”：工厂函数“ jQuery()”的简写
  • selector：选择器或过滤器
  • action() ：执行对元素的操作

例如：

  • $(this).hide() // 隐藏当前元素
  • $(“p”).hide() // 隐藏所有段落
  • $(“p.test”).hide() // 隐藏所有 class=“test” 的段落
  • $("#test").hide() // 隐藏第 id=“test” 的元素

3. jQuery的初始化函数

$(document).ready()：类似 window.onload定义文档加载完后执行的函数，可简单写为 $(function(){具体操作})

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
 alert("Hello World!");
});
</script>

window.onload与$(document).ready()对比

分类window.onload$(document).ready
执行时机必须等网页中所有内容加载完成后，包括图片，才能执行网页中所有DOM结构绘制完成后就可以执行
编写个数window.onload = function(){};window.onload = function(){};不能多个，如果多个后一个覆盖前一个$(document).ready(function(){});$(document).ready(function(){});可以多个，两个函数都执行
简写无$(function(){})

4. 选择器

  1. 基本选择器
  2. 层级选择器
  3. 简单选择器
  4. 内容选择器
  5. 可见性选择器
  6. 属性选择器
  7. 子元素选择器
  8. 表单选择器

4.1 基本选择器

基本选择器采用CSS选择器的语法，主要分为以下几类

  1. ID选择器 $("#id值").css(“color”,“red”);
  2. 类选择器 $(".类名").css(“color”,“red”);
  3. 标签选择器 $(“p”).css(“color”,“red”);
  4. 所有选择器 $("*").css(“color”,“red”);
  5. 并集选择器 $(“p,div”).css(“color”,“red”);

4.2 层级选择器

层级选择器用于选择某个范围的元素，常在简单选择器之间加入“>”、“+”、“>”实现，主要有以下几类。

  1. 父子选择器： 选择器之间使用“>”隔开，用于选择父元素中的子元素。
  2. 前后选择器： 选择器之间使用“+”隔开，用于选择兄弟元素
  3. 后面所有兄弟选择器： 选择器之间使用“+”隔开，用于选择兄弟们元素
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级选择器</title>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){//等待页面全部加载完成
			$("#a>div p").css("color","red"); //改变单样式使用键值对
			$("#a>div" ).css({"color":"red","border":"solid black 1px"});//改变多样式使用json对象。
			$("#one").css("background","pink");
			//选择one后边紧邻的p标签 父子选择器
			$("#one+p").css("background","green");
			//选择#one后所有同级p标签 相邻兄弟选择器
			$("#one~p").css("font-size","35px");
		})
	</script>
<body>
	<div id="a">
		<div id="one">我是div</div>
		<p>我是p</p>
		<p>我是p</p>
		<p>我是p</p>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>
			<p>我是p标签</p>
			<p>我是p标签</p>
			<p>我是p标签</p>
		</div>
	</div>
	
</body>
</html>

结果

4.3 简单选择器

简单选择是在基本选择器后增加以冒号开头的修饰单词进一步缩小选择器范围。主要有以下几种)：

  1. ：first 获取匹配的第一个元素
  2. ：last 获取匹配的最后一个元素
  3. ：not（内选择器） 获取选中元素集中非内选择器匹配的元素
  4. ：even 获取选中元素集中编号为偶数的元素
  5. ：odd 获取选中元素集中编号为奇数的元素
  6. ：eq（n）获取选中元素集合中编号为n的元素
  7. ：gt（n）获取选中元素集合中编号大于n的元素
  8. ：lt（n）获取选中元素集合中编号小于n的元素
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单选择器</title>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){//等待页面全部加载完成
			//第一个p标签
			$("#a p:first").css({"color":"red",})
			//选中最后一个div
			$("div:last").css({"text-align":"center"})
			
			//选中所有div下所有序号偶数的p标签
			$("div>p:even").css({"background":"#ddd"})

			//选中所有div下所有序号奇数的p标签
			$("div>p:odd").css({"background":"#aaa"})

			//选中所有div下指定序号的p标签 ,选择的是div下第2个p标签，从0开始计数
			$("div>p:eq(2)").css({"font-size":"25px"})

			//选中所有div下大于指定序号的元素
			$("div>p:gt(2)").css({"color":"blue"})

			//选中所有div下小于于指定序号的元素,
			$("div>p:lt(2)").css({"color":"red"})


			//选择id为a的子p标签，排除掉id为two的元素
			// $("#a p:not(#ff)").css({"color":"green"})
		})
	</script>
<body>
	<div id="a">
		<div id="one">我是div</div>
		<p id="ff">我是p标签</p>
		<p >我是p标签</p>
		<p>我是p标签</p>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		
		<div>
			<p>我是p标签</p>
			<p>我是p标签</p>
			<p>我是p标签</p>
		</div>
		<div>我是div</div>
	</div>
	
</body>
</html>

显示结果为

4.4 内容选择器

与简单选择器相同，内容选择器也是由冒号后跟随单词进一步缩小选择范围，内容选择器是根据元素内容来进行选择，主要有以下几种：

  1. ：contains（选择器） 获取匹配元素集中包含“选择器”匹配的元素
  2. ：empty 获取匹配元素集中内部元素为空的元素
  3. ：has（选择器）获取匹配元素集中有指定选择器匹配的元素
  4. ：parent 获取匹配元素的父元素

4.4 属性选择器

属性选择器是在基本选择器后加中括号，中括号内部有属性或属性及值来进一步缩小选择范围。主要有以下几种：

  1. [attribute] 匹配指定属性的元素
  2. [attribute=value] 匹配指定属性名及属性值的元素
  3. [attribute^=value] 匹配指定属性名的属性值以某些指定值为开始的元素
  4. [attribute$=value] 匹配指定属性名的属性值以某些指定值为结束的元素
  5. [attribute*=value] 匹配指定属性名的属性值包含某些指定值的元素
  6. [attribute1][attribute2] 匹配具有多个指定属性的元素

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内容选择器</title>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){//等待页面全部加载完成
			
			// 1、内容选择器
			// 
			//选择a下内容包含 标签3 的p标签。
			// $("#a p:contains('标签3')").css({"color":"green","font-size":"20px"});

			//选择指定id为a元素下 内容为空的的p标签
			// $("#a p:empty").css({"height":"100px","width":"250px","background":"#ccc"});

			//选择指定id为a元素下 内容非空的p标签
			// $("#a p:parent").css({"height":"50px","width":"250px","background":"#ccc"})

			//选择内容有span的p标签
			// $("#a p:has(span)").css({"height":"50px","width":"250px","background":"#888"})

			//2、属性选择器
			
			//选择有name属性的p标签,无论属性值什么，都被选中
			// $("#a p[name]").css("color","red");

			//选择有class属性的p标签，无论属性值什么，都被选中
			// $("#a p[class]").css("color","yellow");

			//选择name属性值等于world的p标签
			// $("#a p[name=world]").css("font-size","25px");

			//选择name属性值以h开头的p标签
			// $("#a p[name^=h]").css("color","red");

			//选择name属性值以d结尾的p标签
			// $("#a p[name$=d]").css("color","red");

			//悬着class属性值包含ad的p标签
			// $("#a p[class*=ad]").css("color","red");

			//选择同时具有多个指定属性的元素:悬着有class属性，并且有以h开头的name属性的p标签
			$("#a p[class][name^=h]").css("color","red");
		})
	</script>
<body>
	<div id="a">
	<p>	我是一个div标签1</p>
	<p name="hello">我是一个div标签2 <span>	2222</span></p>
	<p>我是一个div标签3</p>
	<p >	</p>
	<p name="hi" class="happy">我是一个div标签4 <span>	4444</span></p>
	<span>1111</span>
	<p>我是一个div标签5</p>
	<p name = "world">我是一个div标签6</p>
	<p class="happy">我是一个div标签7</p>
	<p class="sad">我是一个div标签8</p>
		<div>
			<p>我是p标签</p>
			<p>我是p标签</p>
			<p>我是p标签</p>
		</div>
	</div>
	
</body>
</html>

4.4 子元素选择器

主要有以下几类

  1. ：first-child 匹配元素集中的第一个元素且第一个元素为指定选择器匹配的元素
  2. ：last-child 匹配元素集中的最后一个元素且最后一个元素为指定选择器匹配的元素
  3. ：nth-child（n） 匹配元素集中的第n个元素且元素为指定选择器匹配的元素
  4. ：only-child 匹配元素集中的唯一一个元素且元素为指定选择器匹配的元素，这里要求里必须是独生子，没有其他兄弟元素,如果有其他元素就选不中
  5. ：nth-last-child （n） 匹配元素集中的倒数第n个元素且元素为指定选择器
  6. ：first-of-type nth-of-type与上面的li:nth-child(1)的区别是，child1是要求父元素的第一个且为指定元素的标签，而nth-of-type只是要求选择集中的第一个指定元素。
  7. ：last-of-type 与上雷同
  8. ：nth-of-type（n）
  9. ：nth-last-of-type（n）
  10. ：only-of-type 与only-of-child的区别是选中元素可以有其他标签兄弟，而only-of-type就不可以。
    语言表达能力匮乏，看例子更容易理解两者区别。
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子元素过滤选择器</title>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){//等待页面全部加载完成
			// 查找ul的第一个li并设置样式
			// $("ul li:first").css("color","red");//这种方式只能找到第一个ul列表中的li，而找不到第二个，不符合要求
			
			//为达到上述要求使用nth-child（n），表示匹配其父元素下的第一个元素且该元素为li的元素，
			// $("ul li:nth-child(1)").css("color","red");//匹配li父元素ul下的第一个li元素。

			// 查找父元素下第一个子元素且该元素为li 与上一个作用相同
			$("ul li:first-child").css("color","red");

			// 查找父元素下最后一个子元素且该元素为li
			//$("ul li:last-child").css("color","blue");

			//查找父元素下倒数第二个子元素且该元素为li
			// $("ul li:nth-last-child(2)").css("color","pink");
			 
			//查找父元素下的独生子元素li,这里要求里必须是独生子，没有其他兄弟元素,如果有其他元素就选不中
			// $("ul li:only-child").css("color","pink");


			//查找ul标签下的第一个li标签，li:nth-of-type与上面的li:nth-child(1)的区别是，child1是要求父元素的第一个且为li的标签，而nth-of-type只是要求ul中的第一个li标签。
			// $("ul li:nth-of-type(1)").css("color","blue");

			//和上一个一样，寻找ul中第一个li
			// $("ul li:first-of-type").css("color",'green');

			//寻找ul中最后一个li元素
			// $("ul li:last-of-type").css("color",'green');

			//寻找ul倒数第二个li
			// $("ul li:nth-last-of-type(2)").css("color",'green');

			//寻找ul中唯一的li与only-child的区别是这里匹配的是独生子li而不是想only-child匹配的即使独生子又是唯一一个的li
			$("ul li:only-of-type").css("color",'green');
			
			//总结：
			//在子元素过滤选择器中，带type的都是要求某一个元素（冒号前的元素）就可以，如ul li:nth-of-type（1）指ul的第一个li元素，而不带type的如ul li:nth-child(1) 指ul的第一个子元素且次元素为li的元素
		})
	</script>
<body>
	<ul>
		<li>沙漠骆驼</li>
		<li>沙漠骆驼</li>
		<li>沙漠骆驼</li>
		<li>沙漠骆驼</li>
		<li>沙漠骆驼</li>
	</ul>
	
	<ul>
		<li>沙漠骆驼</li>
		<li>沙漠骆驼</li>
		<li>沙漠骆驼</li>
		<li>沙漠骆驼</li>
		<li>沙漠骆驼</li>
	</ul>

	<ul>
		<li>我是唯一的li</li>
	</ul>

	<ul>
		<span>	adsfasd</span>
		<li>我不是唯一的li</li>
	</ul>
</body>
</html>

4.5 待续。。。

5 jQuery筛选方法

jQuery的筛选方法和选择器有部分是一样的，无论使用哪一种，只要能选择到想要的元素就行。。主要有以下集中：

  1. first() 顾名思义 与 ：first相同，下同。
  2. last()
  3. eq(n)
  4. not(选择器)
  5. has（选择器）
  6. slice（m,n）选择匹配元素集中的序号从m到n的元素
  7. find（选择器） 选择内部匹配指定选择器的元素
  8. next（选择器） 寻找紧邻在选择器后边的一个兄弟元素
  9. nextAll（选择器）寻找紧邻在选择器后边的兄弟们元素
  10. prev（选择器）寻找紧邻在选择器前边的一个兄弟元素
  11. prevAll（选择器） 寻找紧邻在选择器前边的兄弟们元素
  12. parent（） 选择父级元素
  13. parents（选择器） 选择匹配中选择器的祖先元素
  14. siblings（选择器） 选择匹配选择器的兄弟元素，如参数为空，则为匹配所有亲兄弟元素。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery的筛选方法</title>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){//等待页面全部加载完成
			//选择id为ab下的第一个p标签 可以使用子元素过滤选择器，
			// $("#ab p:first").css("color",'blue');

			//也可以用筛选方法
			// $("#ab p").first().css("color",'red');

			//选择id为ab中的最后一个p标签
			// $("#ab p").last().css("color",'red');	
			
			//选择id为ab中的第三个p标签
			// $("#ab p").eq(3).css("color",'red');		 
				
			//选择排除id为one的其他p标签
			// $("#ab p").not("#one").css("color",'red');		
			
			//选择有含有子元素span的p标签 
			// $("#ab p").has("span").css("color",'red');
			

			//slice是截取，选择第2-5个p标签
			// $("#ab p").slice(2,5).css("color",'red');


			//find用于寻找子元素,查找id为ab下p里面的span标签
			//注意：这里找的是p里面的span标签，而不是p标签。
			// $("#ab p").find("span").css("color",'red');

			//找兄弟元素,寻找紧邻在one后边的一个兄弟元素
			// $("#one").next('p').css("color",'red');

			//找兄弟们元素,寻找紧邻在one后边的所有兄弟元素
			//相当于波浪线 $("#one~p")
			// $("#one").nextAll('p').css("color",'red');

			//找紧邻id为one前面的p标签和next相反
			// $("#three").prev('p').css("color",'red');

			//找兄弟们元素，紧邻在three前边所有的兄弟p元素
			// $("#three").prevAll("P").css("color",'red');

			//选择父级元素,id为three的爹
			// $("#three").parent().css("color",'red');

			//找gson的所有父级元素,并且筛选出id为ab的元素，包括，爸爸，爷爷，祖先
			// $("#gson").parents("#ab").css("color",'red');


			//选择亲兄弟元素 
			//如果不加p就是所有的亲兄弟，哪怕不是p元素 
			// $("#one").siblings("p").css("color",'red');
			// $("#one").siblings().css("color",'red');

			//并集选择
			//选择id为one和id为three的元素
			$("#one").add("#three").css("color",'red');

		})
	</script>
<body>
	<div id="ab">
		<p id="one">沙漠骆驼0</p>
		<p>沙漠骆驼1</p>
		<p id="three">沙漠骆驼2</p>
		<p>沙漠骆驼3 <span id="gson">	3333</span></p>
		<p>沙漠骆驼4</p>
		<div>我是div</div>
		<p>沙漠骆驼5</p>
		<p>沙漠骆驼6<span>	6666</span></p>
		<p>沙漠骆驼7</p>
	</div>
	<div id="sx">
		<p>	一曲高歌</p>
		<p>一曲高歌</p>
		<p>一曲高歌</p>
	</div>
</body>
</html>

6 jQuery效果

  1. 控制显示隐藏：hide（）、show（）、toggle（）
  2. 幕布显示隐藏：slideUp（）、slideDown（）、slideToggle（）可选参数为动画持续时长，单位毫秒
  3. 淡入淡出：fadein（）、fadeout（）、fadeToggle（）可选参数为动画持续时长，单位毫秒

看例子吧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>show-hide-toggle-效果</title>
</head>
<body>
	<input type="button" value="点我" id="btn"/>
	<br>
	<br>	
	<br>	
	<img  src="https://via.placeholder.com/150" id="pic">
		
	<script	type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$("#btn").click(function(){
			// $("#pic").css("display","none");
			// $("#pic").hide();//隐藏
			// $("#pic").show();//显示
			$("#pic").toggle();//自动判断并切换隐藏和显示状态。
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slide滑动效果</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin:0px;
		}
		#box{
			width:500px;
			height: 400px;
			background: #ccc;
			margin-top:50px;
		}
		body{
			padding-left:200px;
		}
	</style>
</head>
<body>
	<input type="button" name="" value="按钮" id="btn">
	<br>
	<div id="box">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				// $("#box").slideUp(3000);//逐渐减少高度，直到消失。参数是变化时间，单位ms
				// $("#box").slideDown(3000);//逐渐增加高度，直到完全显示出来，参数是变化时间，单位ms
				$("#box").slideToggle(1000);//切换展开和关闭。
			})

		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fadein效果</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin:0px;
		}
		#box{
			width:500px;
			height: 400px;
			background: #ccc;
			margin-top:50px;
			/*display: none;*/
		}
		body{
			padding-left:200px;
		}
	</style>
</head>
<body>
	<input type="button" name="" value="按钮" id="btn">
	<br>
	<div id="box">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<h1>我是大标题</h1>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				// $("#box").fadeOut(1000);//通过改变透明度，让元素逐渐隐藏。参数是变化时间，单位ms，下同。
				// $("#box").fadeIn();//通过改变透明度，让元素逐渐出现。
				// $("#box").fadeToggle(1000)//通过改变透明度，切换元素的显示和隐藏。
				//底层是通过display：none来实现。
				$("#box").fadeTo(2000,0.3);//让box元素在2s内变化透明度为0.6
			})

		})
	</script>
</body>
</html>

7 jQuery动画

jquery中动画可以有animate函数实现，通过定义动作前样式、动作后样式，及动作时间来呈现动画效果。

$(“选择器”).animate(动作前CSS对象,动作后CSS对象，动作速冻，function(){动作后函数})

其中动作前后对象为要呈现动画效果的前后CSS对象定义。
动作速度可以是“slow”，“normal”，“fast”或者具体毫秒数。
最后的function为动作变化结束后要执行的函数。
注意： animate改不了背景和文字样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画animate</title>
	<style type="text/css">
		#books{
			height: 200px;
			width: 300px;
			background: #ccc;
			position: absolute;
			left:0;
			top:50px;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		//animate是动画函数
		$(function(){
			$("#btn").click(function(){
				$("#books").animate({"width":"900px","height":"500px","top":"123px","left":"65px"},3000,function(){
					// alert("运动完毕");
					// $("#books").animate({"height":"300px"},2000);
					//还可以变化透明度
					$("#books").animate({"opacity":"0.3"},2000);//2s内将元素透明度变为0.3
				});//第一个参数是要变成什么样，json格式的样式。第二个参数是变化经历的时间。第三个函数时一个回调函数，这个回调函数会在运动完毕后执行。
			})
		})
		//注意：animate改不了背景和文字样式
	</script>
<body>
	<input type="button" id="btn" value="点击" name="">
	<div id="books">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
	</div>
</body>
</html>

动画的停止

当动画没有进行完成而我们需要将其停止时，可以使用stop和finish函数来实现。

  1. stop()：动画停止在当前位置
  2. finish(): 快速执行完动画，停止在动画尽头
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画的停止</title>
	<style type="text/css">
		#box{
			height: 200px;
			width: 300px;
			background: mediumpurple;
			position: absolute;
			left:0px;
			top:50px;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				$("#box").animate({"left":"600px"},2000);
			})

			$("#stopbtn").click(function(){
				//stop函数可以让运动停止
				$("#box").stop();
			})

			$("#finishbtn").click(function(){
				//finish函数也可以停止运动
				$("#box").finish();
			})
			
			// 总结：stop和finish的区别是stop会停止到当前位置，而finish则会跳转到动画的尽头。
		
		})

		
	</script>
<body>
	<input type="button" id="btn" id= name="" value="点击我">
	<input type="button" id="stopbtn" name="" value="stop停止">
	<input type="button" id="finishbtn" name="" value="finish停止">
	<br>
	<div id="box">
		

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

例子1：进入网站首页后，顶部广告下滑弹出效果

效果如下：
顶部广告下滑弹出效果
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>顶部广告下滑效果</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		img{
			display: block;
			margin:0px auto;
		}
		#ad{
			border:solid #888 2px;
			margin-top: -250px;/*默认广告隐藏*/
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			//文档载入后通过改变广告图片的margin-top为0来让广告图片显示出来
			$("#ad").animate({"margin-top":"0"},1000,function(){
				
				//显示完毕后设置一个定时器，当定时时间到达后，让广告图片缩回去
				// setTimeout(function(){
				// 	$("#ad").animate({"margin-top":"-250px"},2000);
				// },2000)

				//还有一种方式通过delay函数实现，delay函数表示让后面的动画延迟执行
				$("#ad").delay(2000).animate({"margin-top":"-250px"},1000);

			})
		})
	</script>
<body>
	<img id="ad" src="./img/gg.png">
	<img src="./img/zw.png">
</body>
</html>

例子2：小米产品卡片效果。

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>小米官网产品卡片效果</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin:0px;
		}
		.mi{
			width: 234px;
			height: 300px;
			border: solid 1px black;
			margin:30px;
			position: relative;
			float:left;

		}
		.mi .bot{
			width: 234px;
			height: 76px;
			background:#FF6700;
			position: absolute;
			top:300px;
			left:0px;
			opacity: 0;

		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){

			//鼠标移入事件
			$(".mi").mouseenter(function(){
				$(this).animate({"top":"-5px"},300);//把整个卡片在300ms内上移5px

				$(this).find(".bot").animate({"top":"224px","opacity":"1"},300);//底部评价色块也上浮
			})

			//鼠标移出事件
			$(".mi").mouseleave(function(){
				$(this).animate({"top":"0px"},300);//回到原位置
				$(this).find(".bot").animate({"top":"300px","opacity":"0"},300);
			})



		})
	</script>
<body>
	<div class="mi">
		<div class="bot">
			<!-- 这是评价色块-->
		</div>
	</div>


	<div class="mi">
		<div class="bot">
			<!-- 这是评价色块-->
		</div>
	</div>


	<div class="mi">
		<div class="bot">
			<!-- 这是评价色块-->
		</div>
	</div>



	<div class="mi">
		<div class="bot">
			<!-- 这是评价色块-->
		</div>
	</div>


	<div class="mi">
		<div class="bot">
			<!-- 这是评价色块-->
		</div>
	</div>


	<div class="mi">
		<div class="bot">
			<!-- 这是评价色块-->
		</div>
	</div>

</body>
</html>

例子3：tab切换效果

效果如下：tab切换效果
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>复用一段代码来控制tab切换</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			height: 450px;
			width: 450px;
			border:solid red 1px;
			margin:10px;
			position: relative;
			float:left;
		}
		ul li{
			height: 50px;
			width: 150px;
			background: #ccc;
			float:left;
			font-family: sans-serif;
			font-size:22px;
			text-align: center;  /*水平居中*/
			line-height: 40px;   /*垂直居中*/
			list-style:none;	/*去掉小圆点*/
		}
		.box div{
			height: 400px;
			width: 450px;
			background: #888;
			position: absolute;
			top:50px;
			left:0px;
			display: none;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".box ul li").mouseenter(function(){
				
				//获得本li在ul中的序号
				var x = $(this).index();//$(this)代表当前对象
				console.log(x);

				//1.此为单个导航视图实现方式
				
				//着重显示匹配的标题，其他标题正常显示
				// $(".box ul li").eq(x).css("background","#888")
					// .siblings().css("background","#ccc");
				//显示标题对应的内容，并将其余内容隐藏
				// $(".box div").eq(x).show().siblings('div').hide();

				// 当变为多个导航视图时，上边的方式只会让第一个生效，原因是$(".box ul li").eq(x)中的$(".box ul li")选择了所有导航栏中的li作为一个对象数组，也就是有15个（5个导航栏），而eq（x）的x范围是0-2，因此只有第一个生效。

				//2.此为多个导航视图实现方式，使用查找本对象父级元素的第几个元素来实现，重点在于本对象，使用$(this).parents("ul")限制为本个导航视图
				//着重显示匹配的标题，其他标题正常显示
				$(this).parents("ul").find('li').eq(x).css("background","#888")
					.siblings().css("background","#ccc");
				//显示标题对应的内容，并将其余内容隐藏
				$(this).parents("div").find('div').eq(x).show().siblings('div').hide();
			})


		})
	</script>
<body>
	<div class="box">
		<ul>
			<li>新闻</li>
			<li>首页</li>
			<li>历史</li>
		</ul>
		<div class="fist">我是新闻</div>
		<div class="second">我是首页</div>
		<div class="thrid">我是历史</div>
	</div>


	<div class="box">
		<ul>
			<li>新闻</li>
			<li>首页</li>
			<li>历史</li>
		</ul>
		<div class="fist">我是新闻</div>
		<div class="second">我是首页</div>
		<div class="thrid">我是历史</div>
	</div>


	<div class="box">
		<ul>
			<li>新闻</li>
			<li>首页</li>
			<li>历史</li>
		</ul>
		<div class="fist">我是新闻</div>
		<div class="second">我是首页</div>
		<div class="thrid">我是历史</div>
	</div>


	<div class="box">
		<ul>
			<li>新闻</li>
			<li>首页</li>
			<li>历史</li>
		</ul>
		<div class="fist">我是新闻</div>
		<div class="second">我是首页</div>
		<div class="thrid">我是历史</div>
	</div>

	<div class="box">
		<ul>
			<li>新闻</li>
			<li>首页</li>
			<li>历史</li>
		</ul>
		<div class="fist">我是新闻</div>
		<div class="second">我是首页</div>
		<div class="thrid">我是历史</div>
	</div>
</body>
</html>

例子4：百度新闻导航条

效果如下：
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度新闻导航条动画效果</title>
	<style type="text/css">
		*{
			margin:0px;
			padding: 0px;
		}
		#menu{
			margin-top:50px;
			width: 100%;
			height: 46px;
			background: #01204F;
		}
		#menu .center{
			height: 46px;
			width: 960px;
			margin:0px auto; /*左右居中*/
			position: relative; /*相对定位，为了给子元素.box一个参考位置*/
			/*overflow: hidden;*/ /*.box超出center范围就隐藏*/
		}
		#menu .center a{
			/*a是行内元素，要设置宽高必须设为块级元素，但是设为块级元素就按照文档流来排列了，因为块级元素默认占一行，所以要设置为向左浮动*/
			display: block;
			float:left;
			width: 60px;
			line-height: 46px;
			font-family: sans-serif;
			font-size:16px;
			font-weight: 500;
			text-decoration: none;
			color:#fff;
			text-align: center;
			position: relative; /*为了压在box上面显示文字*/
			z-index: 1;
		}
		#menu .center .box{
			width: 60px;
			height: 46px;
			background: #CC0000;
			position: absolute;
			top:0px;
			left:-60px;

		}

	</style>
</head>
	<script type="text/javascript" src="jQuery.js">
	</script>
	<script type="text/javascript">
		$(function(){
			$("#menu .center a").mouseenter(function(){
				
				//获取鼠标在哪个标签的上边。。
				var c = $(this).index();

				//得到box左侧的距离（要移动的距离）
				var l = 60*c;
				console.log(l);
				//找到box并设置其做偏移lpx
				$(this).parents(".center").find(".box").stop().animate({"left":l},300);
				//stop的作用是当鼠标移到某个标签上时，先停止当前动作，然后再开始运动，否则会有滞后、多次移动的效果出现。
			})
		})
	</script>
<body>
	<div id="menu">
		<div class="center">
			<a href="">国内</a>
			<a href="">国际</a>
			<a href="">军事</a>
			<a href="">财经</a>
			<a href="">娱乐</a>
			<a href="">体育</a>
			<a href="">互联</a>
			<a href="">科技</a>
			<a href="">游戏</a>
			<a href="">女人</a>
			<a href="">汽车</a>
			<a href="">房产</a>
			<a href="">个性</a>
			<div class="box">
				
			</div>
		</div>
	</div>
</body>
</html>

例子5：京东首页轮播图效果

效果如下：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>京东轮播图效果</title>
	<style type="text/css">
		.box{
			width: 591px;
			height: 471px;
			margin: 10px auto;
			position: relative;
			border: solid 5px red;
			overflow: hidden; /*隐藏box外的图片*/
		}
		.box .pic{
			width:2955px;
			height: 470px;
			position: absolute;
			/*left:-590px;*/
		}
		.box .pic img{
			display: block;
			float:left;
		}
		.box ul{
			position: absolute;
			left: 100px;
			top:400px;
		}
		.box ul li{
			list-style: none;
			width: 50px;
			height: 12px;
			background: #999;
			float:left;
			margin-left: 15px;
		}
		.box ul li.first{
			background: green;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			var x = 0;
			setInterval(function(){
				x++;
				x = x===5?0:x;
				var l = -x*590;
				
				//改变left值
				$(".box .pic").animate({"left":l},500);
				
				//改变指示器的背景图
				$(".box ul li").eq(x).css("background","green").siblings('li').css("background","#999");

			},1000);
		})
	</script>
<body>
	<!-- 其实5个图片组合成了一个长条的大图片，box设为一个图片的大小，每次只能显示一张图片，通过设置绝对定位的左偏移动来实现图片的切换。设置box的overflow属性为hidden，多出的图片隐藏。 -->
	<div class="box">
		<div class="pic">
			<img src="./img/a.jpg" alt="">
			<img src="./img/b.jpg" alt="">
			<img src="./img/c.jpg" alt="">
			<img src="./img/d.jpg" alt="">
			<img src="./img/e.jpg" alt="">
		</div>
		<ul>
			<li class="first"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

例子6：京东无缝轮播图动画效果

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>京东无缝轮播图效果</title>
	<style type="text/css">
		.box{
			width: 591px;
			height: 471px;
			margin: 10px auto;
			position: relative;
			border: solid 5px red;
			overflow: hidden; /*隐藏box外的图片*/
		}
		.box .pic{
			width:3545px;
			height: 470px;
			position: absolute;
			/*left:-590px;*/
		}
		.box .pic img{
			display: block;
			float:left;
		}
		.box ul{
			position: absolute;
			left: 100px;
			top:400px;
		}
		.box ul li{
			list-style: none;
			width: 50px;
			height: 12px;
			background: #999;
			float:left;
			margin-left: 15px;
		}
		.box ul li.first{
			background: green;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			var x = 0;
			setInterval(function(){
				x++;

				//无缝轮播图的关键是：
				//1.在末尾增加一张第一张图片
				//2.在最后一张图片显示完毕后，直接把整个长块图片的left快速设为0，再依次的吧left增加
				//改变left值
				if(x==6){
					$(".box .pic").css({"left":"0"});
					x= 1;
				}
				
				var l = x*-590;

				$(".box .pic").animate({"left":l},500);
				
				//改变指示器的背景图
				$(".box ul li").eq(x).css("background","green").siblings('li').css("background","#999");

			},1000);
		})
	</script>
<body>
	<!-- 其实5个图片组合成了一个长条的大图片，box设为一个图片的大小，每次只能显示一张图片，通过设置绝对定位的左偏移动来实现图片的切换。设置box的overflow属性为hidden，多出的图片隐藏。 -->
	<div class="box">
		<div class="pic">
			<img src="./img/a.jpg" alt="">
			<img src="./img/b.jpg" alt="">
			<img src="./img/c.jpg" alt="">
			<img src="./img/d.jpg" alt="">
			<img src="./img/e.jpg" alt="">
			<img src="./img/a.jpg" alt="">
		</div>
		<ul>
			<li class="first"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

7 jQuery操作样式

jQuery利用css函数来操作样式，如果函数参数为属性名，则返回样式值，如果为键值对，则为设置样式。
看例子，
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery操作样式</title>
	<style type="text/css">
		body{
			margin:100px 300px;
		}
		.box{
			height: 500px;
			width: 500px;
			background: mediumblue;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){

			$(".btn").click(function(){
				//1. 设置样式
				$(".box").css({"width":"800","background":"green"});
			})


			//2. 获得样式
			$(".btn2").click(function(){
				var wid = $(".box").css("width");//只写一个参数就是获得样式
				alert(wid);
			})
		})
		
	</script>
<body>
	
		<input class="btn" type="button" value="设置样式">
		<input class="btn2" type="button" value="获得样式">
		<br>
		<br>

		<div class="box">
		</div>
</body>
</html>

8. jQuery获取元素位置

  1. offset()：用于获取无定位的元素的位置，也就是相对于body的偏移量
  2. position(): 用于获取有定位的元素的位置，也就是相对于有定位父级元素的偏移量。
  3. scrollTop(): 获取滚动条滚动上去的位置。
    例子：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取元素位置</title>
	<style type="text/css">
		.x{
			height: 500px;
			width: 500px;
			margin:100px;
			border: solid red 3px;
			position: relative;
		}
		.y{
			height: 300px;
			width: 200px;
			margin:50px;
			background: #ccc;
			overflow: auto; /*自动判断是否需要加滚动条*/
		}
		.z{
			height: 100px;
			width:300px;
			background: #aaa;
			position: absolute;
			top:400px;
			left:100px;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			//1. 获取无定位的元素y的位置
			var value = $(".y").offset();
			// value是一个对象，包括left和top的值，对于无定位的来说这两个值都是相对于body的偏移量。
			console.log(value);
			var left = $(".y").offset().left;
			console.log("left is: "+ left);
			var top = $(".y").offset().top;
			console.log("top is :"+ top);

			// 2. 获得由定位属性元素的位置。
			var val = $(".z").position();
			console.log(val);//与上边的offset相同，这里position函数的返回值也是一个对象
			var l= $(".z").position().left;
			console.log("相对定位的left is：" + l);

			var t = $(".z").position().top;
			console.log("相对定位的top is: "+ t);

			//3.获取滚动条的位置
			$(".y").scroll(function(){//scroll是滚动事件
				//
				var v = $(".y").scrollTop();//获取滚动上去的距离
				console.log(v);
				$("#wz").html(v);
			})

			//3.1 设置滚动距离
			$("#btn1").click(function(){
				$(".y").scrollTop(500);
			})

			$("#btn2").click(function(){
				var value = $(".y").scrollTop();
				
				setInterval(function(){
					value = value+1;
					$(".y").scrollTop(value);
				},100);
			})
			
		})
		
	</script>
<body>
		<p >滚动上去的距离:<span id="wz"></span></p>
		<input id="btn1" type="button" value="点我向上滚动500px" name="">
		<input id= "btn2" type="button" value="点我开始自动滚动" name="">
		<div class="x">
			<div class="y">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>

			<div class="z">
				
			</div>
		</div>
</body>
</html>

9. jQuery获得元素的尺寸

  1. width()：获取内容宽度
  2. innerWidth(): 获取内容宽度+内边框宽度
  3. outerWidth(): 获得总宽度：内容宽度+内边框宽度+边框

例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取元素尺寸</title>
	<style type="text/css">
		.box{
			width: 300px;
			/*高度由内容撑开*/
			background: #ccc;
			margin:100px auto;
			padding: 50px;
			border: solid 5px red;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			//1.获取内容宽度
			var h = $(".box").width();
			console.log("内容宽度是："+ h);

			//2.获取内容宽度+内边距宽度
			var h2 = $(".box").innerWidth();
			console.log("内容宽度+内边距宽度" + h2);
			

			//3.获得总宽度：内容+内边距+边框
			var h3 = $(".box").outerWidth();
			console.log("总宽度是："+h3);
		})
	</script>
<body>
	<div class="box">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aut incidunt corrupti aliquid minima fugiat sint veniam. Reiciendis provident Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.porro nam eos ab harum corrupti tempora id, accusamus adipisci molestias.
	</div>
</body>
</html>

10. jQuery操作元素属性

  1. attr(“属性名”[,“属性值”])：设置或获得属性
  2. prop(“属性名”[,“属性值”])：设置或获得属性
  3. removeAttr(“属性名”)： 删除属性
  4. removeProp(“属性名”)：删除属性

区别
attr和prop都可以设置属性，但是两者有区别，

本质上： attr是通过setAttribute和getAttribut来操作属性， 会直接改变元素结构。prop是通过给元素对象添加属性来实现属性的添加。

应用上： attr一般用来操作自定义属性。 prop一般用来操作元素特定的属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作元素属性</title>
	<style type="text/css">
		body{
			margin: 100px;
		}
		.box{
			width:300px;
			background: #ccd;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				//1.改变box的class属性
				$(".box").attr("class","newattr");//通过F12来查看结果。
			})

			$("#btn1").click(function(){
				//1.改变box的class属性
				var val = $(".box").attr("class");//通过F12来查看结果。
				alert(val);
			})

			$("#btn2").click(function(){
				//2.新增元素属性
				$(".box").attr("bbb","bbb");//通过F12来查看结果。
			})

			$("#btn3").click(function(){
				//3.删除元素属性
				$(".box").removeAttr("bbb","bbb");//通过F12来查看结果。
			})

			$("#btn4").click(function(){
				//1.改变box的class属性
				$(".box").prop("abcdd","cccc");//通过F12来查看结果。
			})

			/*attr和prop都可以设置属性，但是两者有区别
			
			本质上  attr是通过setAttribute和getAttribut来操作属性，	会直接改变元素结构。
					prop是通过给元素对象添加属性来实现属性的添加。

			应用上  attr一般用来操作自定义属性。
					prop一般用来操作元素特定的属性。
			*/ 


		})
	</script>
<body>
	<input id="btn" type="button" value="改变元素属性"></input>
	<input id="btn1" type="button" value="获得元素属性"></input>
	<input id="btn2" type="button" value="新增元素属性"></input>
	<input id="btn3" type="button" value="删除元素属性"></input>
	<input id="btn4" type="button" value="prop改变元素属性"></input>
	<br>
	<br>
	<div class="box " zdy="abc" aaa="jja">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit porro, dolores excepturi! Id explicabo, accusamus in, quisquam eligendi et quis ex quod labore ea optio consequuntur incidunt aperiam saepe beatae!
	</div>
</body>
</html>

11. jQuery操作样式类

jQuery提供了专门操作CSS样式类的函数，如下：

  1. addClass (“类名”)
  2. removeClass(“类名”)
  3. toggleClass(“类名”)

作用顾名思义，就不多解释了，看例子

例子1 按键改变样式

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作样式类class</title>
	<style type="text/css">
		body{
			margin:150px;
		}
		.t{
			font-size:30px;
			color: red;
			background: #ccc;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			//1. 为元素增加class
			$(".btn").click(function(){
				$("#title").addClass("t");//addClass是增加类函数
			})

			//2. 删除class
			$(".btn2").click(function(){
				$("#title").removeClass("t");
			})

			//3. 翻转class（有则删除，无则增加）
			$(".btn3").click(function(){
				$("#title").toggleClass("t");
			})
		})
	</script>
<body>
	<input class="btn" type="button" value="点击我增加class"></input>
	<input class="btn2" type="button" value="点击我删除classs"></input>
	<input class="btn3" type="button" value="点击我翻转切换classs"></input>
	<br>
	<br>
	<h1 id="title" class="abc edf gh">jQuery中有特定操作样式class的函数</h1>
</body>
</html>

例子2：点击卡片改变样式类

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作样式类class练习</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}

		ul li{
			width: 200px;
			height: 150px;
			background: purple;
			color:#fff;
			font-size:20px;
			font-weight: 500;
			line-height: 150px;
			text-align: center;
			float: left;
			list-style:none;
			margin:15px;
		}
		.sel{
			background: blue;
			font-size: 50px;
			/*text-decoration: line-through;*/
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		//实现点击某一块卡片，对应卡片变色，字体变大，其余保持不变。
		//注意： 能用css的就不要js。虽然js可以使用css函数直接控制样式，但是样式多了的话写在js里面不太好，所以要使用addClass函数和removeClass函数来控制样式。
		$(function(){
			$("ul li").mousedown(function(){
				//addClass是增加类函数，removeClass是删除类函数
				
				$(this).addClass("sel").siblings("li").removeClass("sel");
			})

		})
	</script>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

例子3: 滚动后固定导航条效果到顶部效果

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定导航条效果</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		.box{
			width: 1000px;
			height: 600px;
			margin:10px auto;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			//获取导航条距离文档顶部的距离。
			var top = $("#navbar").offset().top;
			console.log(top);
			//窗口滚动条滚动事件
			$(window).scroll(function(){ //window是窗口
				var scrolltop = $(document).scrollTop();//获取当前文档滚动距离 document是当前文档
				document.title= scrolltop;
				console.log(scrolltop);

				//当滚动距离大于原始导航条距离文档顶部的距离时，也就是导航条碰到了当前视窗的顶部，此时让他固定定位。
				if(scrolltop >= top){
					// alert("aaa");
					$("#navbar").css({
						"position":"fixed",
						"top":"0px",
						"left":"50%",  //具体作用见下
						"margin-left":"-500px" //500px为导航条的一半宽度。具体作用见下 
					});
					//注意，当采用fixed固定定位时，会使得元素脱离文档流，那么margin配置的居中也就失效了。此时可以以一种巧妙的方法让他居中，具体操作为，让其left设为50%，也就是整块放在父元素一分为二的右侧，然后在设置其左边距margin-left为整个元素的一半。就能实现居中显示。
					//
					//最好使用addClass方法来实现，此处为了方便注释


				}else{
					$("#navbar").css({
						"position":"relative"
					});
				}
			})
		})
	</script>
<body>
	<div class="box">
		<img src="./img/图像-8_01.gif">
		<img  id="navbar" src="./img/图像-8_02.gif">
		<img src="./img/图像-8_03.gif">
	</div>
	
</body>
</html>

例子4：动态开关按钮效果

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作样式练习-toggleClass实现开关按钮</title>
	<style type="text/css">
		*{
			padding:0px;
			margin:0px;
		}
		ul{

			width: 120px;
			height: 50px;
			margin:100px auto;
		}
		ul li{
			width: 60px;
			height: 50px;
			float:left;
			list-style: none;
			line-height: 50px;
			text-align: center;
			font-size:25px;
			background: #ccc;
		}
		.cur{
			background: deepskyblue;
			color: #fff;
		}
	</style>
</head>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript">
		$(function(){
			//鼠标按下事件
			$("ul li").mousedown(function(){
				//第一种方式
				// $(this).css({
				// 	"background":"deepskyblue",
				// 	"color":"#fff"
				// }).siblings('li').css({
				// 	"background":"#ccc",
				// 	"color":"#000"
				// });


				//第二种方式
				// $(this).addClass("cur").siblings("li").removeClass("cur");

				//第三种方式
				// $(this).toggleClass("cur").siblings('li').toggleClass("cur");

				//第四种方式
				$("ul li").toggleClass("cur");//让两个li都toggle样式
				//注意采用jQuery操作class的函数参数（addClass、removeClass、toggleClass）的参数是类名字，不用加点“.”
			})
		})
		
	</script>
<body>
	<ul>
		<li class="cur">开</li>
		<li>关</li>
	</ul>
</body>
</html>

12. jQuery节点插入

jquery可动态插入元素到DOM节点，主要分为内部插入和外部插入两大类，所谓内部插入就是在选择器所选择元素的里面插入。

  1. $(“选择器A”).append(“元素字符串表达式”)
  2. $(“选择器A”).prepend(“元素字符串表达式”)
凉晓风
关注
专栏目录
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1332
本文主要介绍有关jQuery的相关知识点
jQuery的学习笔记
qi_bai_jin的博客
11-06 1674
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
jQuery 详细笔记
Y2ANG
04-09 1422
1 jQuery 概述 1.1 JavaScript 库 库，是用于开发软件的子程序集合。库和可执行文件的区别是，库不是独立程序，他们是向其他程序提供服务的代码库链接。 JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。 简单理解：就是一个 JS文件，里面对我们原生 js 代码进行了封装，存放到里面。这样我们就可以快速高效的使用这些封装好的功能了。 比如 jQuer
jQuery 学习笔记 黑马
HGKIVD的博客
10-31 252
jQuery学习笔记
【前端】jQuery 学习笔记（重要）
myaijarvis notebook
04-16 397
选中select KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲region").find(`…{变量}]`).prop(“selected”,true);
jquery 学习笔记一
10-29
1. **官方网站**：*** 是学习和下载最新版本jQuery 的官方渠道。 2. **中文参考手册**：提供了详细的API中文参考手册，方便开发者查询和学习，例如，***。 ### jQuery 的基本用法： 1. **文档就绪事件**： - `$...
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
Jquery 学习笔记（一）
10-29
本文通过Jquery学习笔记的形式介绍了Jquery的一些基础知识和概念。主要讨论了如何在不破坏结构与行为分离的前提下，使用Jquery来处理页面加载事件，以及Jquery对象与DOM对象之间的转换和区别。通过实例代码和解释，...
韩顺平jquery学习笔记及练习
01-18
韩顺平上课实录练习题及学习笔记，免费分享
Jquery学习笔记Jquery学习笔记
10-29
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
【学习笔记】JQuery学习笔记
heshan1992的博客
08-28 502
一、选择器 在CSS规则中两个选择器中添加空格和不添加空格是有区别的：加空格表示的是后代选择器（可以不是直接子元素），而不加空格则表示的是在一个元素上同时满足两个条件，即不加空格表示的是“且”的关系。.example .pp{ color: orange; } .example.pp2 { color: green; }第一个表示的是具有.example类元素中具有.pp类的子元素：<p
【jQuery】jQuery 全套入门笔记
最新发布
weixin_64210950的博客
11-07 1682
jQuery 是一个快速、简洁的JS库，封装了JS常用功能代码，优化 DOM 操作、事件处理、动画设计和 Ajax 交互。学习 jQuery 的本质是学习调用这些函数（方法）
jquery库是什么意思
jycg789的博客
12-16 548
jquery库是指一种封装好的JavaScript函数库，一个轻量级的"写的少，做的多"的JavaScript库，jquery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作。 本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 相关免费学习推荐：javascript（视频）、jQuery教程（视频） jquery库是指一种封装好的JavaScript函数库，一个轻量级的"写的少，做的多"的JavaScript
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值