[38]jquery入门

最新推荐文章于 2025-03-04 20:36:36 发布

周小董

最新推荐文章于 2025-03-04 20:36:36 发布

阅读量515

点赞数

分类专栏：前端Html

本文链接：https://blog.youkuaiyun.com/xc_zhou/article/details/80637749

版权

前端Html 专栏收录该内容

8 篇文章

订阅专栏

运用jQuery时，需要在页面中引入jQuery文件

jQuery的hello world

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>helloworld</title>
	<!-- 1. 在页面中引入jQuery支持 -->
	<script src="js/jquery-1.12.4.js"></script>
	<style>
		#box{width: 200px;height: 200px;background: red;}
	</style>
</head>
<body>
	<button id="btn">点击我试试</button>
	<div id="box"></div>

	<script>
		// jQuery代码，写在一对script标签中
		// 可以使用最简洁的代码，完成JS中复杂的功能！
		// $是jQuery的一个函数，表示 : jQuery() == $()
		// $("")是jQuery选择器，参考了CSS选择器 #btn->id选择器
		// $("#btn").click(fn)表示添加一个单击事件处理函数
		$("#btn").click(function() {
			// toggle()/slideToggle() jQuery内置动画效果
			$("#box").slideToggle();
		})
	</script>
</body>
</html>

jquery 选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		/*
		HTML中的代码是同步执行的：按照从上到下的顺序解释执行的

		为了保证页面中的标签加载完成之后执行JQuery代码
		使用$(function() {  ...代码：就是页面标签加载完成执行的代码.. })
		*/
		$(function() {
			// 这里写的代码，就是当页面中的标签全部加载完成执行的代码；类似于window.onload
			// 标签选择器:$("标签名称")
			$("#btn_tag_selector").click(function() {
				// 标签选择器：选择所有的div标签，添加边框
				$("div").css({
					"border":"solid 1px orange"
				})
			});

			$("#btn_id_selector").click(function() {
				// ID选择器：语法$("#id值")
				$("#box").css({
					"border":"solid 1px red"
				})
			});

			$("#btn_class_selector").click(function() {
				// class选择器：语法：$(".class名称")
				$(".item").css({
					"border":"solid 1px blue",
					"background":"#ccc"
				})
			});

			$("#btn_child_selector").click(function() {
				// 层级选择器，可以类似css语法一样，使用样式嵌套
				// 子元素选择器
				$("#container > li").css({
					"border":"solid 2px pink",
					"background":"#dfdfdf"
				})
			});

			$("#btn_contain_selector").click(function() {
				// 层级选择器：包含选择器
				$("#container li").css({
					"border":"solid 2px pink",
					"background":"#006699",
					"color":"#fff"
				})
			});

			$("#test").click(function() {
				$("#container a").css({
					"color":"red",
					"text-decoration":"none"
				})
			});

			$("#btn_odd_selector").click(function() {
				$("li:odd").css({
					"background":"orange"
				})
			})

		})
	</script>
</head>
<body>
	<button id="btn_tag_selector">标签选择器</button>
	<button id="btn_id_selector">id选择器</button>
	<button id="btn_class_selector">class选择器</button>
	<button id="btn_child_selector">层级选择器：子元素选择器</button>
	<button id="btn_contain_selector">层级选择器：包含选择器</button>
	<button id="test">测试获取标签中包含的一个深层标签超链接</button>
	<button id="btn_odd_selector">:odd</button>

	<hr>
	<div>这是一个单纯的div标签，没有id和class属性</div>
	<div id="box">这是一个div标签，id属性值为box</div>
	<div class="item">这是一个div标签1，class属性值为item</div>
	<div class="item">这是一个div标签2，class属性值为item</div>
	<ul id="container">
		<li>这是一个ul中的li标签</li>
		<li>这是一个ul中的li标签</li>
		<li>这是一个ul中的li标签</li>
		<li>这是一个ul中的li标签</li>
		<ul>
			<li>这是ul中的ul里面的li标签</li>
			<li>这是ul中的ul里面的li标签</li>
			<li>这是ul中的ul里面的li标签<span>这是span标签</span></li>
			<li>这是ul中的ul里面的li标签<a href="#">超链接</a></li>
		</ul>
	</ul>
</body>
</html>

动画效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
		#box{width: 200px;height: 200px;background: orange;position:absolute;top:50px;left:0px;}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function() {

			$("#btn_show").click(function() {
				$("#box").show(1000);
			})

			$("#btn_hide").click(function() {
				$("#box").hide(1000);
			})

			$("#btn_toggle").click(function() {
				$("#box").toggle(1000);
			})

			$("#btn_slideDown").click(function() {
				$("#box").slideDown(1000);
			})

			$("#btn_slideUp").click(function() {
				$("#box").slideUp(1000);
			})

			$("#btn_slideToggle").click(function() {
				$("#box").slideToggle(1000);
			})

			$("#btn_fadeIn").click(function() {
				$("#box").fadeIn(1000);
			})

			$("#btn_fadeOut").click(function() {
				$("#box").fadeOut(1000);
			})

			$("#btn_fadeToggle").click(function() {
				$("#box").fadeToggle(1000);
			})

			$("#btn_fadeTo").click(function() {
				$("#box").fadeTo(1000, 0.5);
			});

			$("#btn_animate").click(function() {
				$("#box").animate({left:"500px",top:"100px",width:"100px", height:"50px"},1000)
					.animate({top:"400px",left:"300px"}, 500)
					.animate({top:"200px", left:"100px"}, 1000)
					.animate({width:"200px",height:"100px"}, 400)
					.animate({width:"50px",height:"10px"}, 200)
					.animate({width:"300px",height:"200px"}, 500);
			})
		})
	</script>
</head>
<body>
	<button id="btn_show">显示</button>
	<button id="btn_hide">隐藏</button>
	<button id="btn_toggle">显示/隐藏 状态切换</button>

	<button id="btn_slideDown">卷帘显示</button>
	<button id="btn_slideUp">卷帘隐藏</button>
	<button id="btn_slideToggle">卷帘显示/隐藏 状态切换</button>

	<button id="btn_fadeIn">透明度显示</button>
	<button id="btn_fadeOut">透明度隐藏</button>
	<button id="btn_fadeToggle">透明度显示/隐藏 状态切换</button>
	<button id="btn_fadeTo">切换到指定的透明度</button>


	<button id="btn_animate">自定义动画</button>
	<div id="box"></div>
</body>
</html>

轮播图

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
	*{margin:0px;padding:0px;}
	#bannel_box{margin:10px auto;padding:5px;border:solid 1px #8f8f8f;border-radius:8px;position:relative;width:800px;height:450px;}
	#bannel_box img{position:absolute;width:800px;vertical-align: bottom;border:none;border-radius:8px;display:none;}
	#bannel_box img:nth-child(1){display:block;}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
		
	<script>
		$(function() {

			var $index = 0;// 当前正在展示的图片的下标

			// 计时函数， 3S更换一次图片
			setInterval(function() {
				var $next = $index + 1;// 下一张要展示的图片的下标
				if($next >= 5) {
					$next = 0;
				}

				$("img").eq($index).fadeOut(1000);//隐藏当前图片
				$("img").eq($next).fadeIn(1000);// 显示下一张图片

				$index ++;
				if($index >= 5) {
					$index = 0;
				}

			}, 3000);
		})
	</script>
</head>
<body>
	<div id="bannel_box">
		![](images/bannel01.jpg)
		![](images/bannel02.jpg)
		![](images/bannel03.jpg)
		![](images/bannel04.jpg)
		![](images/bannel05.jpg)
	</div>
</body>
</html>

导航条菜单下拉框

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
		*{margin:0;padding:0;}
		.nav{list-style:none;height:50px;background-color:#069;}
		.nav > li{float:left;height:50px;font-size:20px;color:#fff;width:100px;text-align:center;line-height:50px;}

		.nav > li > ul{list-style:none;width:120px;background:pink;display:none;}
		.nav > li > ul >li{height:50px;line-height:50px;color:#333;font-size:18px;width:120px;}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function() {
			// 这里面的代码，是当页面中的标签加载完成后执行的
			$("li").mouseenter(function() {
				// 在事件操作中，可以通过this来标签当前事件触发的元素
				// console.log($(this).children());
				// console.log($(this).children().last());
				$(this).children().last().stop(true).slideDown("slow");
			});

			$("li").mouseleave(function() {
				$(this).children().last().stop(true).slideUp("slow");
			})

		})
	</script>
</head>
<body>
	<ul class="nav">
		<li><span>首页</span>
			<ul>
				<li>首页二级菜单</li>
				<li>首页二级菜单</li>
				<li>首页二级菜单</li>
				<li>首页二级菜单</li>
				<li>首页二级菜单</li>
			</ul>
		</li>
		<li><span>新闻</span>
			<ul>
				<li>新闻二级菜单</li>
				<li>新闻二级菜单</li>
				<li>新闻二级菜单</li>
				<li>新闻二级菜单</li>
				<li>新闻二级菜单</li>
			</ul>
		</li>
		<li><span>影视</span>
			<ul>
				<li>影视二级菜单</li>
				<li>影视二级菜单</li>
				<li>影视二级菜单</li>
				<li>影视二级菜单</li>
				<li>影视二级菜单</li>
			</ul>
		</li>
		<li><span>音乐</span>
			<ul>
				<li>音乐二级菜单</li>
				<li>音乐二级菜单</li>
				<li>音乐二级菜单</li>
				<li>音乐二级菜单</li>
				<li>音乐二级菜单</li>
			</ul>
		</li>
		<li><span>体育</span>
			<ul></ul>
		</li>
		<li><span>财经</span>
			<ul></ul>
		</li>
		<li><span>八卦</span>
			<ul></ul>
		</li>
		<li><span>美食</span>
			<ul></ul>
		</li>
	</ul>
</body>
</html>

图片翻转

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
	*{margin:0;padding:0;}
	#box{margin:50px auto;width:400px;height: 226px;padding:5px;border:solid 1px #cdcdcd;position:relative;}
	#box img{width: 400px;border-radius:8px;position:absolute;}
	#box img:nth-child(2){height:0;}
	</style>

	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function() {
			// 当页面中所有标签全部加载完成的时候，执行的代码
			$("#box").mouseenter(function() {

				var $that = $(this);
				// 隐藏第一张图片
				$that.children().first().animate({top:"113px", height:"0px"}, 1000, function() {

					// 显示第二章图片
					$that.children().last().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000);
				});

			});

			$("#box").mouseleave(function() {

				var $that = $(this);
				// 隐藏第二张图片
				$that.children().last().animate({top:"113px", height:"0px"}, 1000, function() {

					// 显示第一章图片
					$that.children().first().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000);
				});

			});
		})
	</script>
</head>
<body>
	
	<div id="box">
		![](images/bannel01.jpg)
		![](images/bannel02.jpg)
	</div>
</body>
</html>

jquery的DOM操作

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>DOM操作</title>
	<!--
		使用JQuery改造瀑布流！
	-->
</head>
<body>
	<p>
		JQuery 的DOM操作

		<ul>
			<li>1. DOM操作选择标签</li>
			<li>2. DOM操作处理标签数据</li>
		</ul>
	</p>
	<p>
		JavaScript对象：就是标签本身，也称为DOM对象<br />
			var _box =  document.getElementById("box")
			_box >>>> <div id="box"></div>
		jQuery对象：是DOM对象的数组
			var $box = $("#box")
			$box >>>>  [<div id="box"></div>]
	</p>
	<p>
		JQuery DOM操作选择标签
			通过函数操作，替代了选择器操作来选中标签
			> 选择器：括号中是字符串
			> 函数：括号中可以有变量
		<ul>
			<li>选择器.eq(num)：用于选中指定下标的jQuery对象</li>
			<li>选择器.gt(num)：用于选中下标大于指定下标的所有jQuery对象</li>
			<li>选择器.lt(num)：用于选中下标小于指定下标的所有jQuery对象</li>

			<li>选择所有的子元素: 选择器.children()</li>
			<li>选择所有的指定的子元素: 选择器.children("ul")</li>

			<li>选择第一个子元素：选择器.first()</li>
			<li>选择最后一个子元素：选择器.last()</li>

			<li>判断标签是否包含某个class名称：选择器.hasClass("box")</li>

			<li>二次筛选：选择器.filter(选择器)；从第一个选择器选中的标签中继续选择满足第二个选择器的标签</li>

			<li>二次筛选：选择器.has(子标签选择器)，选择所有包含指定子元素的父标签</li>

			<li>二次筛选：父选择器.find(子选择器)，从父选择器选中的标签中的子元素里面，查询符合子选择器的标签元素</li>

			<li>next:选择下一个同级元素</li>
			<li>prev:选择上一个同级元素</li>
			<li>sibings:选择所有的同级元素</li>
		</ul>
	</p>

	<p>
		
		jQuery DOM操作，操作标签数据
			内容
			属性
			样式
			标签
	</p>
	<p>
		内容
		常规开始标签和结束标签中间的内容操作
		var $boxValue = $("#box").text();
		$("#box").text("添加的内容")

		表单元素的数据
		var $name = $("#username").val();
	</p>
	<p>
		属性操作：

		var $id = $("#box").attr("id")
		$("#box").attr("id", "container")
	</p>
	<p>
		样式操作：
		简洁操作
			$("#box").css("border", "solid 1px red");
		标准操作
			$("#box").css({
				"border":"solid 1px red",
				"background":"#efefef"
			})
		注意：样式尽量写在css中，通过标签的class属性来控制使用不同的样式
		如果是动态递增变化的样式，可以通过JS代码进行处理。
	</p>
	<p>
		标签的操作：
			代码中创建一个标签
				var $div = $("<div>");

		常见操作函数：
			append();
			appendTo();
			prepend();
			prependTo();
	</p>

	<div id="box"></div>
	<input type="text" id="username">
</body>
</html>