第4章 WEB04- JQuery篇【课件+代码】

今日任务

  • 使用JQuery完成页面定时弹出广告
  • 使用JQuery完成表格的隔行换色
  • 使用JQuery完成复选框的全选效果
  • 使用JQuery完成省市联动效果
  • 使用JQuery完成下列列表左右选择
  • 使用JQuery完成表单的校验.

教学导航

教学目标掌握JQuery的基本使用掌握JQuery的基本选择器,层次选择器会使用JQuery完成DOM的基本操作.
教学方法案例驱动法

1.1 上次课内容回顾

JS完成定时弹出广告的特效:

  • setInterval();
  • clearInterval();

BOM对象中的方法:

  • Window:
  • Navigator:
  • Screen:
  • History:
  • Location:

JS控制表格隔行换色:

JS控制复选框的全选和全不选:

JS控制省市联动:

  • DOM:Document Object Model.将文档加载到内存,在内存中形成一个树形结构.
    • 操作树形结构中的节点:
      • 创建元素:createElement(),createTextNode();
      • 获得元素:getElementById(),getElementsByName(),getElementsByTagName()
      • 插入元素:appendChild(),insertBefore();
      • 修改元素:innerHTML修改.
      • 删除元素:remove()

JS进行表单的校验:

  • 事件:
    • Onclick
    • Onsubmit
    • Onload
    • Onfocus
    • Onblur
    • Onchange
    • Onmouseover
    • Onmouseout
    • Onmousemove
    • Onkeyup
    • Onkeydown

JS下拉列表左右选择:

1.2 使用JQuery完成页面的弹出广告的效果

1.2.1 需求

在网站的首页上定时弹出一个广告,过几秒之后,广告会自动消失。

第4章 WEB04- JQuery篇【课件+代码】

1.2.2 分析

1.2.2.1 技术分析

【JQuery的概述】

  • 什么JQuery:
第4章 WEB04- JQuery篇【课件+代码】
  • JQuery的版本:

JQuery1.x   JQuery2.x(不支持IE6,7,8)

  • JQuery的作用:

大大简化的JS的代码编写.

将页面与JS分离

  • 常见的JS的库:

JQuery,prototype,dwr,ExtJS…

【JQuery的入门】

         <script src="../../js/jquery-1.8.3.js"></script>
		<script>
			// 页面加载完毕
			window.onload = function(){
				alert("Hello 王守义");
			}
			
			window.onload = function(){
				alert("Hello 老王");
			}
			
			// DOM树绘制完毕以后就会执行
			jQuery(document).ready(function(){
				alert("Hello 王如花");
			});
			
			// JQ的简写   jQuery = $   
			/*jQuery(document).ready(function(){
				alert("Hello 王凤");
			});*/
			$(function(){
				alert("Hello 王凤");
			});
			
		</script>

【JQ和DOM对象的转换】

使用JS写的代码只能调用JS中的属性和方法.
使用JQ写的代码只能调用JQ中的属性和方法.
		<script src="../../js/jquery-1.8.3.js"></script>
		<script>
			// JS
			function writeIn(){
				// document.getElementById("s1").innerHTML = "Hello 王超杰";
				var s1 = document.getElementById("s1");
				// 将JS对象转成JQuery的对象
				$(s1).html("Hello 王超杰");
			}
			
			// JQ
			$(function(){
				$("#bt2").click(function(){
					// $("#s1").html("Hello 王守义");
					// 将JQ的对象转成JS的对象。
					// $("#s1")[0].innerHTML="Hello 王守义";
					// $("#s1").get(0).innerHTML = "Hello 王守义";
				});
			});
		</script>

【JQ的获得元素】

$(“#id”)

【JQ的效果】

* show(); --显示某个元素
* hide(); --隐藏某个元素
* slideDown();	--向下滑动
* slideUp();	--向上滑动
* fadeOut();	--淡出
* fadeIn();		--淡入
* animate();	--自定义动画
* toggle();		--单击事件的切换

1.2.2.2 步骤分析:

  • 步骤一:页面加载后,设置一个定时操作.5秒执行一个函数.
  • 步骤二:在函数中获得广告的div.显示div.
  • 步骤三:清空原来的定时,设置一个定时.5秒后执行一个函数.
  • 步骤四:在函数中获得广告的div.隐藏div.

1.2.3 代码实现:

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			var time;
			$(function(){
				// 设置定时 5秒后执行一个显示广告的函数
				time = setInterval("showAd()",5000);
			});
			
			// 显示广告的函数
			function showAd(){
				// 获得广告的div,显示
				// $("#divAd").show(1000);
				// $("#divAd").slideDown(3000);
				$("#divAd").fadeIn(3000);
				// 清空定时:
				clearInterval(time);
				// 重新设置定时:
				time = setInterval("hideAd()",5000);
			}
			
			// 隐藏广告的函数:
			function hideAd(){
				// 获得广告的div,隐藏
				// $("#divAd").hide(3000);
				// $("#divAd").slideUp(3000);
				$("#divAd").fadeOut(3000);
				// 清空定时:
				clearInterval(time);
			}
		</script>

1.2.4 总结:

1.2.4.1 JQuery的选择器:

【基本选择器】

  • ID选择器:
$(“#id”)
  • 类选择器:
$(“.class”)
  • 元素选择器:
$(“元素”)
  • 通配符选择器:
$(“*”)
  • 选择器,选择器:
$(“#id,.class”)

【基本选择器的案例】

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#one").css("background","#bbffaa");`
				});
				
				$("#btn2").click(function(){
					$(".mini").css("backgroundColor","#bbffaa");
				});
				
				$("#btn3").click(function(){
					$("div").css("backgroundColor","#bbffaa");
				});
				
				$("#btn4").click(function(){
					$("*").css("backgroundColor","#bbffaa");
				});
				
				$("#btn5").click(function(){
					$("#two,.mini").css("backgroundColor","#bbffaa");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择为one的元素"/>
		<input type="button" id="btn2" value="选择样式为mini的元素"/>
		<input type="button" id="btn3" value="选择所有的div元素"/>
		<input type="button" id="btn4" value="选择所有元素"/>
		<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>

【JQ的层级选择器】

  • Ancestor  descendant2
第4章 WEB04- JQuery篇【课件+代码】
  • Parent >child
第4章 WEB04- JQuery篇【课件+代码】
  • Prev+next
第4章 WEB04- JQuery篇【课件+代码】
  • Prev~sibling
第4章 WEB04- JQuery篇【课件+代码】

【JQ层级选择器的代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div").css("background","#bbffaa");
				});
				
				$("#btn2").click(function(){
					$("body>div").css("backgroundColor","#bbffaa");
				});
				
				$("#btn3").click(function(){
					$("#two+div").css("backgroundColor","#bbffaa");
				});
				
				$("#btn4").click(function(){
					$("#one~div").css("backgroundColor","#bbffaa");
				});
				
				
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择body中的所有的div元素"/>
		<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
		<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
		<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

【JQ的基本过滤选择器】

第4章 WEB04- JQuery篇【课件+代码】
$(function(){
				$("#btn1").click(function(){
					$("body div:first").css("background","#bbffaa");
				});
				
				$("#btn2").click(function(){
					$("body div:last").css("backgroundColor","#bbffaa");
				});
				
				$("#btn3").click(function(){
					$("body div:odd").css("backgroundColor","#bbffaa");
				});
				
				$("#btn4").click(function(){
					$("body div:even").css("backgroundColor","#bbffaa");
				});
				
				
			});

【JQ的属性选择器】

<script>
			$(function(){
				$("#btn1").click(function(){
					$("div[title]").css("background","#bbffaa");
				});
				
				$("#btn2").click(function(){
					$("div[title='aaa']").css("backgroundColor","#bbffaa");
				});
				
			});
		</script>

【JQ的表单选择器】

               $(function(){
				$("#btn1").click(function(){
					$(":input").css("background","#bbffaa");
				});
				
				$("#btn2").click(function(){
					$(":text").css("background","#bbffaa");
				});
			});

1.3 使用JQuery完成表格的隔行换色

1.3.1 需求:

制作一个表格,隔行换色.第一行标题的行,不需要进行换色,其他的行需要变换颜色.

第4章 WEB04- JQuery篇【课件+代码】

1.3.2 分析:

1.3.2.1 技术分析:

【JQuery的CSS类】

使用addClass(),removeClass(); 添加或移除样式

1.3.2.2 步骤分析:

  • 步骤一:在页面中引入一个jquery的js
  • 步骤二:写页面加载的函数.
  • 步骤三:使用选择器基本过滤找到奇数行和偶数行
  • 步骤四:分别给不同的行添加样式(样式已经由美工制作好的)

1.3.3 代码实现:

               <script>
			$(function(){
				// 找奇数行:
				//$("tr:odd").addClass("odd");
				// 偶数行:
				//$("tr:even").addClass("even");
				$("tbody>tr:odd").addClass("odd");
				$("tbody>tr:even").addClass("even");
			});
		</script>

1.4 使用JQuery完成复选框的全选和全不选

1.4.1 需求:

有如下的表格的数据,批量的进行删除.将上面的复选框选中,下面其他的复选框都被选中。如果上面的复选框没有被选中,那么将下面的所有的复选框全不选.

第4章 WEB04- JQuery篇【课件+代码】

1.4.2 分析:

1.4.2.1 技术分析:

【JQuery操作某个元素的属性】

<script>
			$(function(){
				$("#bt1").click(function(){
					// 获得属性的值
					// alert($("#img1").attr("src"));
					// 修改属性的值:
					$("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
				});
			});
		</script>

1.4.2.2 步骤分析:

  • 步骤一:引入jquery的js
  • 步骤二:编写加载的方法.
  • 步骤三:上面的复选框绑定一个单击事件
  • 步骤四:如果上面的被选中,修改下面的所有的复选框的checked属性变为true否则将复选框的checked属性变为false.

1.4.3 代码实现:

$(function(){
				// 步骤一:为上面的复选框绑定单击事件:
				$("#selectAll").click(function(){
					
					/*if(this.checked == true){
						// 如果上面的复选框被选中:
						$("input[name='ids']").attr("checked",true);
					}else{
						// 上面的复选框没有被选中
						$("input[name='ids']").attr("checked",false);
					}*/
					// $("input[name='ids']").attr("checked",this.checked);
					$("input[name='ids']").prop("checked",this.checked);// this JS的对象  
				});
			});

1.4.4 总结:

低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.

1.5 使用JQuery完成省市联动

1.5.1 需求:

在注册的页面上有省市联动.

第4章 WEB04- JQuery篇【课件+代码】

1.5.2 分析:

1.5.2.1 技术分析:

【JQuery的遍历】

each的方法进行遍历.
一种用法:
* JQ的对象.each(function(i,n){

});

二种用法
* $.each(数组,function(i,n){

});

【JQuery的DOM的操作】

JS中添加元素:appendChild();
JQ中添加元素:
append();
appendTo();

1.5.2.2 步骤分析:

  • 步骤一:引入jquery.js
  • 步骤二:加载的方法.
  • 步骤三:定义二维数组
  • 步骤四:在第一个省份的下拉列表中绑定一个事件change
  • 步骤五:在绑定的事件的函数中,获得选中的省份的值.
  • 步骤六:遍历数组,省份的值与数组中的值比较.
  • 步骤七:获得数组的值.遍历获得的值.
  • 步骤八:获得每个值.创建元素,创建文本节点.
  • 步骤九:将文本添加到option元素中.将option添加到第二个下拉列表中 .

1.5.3 代码实现:

// 定义二维数组:
			var cities = [
				["长春市","吉林市","延边市","白山市","松原市"],
				["济南市","青岛市","临沂市","烟台市"],
				["石家庄","唐山","保定","承德","秦皇岛"],
				["南京","苏州","扬州","无锡"]
			];
			$(function(){
				// 获得省份的下拉列表,绑定事件
				$("#province").change(function(){
					// 获得下拉列表的值:
					// alert(this.value);
					var val = this.value;
					
					var $city = $("#city");
					
					$city[0].options.length = 0;
					
					$(cities).each(function(i,n){
						// alert(i+"  "+n);
						if( val == i){
							$(n).each(function(j,m){
								// alert(m);
								// 创建option元素
								var opEL = document.createElement("option");
								// 创建文本节点
								var textNode = document.createTextNode(m);
								// 将文本添加到option中
								// opEL.appendChild(textNode);
								$(opEL).append(textNode);
								// 将option添加到第二个列表中
								$city.append(opEL);								
							});
						}
					});
				});
			});

1.5.4 总结

【JQuery的文档操作】

$(“a”).append(“b”); // 将b添加到a元素中.
$(“a”).appendTo(“b”); // 将a添加到b元素中.

$(“a”).insertBefore(“b”); // 将a元素插入到b元素之前
$(“a”).insertAfter(“b”); // 将a元素插入到b元素之后

$(“a”).remove();	// 将a元素移除

1.6 使用JQuery完成下拉列表的左右选择:

1.6.1 需求:

在数据的编辑的页面中,有已选的商品和未有的商品两个下拉列表,可以左右进行选择

第4章 WEB04- JQuery篇【课件+代码】

1.6.2 分析:

1.6.2.1 技术分析:

JQuery的选择器和文档操作.

1.6.2.2 步骤分析:

  • 步骤一:引入jquery的文件
  • 步骤二:页面加载的函数
  • 步骤三:在链接上添加一个事件.
  • 步骤四:使用选择器找到左侧的列表中被选中的元素,添加到右侧.

1.6.3 代码实现:

<script>
			$(function(){
				// 将左侧选中的option添加到右侧
				$("#add").click(function(){
					$("#selectLeft option:selected").appendTo("#selectRight");
				});
				
				// 将左侧所有的option添加到右侧
				$("#addAll").click(function(){
					$("#selectLeft option").appendTo("#selectRight");
				});
				
				// 双击事件
				$("#selectLeft").dblclick(function(){
					$("option:selected",this).appendTo("#selectRight");
				});
			});
		</script>

1.6.4 总结:

1.6.4.1 JQuery中常用的事件:

第4章 WEB04- JQuery篇【课件+代码】

1.7 使用JQuery完成表单的校验.

1.7.1 需求:

在注册页面上,输入数据完成注册的,有些用户有很多数据往往没有填就点击提交.导致数据库中出现很多空数据.所以需要在表单的页面中添加数据的校验.

1.7.2 分析:

1.7.2.1 技术分析:

Jquery的选择器:

文档的操作:

Jquery的事件:

  • blur
  • keyup
  • focus
  • submit

1.7.2.2 步骤分析

  • 步骤一:为文本框添加blur事件.
  • 步骤二:在blur事件触发的函数中.获得文本框的值.
  • 步骤三:判断这个值是否为空.如果为空.提示 用户名不能为空.
  • 步骤四:整个表单添加一个submit事件.
  • 步骤五:判断表单上的错误的数量  >  0 return false;
第4章 WEB04- JQuery篇【课件+代码】

课程配套代码+资料

已付费?登录刷新

原创文章,作者:小助手,如若转载,请注明出处:https://www.javahelp.com.cn/717.html

(0)
上一篇 2022年8月30日 下午2:42
下一篇 2022年8月30日 下午11:26

相关推荐

发表回复

登录后才能评论