五、jquery链式调用:
jquery对象的方法会在执行完成后返回这个jquery对象,所有的jquery对象的方法可以可以连起来写
$('#div1')// id为div1的元素
.children('ul')//该元素下面的ul子元素
.slideDown('fast')//高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素评级的所有兄弟元素
.siblings('ul')//这些兄弟元素中的ul子元素
.slideUp('fast');//高度实际高度变换到零来隐藏ul元素
六、jquery属性操作
1、html()取出或设置html内容
// 取出html内容
var $htm = $('#div1').html
//设置html内容
$('#div1').html('<span>添加文字</span>');
2、prop()取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').prop('src');
//设置图片的地址和alt属性
$('#img1').prop({src:"test.jpg",alt:"Test Image"});
七、jquery事件
事件函数列表:
blur()元素失去焦点
focus()元素获得焦点
change()当表单元素的值发生改变时
click()点击鼠标
mouseover()鼠标进入(进入子元素也触发)
mouseout()鼠标离开(离开子元素也触发)
mouseenter()鼠标进入(进入子元素不触发)
mouseleave()鼠标离开(离开子元素不触发)
ready() DOM加载完成
submit()用户递交表单
八、表单验证
1、什么时正则表达式:
能让计算机读懂的字符串匹配规则。
2、正则表达式的写法:
var re = new RegExp('规则','可选参数');
var re = /规则/参数;
3、规则中的字符
1)普通字符匹配:
eg:/a/匹配字符 'a' ,/a/b 匹配字符 'a,b'
2) 转义字符匹配:
\d 匹配一个数字 即0-9
\D 匹配一个非数字 ,即除了0-9
\w 匹配 一个单词字符(字母,数字,下划线)
\W 匹配任何非单词字符,等价于[ ^A-Za-A0-9]
\s 匹配一个空白符
\S 匹配 一个非空白符
. 匹配一个任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/ ;
alert(re01.test(sTr01)) ; 弹出 ture
alert(re02.test(sTr01)) ; 弹出 false
4、量词:对左边的匹配字符定义个数
? 出现零次或一次(最多出现一次)
+ 出现一次或多次(至少出现一次)
* 出现零次或多次 (任意次)
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少弧线n次
5、任意一个或者范围
[abc123] :匹配'abc123'中的任意一个字符
[a-z0-9]:匹配a到z或者0到9中的任意一个字符
6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结束
7、修饰参数
g:global ,执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
i :ingore case ,忽略大小写,默认大小写敏感
8、常用方法
test :正则.test(字符串)匹配成功,就返回真,否则就返回假。
正则默认规则:
匹配成功就结束,不会继续匹配,区分大小写。
常用正则规则:
//用户名验证:(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证:
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证:
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证:
var rePhone = /^1[34578]\d{9}$/;
九、ajax
ajax一个前后台配合的技术,它可以让JavaScript发送http请求,与后台通信,获得数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信,jquery将它封装成了一个函数$.java(),我们可以直接用这个函数来执行ajax请求。
ajax 需要在服务器环境下运行。
$.ajax 使用方法:
常用参数:
1、url 请求地址 2、type 请求方式,默认是'post',
3、dataType设置返回的数据格式,常用的是’json‘格式,也可以设置为'text'
4、data设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是饭否异步,默认值是'true',表示异步
新的写法:
$.ajax({
url:'js/data.json',
type:'get',
dataType:'json',
data:{'code':300268}
})
.done(function(dat){
alert(dat.name)
})
.fail(function(){
alert('服务器超时,请重试!');
})
$.ajax的简写方式
$.ajax按照请求方式可以简写成$.get或者$.post
$.get(URL,data,function(data){},dataType);
$.post(URL,data,function(data){},dataType);