Web前端知识——JQuery

要掌握的知识点：

掌握JQuery的基本使用

掌握JQuery的基本选择器,层次选择器

会使用JQuery完成DOM的基本操作

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析：

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

1.2 技术分析

定时器: setTimeout

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

什么JQuery:

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

JQuery的作用:

写更少的代码,做更多的事情: write Less ,Do more
将我们页面的JS代码和HTML页面代码进行分离

为什么学习JQuery:

提高我们的工作效率

JQ的入门

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

【JQ中根据ID查找元素】

全都是根据选择器去找的
#ID{}
.类名{}
$("#ID的名称")

【JQ和JS之间的转换】

JQ对象,只能调用JQ的属性和方法
JS对象,只能调用JS的属性和方法

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对象成功";
   				});
   			});

JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)

导入JQ相关的文件
文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
确定相关操作的事件
事件触发函数
函数里面再去操作相关的元素

显示和隐藏: img.style.display

【JQ中的动画效果】

show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定义动画

1.3 步骤分析：

导入JQ的文件
编写JQ的文档加载事件
启动定时器 setTimeout("",3000);
编写显示广告的函数
在显示广告里面再启动一个定时器
编写隐藏广告的函数

1.4 代码实现

<script>
    			//显示广告
    			function showAd(){
    				$("#img1").slideDown(2000);
    				setTimeout("hideAd()",3000);
    			}
    			//隐藏广告
    			function hideAd(){
    				$("#img1").slideUp(2000);
    			}
    			$(function(){
    				setTimeout("showAd()",3000);
    			});
    </script>

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

基本选择器

ID选择器 : #ID的名称
类选择器: 以 . 开头 .类名
元素选择器: 标签的名称
通配符选择器: *
选择器,选择器: 选择器1,选择器2

基本选择器的案例

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

JQ中的层级选择器

子元素选择器: 选择器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>

JQ中的基本过滤器

<script>
    			$(function(){
    				/<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>

JQ中的属性选择器

$(function(){
    				//找到有name属性的input
    				$("#btn1").click(function(){
    					$("input[name]").attr("checked",true);
    				});
    				$("#btn2").click(function(){
    					$("input[name='accept']").attr("checked",true);
    				});
    				$("#btn3").click(function(){
    					$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
    				});
    			});

JQ中的表单过滤器

<script>
      //1.文档加载事件	
      $(function(){
        $(":text").css("background-color","pink");
      });
    </script>

使用JQ完成表格的隔行换色

需求分析:

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

技术分析:

获取所有行 table.rows

遍历所有行

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

style.backgroundColor = "red"

步骤分析:

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

代码实现:

$(function(){
    				//获得所有的行 :   元素选择器
    				$("tbody > tr:even").css("background-color","#CCCCCC");
    				//修改基数行
    				$("tbody > tr:odd").css("background-color","#FFF38F");
    //				$("tbody > tr").css("background-color","#FFF38F");
    				
    				
    			});

使用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>

使用JQ完成省市联动效果

需求分析:

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

技术分析:

准备工作 : 城市信息的数据
添加节点 : appendChild (JS)
1. append : 添加子元素到末尾
2. appendTo : 给自己找一个爹,将自己添加到别人家里
3. prepend : 在子元素前面添加
4. after : 在自己的后面添加一个兄弟
遍历的操作:

<script>	
   			var cities = ["深圳市","东莞市","惠州市","广州市"];
   			//声明回调函数
   			function callback1(i,n){
   				console.log(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>

步骤分析:

导入JQ的文件
文档加载事件:页面初始化
进一步确定事件: change事件
函数: 得到当前选中省份
得到城市, 遍历城市数据
将遍历出来的城市添加到城市的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>");
    					});
    				});
    			});

使用JQ完成下拉列表左右选择

需求分析

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

技术分析

步骤分析

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

代码实现

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

使用JQ完成表单的校验(扩展)

需求分析

在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示

技术分析

trigger
triggerHandler
is()

步骤分析

首先给必填项,添加尾部添加一个小红点
获取用户输入的信息,做相应的校验
事件: 获得焦点, 失去焦点, 按键抬起
表单提交的事件

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/style.css" />
		<title></title>
		<!--
			1. 首先给必填项的尾部添加一个小红点
			2. 获取用户输入的信息,做相应的校验
			3. 事件: 获得焦点, 失去焦点, 按键抬起
			4. 表单提交的事件
			
			Jq的方式来实现:
				1. 导入JQ的文件
				2. 文档加载事件: 在必填项后添加一个小红点
				3. 表单校验确定事件: blur focus keyup
				4. 提交表单 submit
		-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			
			$(function(){  
				//默认做一些页面初始化
				//动态在必填项后面添加小红点
				$(".bitian").after("<font class='high'>*</font>");
				
				//给必填项绑定事件
				$(".bitian").blur(function(){
					//首先获取用户当前输入的值
					var value = this.value; //123
					
					//需要清空上一次提示的信息
					$(this).parent().find(".formtips").remove();
					
					//判断当前的值是哪一项输入的值
					if($(this).is("#username")){  //判断是否是用户名输入项
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
						}
					}
					
					if($(this).is("#password")){  //判断是否是密码输入项
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
						}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				})				
				//给表单提交绑定事件
				$("form").submit(function(){
					//触发所有必填项的校验
					$(".bitian").trigger("focus");
					//找到错误信息的个数
					if($(".onError").length > 0){
						return false;
					}
					return true;
				});
			});
		</script>
		
	</head>
	<body>
		<form action="../index.html">
			<div>
				用户名:<input type="text" class="bitian" id="username" />
			</div>
			<div>
				密码:<input type="password"  class="bitian" id="password" />
			</div>
			<div>
				手机号:<input type="tel" />
			</div>
			<div>
				<input type="submit" />
			</div>
		</form>
	</body>
</html>

Web前端知识——JQuery

要掌握的知识点：

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析：

1.2 技术分析

JQ的入门

JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)

1.3 步骤分析：

1.4 代码实现

基本选择器

使用JQ完成表格的隔行换色

使用JQuery完成表单的全选全不选功能

使用JQ完成省市联动效果

使用JQ完成下拉列表左右选择

使用JQ完成表单的校验(扩展)

继续阅读

jQuery实现百度搜索框

2010年终总结--技术篇

没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！

[转]如何成长为一名全栈工程师全栈工程师

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

underscore模板功能的使用和学习

JQuery--dom捕获html元素

CSS之折叠菜单

web开发之前后端渲染

JavaScript的那些坑之事件代理事件代理事件阶段

jquery_126_demo

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题