Jquery入门（三）

发表于 | 分类于 | 热度: ℃ |
字数统计: 4,007字 | 阅读时长 ≈ 17分钟

概述

本章会介绍：
1.事件冒泡的原理及用法
2.事件委托
3.什么是Dom？Dom的操作
4.Js对象的创建
5.Json的介绍
6.ajax&Jsonp技术的介绍及应用

一. 事件冒泡

什么是事件冒泡

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

事件冒泡的作用

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

阻止事件冒泡

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
$(function(){
    var $father = $('.father');
    var $son = $('.son');
    var $grandson = $('.grandson');
    $father.click(function() {
        alert('father');
    });
    
    $son.click(function() {
        alert('son');
    });
    
    $grandson.click(function(event) {
        alert('grandson');
        event.stopPropagation();
    });
    
    $(document).click(function(event) {
        alert('grandfather');
    });
})
</script>

    
<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止默认行为

阻止表单提交

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

合并阻止操作

实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

1
2
3
4
5
// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;

总结:

  • 事件冒泡是一种常用的思想
  • 事件冒泡是 js 对对象事件的处理策略,是 js 是的一种实现机制
  • 事件冒泡: 子元素会把事件, 传递给它的父级, 以此类推
  • 我们可以阻止事件冒泡: 使用: stopPropagation( )的方法
  • 我们也可以通过调用某些事件, 然后以 return false 的形式,阻止事件冒泡
  • 阻止默认行为: preventDefault( )

二. 事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作

事件委托首先可以极大减少事件绑定次数，提高性能；

其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})


<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委托的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
$(function(){
    $ul = $('#list');
    $ul.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
</script>


<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

总结:

  • 事件委托就是将本体不方便做的事情,委托给别的对象
  • 事件委托是我们集中处理某些事件的一种方式
  • 事件委托用的是delegate方法, 其中的参数为:
    • 第一个参数: 请求委托的对象
    • 第二个参数: 请求委托的事件类型
    • 第三个参数: 请求委托的处理方式(回调函数)

三. Dom操作

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

创建新标签

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

移动或者插入标签的方法

append( )

在元素内部添加，从后面放入

1
2
3
4
使用方法: 


$(selector).append(content)

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#app')
            var $span = $('<span>这是一个span元素</span>')
            $div.append($span)
        })
    </script>
</head>
<body>
    <div id="app">div元素</div>
</body>

效果:

1
div元素这是一个span元素

appendTo( )

在元素内部添加，从后面放入

1
2
3
使用方式:

$(content).appendTo(selector)

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){

            var $div1 = $('#app')
            var $div2 = $('#box')
            
            var $span = $('<span>这是一个span元素11</span>')
            $span.appendTo($div1)

            $('<em>哈哈哈,斜体</em>').appendTo($div2)
        })
    </script>
</head>
<body>
    <div id="app">第一个div元素</div>
    <div id="box">第二个div元素</div>
</body>

结果:

1
2
第一个div元素这是一个span元素11
第二个div元素哈哈哈,斜体

prepend( )

在元素内部添加，从前面放入

1
2
3
使用方式:

$(selector).prepend(content)

例如:

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#app')
            $div1.prepend('<a href="#">a标签</a>')
        })
    </script>
</head>
<body>
    <div id="app">第一个div元素</div>
</body>

结果:

1
a标签第一个div元素

prependTo( )

在元素内部添加，从前面放入

1
2
3
使用方法:

$(content).prependTo(selector)

例如:

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#app')
            $('<a href="#">a标签</a>').prependTo($div1)
        })
    </script>
</head>
<body>
    <div id="app">第一个div元素</div>
</body>

结果:

1
a标签第一个div元素

after( )

在元素外部添加，从后面放入

1
2
3
使用方式:

$(selector).after(content)

例如:

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#app')
            $div1.after("<em>哈哈,斜体</em>")
        })
    </script>
</head>
<body>
    <div id="app">第一个div元素</div>
</body>

结果:

1
2
第一个div元素
哈哈,斜体                // 斜的,这里可能看不出来...

insertAfter( )：

在元素外部添加，从后面放入

注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

1
2
3
使用方法:

$(content).insertAfter(selector)

例如:

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#app')
            $('<em>哈哈,斜体</em>').insertAfter($div1)
        })
    </script>
</head>
<body>
    <div id="app">第一个div元素</div>
</body>

结果:

1
2
第一个div元素
哈哈,斜体

before( )

在被选元素前插入指定的内容。 

1
2
3
使用方式:

$(selector).before(content)

例如:

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#app')
            $div1.before("<em>哈哈,斜体</em>")
        })
    </script>
</head>
<body>
    <div id="app">第一个div元素</div>
</body>

结果:

1
2
哈哈,斜体
第一个div元素

insertBefore( )

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

1
2
3
使用方式:

$(content).insertBefore(selector)

例如:

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#app')
            $('<em>哈哈,斜体</em>').insertBefore($div1)
        })
    </script>
</head>
<body>
    <div id="app">第一个div元素</div>
</body>

结果:

1
2
哈哈,斜体
第一个div元素

删除标签

1
2
3
4
使用方式: 


$(selector).remove()

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div1 = $('#app')
            $div1.remove()
        })
    </script>
</head>
<body>
    <div id="app">第一个div元素</div>
    <div id="box">第二个div元素</div>
</body>

结果:

1
第二个div元素

总结:

  • Dom 元素这里指的就是 HTML标签,有时候大家会听到 DOM树的概念, 那是因为 HTML 中的标签,就像是树一样, 根部是 <html>标签, 然后是<body>和<head>,再然后一级一级往下排,最终形成树形结构
  • 我们可以通过 jquery 来动态的修改 HTML 的结构,使用的就是上述的方法
  • append( ) 方法可以在元素内部后方, 添加新的元素, appendTo( ) 也差不多, 只是添加的顺序进行了调换
  • prepend( ) 方法可以在元素内部前方, 添加新的元素, prependTo( ) 与之类似, 添加的顺序进行了调换.
  • after( ) 方法是指在当前元素外部,从后方插入一个新的元素
  • before( ) 这个方法则正好和after( ) 方法相反, 在当前元素前方,插入一个新的元素
  • insertBefore( ) 则是在指定的元素之前插入子元素, 这些内容大家只需要简单了解, 使用起来的时候能够想的起来即可, 实在是忘记了, 可以到时候查一下文档.
  • 删除某个元素不必多说就是: 某个想要删除的元素调用remove( ) 方法即可.

四. JavaScript对象

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

创建 JavaScript 对象有两种方法:

  • 一种是通过顶级 Object 类来实例化一个对象，然后在对象上面添加属性和方法：(此方法不常使用)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
常用方法:

var person = new Object();

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

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

// 调用属性和方法：
alert(person.age);
person.sayName();
  • 还可以通过对象直接量的方式创建对象：( 经常使用 )
1
2
3
4
5
6
7
8
9
10
11
var person2 = {
    name:'Rose',
    age: 18,
    sayName:function(){
        alert('My name is' + this.name);
    }
}

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

总结:

  • JS 对象和我们在 python 中了解的对象略有不同, 最主要的区别还是 JS 对象不要类也可以定义
  • 我们一般会在 JS 中使用 { } 直接创建对象的形式来使用

五. Json

json 是 JavaScript Object Notation 的首字母缩写，单词的意思是 javascript 对象表示法，这里说的 json 指的是类似于 javascript 对象的一种数据格式对象，目前这种数据格式比较流行，逐渐替换掉了传统的 xml 数据格式。

json 数据对象类似于JavaScript 中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持 undefined，值还可以是数组或者 json 对象。

与 JavaScript 对象写法不同的是，json 对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

json 格式的数据：

1
2
3
4
{
    "name":"tom",
    "age":18
}

json 的另外一个数据格式是数组，和 javascript 中的数组字面量相同。

1
["tom",18,"programmer"]

还可以是更复杂的数据机构：

1
2
3
4
5
6
7
8
9
{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":'North Andover, MA'
    }
}

总结:

  • json 是现在市面上普遍使用的数据传输形式.
  • json 中如果是字符串, 则需要使用双引号, 如果是数字, 则不需要
  • json 的数据和是和对象非常相似, 这点需要注意
  • 现在市场上使用 json 比较多的原因是这种数据传输方式非常方便, 简洁.

六. ajax 与 jsonp

ajax 技术的目的是让 javascript 发送 http 请求，与后台通信，获取数据和信息。ajax技术的原理是实例化 xml http 对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

同步和异步

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

局部刷新和无刷新

ajax 可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

数据接口

数据接口是后台程序提供的，它是一个 url 地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回 json 格式的数据或者操作信息，格式也可以是text、xml等。

$.ajax使用方法

1
2
3
4
5
6
7
8
9
10
11
使用方法: 

$.ajax({
    url:'请求地址',
    type: '请求方式: 默认是'GET'，常用的还有'POST' ',
    dataType: '设置返回的数据格式，常用的是'json'格式，也可以设置为'html' ',
    data: '设置发送给服务器的数据',
    success: '设置请求成功后的回调函数',
    error: '设置请求失败后的回调函数',
    async: '设置是否异步，默认值是'true'，表示异步'
})

常用参数：

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

以前的写法：

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
    success:function(dat){
        alert(dat.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

新的写法(推荐)：

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="./jquery-1.12.4.min.js"></script>
<script>
    // {"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}
    $(function(){
        $.ajax({
            url:'http://localhost:3008/getMovieListData?message={"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}',
            type:'get',
            dataType:'json'
        }).done(function(data){
            console.log(data)
        })
    })
</script>

$.ajax的简写方式

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

1
2
3
4
5
6
7
8
9
$.get("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});

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

同源策略

ajax 请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计 ajax 时基于安全的考虑。特征报错提示：

1
2
3
XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

jsonp

ajax 只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到 jsonp 技术，jsonp 可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp 和 ajax 原理完全不一样，不过 jquery 将它们封装成同一个函数。

一般 ajax 数据接口和 jsonp 数据接口的区别

开发返回数据的接口，如果是一般的 ajax 接口，让接口直接返回 json 格式的数据字符串就可以了，这种接口的数据是不能跨域请求的，如果要跨域请求数据，需要开发jsonp的接口，开发jsonp的接口，需要获取请求地址中的参数，也就是’callback’键对应的值，然后将这个值和json数据拼装成一个函数调用的形式的字符串返回，就完成了一个jsonp的接口，这个键值对是由$.ajax函数自动产生的。比如：’callback’键对应的值一般是这样的：jQuery1124018787969015631711_1522330257607，所以：

  • 一般接口返回的数据形式：

    ‘{“iNum”:12,’sTr’:’abc’}’;

  • jsonp返回的数据形式：

    ‘jQuery1124018787969015631711_1522330257607({“iNum”:12,”sTr”:”abc”})’;

总结:

  • $.ajax的使用方法
  • 现在市面上数据请求的形式比较多, 普遍有 get post jsonp
  • 异步指的是多个步骤同时进行. 同步指的是多个步骤一步一步执行.
------ 本文结束------
坚持原创技术分享，您的支持将鼓励我继续创作！
0%