Language - JavaScript - API - JQuery

文章摘要： JQuery是封装好的JavaScript库。

JQuery解决了浏览器兼容问题。
JQuery解决了编写代码繁琐的问题。
Ajax是JavaScript的一个API，实现在不刷新当前页面的情况下，再次访问服务器获取资源，并更新当前页面上的元素信息。

在HTML文件中引入JQuery.JS文件

jQuery的入口函数

等待DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成。

// 方案一
$(document).ready(function() {
    // 代码块
});

// 方案二
$(function() {
    // 代码块
});

顶级对象

jQuery与$的作用一样。
$是jQuery的别名。
$是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

获取jQuery对象

$('div');
$('.class');
$('#id');

jQuery对象与DOM对象的转换

jQuery对象与DOM对象之间可以相互转换。
jQuery并没有将全部属性和方法进行封装。

DOM对象转换为jQuery对象

var div = document.querySelector('div');
$(div);

jQuery对象转换为DOM对象

// index是索引号

$('div')[index];

$('div').get(index);

元素选择器

基础选择器

名称	例子	描述
ID选择器	`$('#id')`	获取指定ID的元素
全选选择器 `$('*')`	匹配所有元素
类选择器	`$('.class')`	获取同一类class的元素
标签选择器	`$('div')`	获取同一类标签的所有元素
并集选择器	`$('div,p,li')`	选取多个元素
交集选择器	`$('li.current')`	交集元素

层级选择器

名称	例子	描述
子代选择器	`$('ul>li')`	使用`>`，来获取儿子层级的元素，且不会获取孙子层级的元素
后代选择器	`$('ul li')`	使用空格，代表后代选择器，获取`ul`下的所有`li`元素包括孙子层级的元素

筛选选择器

语法	例子	描述
`:first`	`$('li:first')`	获取第一个`li`元素
`:last`	`$('li:last')`	获取最后一个`li`元素
`:eq(index)`	`$('li:eq(2)')`	获取到的`li`元素中，选择索引号为2的元素，索引号index从0开始
`:odd`	`$('li:odd')`	获取到的`li`元素中，选择索引号为奇数的元素
`:even`	`$('li:even')`	获取到的`li`元素中，选择索引号为偶数的元素

元素筛选方法

语法	例子	描述
`parent()`	`$('li').parent();`	查找父级
`children(selector)`	`$('ul').children('li');`	相当于`$('ul>li')`，儿子层级
`find(selector)`	`$('ul').find('li');`	相当于`$('ul li')`，后代选择器
`siblings(selector)`	`$('.first').siblings('li');`	查找兄弟节点，不包括自己本身
`nextAll([expr])`	`$('.first').nextAll();`	查找当前元素之后的所有同辈元素
`prevAll([expr])`	`$('.last').prevAll();`	查找当前元素之前的所有同辈元素
`hasClass(class)`	`$('div').hasClass('protected');`	检查当前的元素是否含有某个特定的类，若有则返回`true`
`eq(index)`	`$('li').eq(2);`	相当于`$('li:eq(2)')`，index从0开始

样式操作

$("<元素>").css("<属性>", "<值>");

效果

属性操作

文本属性值

元素操作

尺寸、位置操作

清空id为data的元素中的内容

$('#data').empty();

事件监听

事件监听可以理解为比较特殊的修改元素属性值的操作。

==待完善==

方法	说明
`$<元素对象>.on()`	鼠标点击
`$<元素对象>.onblur`	元素失去焦点
`$<元素对象>.onfocus`	元素获得焦点
`$<元素对象>.onload`	某个页面或图像被完成加载
`$<元素对象>.onsubmit`	当表单提交时出发该事件
`$<元素对象>.onkeydown`	某个键盘的键被按下
`$<元素对象>.onmouseover`	鼠标被移到某个元素上
`$<元素对象>.onmouseout`	鼠标从某个元素上移开
==待完善==

案例

循环

格式

// 传入需要遍历循环的数组
// 自动每循环一次，就执行一次`function()`函数
// function(i, item)，i代表当前循环的索引，item代表当前循环的数值
$.each(<循环数组>, function(i, item) {
    console.log(item);
});

发起请求与接收响应

`$.get()`

专门用于发起get请求，从而将服务器上的资源请求到客户端来进行使用。

格式

// url：请求的资源地址
// data：（可选）请求资源期间要携带的参数
// callback：（可选）请求成功时的回调函数
$.get(url, [data], [callback]);

案例 - 不带data参数的数据

$(function() {
    // 监听id是button的元素，当点击时执行该函数
    $('#button').on('click', function() {
        $.get('http://127.0.0.1:8080/login', function(res) {
            console.log(res);  // res是服务器返回的数据
        })
    })
});

案例 - 携带data参数的数据

$(function() {
    // 监听id是button的元素，当点击时执行该函数
    $('#button').on('click', function() {
        $.get('http://127.0.0.1:8080/login', {id: 1}, function(res) {
            console.log(res);  // res是服务器返回的数据
        })
    })
});

`$.post()`

专门用于发起post请求，向服务器提交数据。

格式

// url：请求的资源地址
// data：（可选）请求资源期间要携带的参数
// callback：（可选）请求成功时的回调函数
$.post(url, [data], [callback]);

案例 - 携带data参数的数据

$(function() {
    // 监听id是button的元素，当点击时执行该函数
    $('#button').on('click', function() {
        $.post('http://127.0.0.1:8080/login', {name: "小明", age: 18}, function(res) {
            console.log(res);  // res是服务器返回的数据
        })
    })
});

`$.ajax()`

能比较综合的函数，允许我们对ajax请求进行更详细的配置。

格式

$.ajax({
    type: '',    // 请求方式，如GET、POST
    url: '',     // 请求的URL地址
    data: {},    // 请求携带的数据
    success: function(res) {}   // 请求成功之后的回调函数

});

案例

$.ajax({
    type: 'GET',                        // 请求方式，如GET、POST
    url: 'http://127.0.0.1:8080/login', // 请求的URL地址
    data: {                             // 请求携带的数据
        name: "小明",
        age: 18
    },
    success: function(res) {            // 请求成功之后的回调函数
        // res是服务器返回的数据
        console.log(res);
    }

});

案例

// 方法
$(function() {
    // 监听id是button的元素，当点击时执行该函数
    $('#button').on('click', function() {
        $.ajax({
            type: 'GET',                        // 请求方式，如GET、POST
            url: 'http://127.0.0.1:8080/login', // 请求的URL地址
            data: {                             // 请求携带的数据
                name: "小明",
                age: 18
            },
            success: function(res) {            // 请求成功之后的回调函数
                // res是服务器返回的数据
                console.log(res);
            }

        });

    })
});

案例

$(function () {
    // 获取图书列表数据
    function getBookList() {
        $.get('http://127.0.0.1:8080/book', function(res) {
            // 判断是否获取成功，这里的响应码是后台自行设定的，并非服务器标准响应码
            if (res.status !== 200) return alert("获取数据失败");

            var rows = []
            $.each(res.data, function(i, item) {
                rows.push("<tr><td>"+item.id+"</td><td>"+item.bookname+"</td><td>"+item.author+"</td><td>"+item.publisher+"</td><td><a href='javascript:;' class='del' data-id='"+item.id+"'>删除</a></td></tr>");
            });
            // 将一个id为tb的标签，进行清空之前渲染过的数据内容，并添加新的内容进去
            $('#tb').empty().append(rows.join(''));
        })
    }

    getBookList()

    // 通过代理的方式为动态添加的元素绑定点击事件
    // - 通过先绑定父级的标签，再去绑定动态添加的元素
    $('tbody').on('click', '.del', function() {
        var id = $(this).attr('data-id');
        console.log("点击id为"+id+"的删除按钮");

        $.get('http://127.0.0.1:8080/delbook', {"id": id}, function(res) {
            if(res.status !== 200) return alert("删除失败");
            alert("删除成功");
            getBookList()
        })
    })

});