JQeruy笔记---JQuery入门案例

目录

 

案例一:使用JQ完成表格的隔行换色

需求分析:

技术分析:

步骤分析:

代码实现:

案例二:使用JQuery完成表单的全选全不选功能

需求分析

技术分析:

代码实现:

案例三:使用JQuery完成页面定时弹出广告

需求分析:

技术分析:

代码实现:

案例四:使用JQ完成省市联动效果

需求分析:

技术分析:

步骤分析:

代码实现:

案例五:使用JQ完成下拉列表左右选择

需求分析:

步骤分析:

代码实现:


案例一:使用JQ完成表格的隔行换色

需求分析:

在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色

技术分析:

获取所有行 table.rows

遍历所有行

根据行号去修改每一行的背景颜色: bgColor

style.backgroundColor = "red"

步骤分析:

  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>

 


案例二:使用JQuery完成表单的全选全不选功能

需求分析

在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理,

技术分析:

  1. 导入JQ的包
  2. 文档加载完成函数: 页面初始化
  3. 获得所有的行 :   元素选择器
  4. 根据行号奇数/偶数去修改颜色

代码实现:

<!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>

案例三:使用JQuery完成页面定时弹出广告

需求分析:

当用户打开界面,3秒钟之后弹出广告,这个广告显示5秒钟,隐藏广告

技术分析:

定时器: setTimeout

显示和隐藏: style.display = "block/none"

代码实现:

<!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/1.jpg" id="img1" width="100%" style="display:none"  />
	</body>
</html>

案例四:使用JQ完成省市联动效果

需求分析:

在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市

技术分析:

  1. 准备工作 : 城市信息的数据

  2. 添加节点 : appendChild (JS)

    1. append : 添加子元素到末尾

    2. appendTo : 给自己找一个爹,将自己添加到别人家里

    3. prepend : 在子元素前面添加

    4. after : 在自己的后面添加一个兄弟

  3. 遍历的操作:

步骤分析:

  1. 导入JQ的文件

  2. 文档加载事件:页面初始化

  3. 进一步确定事件: change事件

  4. 函数: 得到当前选中省份

  5. 得到城市, 遍历城市数据

  6. 将遍历出来的城市添加到城市的select中

代码实现:

<!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>

案例五:使用JQ完成下拉列表左右选择

需求分析:

我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品

步骤分析:

  1. 导入JQ的文件
  2. 文档加载函数 :页面初始化
  3. 确定事件 : 点击事件 onclick
  4. 事件触发函数
  5. 移动被选中的那一项到右边

代码实现:

<!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>OPPO</option>
							<option>小米</option>
							<option>锤子</option>
							<option>vivo</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>华为</option>
							<option>iPhone</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>

 

上一篇:全选,全不选,反选


下一篇:从程序员到CTO的Java技术路线图(我爱分享)