jQuery 第一弹

最新推荐文章于 2024-08-15 08:55:57 发布
最新推荐文章于 2024-08-15 08:55:57 发布
阅读量220 收藏
点赞数
分类专栏： jQuery 前端 文章标签： jquery javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45988242/article/details/120013132
版权

jQuery目录

console.dir

console.dir()可以显示一个对象所有的属性和方法。

jQuery对象和DOM对象

1.DOM对象：用原生js获取过来的对象
2.jQuery对象: 用jQuery方式获取过来的对象是jQuery对象。
​ 本质：通过$把DOM元素进行了包装(伪数组形式存储)
3.jQuery对象只能使用jQuery方法，不能使用原生的方法和属性；DOM对象则使用原生的JavaScript的属性和方法

jQuery对象和DOM对象转化

$('div') 转化为jq对象
jQuery--》dom
// 第一种方法
$('div')[index]   index是索引号
// 第二种方法
$('div').get(index) index是索引号

jQuery选择器

基础选择器

层级选择器

在这里插入图片描述

jq设置样式

$('div').css('属性','值')

隐式迭代

遍历内部DOM元素(伪数组形式存储)的过程就叫做 隐式迭代

筛选选择器

使用方法：

$(“ul li:first”).css(“color”,“blue”);
在这里插入图片描述

筛选方法（重点）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<style>
			
		</style>
	</head>
	<body>
		<div class="ye">
			<p class="ba1">我是爸爸</p>
			<div class="ba2">
				<p class="er">
					儿子
				</p>
			</div>
		</div>
		<script>
			$(function(){
				console.log($(".ba1").parent());
				 console.log($(".er").parent());
				$(".ye").children().css("color","yellow");
				console.log($(".ye").children("div"));
			})
		</script>
	</body>
</html>

下拉菜单（实战）

当鼠标移动到 显示
否则 不显示
在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<style>
			*{
				/* 去掉 li 前面的点 */
				list-style: none;
				text-decoration: none;
				
			}
			.nav{
				float: left;
				margin-left: 100px;
			}
			a{
				color: black;
			}
			.nav>li>ul{
				display: none;
			}
		</style>
	</head>
	<body>
	<!-- 	<div class="ye">
			<p class="ba1">我是爸爸</p>
			<div class="ba2">
				<p class="er">
					儿子
				</p>
			</div>
		</div> -->
		<ul class="nav">
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
		</ul>
		<script>
			$(function(){
				
				$(".nav>li").mouseover(function(){
					//this表示当前元素
					$(this).children("ul").show();
				})
				$(".nav>li").mouseout(function(){
					$(this).children("ul").hide();
				})
			})
		</script>
	</body>
</html>

siblings(selector) 和eq（index）

<body>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div>
			4
		</div>
		<script>
			$(function(){
				$("ul li").eq(2).css("color","pink");
				$("div").siblings("ul").css("background","red")
			})
		</script>
	</body>

在这里插入图片描述

jQuery排他思想（点击一个按钮变色其他的不变）

		<button >点我</button>
		<button>点我</button>
		<button>点我</button>
		<button>点我</button>
		<script>
			$(function(){
				$("button").click(function(){
					//jq不能用原生的this 要用封装的$(this)!
				$(this).css("background","red");
				$(this).siblings("button").css("background","");
				})
			})
		</script>

要注意 this和$(this)的区别 一个是原生js一个是jq封装的

淘宝服饰查看（实战）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我是你爸爸A</title>
		 <style type="text/css">
		        * {
		            margin: 0;
		            padding: 0;
		            font-size: 12px;
		        }
		        ul {
		            list-style: none;
		        }
		        a {
		            text-decoration: none;
		        }
		        .wrapper {
		            width: 250px;
		            height: 248px;
		            margin: 100px auto 0;
		            border: 1px solid pink;
		            border-right: 0;
		            overflow: hidden;
		        }
		        #left,
		        #content {
		            float: left;
		        }
		        
		        #left li {
		            background: url(img/lili.jpg) repeat-x;
		        }
		        #left li a {
		            display: block;
		            width: 48px;
		            height: 27px;
		            border-bottom: 1px solid pink;
		            line-height: 27px;
		            text-align: center;
		            color: black;
					
		        }
		        #left li a:hover {
		           background-color: red;
		        }
		        #content {
		            border-left: 1px solid pink;
		            border-right: 1px solid pink;
		        }
		    </style>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<div class="wrapper">
	        <ul id="left">
	            <li><a href="#">女靴</a></li>
	            <li><a href="#">雪地靴</a></li>
	            <li><a href="#">冬裙</a></li>
	            <li><a href="#">呢大衣</a></li>
	            <li><a href="#">毛衣</a></li>
	            <li><a href="#">棉服</a></li>
	            <li><a href="#">女裤</a></li>
	            <li><a href="#">羽绒服</a></li>
	            <li><a href="#">牛仔裤</a></li>
	        </ul>
	        <div id="content">
	            <div>
	                <a href="#"><img src="img/女靴.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="img/雪地靴.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="img/冬裙.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="img/呢大衣.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="img/毛衣.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="img/棉服.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="img/女裤.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="img/羽绒服.jpg" width="200" height="250" /></a>
	            </div>
	            <div>
	                <a href="#"><img src="img/牛仔裤.jpg" width="200" height="250" /></a>
	            </div>
	
	        </div>
	
	
	    </div>
	<script>
			  $(function(){
				  $("#left li").mouseover(function(){
					  var index=$(this).index();
					  $("#content div").eq(index).show();
					    $("#content div").eq(index).siblings().hide();
				  })
				  
			  })
	//        $(function() {
	//             // 1. 鼠标经过左侧的小li 
	//             $("#left li").mouseover(function() {
	//                 // 2. 得到当前小li 的索引号
	//                 var index = $(this).index();
	//                 console.log(index);
	//                 // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
	//                 // $("#content div").eq(index).show();
	//                 // 4. 让其余的图片（就是其他的兄弟）隐藏起来
	//                 // $("#content div").eq(index).siblings().hide();
	//                 // 链式编程
	//                 $("#content div").eq(index).show().siblings().hide();
	
	//             })
	//         })
			
	    </script>
		
	</body>
</html>

在这里插入图片描述

移动鼠标到对应的栏，显示对应的照片

链式编程

自身变为红色 兄弟们变为无色
$(this).css("color","red").siblings().css("color","");

jQuery样式操作

css()方法

在这里插入图片描述

设置类样式方法（常用）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123123</title>
		<script src="js/jquery-3.5.1.js"></script>
		<style type="text/css">
			div{
				background-color: red;
				width: 100px;
				height: 100px;
				transition: all 0.5s;
			}
			.box2{
				background-color: yellow;
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="box1">
			
		</div>
		<script type="text/javascript">
			$(function(){
				//1.添加类
				// $(".box1").click(function(){
				// 	$(this).addClass("box2");
				// })
				// //2.移除类
				// $(".box1").click(function(){
				// 	$(this).removeClass("box2");
				// })
				//3.切换类
				$("div").click(function(){
					$(this).toggleClass("box2");
				})
			})
		</script>
	</body>
</html>

tab栏切换案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<script src="js/jquery-3.5.1.js"></script>
		<style type="text/css">
			*{
				list-style: none;
				text-decoration: none;
			}
			.box{
				width: 800px;
				height: 500px;
				
				margin: 0 auto;
			}
			.box ul{
				display: inline-block;
				background-color: rgb(241,239,241);
			}
			.box ul li{
				float: left;
				line-height: 40px;
				text-align: center;
				padding: 0 20px;
			}
			
			.foot div{
				display: none;
			}
			.current{
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="head">
				<ul>
					<li>商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价（5000+）</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="foot">
				<div>
					1111111111111
				</div>
				<div>
					22222222222222
				</div>
				<div>
					3333333333333
				</div>
				<div>
					4444444444444
				</div>
				<div>
					555555555555555
				</div>
			</div>
		</div>
		
		
		<script>
			$(function(){
				$(".head ul li").click(function()
				{
					$(this).addClass("current").siblings().removeClass("current");
					var index=$(this).index();
					 $(".foot div").eq(index).show().siblings().hide();
				})
				
			})
			
		</script>
	</body>
</html>

在添加 class的同时 移除 兄弟的 class

jQuery效果

显示与隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.5.1.js"></script>
		<title>test4</title>
	</head>
	<style type="text/css">
		.box{
			background-color: yellow;
			width: 150px;
			
			
			height: 100px;
		}
	</style>
	<body>
		<button>显示</button>
		<button>隐藏</button>
		<button>切换</button>
		<div class="box"></div>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					$(".box").show("slow",function(){
						alert("显示")
					});
				})
				$("button").eq(1).click(function(){
					$(".box").hide("slow");
				})
				$("button").eq(2).click(function(){
					$(".box").toggle("slow");
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

滑动效果以及事件切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<style type="text/css">
			.box{
				width: 160px;
				height: 160px;
				background-color: #FFC0CB;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>上拉滑动</button>
		<button>下拉滑动</button>
		<button>滑动切换</button>
		<div class="box">
			
		</div>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					$(".box").slideDown();
				})
				$("button").eq(1).click(function(){
					$(".box").slideUp();
				})
				$("button").eq(2).click(function(){
					$(".box").slideToggle();
				})
				
			})
		</script>
	</body>
</html>

hover简化 微博下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<style>
			*{
				/* 去掉 li 前面的点 */
				list-style: none;
				text-decoration: none;
				
			}
			.nav>li{
				float: left;
				width: 100px;
			}
			a{
				color: black;
			}
			.nav>li>ul{
				display: none;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
		</ul>
		<script>
			$(function(){
				// $(".nav>li").mouseover(function(){
				// 	//this表示当前元素
				// 	$(this).children("ul").slideDown(200);
				// })
				// $(".nav>li").mouseout(function(){
				// 	$(this).children("ul").slideUp(200);
				// })
				1.复合
				// $(".nav>li").hover(function(){
				// 		$(this).children("ul").slideDown(200);
				// },function(){
				// 	$(this).children("ul").slideUp(200);
				// })
				2.简单 但只有一个函数时，无论离开进入都会触发这个函数
				$(".nav>li").hover(function(){
					$(this).children("ul").slideToggle(200);
				})
			})
		</script>
	</body>
</html>

停止动画排队

多次触发 会依次进行动画。
注意 stop必须要在动画前加上

$(this).children("ul").stop().slideToggle(200);

jQuery 淡入淡出以及突出显示案例

// 淡入
fadeIn([speed,[easing],[fn]])
$("div").fadeIn();

// 淡出
fadeOut([speed,[easing],[fn]])
$("div").fadeOut;

// 淡入淡出切换
fadeToggle([speed,[easing],[fn]])

渐进方式调整到指定的不透明度
// 修改透明度   这个速度和透明度必须写
fadeTo(speed,opacity,[easing],[fn])
opacity ：透明度必须写，取值 0~1 之间
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

<button>淡入</button>
		<button>淡出</button>
		<button>切换</button>
		<button>修改透明度</button>
		<div class="box">
			
		</div>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					$(".box").fadeIn(1000);
				})
				$("button").eq(1).click(function(){
					$(".box").fadeOut(1000);
				})
				$("button").eq(2).click(function(){
					$(".box").fadeToggle(1000);
				})
					$("button").eq(3).click(function(){
						$(".box").fadeTo(1000,0.5);
					})
			})
		</script>

高亮显示案例（实战）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淡入淡出</title>
		<script src="js/jquery-3.5.1.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			body {
				background: #000;
			}

			.wrap {
				margin: 100px auto 0;
				width: 630px;
				height: 394px;
				padding: 10px 0 0 10px;
				background: #000;
				overflow: hidden;
				border: 1px solid #fff;
			}
			.wrap li {
			            float: left;
			            margin: 0 10px 10px 0;
			        }
					   
					        .wrap img {
					          
					            border: 0;
					        }
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="#"><img src="img/01.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/02.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/03.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/04.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/05.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/06.jpg" alt="" /></a>
				</li>
			</ul>
		</div>

		<script>
			$(function() {
				
				$("li").hover(function(){
					$(this).siblings().stop().fadeTo(10,0.5);
				},function(){
					$(this).siblings().stop().fadeTo(10,1);
				})

			})
		</script>
</html>

自定义动画animate

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

注意的定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>animate</title>
		<script src="js/jquery-3.5.1.js"></script>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #000000;;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<button type="button">dianwo </button>
		<div >
			
		</div>
		<script>
			$(function(){
				$("button").click(function(){
					$("div").animate({
						left:500,
						top:300,
						opcity:.8
					},500)
				})
			})
		</script>
	</body>
</html>

注意参数

'left':'20px'
或者
left:20或者
'left':20

王者荣耀手风琴效果（实战）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			img {
				display: block;
			}

			ul {
				list-style: none;
			}

			.king {
				width: 852px;
				margin: 100px auto;
				background: url(images/bg.png) no-repeat;
				overflow: hidden;
				padding: 10px;
			}

			.king ul {
				overflow: hidden;
			}

			.king li {
				position: relative;
				float: left;
				width: 69px;
				height: 69px;
			}

			.king li.current {
				width: 224px;
			}

			.king li.current .big {
				display: block;
			}

			.king li.current .small {
				display: none;
			}

			.big {
				width: 224px;
				display: none;
			}

			.small {
				position: absolute;
				top: 0;
				left: 0;
				width: 69px;
				height: 69px;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="king">
			<ul>
				<li class="current">
					<a href="#">
						<img src="images/m1.jpg" alt="" class="small">
						<img src="images/m.png" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/l1.jpg" alt="" class="small">
						<img src="images/l.png" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/c1.jpg" alt="" class="small">
						<img src="images/c.png" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/w1.jpg" alt="" class="small">
						<img src="images/w.png" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/z1.jpg" alt="" class="small">
						<img src="images/z.png" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/h1.jpg" alt="" class="small">
						<img src="images/h.png" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/t1.jpg" alt="" class="small">
						<img src="images/t.png" alt="" class="big">
					</a>
				</li>
			</ul>

		</div>
		<script>
			$(function(){
				//鼠标经过某个li 有两步操作
				$(".king li").mouseenter(function(){
					//1.当前的li宽度变为224px 同时里面的小图片淡出 大图片淡入
					$(this).stop().animate({
						'width':224,
						
					}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
							//2.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出
					$(this).siblings("li").stop().animate({
						width:69
					}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
							
				})
		

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

注意find函数的使用 以及stop函数

我是个菜鸡.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery基本使用的方法
m0_67212141的博客
12-14 332
快来学习吧，原创不易，多多支持呀！每篇都是干货!
在浏览器console中使用jQuery
iastro的专栏
07-05 4294
var jquery = document.createElement('script'); jquery.src = 'https://code.jquery.com/jquery-3.3.1.min.js'; document.getElementsByTagName('head')[0].appendChild(jquery);如果网页源代码中没有引入jquery是不能在console中...
蓝桥web挑战：js、jq常用方法
jayLog的博客
03-02 399
蓝桥web低31期挑战中js、jq实用方法总结
jQuery的基本使用
QDCXYXZ_的博客
03-07 2770
jQuery的基本使用
第二章 jQuery技术解密 (五)
爱谁谁的专栏
02-20 3442
2.3.5 引用 DOM 元素 jQuery() 函数能够直接接受 HTML 字符串，并把它们转换为 DOM 结构，这是上一节中所讲解的利用 jQuery() 函数生成 DOM 元素。当然，我们也可以看到 jQuery() 函数还可以接收 DOM 元素、DOM元素集合、HTML标签或者 ID 值。下面我们就来分析 jQuery.fn.init() 构造器是如何把这些类型的参数转换为 DOM 元素
jQuery插件实现弹性运动完整示例
10-18
1. **jQuery插件概念**：jQuery插件是一种扩展jQuery功能的代码，通常被封装在一个或多个函数中。开发者可以通过调用这些函数来实现特定的效果，而无需重写jQuery核心代码。 2. **弹性运动原理**：在本示例中，弹性...
一个jquery的弹出层的插件第1/2页
10-30
总的来说，这个jQuery弹出层插件展示了如何利用jQuery的插件机制来增强网页的交互性和用户体验，是学习和理解jQuery插件开发的一个很好的实例。通过深入理解并实践这样的插件，开发者可以更高效地构建富交互的Web...
jQuery点击遮罩弹出层固定网页中间
10-05
实现这一功能的第一步是创建HTML结构。你需要在页面中添加一个用于点击触发遮罩层的元素，例如一个按钮，以及一个用于弹出的弹出层元素。弹出层应该包含需要展示的内容，并设置为初始隐藏状态。例如： ```html 点击...
jQuery弹出框插件
05-02
jQuery库本身并不内置弹出框功能，但通过众多第三方开发者创建的插件，我们可以轻松地在项目中集成这些功能。例如，描述中提到的“信息提示弹出层插件”就是一种这样的工具，它具备多种提示功能，设计精美且易于使用...
jquery 锁定弹出层实现代码
10-29
这种做法在现代的Web开发中非常常见，通过引入第三方库和框架，开发者能够快速构建起复杂的功能，而无需从零开始编写每一行代码。 3. 配置模块和事件处理：文档提到了配置模块（moduleEvent数组），它是一个用于...
01【jQuery】入门， jQuery 概述，jQuery 的基本使用
嘿嘿_哈哈的博客
09-07 356
01【jQuery】入门 学习内容： jQuery 概述，jQuery 的基本使用 1. jQuery 概述 1.1 JavaScript 库 仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就 是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们.
JQuery.HoverDir库实现侧边栏二级菜单
二手农民的学习博客
05-05 1172
Jquery.hoverDir响应鼠标移动方向的悬停效果插件 HTML代码 技术 Java PHP
jquery.hoverdir.js图片悬停插件
stray82的博客
02-19 959
html结构： ul id="da-thumbs" class="da-thumbs"> li> a href="#"> img src="images/list.jpg" /> div>span>简介span>div> a> li> li> li> ul>
鼠标移动事件（鼠标移动到主菜单上显示子菜单）
聆听
11-14 2682
mouseenter（）：当鼠标指针穿过元素时，会发生 mouseenter 事件。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。 mouseleave （）：当鼠标指针离开元素时，会发生 mouseleave 事件。与 mouseout 事件不同，只有在鼠标指针离开被选元素...
jQuery学习第五课(jquery中的事件和事件对象)
webdev
04-09 115
 jquery中的事件和事件对象 1.加载文档事件 2.鼠标事件 3.键盘事件 4.表单事件 5.浏览器事件 6.事件对象 7.绑定事件的方法 8.移除事件的方法 9.事件冒泡（略） 10.事件命名空间 加载文档事件 a. ready()略 b. $.holdReady(...
ECMAScript性能优化技巧与陷阱：深入探索与实践
最新发布
Chujun123528的博客
08-15 625
ECMAScript性能优化是一个复杂而细致的过程，需要开发者从多个角度进行考虑和优化。通过合理利用现代JavaScript特性、优化DOM操作、选择合适的算法和数据结构、利用Web Workers等技术手段，可以显著提升JavaScript代码的执行效率。同时，开发者还需要关注全局变量、闭包、eval等性能陷阱，避免不必要的性能开销。此外，性能监控与分析、内存管理、网络层面的优化等也是不可忽视的重要方面。只有综合考虑这些因素，并持续进行性能优化工作，才能为用户提供更加流畅、高效的Web应用体验。
提升前端性能的JavaScript技巧
han2434的博客
08-14 696
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 151
【代码】playwright链接本地浏览器，实现自动登录。
【无标题】
weixin_42348009的博客
08-14 115
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
第一个jquery页面
06-20
在jQuery中，创建第一个使用这个流行的JavaScript库的页面非常简单。jQuery的核心思想是简化DOM操作和事件处理。下面是一个基础的HTML页面，展示了如何引入jQuery并使用它来选择元素： ```html <!DOCTYPE html> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值