JQuery总结1

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

本文介绍了如何使用JQuery获取页面元素及其实现的几种方法，并通过一个淘宝菜单案例展示了JQuery在实际项目中的应用，包括鼠标悬停事件处理、元素显示与隐藏等。

JQuery入门

1.使用$()获取

2.使用 JQ对象的方法获取元素的文本内容

3.使用JQ对象转换为DOM对象，获取文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JQuery入门</title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				var a1 = $("#d1"); //获取id元素
				console.log(a1);
				console.log(a1.text()); //使用JQ对象的方法获取元素的文本内容
				console.log(a1[0].innerText); //JQ对象转换为DOM对象，获取文本内容

				console.log("---------------------------------");

				var d1 = document.getElementById("d1"); //根据id获取元素
				console.log(d1.innerText); //使用DOM对象获取元素文本内容
				console.log($(d1).text()); //把DOM对象转换为JQ对象，获取文本内容

				var a2 = $(".c1"); //获取class元素
				console.log(a2)

				var a3 = $("p") //获取标签元素
				console.log(a3);

			});
		</script>
	</head>
	<body>
		<h2>JQuery入门</h2>
		<div id="d1">
			id为d1的divxxxxx
		</div>
		<div class="c1">
			id为c1的div1
		</div>
		<div class="c1">
			id为c1的div2
		</div>
		<p>这是一个p标签1</p>
		<p>这是一个p标签2</p>
	</body>
</html>

淘宝菜单案例

$("#right>ul>li:eq("+index+")").show().siblings().hide()

含义:id为right里面的ul 的li选中的鼠标事件展示，但除了展示外的剩余隐藏

show([speed,[easing],[fn]])：这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

hide([speed,[easing],[fn]])：这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}

			ul li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.d1 {
				width: 300px;
				height: 250px;
				border: 1px red solid;
				margin: 200px auto;
				overflow: hidden;
			}

			#d2 {
				width: 90px;
				/* border: 1px red solid; */
				float: left;
				margin-top: 0px;
			}
			#d2 ul li a{
				display: inline-block;
				width: 90px;
				height: 31px;
				font-family: "行楷";
				font-size: 13px;/* 改字体大小 */
				font-weight: bold;  /* 给字体加粗*/
				text-align: center;
				line-height: 25px;
				background: bisque;
			}
			#d2 ul li a:hover{
				background-color: aqua;
			}
			#d3{
				width: 210px;
				float: right;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#d2>ul>li").mouseover(function(){
					//1.拿到当前鼠标放入列表的索引
					var index=$(this).index();
					//2.根据索引找到右侧匹配的项进行显示，其他兄弟元素隐藏
					$("#d3>ul>li:eq("+index+")").show().siblings().hide();
					/* $("#d3>ul>li:not("+index+")").hide();
					$("#d3>ul>li:eq("+index+")").show(); */
				});
			});
		</script>
	</head>
	<body>
		<div class="d1">
			<div id="d2">
				<ul>
					<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>
			<div id="d3">
				<ul>
					<li><img src="img/冬裙.jpg"></li>
					<li><img src="img/毛衣.jpg"></li>
					<li><img src="img/棉服.jpg"></li>
					<li><img src="img/呢大衣.jpg"></li>
					<li><img src="img/牛仔裤.jpg"></li>
					<li><img src="img/女裤.jpg"></li>
					<li><img src="img/女靴.jpg"></li>
					<li><img src="img/羽绒服.jpg"></li>
				</ul>
			</div>
		</div>
	</body>
</html>