day06: jquery动画、操作DOM、添加元素、删除元素、添加与删除类样式、css样式、Jquery常用的选择器（过滤选择器（基偶）、层级选择器、属性选择器）、validation 框架

一 回顾

1.创建节点
   createElement() 创建节点对象
   createTextNode() 创建文本节点(内容)
   appendChild 添加父子关系
   removeChild 删除子节点
2.前端的登录验证
3.定时函数
   setInterval("执行的操作","间隔的毫秒值") 多次执行
   clearInterval(t) 清除定时函数
   setTimeout("执行的操作","间隔的毫秒值")  一次执行
   clearTimeout(w); 清除定时函数
4.Bom.Window
    window.document
    Window Screen
    Window Location
    Window History
    Window Navigator
5.jquery 封装js的框架
   准备函数:A.$(function(){})  A.$(docment).ready(function(){})
   js与jquery之间的相互转换 
     js==>jquery $(js)
     jquery==>js  $(js)[0] 或者 $(js).get(0)
   jquery 三种基本选择器: id选择器 $("#id") 类选择器 $(".class") 标签选择器 $("标签名称")
   jquery 特效
     hide() show()  toggle()
     fadeOut() fadeIn() fadeToggle()
     slideUp() slideDown() slideToggle()
   jquery 事件  与js类似 去除 on

二 作业01

step01 需求

step02 分析

A.事件
B.使用js操作样式

step03 代码

    
    
    
    
    



    我的当当
    

        
我的订单
        
我的收藏
        
我的礼品卡
        
我的积分
        
我的余额
    
    

  

三 作业02

step01 需求

step02 分析

1.根据标签来获取行
2.使用循环来遍历依次设置样式

step03 代码

	
		
		
	
	
		

			

				
商品的编号
				
商品名称
				
商品价格
				
商品描述
			
			

				
1
				
1
				
1
				
1
			
			

				
2
				
2
				
2
				
2
			
			

				
3
				
3
				
3
				
3
			
		
		
	

四 jquery动画

方法的名称	方法的描述
animate({params},speed,callback)	设置动画
stop()	方法用于在动画或效果完成前对它们进行停止

代码

①：设置动漫效果，必须在css中设置定位

    
        
        
        
        
    
    
        

        点击
        停止
        
    

五 jquery 操作DOM

5.1 属性操作方法

方法的名称	方法的描述
attr()	设置或返回匹配元素的属性和值
html()	设置或返回匹配的元素集合中的 HTML 内容
val()	设置或返回匹配元素的值
text()	设置文本内容
prop()	设置或返回匹配元素的属性和值

代码

①：属性单个是获取属性值，attr()：相当路径，prop()：绝对路径

多个属性是设置属性值

    
        
        
        
    
    
        
        
        槟榔
        
        
李颖焕睡着了
        
        
        
        
    

5.3 添加元素

方法的名称	方法的描述
append()	在被选元素的结尾插入内容
prepend()	在被选元素的开头插入内容
after()	在被选元素下面插入内容
before()	在被选元素上面插入内容

代码

	
		
		
		
	
	
		
大厦的分隔符
		
	
	

5.4 删除元素

方法的名称	方法的描述
remove()	删除被选元素（及其子元素）(删除子元素包括本身)
empty()	从被选元素中删除子元素(删除子元素)

代码

①：remove()删除子元素包括本身

②：empty()删除子元素不包括本身

    
        
        
        
        
    
    
        

            
陈亮宇
            
何海鹏
            
雷凌
            
黄天良
        
        
        
    

5.4 添加与删除类样式

方法的名称	方法的描述
addClass()	向匹配的元素添加指定的类名
removeClass()	从所有匹配的元素中删除全部或者指定的类
toggleClass()	从匹配的元素中添加或删除一个类。

代码

    
        
        
        
        
    
    
        
        
        
        

        
        
    

​

5.5 css样式

1.语法：$(选择器).css({"属性名":"属性值","属性名":"属性值"})

代码

①css颜色里面要有个花括号.css({"属性名":"属性值","属性名":"属性值"})

    
        
        
        
    
    
        
2203班来了一个美女
         
         
    

​

六 Jquery常用的选择器

6.1 过滤选择器

代码

	
		
		
		
	
	
		
0000000000000
        
1111111111111
        
2222222222222
        
3333333333333
        
4444444444444
        
5555555555555
        
6666666666666
        
7777777777777
        
8888888888888
        
9999999999999
	
	

6.2 层级选择器

代码

    
        
        
        
    
    
        

            
000000
            
                
1111
            
            
            
2222
            
3333
            
                
44444
            
        
        
5555
        
6666
        
            
77777
        
        
    

6.3 属性选择器

代码

    
        
        
        
    
    
        1
        2
        3
        4
        5
        
    

七 validation 框架(参考文档)-用于表单校验

需求：

1. 用户名、密码、确认密码、Email、出生日期不能为空
2. 用户名的长度要在4-12之间
3. 密码和确认密码要一致
4. Email要符合邮箱格式
5. 出生日期必须符合日期格式

8.2.1.1、插件简述

Validate   框架

JQuery有着大量的功能插件，每种插件都有自己独有的功能。

Validation  -- 用于表单校验

bootstrap

8.2.1.2、插件导入

导入有先后顺序：

 准备代码：

			

				

					
测试表单
				
				

					
用户名（必填字段，长度范围6~10）
					

						
					
				
				

					
Email（符合邮件格式）
					

						
					
				
				

					
出生日期（日期格式）
					

						
					
				
				

					
薪资（数字）
					

						
					
				
				

					
一天工作时长（值范围6~16）
					

						
					
				
				

					
密码（必须填写）
					

						
					
				
				

					
确认密码（必须填写，且与密码值要相同）
					

						
					
				
				

					

					

						
					
				
			
		

8.2.1.3、为指定表单加入校验（准备函数中加入）

8.2.1.4、为校验加入规则

validate()方法中可以指定添加规则

规则速查表

校验类型	取值	描述
required	true|false	必填字段
email	true|false	邮件地址
date	true|false	日期，适用于通过的日期格式 YYYY YYYY-MM        YYYY-MM-dd    YYYY/MM/dd YYYY/MM/dd hh:mm:ss
dateISO	true|false	日期（YYYY-MM-dd）
number	true|false	数字（负数，小数）
digits	true|false	整数
minlength	填写具体数字	最小长度
maxlength	填写具体数字	最大长度
rangelength	[minL,maxL]	长度范围
min		最小值
max		最大值
range	[min,max]	值范围
equalTo	jQuery选择器表达式	两个值相同.值相同允许，值不同
remote	url路径	ajax校验
url		路径

需求：将错误提示信息改为红色

错误提示信息是Validate自带的class="error"

​

 

 8.2.1.5、为规则自定义错误信息

messages可以为已经定好的规则自定义错误信息

其中

1. {0} 动态获取规则值的第一个值
2. {1} 动态获取规则值的第二个值

	
		
		
		
		
		
		
	
	
		

			

				

					
测试表单
				
				

					
用户名（必填字段，长度范围6~10）
					

						
					
				
				

					
Email（符合邮件格式）
					

						
					
				
				

					
出生日期（日期格式）
					

						
					
				
				

					
薪资（数字）
					

						
					
				
				

					
一天工作时长（值范围6~16）
					

						
					
				
				

					
密码（必须填写）
					

						
					
				
				

					
确认密码（必须填写，且与密码值要相同）