06-jQuery进阶

 

  本篇主要介绍jQuery的正则、冒泡事件、委托事件、以及DOM操作、JavaScript对象以及ajax等知识;

一、正则

  简而言之,正则的规则无论是各种语言均是通用的,故其规则中的字符便不再介绍了,通常前端所需要的是常用的正则规则即可;

  1.1 正则表达式的写法

var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

  1.2 正则的默认规则 -- 匹配成功就结束,不会继续匹配,区分大小写

  1.3 用法:正则.test(字符串) 匹配成功,就返回真,否则就返回假

  1.4 常用的正则规则

//用户名验证:(数字字母或下划线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}$/;

 

二、事件冒泡

 2.1 什么是事件冒泡

  在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

 2.2 事件冒泡的作用 

  事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

 2.3 事件冒泡的阻止

  事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div
事件冒泡的阻止

 2.4 阻止默认行为

  阻止表单提交

$('#form1').submit(function(event){
    event.preventDefault();
})

  合并阻止操作 

// event.stopPropagation();
// event.preventDefault();

// 合并写法:
return false;

 

三、 事件委托

  事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

<script>
        $(function(){
            var $li = $('.list li');
            var $ul = $('.list');
            //alert($li.length);
            /*
            $li.click(function(){
                $(this).css({'background':'red'});
            })
            */
            // 上面的写法性能不高,可以写成事件委托的形式:
            $ul.delegate('li','click',function(){
                // $(this) 指的是发生事件冒泡的子级
                $(this).css({'background':'red'});
            })
        })
    
</script>
...............
<ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
</ul>

 

四、DOM操作

 元素节点操作指的是改变html的标签结构,它有两种情况:
  1、移动现有标签的位置
  2、将新创建的标签插入到现有的标签中

 4.1 创建新标签

var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');

 4.2 移动或者插入标签的方法 

1、append()和appendTo():在现存元素的内部,从后面放入元素

2、prepend()和prependTo():在现存元素的内部,从前面放入元素

3、after()和insertAfter():在现存元素的外部,从后面放入元素

4、before()和insertBefore():在现存元素的外部,从前面放入元素

  例如:

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

  4.3 删除标签

$('#div1').remove();

  4.4 todolist(计划列表)实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;            
        }
        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $btn = $('#btn1');
            var $txt = $('#txt1');
            var $list = $('#list');


            // 点击增加
            $btn.click(function(){
                var sTr = $txt.val();

                $txt.val('')
                if(sTr ==''){
                    alert('输入不能为空!!!');
                    return;
                }

                var sContent = '<li><span>'+ sTr +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>';
                var $li = $(''+sContent)

                $list.append($li)
            })

            // 点击删除、上移下移
            $list.delegate('a','click',function(){
                var sCname = $(this).prop('class');

                // 删除操作
                if (sCname == 'del') {
                    $(this).parent().remove();
                }


                //上移操作
                if(sCname == 'up'){

                    var slen = $(this).parent().prev().length;
                    if(slen == 0) {
                        alert('已经在最顶层了!!!')
                        return;
                    }

                    $(this).parent().insertBefore($(this).parent().prev());
                }

                //下移操作
                if (sCname=='down') {

                    var slen = $(this).parent().next().length
                    alert(slen)
                    if ( slen == 0) {
                        alert('已经在最底层了!!')
                        return
                    }
                    $(this).parent().insertAfter($(this).parent().next());
                }

            })

        })

    </script>    
</head>
<body>

    <div class="list_con">
    <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">
        
        <ul id="list" class="list">

            <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

        </ul>

    </div>
</body>
</html>
todolist

 

五、JavaScript对象 

  javascript中的对象,可以理解成是一个键值对的集合,键是调用每个值的名称,值可以是基本变量,还可以是函数和对象。

  创建javascript对象有两种方法,一种是通过顶级Object类来实例化一个对象,然后在对象上面添加属性和方法:

 第一次方式:通过顶级Object类来实例化一个对象

var person = new Object();

// 添加属性:
person.name = 'tom';
person.age = '25';

// 添加方法:
person.sayName = function(){
    alert(this.name);
}

// 调用属性和方法:
alert(person.age);
person.sayName();

 第二次方式:通过对象直接量

var person2 = {
    name:'Rose',
    age: 18,
    sayName:function(){
        alert('My name is' + this.name);
    }
}

// 调用属性和方法:
alert(person2.age);
person2.sayName();

 

六、ajax

  6.1  常用参数有:


1、url 请求地址
2、type 请求方式,默认是'GET',常用的还有'POST'
3、dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步,默认值是'true',表示异步

  例如:

$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('服务器超时,请重试!');
});

  6.2  $.ajax按照请求方式可以简写成$.get或者$.post方式

$.get("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});

$.post("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});

  6.3 同步和异步

  现实生活中,同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事,程序中的同步和异步是把现实生活中的概念对调,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步。

 

  Over~~~只是简单的介绍进行学习~~~~~~

 

转载于:https://www.cnblogs.com/littlefivebolg/p/9497755.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值