前端学习之路——Jquery上

温酒09

已于 2023-07-05 09:33:03 修改

阅读量101

点赞数

分类专栏：前端基础文章标签： jquery 前端 javascript

于 2022-05-31 09:31:57 首次发布

本文链接：https://blog.csdn.net/weixin_37942054/article/details/125058583

版权

前端基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍了jQuery的引入方法，通过示例展示了如何使用jQuery选择器选择DOM元素并进行事件绑定、对象转换、样式操作。详细讲解了基础选择器、层级选择器、过滤选择器以及表单选择器的使用，还涵盖了动态绑定事件、页面交互效果如购物车总价计算和QQ表情选择等应用场景。

摘要由CSDN通过智能技术生成

01-引入jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 使用jQuery之前，必须先引入jquery函数库文件 -->
		<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//测试jq是否被成功引入
			
			$(function(){
				//当前function会在浏览器加载完成所有html元素后理解执行
				console.log("jq引入成功");
			})
			 
			/**
			 * $(function(){}) 是jquery提供的文档就绪事件 
			 * 其完整的写法为 ： $(document.ready(function(){}))
			 */
			 
			/**
			 * onload 和ready的区别
			 * jquery的ready函数是在html所有标签(DOM) 加载完成之后，就会执行
			 * 而javaScript的onload事件 ，是等到所有内容，包括外部图片之类的文件，
			 * 全都加载完成之后才会执行。
			 */
			
		</script>
	</head>
	<body>
	</body>
</html>

02-第一个jQuery页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		输入：<input type="text"  id="i1" />
		<br>
		<input type="button" id="b1"  onclick=""/>按钮
		<div id="d1">
			
		</div>
		
		<script type="text/javascript">
			//jquery中的动态绑定事件的写法
			//动态绑定 .click 方法 (参数)
			//和 标签的onclick属性 作用相同，为动态绑定
			$("#b1").click(function(){
				alert("触发按钮");
				//动态绑定事件，点击按钮触发事件，将输入框中的值，写入到div中
				$("#d1").text($("#i1").val());
			})
		</script>
	</body>
</html>

03-js对象和jq对象的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		
		<input type="text"  id="i1"  />
		<button type="button" value="js转jq"  onclick="m1()">1</button>
		<button type="button" value="jq转js" onclick="m2()">2</button>
		
		<script type="text/javascript">
			//1、得到js对象 
			function m1(){
				let js = document.getElementById("i1");
				//将js对象转成jq对象 
				let jq = $(js);
				console.log(jq);
				console.log(jq.val());//val() 获取到对象中的值 
			}
			//2、得到jq对象 
			function m2(){
				let jq = $("#i1");//选择器选择i1
				//将jq对象转成js (jq对象实际上是一个数组，里边装的就是js对象)
				//将jq数组中的js对象拿出来
				let js = jq[0];
				console.log(js);
				console.log(js.value);//js对象通过value属性获取值，jq通过val()方法
				
			}
		</script>
	</body>
</html>

04-jQuery选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		 
		/**
		 * jquery选择器 
		 * 1、基础选择器：
		 * id选择器   	$("#id")
		 * class选择器   $(".class")
		 * 元素名选择器   $("元素名")
		 * 多元素选择器   $(多个选择器之间用逗号隔开)
		 * 任意元素选择器  $("*")
		 * 
		 */	
		$(function(){
			$("*").css("border","1px solid black");
			//设置任意元素的样式 css(参数1 ， 参数2)
			//参数1 -属性
			//参数2 - 设置的值
			
			$("#b1").click(function(){
				//动态绑定按钮点击事件，点击按钮为元素设置样式
				$("div").css("background-color","red");
				//可以同时添加多个样式
				$("div").css({
					"width":"100px",
					"height":"200px"
				});
				
				$(".c1").css("background-color","pink");
			});
			
			
			//2、层级选择器  上级，下级，同级
			$("#b2").click(function(){
				//点击b2按钮，改变div中的span样式
				$("div span").css("background-color","blue");
			});
			
			$("#b3").click(function(){
				//点击b3按钮，改变id为three的元素的下一个相邻div元素的样式
				$("#three+div").css({
					"width":"100px",
					"height":"50px"
				});
				//两种方式都可以获取下一个元素
				$("#three").next("div").css("background-color","green");
				
				//选择id为three的上一个相邻元素
				$("#three").prev("div").css({
					"width":"100px",
					"height":"50px",
					"background-color":"black"
				});
				
			});
			
			$("#b4").click(function(){
				//选择id为three后边的所有兄弟元素 - 同级别的，可以指定参数 
				$("#three").nextAll().css("background-color","yellow");
				//选择id为three前边的所有兄弟元素 - 同级别的
				$("#three").prevAll().css("background-color","purple");
				//选择id为three所有的兄弟元素，同级别的
				$("#three").siblings().css("background-color","plum");
			});
			
			
			
			
			//3、过滤选择器  
			$("#b5").click(function(){
				//点击b5按钮，选中所有div中的第一个元素 ,第一个div
				// $("div:first").css("background-color","green");
				$("div").eq(0).css("background-color","green");
				
				//选择所有div中的最后一个div 
				$("div").eq(-1).css("background-color","red");
				
				//选择所有div中，指定下标的div  从0开始
				$("div").eq(2).css("background-color","yellow");
			});
			
			$("#b6").click(function(){
				//点击按钮b6，选择input框 
				
				//选择可见的input框 元素  - text文本框中可见的内容
				let val = $("input:visible");
				console.log("用户名："+val.val());
				
				let v2 = $("input:hidden").val();
				console.log("密码"+v2);
			});
			
			//4、表单选择器
				
			$("#b7").click(function(){
				//点击按钮b7选中 所有表单项元素（input，select、button）
				let o = $(":input");
				console.log(o);
				//选中所有的普通文本输入框 
				$(":text").css("background-color","blue");
				//选中所有的密码框
				$(":password").css("background-color","red");
				//选中单选框
				$(":radio").css(
				{"width":"100px",
					"height":"50px",
					"background-color":"pink"});
				console.log( $(":radio") );
				
				$(":checkbox").css({"width":"100px",
					"height":"50px",
					"background-color":"pink"});
				$(":selected").css({"width":"100px",
					"height":"50px",
					"background-color":"red"});
				
				
			});
		});
			
		</script>
	</head>
	<body>
		
			
		
		<h1>基础选择器</h1>
		<button type="button" id="b1" >1</button>
		
		
		<div id="d1" value="div1">
			我是一个div
		</div>
		<div id="" class="c1">
			我是第二个div
		</div>
		
		
		<hr >
		<h2>层级选择器</h2>
		<button type="button"  id="b2" value="b2">2</button>
		<button type="button"  id="b3" value="b3">3</button>
		<button type="button"  id="b4" value="b4">4</button>
		<h2>过滤选择器</h2>
		<button type="button"  id="b5" value="b5">5</button>
		<button type="button"  id="b6" value="b6">6</button>
		<h2>表单选择器</h2>
		<button type="button"  id="b7" value="b7">7</button>
		<hr >
		<div id="one">
			<div > 里边的div	
			</div>
			<span class="s1">span1</span>
			<span class="s2">span2</span>
		</div>
		<div id="">
			div2
			<input type="hidden"  value="按钮1" />
			<input type="button"  value="按钮2" />
		</div>
		<div id="three">
			第三个div
			<span id="">
				span3
			</span>
		</div>
		<div id="">
			第四个div
		</div>
		
		<hr >
		用户名：<input type="text" /><br>
		密码：<input type="password"  /><br>
		性别：<input type="radio" name="gender"  value="women"  />女
		<input type="radio" name="gender"  value="man" />男<br>
		爱好：<input type="checkbox" name="hobby"  value="basketball" />篮球
		<input type="checkbox" name="hobby"  value="football" />足球
		<input type="checkbox" name="hobby"  value="ppball" />乒乓球
		<br>
		地址：<select >
			<option >北京</option>
			<option >上海</option>
			<option >广州</option>
			<option >深圳</option>
		</select>
		
	</body>
</html>

05-二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<select id="provs"  >
			<option>选择省份</option>
			<option>黑龙江</option>
			<option>吉林</option>
			<option>辽宁</option>
		</select>
		<select id="city">
			<option >选择城市</option>
		</select>
		
		
		<script type="text/javascript">
			let data = {
				"选择省份":[],
				"黑龙江":["哈尔滨","大庆","牡丹江"],
				"吉林":["长春","松原","四平"],
				"辽宁":["沈阳","抚顺","大连"]
			};
			
			//切换成jq  change() 
			$("#provs").change(function(){
				
				//获取 用户选择的省份
				let prov = provs.value; 
				//通过选择的省份，到data对象中，获取对应的城市数组
				let cityArr = data[prov];
				//每次重新选择省份时，都将之前的option清空 
				city.innerHTML = "<option>选择城市</option>";
				//遍历城市数组，将每一个城市作为option添加到city的select中
				for (let i = 0; i < cityArr.length; i++) {
					//创建option标签
					let  opt = document.createElement("option");//创建节点
					//将数组中的城市放进option标签中
					opt.innerText = cityArr[i];
					//将创建好的option放进select中
					city.appendChild(opt);//在当前标签中添加子元素到末尾
					
				}
			});
			
			// function selectCity(){
			// 	//获取 用户选择的省份 
			// 	let prov = provs.value; 
			// 	//通过选择的省份，到data对象中，获取对应的城市数组
			// 	let cityArr = data[prov];
			// 	//每次重新选择省份时，都将之前的option清空 
			// 	city.innerHTML = "<option>选择城市</option>";
			// 	//遍历城市数组，将每一个城市作为option添加到city的select中
			// 	for (let i = 0; i < cityArr.length; i++) {
			// 		//创建option标签
			// 		let  opt = document.createElement("option");//创建节点
			// 		//将数组中的城市放进option标签中
			// 		opt.innerText = cityArr[i];
			// 		//将创建好的option放进select中
			// 		city.appendChild(opt);//在当前标签中添加子元素到末尾
					
			// 	}
			// }
		</script>
	</body>
</html>

06-购物车练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<h3>购物车</h3>
		<input type="checkbox" value="5000" />华为手机<br>
		<input type="checkbox" value="6000" />联想ThinkPad<br>
		<input type="checkbox" value="8000" />小米iPad<br>
		<input type="checkbox" value="12000" />苹果13ProMax<br>
		<input type="checkbox" id="all" />全选
		<p>总价：0元</p>
		
		
		<script type="text/javascript">
			//选中所有多选框，添加点击事件
			$("input").click(function(){
				//先判断点击的是否为全选
				if(this.id == "all"){
					
					 
					/**
					 * attr() 函数
					 * 用来获取属性的值，checked属性的值，只有一个checked选中返回这个值，
					 * 未选中的返回undifined，无法正常赋值。
					 * 
					 * prop() 函数
					 * 选中时返回true，未选中时返回false
					 */
					
					let state = $(this).prop("checked");//全选时，state=true
					//把全选的状态给到所有的多选框 
					//获取当前对象所有同等级的input，将状态改为选中
					$(this).siblings("input").attr("checked",state);
					
				}
				
				//统计勾选数量，计算价格
				let count = 0 ;//选中的数量
				let total = 0;//当前价格
				
				//遍历所有的多选框 ， 除了全选all
				$("input:not(#all)").each(function(){ //循环实现 each()方法
					if($(this).attr("checked")){//如果遍历到当前的对象是选中状态
						total = total + parseInt(this.value); 
						count++;
					}
				});
				
				//当所有多选框都选中时，修改全选的状态
				$("#all").attr("checked",count == $("input:not(#all)").length );
				//显示总价
				$("p").text("总价："+total+"元");
			});
		</script>
	</body>
</html>

07-QQ表情选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.emoji{
				margin: 50px;
			}
			ul{
				overflow: hidden;
			}
			li{
				float: left;
				width: 48px;
				height: 48px;
				cursor: pointer;/* 光标变成小手 */
			}
			.emoji img{
				cursor: pointer;/* 光标变成小手 */
			}
		</style>
		
		
		<script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="emoji">
			<ul>
				<li><img src="img/1.png" height="22px" width="22px" alt="" ></li>
				<li><img src="img/2.png" height="22px" width="22px" alt="" ></li>
				<li><img src="img/3.png" height="22px" width="22px" alt="" ></li>
				<li><img src="img/4.png" height="22px" width="22px" alt="" ></li>
				<li><img src="img/5.png" height="22px" width="22px" alt="" ></li>
				<li><img src="img/6.png" height="22px" width="22px" alt="" ></li>
				<li><img src="img/7.png" height="22px" width="22px" alt="" ></li>
				<li><img src="img/8.png" height="22px" width="22px" alt="" ></li>
				<li><img src="img/9.png" height="22px" width="22px" alt="" ></li>
			</ul>
			<p class="word">
				<strong>请发言：</strong>
				
			</p>
		</div>
		
		
		<script type="text/javascript">
			$(function(){
				//给img图片添加点击事件
				$("ul img").click(function(){
					//把图片加入到p标签中显示
					$(".word").append($(this).clone());//clone()克隆方法，复制对象
				});
				
			});
		</script>
		
	</body>
</html>

08-多选下拉列表左右移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#leftName,#btn,#rightName{
				float: left;
				width: 100px;
				height: 300px;
			}
			#toRight,#toLeft{
				margin-top: 100px;
				margin-left: 30px;
				width: 50px;
			}
			.border{
				height: 500px;
				padding: 100px;
				background-color: #5F9EA0;
			}
		</style>
		<script src="jquery-1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="jquery-1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script> -->
	</head>
	<body>
		
		<div class="border">
			<select id="leftName" multiple="multiple">
				<option >赵云 </option>
				<option >张飞 </option>
				<option >关羽</option>
				<option >马超 </option>
				
			</select>
			<div id="btn">
				<button type="button" id="toRight"> --> </button>
				<button type="button" id="toLeft"> <-- </button>
			</div>
			<select id="rightName" multiple="multiple">
				<option>黄忠</option>
			</select>
		</div>
		
		<script type="text/javascript">
			$(function(){
				//获取右边的下拉列表对象 ，添加到左边的列表中的option中
				
				$("#toRight").click(function(){
					console.log("点击右键");
					$("#rightName").append( $("#leftName > option:selected"))
				});
				
				//获取左边的，添加到右边的option中
				$("#toLeft").click(function(){
					console.log("点击左键");
					$("#rightName > option:selected").appendTo($("#leftName"));
				});
			});
		</script>
		
	</body>
</html>