欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQ

程序员文章站 2022-07-14 23:44:59
...

jQuery

1.jQuery
jQuery是一个快速简洁的 javaScript框架,是继 Prototype之后又一个优秀的 javaScript 代码

裤或javaScript框架, jQuery的宗旨是 write Less,Do More,既倡导写更少的代码,做更多的事

。它封装 javaScript常用的功能代码,提供一种简便的 javaScript设计模式,优化 HTML文档操

作,事件处理,动画设计和 Ajax交互。

2.jQuery的核心特性可以总结为:
具有独特的链式语法和短小清晰的多功能接口,具有高效灵活的

css选择器,并且可对 CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。 jQuery 兼

容各种主流浏览器,如IE6.0+,FF1.5+,Safari2.0+.Opera9.0+等。

3.JQuery的作用
1写更少的代码做更多的事write Less,Do more
将我们页面的js代码和HTML页面代码进行分离

4.JQ入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--导包,引入JQ的文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//js文档加载完成的事件
			window.onload = function(){
				alert("window.onload   111");
			}
			
			window.onload = function(){
				alert("window.onload   222");
			}
			
			/*文档加载完成的事件*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*
			 	jQuery  简写成 $
			 */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*
				最简单的写法 
			*/
			$(function(){
				alert("$(function(){");
			});
			
		</script>
	</head>
	<body>
	</body>
</html>

5.jQ和jS之间的转换
jQ对象,只能调用jQ的属性和方法
jS对象,只能调用jS的属性和方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			function changeJS(){
				var div = document.getElementById("div1");
//				div.innerHTML = "JS成功修改了内容"
				//将JS对象转成JQ对象
				$(div).html("转成JQ对象来修改内容")
			}
			
			$(function(){
				//给按钮绑定事件
				$("#btn2").click(function(){
					//找到div1
//					$("#div1").html("JQ方式成功修改了内容");
					//将JQ对象转成JS对象来调用
					var $div = $("#div1");
//					var jsDiv = $div.get(0);
					var jsDiv = $div[0];
					jsDiv.innerHTML="jq转成JS对象成功";
				});
			});
			
			
		</script>
	</head>
	<body>
		<input type="button" value="JS修改div内容" onclick="changeJS()" />
		<input type="button" value="JQ方式修改div内容" id="btn2" />
		<div id="div1">
			这里的内容一会要被JS/JQ代码修改掉
		</div>
		<div id="div1">
			这里的内容一会要被JS/JQ代码修改掉1111
		</div>
	</body>
</html>

6.动态效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<!--
			1. 导入JQ相关的文件
			2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器
			3. 确定相关操作的事件
			4. 事件触发函数
			5. 函数里面再去操作相关的元素
		-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			$(function(){
				
				//显示页面图片
				//给按钮绑定事件
				$("#btn1").click(function(){
//					$("#img1").show();
//					$("#img1").slideDown();
//					$("#img1").fadeIn(5000);

					$("#img1").animate({ width:"800px",opacity:"1"},5000);
					
				});
				
				//隐藏页面图片
				$("#btn2").click(function(){
					//获得img
//					$("#img1").hide(10000);
//					$("#img1").slideUp(500);
//					$("#img1").fadeOut(5000);
					$("#img1").animate({ width:"1366px",opacity:"0.2"},5000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="btn1" /> 
		<input type="button" value="隐藏" id="btn2"/> <br />
		<img src="../../img/333.png" id="img1" width="500px" />
	</body>
</html>

7.定时器弹出广告

步骤:
1导入jQ的文件
2编写JQ的文档加载事件
3启动定时器setTimeout
4编写显示广告的函数
5在显示广告里面再启动一个定时器
6编写隐藏广告的函数

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 导入JQ的文件
			2. 编写JQ的文档加载事件
			3.  启动定时器 setTimeout("",3000);
			4. 编写显示广告的函数
			5. 在显示广告里面再启动一个定时器
			6. 编写隐藏广告的函数
		-->
		<script>
			//显示广告
			function showAd(){
				$("#img1").slideDown(2000);
				setTimeout("hideAd()",3000);
			}
			
			//隐藏广告
			function hideAd(){
				$("#img1").slideUp(2000);
			}
			
			
			$(function(){
				setTimeout("showAd()",3000);
				
			});
		</script>
	</head>
	<body>
		<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img1" width="100%" style="display:none"  />
	</body>
</html>

8.选择器

基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../css/style.css" />
		<!--引入JQ的文件-->
		<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
		<!--
			- ID选择器 :     #ID的名称
			- 类选择器:. 开头  .类名
			- 元素选择器:    标签的名称
			- 通配符选择器:   * 
			- 选择器,选择器:  选择器1,选择器2
		-->
		<script>
			//文档加载事件,页面初始化的操作
			$(function(){
				//初始化操作: 给按钮绑定事件
				$("#btn1").click(function(){
					$("#two").css("background-color","palegreen");					
				});
				
				//找出mini类的所有元素
				$("#btn2").click(function(){
					$(".mini").css("background-color","palegreen");					
				});
				$("#btn3").click(function(){
					$("div").css("background-color","palegreen");					
				});
				$("#btn4").click(function(){
					$("*").css("background-color","palegreen");
					
				});
				/*选择器分组*/
				
				//找出mini类 和 span元素
				$("#btn5").click(function(){
					$(".mini,span").css("background-color","palegreen");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="找出ID为two的元素" id="btn1" />
		<input type="button" value="找出mini类的所有元素" id="btn2" />
		<input type="button" value="找出所有div元素" id="btn3" />
		<input type="button" value="通配符选择器" id="btn4" />
		<input type="button" value="找出mini类 和 span元素" id="btn5" />
		
		<br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</body>
</html>

层级选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../css/style.css" />
		<!--引入JQ的文件-->
		<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
		<!--
			-- 子元素选择器:   选择器1 > 选择器2
			- 后代选择器:  选择器1 儿孙
			- 相邻兄弟选择器 :  选择器1 + 选择器2 : 找出紧挨着的一个弟弟
			- 找出所有弟弟:  选择器1~ 选择器2   : 找出所有的弟弟

		-->
		<script>
			//文档加载事件,页面初始化的操作
			$(function(){
				//初始化操作: 给按钮绑定事件
				//找出body下面的子div   
				$("#btn1").click(function(){
					$("body > div").css("background-color","palegreen");					
				});
				//找出body下面的所有div
				$("#btn2").click(function(){
					$("body div").css("background-color","palegreen");					
				});
				$("#btn3").click(function(){
					$("#one+div").css("background-color","palegreen");					
				});
				$("#btn4").click(function(){
					$("#two~div").css("background-color","palegreen");					
				});
				
			});
		</script>
	</head>
	<body>
		<input type="button" value="找出body下面的子div" id="btn1" />
		<input type="button" value="找出body下面的所有div" id="btn2" />
		<input type="button" value="找出id为one的相邻兄弟div" id="btn3" />
		<input type="button" value="找出id为two的所有弟弟div" id="btn4" />
		
		
		<br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</body>
</html>

9.表单属性的过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../css/style.css" />
		<!--引入JQ的文件-->
		<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
		<!--
			选择器:first
		-->
		<script>
			//文档加载事件,页面初始化的操作
			$(function(){
				
				//初始化操作: 给按钮绑定事件
				//过滤出所有div中第一个元素
				$("#btn1").click(function(){
					$("div:first").css("background-color","palegreen");					
				});
				
				//过滤出所有div中偶数位的div
				$("#btn2").click(function(){
					$("div:even").css("background-color","palegreen");					
				});
				$("#btn3").click(function(){
					$("div:odd").css("background-color","palegreen");					
				});
				$("#btn4").click(function(){
					$("div:gt(2)").css("background-color","palegreen");					
				});
			
			});
		</script>
	</head>
	<body>
		<input type="button" value="过滤出所有div中第一个元素" id="btn1" />
		<input type="button" value="过滤出所有div中偶数位的div" id="btn2" />
		<input type="button" value="过滤出所有div中奇数位的div" id="btn3" />
		<input type="button" value="过滤出所有div中找出索引大于2" id="btn4" />
		
		
		<br />
		<div id="one">  <!-- 0 -->
			<div class="mini">1-1</div>  <!-- 1 -->
		</div>
		<div id="two">  <!-- 2 -->
			<div class="mini">2-1</div> <!-- 3 -->
			<div class="mini">2-2</div> <!-- 4 -->
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</body>
</html>

10.表单隔行换色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 导入JQ的包
			2. 文档加载完成函数: 页面初始化
			3. 获得所有的行 :   元素选择器
			4. 根据行号奇数/偶数去修改颜色
		-->
		<script>
			
			$(function(){
				//获得所有的行 :   元素选择器
				$("tbody > tr:even").css("background-color","#CCCCCC");
				//修改基数行
				$("tbody > tr:odd").css("background-color","#FFF38F");
//				$("tbody > tr").css("background-color","#FFF38F");
				
				
			});
		</script>
	</head>
	<body>
		<table border="1px" width="600px" id="tab">
			<thead>
				<tr >
					<td>
						<input type="checkbox" />
					</td>
					<td>分类ID</td>
					<td>分类名称</td>
					<td>分类商品</td>
					<td>分类描述</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充气的</td>
				<td>这里面的充气电动硅胶的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			</tbody>
		</table>
		
	</body>
</html>

11.表单全选和全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 导入JQ的包
			2. 文档加载完成函数: 页面初始化
			3. 获得所有的行 :   元素选择器
			4. 根据行号奇数/偶数去修改颜色
		-->
		<script>
			
			$(function(){
				//获得所有的行 :   元素选择器
				$("tbody > tr:even").css("background-color","#CCCCCC");
				//修改基数行
				$("tbody > tr:odd").css("background-color","#FFF38F");
//				$("tbody > tr").css("background-color","#FFF38F");
				
				
			});
			
			/*
			 表格全选和全不选
			 进一步确定事件: 点击事件
			  
			 */
			$(function(){
				//绑定点击事件
				//this 代表的是当前函数的所有者
				$("#checkAll").click(function(){
					//获取当前选中状态
//					alert(this.checked);
					//获取所有分类项的checkbox
					// 选择器[属性名称='属性值']
//					$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
					
					//使用层级选择器来实现  tbody > tr > td > input
				//	$("tbody > tr > td > input").prop("checked",this.checked);  //这个可行

				//	#tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
					$("input").prop("checked",this.checked);
					
				});
			});
			
		</script>
	</head>
	<body>
		<table border="1px" width="600px" id="tab">
			<thead>
				<tr >
					<td>
						<input type="checkbox" id="checkAll" />
					</td>
					<td>分类ID</td>
					<td>分类名称</td>
					<td>分类商品</td>
					<td>分类描述</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充气的</td>
				<td>这里面的充气电动硅胶的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			</tbody>
		</table>
		
	</body>
</html>

12.jQ的遍历原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--导入JQ文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			var cities = ["深圳市","东莞市","惠州市","广州市"];
			$(function(){
				$(cities).each(function(i,n){
				console.log(this)
			})
			})
			
			//如何遍历
			//JQ对象调用遍历
			/*$(cities).each(function(i,n){
				console.log(i + " === "+ n);
			});
			
			function aaa(i,n){
				console.log(i+"   "+n);
			}*/
			
			//JQ的函数调用
//			var ddd = aaa();
//			$.each(cities,aaa);
			
			
			/*var cities = ["深圳市","东莞市","惠州市","广州市"];
			//声明回调函数
			function callback1(i,n){
				console.log("123  : " + i + n);
			}
			
			//遍历数据
			function bianli(arr,callback1){
				for(var i = 0; i < arr.length; i++){
					var item = arr[i];
					callback1(i,item);
				}
			}*/
			
			//调用
//			bianli(cities,callback1);
		</script>
	</head>
	<body>
		
	</body>
</html>

13.省市联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			/*
				准备工作 : 准备数据
			*/
			var provinces = [
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"]
			];
			
			/*
			1. 导入JQ的文件
			2. 文档加载事件:页面初始化
			3. 进一步确定事件:  change事件
			4. 函数: 得到当前选中省份
			5. 得到城市, 遍历城市数据
			6. 将遍历出来的城市添加到城市的select中
			*/
			
			$(function(){
				$("#province").change(function(){
//					alert(this.value);
					//得到城市信息
					var cities = provinces[this.value];
					//清空城市select中的option
					/*var $city = $("#city");
					//将JQ对象转成JS对象
					var citySelect = $city.get(0)
					citySelect.options.length = 0;*/
					
					$("#city").empty();  //采用JQ的方式清空
					//遍历城市数据
					$(cities).each(function(i,n){
						$("#city").append("<option>"+n+"</option>");
					});
				});
			});
			
			
			
		</script>
	</head>
	<body>
		<!--选择省份-->
		<select id="province">
			<option value="-1">--请选择--</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
		</select>
		<!--选择城市-->
		<select id="city">
			
		</select>
	</body>
</html>




商品左右选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			步骤:
				1. 导入JQ的文件
				2. 文档加载函数 :页面初始化
				3.确定事件 : 点击事件 onclick
				4. 事件触发函数
					1. 移动被选中的那一项到右边
		-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("#a1").click(function(){
					//找到被选中的那一项
					//将被选中项添加到右边
					$("#rightSelect").append($("#leftSelect option:selected"));
				});
				
				//将左边所有商品移动到右边
				$("#a2").click(function(){
					$("#rightSelect").append($("#leftSelect option"));
				});
			});
		</script>
	</head>
	<body>
		
		<table border="1px" width="400px">
			<tr>
				<td>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><input type="text" value="这里面都是手机数码"/></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<!--左边-->
					<div style="float: left;">
						已有商品<br />
						<select multiple="multiple" id="leftSelect">
							<option>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" id="a1" > &gt;&gt; </a> <br />
						<a href="#" id="a2"> &gt;&gt;&gt; </a>
					</div>
					<!--右边-->
					<div style="float: right;"> 
						未有商品<br />
						<select multiple="multiple" id="rightSelect">
							<option>苹果6</option>
							<option>7</option>
							<option>诺基亚</option>
							<option>波导</option>
						</select>
						<br />
						<a href="#"> &lt;&lt; </a> <br />
						<a href="#"> &lt;&lt;&lt; </a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交"/>
				</td>
			</tr>
		</table>
		
		
	</body>
</html>