Jquery笔记(下)

共计 8503 个字符,预计需要花费 22 分钟才能阅读完成。

概述

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

一. 事件冒泡

什么是事件冒泡

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

事件冒泡的作用

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

阻止事件冒泡

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

<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>

阻止默认行为

阻止表单提交

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

合并阻止操作

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

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

// 合并写法:
return false;

总结:

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

二. 事件委托

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

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

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

一般绑定事件的写法

$(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>

事件委托的写法

<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、将新创建的标签插入到现有的标签中

创建新标签

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

移动或者插入标签的方法

append( )

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

使用方法: 


$(selector).append(content)

例如:

<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>

效果:

div元素这是一个span元素

appendTo( )

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

使用方式:

$(content).appendTo(selector)

例如:

<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>

结果:

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

prepend( )

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

使用方式:

$(selector).prepend(content)

例如:

<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>

结果:

a标签第一个div元素

prependTo( )

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

使用方法:

$(content).prependTo(selector)

例如:

<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>

结果:

a标签第一个div元素

after( )

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

使用方式:

$(selector).after(content)

例如:

<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>

结果:

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

insertAfter( ):

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

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

使用方法:

$(content).insertAfter(selector)

例如:

<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>

结果:

第一个div元素
哈哈,斜体

before( )

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

使用方式:

$(selector).before(content)

例如:

<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>

结果:

哈哈,斜体
第一个div元素

insertBefore( )

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

使用方式:

$(content).insertBefore(selector)

例如:

<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>

结果:

哈哈,斜体
第一个div元素

删除标签

使用方式: 


$(selector).remove()

例如:

<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>

结果:

第二个div元素

总结:

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

四. JavaScript对象

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

创建 JavaScript 对象有两种方法:

  • 一种是通过顶级 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();

总结:

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

五. Json

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

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

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

json 格式的数据:

{
    "name":"tom",
    "age":18
}

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

["tom",18,"programmer"]

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

{
    "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使用方法

使用方法: 

$.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’,表示异步

以前的写法:

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

新的写法(推荐):

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

例如:

    <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方式

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

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

同源策略

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

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
  • 异步指的是多个步骤同时进行. 同步指的是多个步骤一步一步执行.
正文完
 
Dustin
版权声明:本站原创文章,由 Dustin 2019-09-23发表,共计8503字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。