试试jQuery

试试jQuery

使用jQuery

  1. 引入文件（官网下载）
  2. 使用jQuery核心函数：$(function(){})
  3. 使用jQuery对象：$(“#xxx”)，用此方法得到的是一个jQuery伪数组对象

参考文档

https://jquery.cuishifeng.cn/

面试可能会问到的问题

区别mouseover和mouseenter

  • mouseover：在移入子元素时也会触发，对应mouseout

  • mouseenter：只在移入当前元素时才触发，对应mouseleave

    另外需要注意的是，hover（）内部使用的就是mouseenter和mouseleave

区别on(‘click’，fun)和click(fun)

  • on支持动态绑定
  • click支持静态绑定不支持动态绑定

事件委派

  1. 将多个子元素的事件监听委托给父元素处理
  2. 监听回调加在父元素
  3. 当操作任何一个子元素，事件会冒泡到父元素
  4. 父元素不会直接处理，而是根据event.target（事件源）得到发生事件的子元素，通过这个子元素调用事件回调函数

$(‘父元素’).delegate(‘子元素’, ‘事件类型’, 事件回调函数)

筛选模块

  • 过滤

    在jQuery对象内部的元素中找出部分匹配的元素，并封装成新的jQuery对象返回

  • 查找

    查找jQuery对象内部的元素的子孙、兄弟、父母元素，并封装成新的jQuery对象返回

关于坑爹的setInterval

一定要及时关掉，不然定时器的数量可能会叠加，比如轮播图的快速点击…就会出事

可以在定时器执行前设置一个flag来标记

我的轮播图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="fa/css/all.css"/>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		.clearfix::after
				{
					content: "";
					display: block;
					clear: both;
				} 
		#wrapper{
			width: 1024px;
			height: 768px;
			background-color: #BBFFAA;
			margin: 0 auto;
			overflow: hiddn;
			position: relative;
			
		}
		#banner{
			list-style-type: none;
			width: 6144px;
			height: 768px;
			position: absolute;
			left: 0;
		}
		#banner li{
		float: left;
		}
		#toLeft{
			position: absolute;
			top: 384px;
		}
		#toRight{
			position: absolute;
			top: 384px;
			left: 1010px;
		}
		</style>
	</head>
	<body>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){ 
			var $wrapper = $('#wrapper');
			var $banner = $('#banner');//获取轮播图
			var $left = $('#toLeft');//翻页的左指针
			var $right = $('#toRight');//翻页的右指针
			var moving = false;//当前是否在翻页
			var timer = 0;
			
			var auto = setInterval(function(){//每隔三秒自动翻页
				nextPage(false);
			},3000);
			
			$wrapper.hover(function(){//鼠标悬停在轮播图上时停止轮播，移除则继续自动轮播
				clearInterval(auto);
			},function(){
				auto = setInterval(function(){
					nextPage(false);
				},3000);
			});
			
			$left.click(function(){//向前翻页
				nextPage(true);
			});
			$right.click(function(){//向后翻页
				console.log('向后翻页');
				nextPage(false);
			});
			function nextPage (next) {//执行翻页的
				if(moving){
					return;
				};
				moving = true;
				var curLeft = $banner.position().left;//当前left
				var offset = next ? 1024 : -1024;//向前或者向后的翻页距离
				var targetOffset = (curLeft+offset)%6144;//目标翻页距离
				var itemOffset = -20;//每次interval移动的距离20px	
				if(offset < 0){
					  timer = setInterval(function(){
						 
						 curLeft += itemOffset;
						 if(curLeft < targetOffset){
							curLeft = targetOffset;
							if(targetOffset === -5120){//如果向后翻页到最后一张图片
								$banner.css('left',-1024);//重新定位到第一张图片（其实是第二张，因为前面一张是最后一张图片）
								moving = false;
								clearInterval(timer);//关闭定时器
								return;
							}
						 	$banner.css('left',(curLeft)%5120);
							clearInterval(timer);//关闭定时器
							moving = false;
							return;
						 }
						$banner.css('left',((curLeft%5120)));
					},1000/144);
				}
				else{
					timer = setInterval(function(){
						curLeft += (-itemOffset);
						if(curLeft > targetOffset){
							curLeft = targetOffset;
							if(targetOffset === 0){
								$banner.css('left',-4096);
								moving = false;
								clearInterval(timer);//关闭定时器
								return;
							}
							$banner.css('left',(curLeft)%5120);
							clearInterval(timer);//关闭定时器
							moving = false;
							return;
						}
						$banner.css('left',((curLeft%5120)));
					},1000/144);
				}
			}
		});
		</script>
		
		
		
		<div id="wrapper" class="clearfix">
				<ul id="banner" style="left:-1024px">
				<li><img src="pic/4.jpg"/></li>
				<li><img src="pic/1.jpeg"/></li>
				<li><img src="pic/2.jpg"/></li>
				<li><img src="pic/3.jpg"/></li>
				<li><img src="pic/4.jpg"/></li>
				<li><img src="pic/1.jpeg"/></li>
				</ul>
				<div id="pointDiv">
					<a href="#" id="toLeft"class="arrow"><i class=" fas fa-angle-double-left"></i></a>
					<a href="#" id="toRight" class="arrow"><i class="fas fa-angle-double-right"></i></a>
				</div>
		</div>
		
	</body>
</html>

自定义动画（略）

多库共存

解决两个库都要使用$的问题

jQuery库可以释放$的使用权，让另外一个库可以正常使用，此时jQuery库只能使用jQuery

方法：jQuery.noConflict()

区别onload和ready的区别

1
2
3
4
5
window.onload = function(){};

$(function(){});//与下面的写法是等价的

$(document).ready(function(){})

onload只能添加一个监听回调，而ready可添加多个

如果页面有图片，onload会在文档里所有图片加载完再执行

而ready是只要文档（图片还未加载）加载完毕就执行，因此可能会出现无法获取图片的情况