06.WEB-HTML之JQuery标签学习总结(二)

目录

• 能够使用jQuery为标签添加属性或者样式
• 能够为制定标签添加子标签或兄弟标签
• 学会个标签绑定事件
  

一 案例1:省市联动

1.1 相关函数

 本案例需要对标签的value属性值，标签体内容进行操作，并需要遍历所有的市

1.1.1 属性操作：val / text / html

val()  获得value属性的值

val(...)  给value属性设置值

html()  获得html代码，如果有标签，一并获得

html(...)  设置html代码，如果有标签，将进行解析。

text() 获得文本，如果有标签，忽略。

text(...)  设置文本，如果含有标签，不进行解析。原样输出。

1.1.2 遍历函数：each()

  方式1：￥(ele).each(fn);

  方式2：$.each($ele,fn);

回调函数fn： function(index,docEle)

  参数1：遍历索引号

  参数2：遍历当前对象 docEle == this(dom对象)

1.1.3 文档处理：内部插入

A.append(B)  ,将B插入到A内部后面

...

A.prepend(B) ,将B插入到A内部前面

...

A.appendTo(B) ,将A插入到B内部后面

A.preappendTo(B), 将A插入到B内部前面

1.2 案例实现

二 案例2:左右选择

 2.1 相关函数

  2.1.1 常见事件

2.1.2 事件切换

hover(over,out) 简化方法  

A.hover(fn1,fn2) 等效  A.mouseover(fn1).mouseout(fn2)

toggle(fn1,fn2,....) click事件曾强班，轮回

2.2 案例实现

	
		
		
		
		
	
	
	
		

			

				

					分类名称
				
				

					
				
			
			

				

					分类描述
				
				

					手机数码类商品
				
			
			

				

					分类商品
				
				

					
						已有商品

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

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

				

					
				
			
		
	

2.3 效果图

三 案例3：表单校验

3.1 相关知识：validation校验

3.1.1 下载：

  官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

  帮助文档位置：http://jqueryvalidation.org/documentation/

  目录结构：

3.1.2 导入

validate是jQuery插件，及必须在jQuery的基础上进行运行，因此导入jQuery库 validate库 和国际化资源库

3.1.2 相关函数

3.2 案例实现