jQuery进阶

1. jQuery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

2.jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所以jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

3. jquery属性操作

1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();

// 设置html内容
$('#div1').html('添加文字');

2、prop() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });

4. jquery循环

对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：

$(function(){
    $('.list li').each(function(){
        $(this).html( $(this).index() );
    })
})
......

    

    

    

    

    

    

5. jquery事件

事件函数列表：
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单

6. 表单验证

• 正则表达式的写法：
  var re=new RegExp('规则', '可选参数');
  var re=/规则/参数;

• 规则中的字符
  1）普通字符匹配：
  如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
  2）转义字符匹配：
  \d 匹配一个数字，即0-9
  \D 匹配一个非数字，即除了0-9
  \w 匹配一个单词字符（字母、数字、下划线）
  \W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
  \s 匹配一个空白符
  \S 匹配一个非空白符
  \b 匹配单词边界
  \B 匹配非单词边界
  . 匹配一个任意字符

var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

• 量词：对左边的匹配字符定义个数
  ? 出现零次或一次（最多出现一次）
  + 出现一次或多次（至少出现一次）
  * 出现零次或多次（任意次）
  {n} 出现n次
  {n,m} 出现n到m次
  {n,} 至少出现n次

• 任意一个或者范围
  [abc123] : 匹配‘abc123’中的任意一个字符
  [a-z0-9] : 匹配a到z或者0到9中的任意一个字符

• 限制开头结尾
  ^ 以紧挨的元素开头
  $ 以紧挨的元素结尾

• 修饰参数：
  g： global，全文搜索，默认搜索到第一个结果即停止
  i： ingore case，忽略大小写，默认大小写敏感

• 常用函数
  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}$/;