jquery提高

jquery提高

• animate,tab和弹窗
• 封装动画函数，前面学了hide，show
• jq控制html属性
• jq的循环
• jq常用的事件属性，和js类似不加on
• 正则在js的使用方法—为了表单验证
• 完成demo尤其表单验证

1.animate 自定义动画

animate标配四个参数：
字典的形式写css键值对；//{k:v,…} 这个最重要
时间；//以毫秒单位，有个默认值600ms
运动曲线；//swing linear匀速 – 工作中不用
回调函数//前边动画执行完了执行回调函数

animate不支持变颜色

<script>
$(function(){
	$('div').animate({'width':'800px'},2000,'linear',function(){
		alert('ok!')
	})
})
</script>

回调：在前面执行响应的业务逻辑，到最后去判断参数中的方法是否调用

function fn1(a,b,fn){
	alert(a+b)
	if(fn){
		fn()
	}
}
fn1(1,2,function(){
	pass
})

自调用：调用自己
(function(){pass})()

2.tab和弹窗demo

$(function(){
	$()
})

$(function(){
	$('#btn').click(function(){
		$('.pop_main').show()
		$('.pop_con').css({'top':0,'opacity':0})
		$('.pop_con').animate({'top':'50%','opacity':1})
	})
})

3.滑动，透明度7个单词

滑动：slideup卷入隐藏 slidedown卷出显示 slidetoggle

淡入淡出fadein fadeout fadeto fadetoggle

展示隐藏：show hide toggle

4.prop修改html属性 val访问控制value

js中控制html属性都是用.className .src
jq中用.html()访问修改html内容、下面的.prop()、.val()访问修改属性

prop和css的单属性用法完全一样，可以访问，可以修改prop(key,value)

对比html是内部一块区域 css在标签里写style=‘’
prop控制所有的html属性 val控制value属性

4.层级菜单demo

展开 隐藏

5.聊天demo

获取用户数据，显示数据，数据交互

6.jq循环 .each()

each自带一个形参，索引值下标
$().each(function(event表示标签的索引值){})

7. 常用事件 元素失去焦点blur 获得焦点focus

例如表单里，选中输入框，会变蓝，光标闪烁，这就是获得焦点
做一个简单的效果，获得焦点，文本框清空

8. 常用事件 鼠标进入鼠标离开

mouseover mouseout 进入离开子元素也触发命令
mouseenter mouseleave 进入离开子元素不触发命令
工作中都用hover 是enter进入leave离开的集合 绑定两个函数 第一个是进入，第二个是离开

$(function(){
	$(xx).hover(function(){
		pass
	},funcion(){
		pass
	})
})

9.常用事件submit

form标签里点submit标签控件，就激活jq里的submit事件
这里可以控制所有表单控件是否合法提交 错误就return false 而且阻止表单的默认提交行为

$(function(){
	$('#form_id').submit(function(){
		if(){
			提交
		}else{
			//这里就是报错，阻止表单的默认提交行为
			return false //工作中常用
		}
	})
})

10.正则js的使用方法 正则是为了表单验证

先定义变量存表达式
var regUser = new RegExp(规则,正则的参数)
参数：g全文搜索 i忽略大小写

工作中都这样用 var reg01 = /a/i

定义要匹配的字符 var

使用：正则变量.test(数据) --验证数据是否合法true 或者false

reg01.test(str要验证字符串)

ture匹配合法就提交，false就报错不能提交数据

正则验证用户名demo

$+变量名 习惯这样写表示jq选择器