Python百日进阶WEB开发】Day153 - 前端基础 之 JQuery(二)

八、jQuery事件

8.1 常用事件

• click()鼠标单击
• blur()元素失去焦点
• focus()元素获得焦点
• mouseover()鼠标进入(进入子元素也触发)
• mouseout()鼠标离开(离开子元素也触发)
• ready()DOM加载完成

        // jQuery事件
        $(function(){
            var $lis = $('ul li');  // 获取所有li标签
            var $btn = $('#btn1');  // 获取按钮标签
            var $text = $('#txt1'); //获取文本输入框标签
            var $div = $('div'); //获取所有div
            // 点击标签，字体变红
            $lis.click(function(){
                //获取当前点击的标签，原生js写法,点击变红
                this.style.color = 'red';
                // jQuery标准写法
                $(this).css({'color': 'orange'});
                alert($(this).index());  //获取当前点击标签的索引方法
            });
            // 点击按钮时获取文本框输入的内容
            $btn.click(function(){
                alert($text.val());//获取文本框输入的内容
            });
            //文本框获取焦点时，背景变黄
            $text.focus(function(){
                $text.css({'background': 'yellow'});    // 设置文本框背景颜色
                $(this).css({'background': 'yellow'}); // 设置文本框背景颜色
            });
            // 文本框失去焦点时，背景变黑
            $text.blur(function(){
                $text.css({'background': 'white'});    // 设置文本框背景颜色
                $(this).css({'background': 'white'}); // 设置文本框背景颜色
            });
            //div标签设置鼠标进入事件
            $div.mouseover(function(){
                $(this).css({'background': 'green'});  // 设置div背景绿色
            });
            //div标签设置鼠标移除事件
            $div.mouseout(function(){
                $(this).css({'background': 'white'});  // 设置div背景白色
            });
        });
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
31
32
33
34
35
36
37

九、事件代理

9.1 事件代理介绍

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

        // 事件代理，事件冒泡就是事件会向它的父级一级一级传递
        $(function(){
            var $btn = $('#btn1');
            var $div = $('div');
            var $lis = $('li');
            var $ul = $('ul');
            // 按钮点击事件
            $btn.click(function(){
                alert('我是按钮');
                // 取消事件冒泡，不让事件向父级控件传递,如果不取消，会向上传递
                return false;
            });
            // 父级div点击事件
            $div.click(function(){
                alert('我是div');
            });
            // 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作,只需绑定一次，并且新增的子控件都可以触发相同的事件
            $ul.delegate('li', 'click', function(){
                $(this).css({'color': 'red'});
            });
            //扩展：可以代理不同子控件的事件,多个子控件选择器用逗号分隔
            $('#div1').delegate('h1, p，#box1', 'click', function(){
                $(this).css({'color': 'red'});
            });
        });
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

十、JavaScript自定义对象

10.1 JavaScript对象的介绍

JavaScript中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象,此外 JavaScript允许自定义对象，对象可以拥有属性和方法。

10.2 JavaScript创建对象操作

创建自定义 javascript对象有两种方式：

• 通过顶级object类来实例化一个对象
• 通过对象字面量创一个对象

        // 创建自定义 javascript对象有两种方式：

        // 1. 通过顶级object类来实例化一个对象
        var oPerson = new Object(); // 实例化一个object对象
        oPerson.name = 'zhangsan';  // 设置属性name并赋值
        oPerson.age = 18;           // 设置属性age并赋值
        alert(oPerson.name);        // 读取name属性
        oPerson.show = function(){  // 自定义一个函数
            alert('我是一个好热');
        };
        oPerson.show();             // 调用自定义函数
        

        // 2. 通过对象字面量创一个对象
        var oStudent = {
            name: '李四',       // 设置属性name并赋值
            age: 20,            // 设置属性age并赋值
            show: function(){   // 自定义一个函数
                alert('李四是个学生');
            },
        };
        alert(oStudent.name + oStudent.age);   // 读取name和age属性
        oStudent.show();        // 调用自定义函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

十一、json

11.1 json的介绍

json是 JavaScript Object Notation的首字母缩写,翻译过来就是javascript对象表示法,这里说的json就是类似于 javascript对象的字符串·它同时是一种数据格式目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。

11.2 json的格式

json有两种格式:对象格式和数组格式

11.2.1 对象格式

对象格式的json数据,使用一对大括号()大括号里面放入key value形式的键值对,多个键值对使用逗号分隔。

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

json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

11.2.2 数组格式

数组格式的json数据·使用一对中括号([]），中括号里面的数据使用逗号分隔。

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

11.3 json数据转JavaScript换成对象

json本质上是字符串,如果在js中操作json数据,可以通过JSON.parse(json字符串)方法，将json字符串转化为JavaScript对象。

        // json 数据就是类似javascript的字符串，同时还是一种数据格式，在web开发时，经常使用json数据格式。
        // json使用双引号，有两个格式：对象格式和数组格式
        // 1.对象格式：最外层是大括号，key和字符串都用双引号
        var sJson1 = '{"name": "lisi", "age": 18}';  //定义字符串的json
        var oPerson = JSON.parse(sJson1);       //转成js对象
        console.log(oPerson);                   //控制台输出
        console.log(oPerson.name + oPerson.age);//控制台输出

        // 2.数组格式：最外层是中括号，每项数据之间用逗号分隔
        var sJson2 = '[{"name": "lisi", "age": 18},{"name": "zhangsan", "age": 20},{"name": "zhaosi", "age": 25}]'
        var aArrary = JSON.parse(sJson2);
        console.log(aArrary);
        console.log(aArrary[1].name);

        // 扩展:浏览器给 python服务器的json数据, python服务器程序可以解析成字典或者列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

十二、ajax

12.1 ajax的介绍

ajax是 Asynchronous JavaScript and XML的简写。ajax是一个前后台配合的技术，它可以让javascript发送异步的http请求，与后台通信进行数据的获取。ajax最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用ajax了。
这里提示一下大家，在html页面使用ajax需要在web服务器环境下运行，一般向自己的web服务器发送ajax请求。

12.2 ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

ajax方法的参数说明:
1.url请求地址
2.type请求方式,默认是’GET’,常用的还有’POST’
3.dataType设置返回的数据格式常用的是json格式
4.data设置发送给服务器的数据,没有参数不需要设置
5.success设置请求成功后的回调函数
6.error设置请求失败后的回调函数
7.async设置是否异步,默认值是true表示异步,一般不用写
8.同步和异步说明

• 同步是一个aja请求完成另外一个才可以请求,需要等待上一个ajax请求完成,好比线程同步。
• 异步是多个ajax同时请求,不需要等待其它ajax请求完成好比线程异步

        // ajax 
        // 向web服务器发送一个ajax请求，本质就是http请求
        $.ajax({
            url: "data.json",    //不指定ip地址和端口号，表示请求的是自己的服务器数据
            type: "GET",        //请求方式 GET POST
            dataType: "JSON",   //指定返回数据解析的格式
            data:  {"name": "李四"},        //发送给服务器的数据
            success: function(data){    //请求成功执行的函数
                console.log(data.name); //查看请求回来的数据
                //请求回来的数据可以绑定给html中的标签控件，实现局部刷新
            },
            error: function(data) {     //请求失败执行的函数
                alert('网络异常！');
            },
            async: true,    //是否使用异步请求，默认true
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

简写方式

        // 发送get方式的ajax请求的简写方式
        // 1.请求的地址
        // 2.请求给web服务器的参数
        // 3.请求成功的回调函数
        // 4.返回数据的解析方式
        // error失败执行的回调函数
        $.get("data.json", {"name": "李四"},  function(data){
                console.log(data.name);
            }, "JSON").error(function(data) {
                alert('网络异常！');
        });
1
2
3
4
5
6
7
8
9
10
11

post请求

// 发送post方式的ajax请求的简写方式 $.post("data.json", {"name": "李四"}, function(data){ console.log(data.name); }, "JSON").error(function(data) { alert('网络异常！'); });

十三、Jquery和vue对比

很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？

13.1 jquery介绍

想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低

13.2 vue介绍

vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvmm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。 然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起

13.3 vue和jquey对比

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

13.4 举例说明

场景：列表添加一个元素,下图为vue和jquery两种操作的代码，我们从中可以看出vue只需要向数据message里面push一条数据即可完成添加一个li标签的操作，而jquery则需要获取dom元素节点，并对dom进行添加一个标签的操作，如果dom结构特别复杂，或者添加的元素非常复杂，则代码会变得非常复杂且阅读性低

• vue:

DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
head>

<body>
    <div id="app">
        <ul>
            
            <li v-for="item in message">{{item}}li>
        ul>
        <button @click="add">添加数据button>
    div>
body>

<script src="https://unpkg.com/vue/dist/vue.js">script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: ["第1条数据","第2条数据"],
            i:2
        },
        methods:{
            //向数组添加一条数据即可
            add:function(){
                this.i++
                this.message.push("第"+this.i+"条数据")
            }
        }
    })
script>

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
31
32
33
34
35

• jquery:

DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
head>

<body>
    <div id="app">
        <ul id="list">
            <li>第1条数据li>
            <li>第2条数据li>
        ul>
        <button id="add">添加数据button>
    div>

body>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
<script>
    $(document).ready(function() {  
    var i=2;
    $('#add').click(function() { 
       i++; 
       //通过dom操作在最后一个li元素后手动添加一个标签
      $("#list").children("li").last().append("
第"+i+"条数据
")
    });  
  }); 
script>
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