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~~~只是简单的介绍进行学习~~~~~~

posted @ 2018-08-18 16:51 Little_five 阅读(248) 评论(0) 编辑收藏举报

刷新页面返回顶部

Little_five

分享记录Python Web和数据分析,Linux运维经验等总结和日常学习知识。

06-jQuery进阶

一、正则

二、事件冒泡

三、事件委托

四、DOM操作

五、JavaScript对象

六、ajax

公告

Little_five

分享记录Python Web和数据分析,Linux运维经验等总结和日常学习知识。

06-jQuery进阶

一、正则

二、事件冒泡

三、 事件委托

四、DOM操作

五、JavaScript对象

六、ajax

公告

三、事件委托

五、JavaScript对象　