【JQuery学习笔记二】利用JQuery完成不同的文档和节点操作!

通过3个demo来学会如何利用JQuery来对文档和节点进行不同的操作。

1.使用JQuery完成省市二级联动。

需求:当第一个下拉选择框选择湖北省时,第二个选择框自动加载湖北的城市。

【JQuery学习笔记二】利用JQuery完成不同的文档和节点操作!_第1张图片

步骤:第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份
   第二步:创建二维数组来存储省份和城市
   第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
   第四步:接着遍历数组中的城市
   第五步:创建一个城市文本节点
   第六步:创建option元素节点
   第七步:将文本节点添加到元素节点中【使用JQ的文档操作方法】
   第八步:获取第二个下拉列表并将option元素节点添加进去
   第九步:清除第二个下拉列表的option内容
js代码:


籍贯
							
								
								
								
							

2.使用JQuery完成下拉表左右选择。

需求:把左边选择框中的选择项通过选择移到右边的选择框中。

【JQuery学习笔记二】利用JQuery完成不同的文档和节点操作!_第2张图片

步骤:第一步:确定事件(鼠标单击事件click)
   第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
   第三步:将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

代码:



	
		
		下拉列表左右选择
		
		
	
	
	
		
分类名称
分类描述
分类商品 已有商品

>>

>>>

未有商品

<<

<<<

3.使用JQuery完成表单的验证。

需求:在注册表单中,通过表单的内容作出即时的验证判断。

【JQuery学习笔记二】利用JQuery完成不同的文档和节点操作!_第3张图片

分析:在JQuery中,可以使用validation插件完成对表单数据的校验,使用前需要导入相应的js包,同时可以使用国际化的js包来设置提示语言为汉语。


代码:



	
		
		网站注册页面
		
		
		
		
		
		
		
	
	
		
           会员注册   USER REGISTER
                  *   
                  密码 *   
                  确认密码 *   
                  Email *   
                  姓名 *   
                  性别 *   
                  出生日期 *   
                  验证码 *   
                                         

通过这3个简单的demo可以学会如何使用JQuery来操作文档和节点。


你可能感兴趣的:(JQuery)