JQ基础入门（下）

今日内容介绍：

重写JS案例：省市联动、左右选择、表单校验

今日学习目标：

1.能够使用JQ为标签添加属性或样式

2.能够为指定标签添加字标签或兄弟标签

3.学会给标签绑定事件

使用jQuery完后省市二级联动

步骤分析：

第一步：确定事件（change事件），在绑定的函数里面获取用户选择的省份

第二步：创建二维数组来存储省份和城市

第三步：遍历二维数组中的省份（与用户选择的省份进行比较）【使用JQ的遍历操作】

第四步：接着遍历数组中的城市

第五步：创建一个城市文本节点

第六步：创建option元素节点

第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步：获取第二个下拉列表并将option元素节点添加进去

第九步：清除第二个下拉列表的option内容

技术点分析：数组的遍历操作

  方式一：

方式二：

遍历用法，核心代码：

		

html核心代码：

		
		

 文档处理操作：append（）与appendTo（）

插入字段和标签：核心代码：

		
		

html核心代码：

		
I would like to say: 
		

		

 清除子节点内容：

		
html核心代码：

		

			Hello,
			
hello,
				
					span

				
				点击
			
		
		
		
                

 使用JQ进行省市二级联动：核心代码：

		

html核心代码：

								籍贯
								
									
										--请选择--
										湖北
										湖南
										河北
										河南
									
									

									
								

左右选择JQ实现：

1.分析：

第一步：确定事件（鼠标单击事件：click）

第二步：获取左侧下拉列表被选中的option[$("#left option:selected")假设左侧select定义了一个id=left]

第三步：将获取到的option添加到右侧的下拉列表。(append方法的使用)

核心代码：

	
html核心代码：

					
						已有商品

						
							IPhone6s
							小米4
							锤子T2
						
						
>>
						
>>>
					
					
						未有商品

						
							三星Note3
							华为6s
						
						
<<
						
<<<
					

事件绑定

1.点击展开事件：

		
html核心代码：

		

			
什么是JQ？
			

				巴拉巴拉
			
		
		

2.鼠标滑过事件：

		
html核心代码：

		

			
什么是JQ？
			

				巴拉巴拉
			
		
		
		

 3.事件合成一：

核心代码：

		
html核心代码：

		

			
什么是JQ？
			

				巴拉巴拉
			
		

4.事件合成二：

核心代码：

		
html核心代码：

		

			
什么是JQ？
			

				巴拉巴拉
			
		

案例  表单校验：

在实际开发中一般使用第三方工具，本案例使用JQ插件validation进行表单校验。

因为validation是基于JQ的，所以在导库的时候导在JQ库之后

.js与.min.js的区别在于前者是格式标准的js库，可供开发者查看，后者是全部写在一行中，两者的代码量是一样的。

核心代码：

		
		
		
html核心代码：

					

						

							

								

									

										          
										会员注册   USER REGISTER
									
								
								

									

										                 
										用户名
									
									

										*   
									
								
								

									

										                 
										密码
									
									

										*   
									
								
								

									

										                  确认密码
									
									

										*   
									
								
								

									

										                  Email
									
									

										*   
									
								
								

									

										                  姓名
									
									

										*   
									
								
								

									

										                  性别
									
									

										
											*   男
											女
										
										
									
								
								

									

										                  出生日期
									
									

										*   
									
								
								

									

										                  验证码
									
									

										*   
										
									
								
								

									

										                                         
										
									
								
							
						
					

存在问题：表单校验时：//问题:当减少一个字符,或者使不能满足时,这里的success类还存在,导致不仅有红色字体还有对的图片