美文网首页
jQuery进阶

jQuery进阶

作者: 潇潇雨歇_安然 | 来源:发表于2018-06-29 21:19 被阅读0次

    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('<span>添加文字</span>');

    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() );
        })
    })
    ......
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    

    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}$/;
    

    相关文章

      网友评论

          本文标题:jQuery进阶

          本文链接:https://www.haomeiwen.com/subject/zykzyftx.html