[JavaScript知识库] JavaScript复习笔记（十二）jQuery

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript复习笔记（十二）jQuery -> 正文阅读

[JavaScript知识库]JavaScript复习笔记（十二）jQuery

一、引入

<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

jQuery把所有功能全部封装在一个全局变量jQuery中，而$是变量jQuery的别名。
$本质上是一个函数，但函数也是对象，$除了可以直接调用外，也有很多其他属性。

$占用
如果这个变量被占用了，还不能改，就只能使用jQuery这个变量

$; // jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)

原理是jQuery在占用$之前，先在内部保存了原来的$,调用jQuery.noConflict()时会把原来保存的变量还原

二、jQuery对象

返回的对象是jQuery对象：类似数组，它的每个元素都是一个引用了DOM节点的对象
——返回对象[<div id="abc">...</div>]
——如果不存在，返回 []
总之选择器不会返回undefined或者null

jQuery对象和DOM对象之间可以互相转化（一般直接用jQuery对象）

var div = $('#abc'); // jQuery对象
var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象

三、选择器

按ID查找： var div = $('#abc');
按tag查找：var ps = $('p'); // 返回所有<p>节点
按class查找：
var a = $('.red'); // 所有节点包含class="red"都将返回
var a = $('.red.green'); // 注意没有空格！
按属性查找：
var email = $('[name=email]'); // 找出<??? name="email">

按属性查找还可以使用前缀查找或者后缀查找：

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"

组合查找
多项选择器

多项选择器就是把多个选择器用,组合起来一块选【不会有重复元素】

$('p,div'); // 把<p>和<div>都选出来
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来

层级选择器
因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择。
层级之间用空格隔开。
子选择器 >

<child>节点必须是<parent>节点的直属子节点: $('parent>child')

$('ul.lang>li.lang-javascript'); 
// 可以选出[<li class="lang-javascript">JavaScript</li>]

过滤器（Filter）:

它通常附加在选择器上，帮助我们更精确地定位元素。

$('ul.lang li:first-child');// 选出第一个元素
$('ul.lang li:last-child'); // 选出最后一个元素
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

表单相关
:input：选择<input>，<textarea>，<select>和<button>；
:file：选择<input type="file">；
:checkbox：选择复选框，和input[type=checkbox]一样；
:radio：选择单选框，和input[type=radio]一样；
:focus：选择当前输入焦点的元素
:checked：选择当前勾上的单选框和复选框，获得用户选择的项目
:enabled：选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；
:disabled：和:enabled正好相反，选择那些不能输入的。
可见 / 隐藏
$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div
查找
子节点中查找：find()
从当前节点开始向上查找：parent()
同一层级：next()和prev()
过滤
过滤掉不符合选择器条件的节点：filter()
把DOM节点转化为其他对象：map()

var arr = langs.map(function () {
    return this.innerHTML;
}).get(); 
// 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

jQuery对象如果包含了不止一个DOM节点：
first-child：first()
last-child：last()
截取对象：slice()

四、DOM操作

修改Text和HTML

text()：获取节点的文本
html()：获取节点的原始HTML文本

jQuery对象的另一个好处是：即使不存在设置的节点，代码不会报错（免去了许多 if 语句）

修改CSS： css('name', 'value')

div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性

修改class

div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

显示和隐藏DOM

1）设置CSS的display属性为none
2）jQuery直接提供show()和hide()方法

获取DOM信息

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

操作节点属性

attr()和removeAttr()方法用于操作DOM节点的属性

div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性

HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现：checked/selected

prop()方法和attr()类似，对于属性checked处理有所不同

radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

但用is()方法判断更好

radio.is(':checked'); // true

操作表单

jQuery对象统一提供val()方法获取和设置对应的value属性

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

五、DOM修改

1. 添加DOM

html()
append()

ul.append('<li><span>Haskell</span></li>');

除了接受字符串，append()还可以传入原始的DOM对象，jQuery对象和函数对象

// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($('#scheme'));

// 添加函数对象:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，
也就是说，用append()，你可以移动一个DOM节点。

prepend()
append()把DOM添加到最后，prepend()则把DOM添加到最前。
after() ：同级插入之后
before()：同级插入之前

2. 删除DOM

拿到jQuery对象后直接调用remove()

六、事件

事件绑定

a.on('click', function () {
    alert('Hello!');
});
//简化（等价）
a.click(function () {
    alert('Hello!');
});

鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。
其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。

ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。

始化代码必须放到document对象的ready事件中，保证DOM已完成初始化

$(document).ready(function () {
    // TODO
});
//简化：
$(function () { //这是document对象的ready事件处理函数
    // init...
});

反复绑定事件处理函数，它们会依次执行

事件参数
所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息

$(function () {
    $('#testMouseMoveDiv').mousemove(function (e) {
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

取消绑定

off('click', function)

不能移除匿名函数：匿名函数虽然长得一模一样，但是它们是两个不同的函数对象
为了实现移除效果，可以使用off('click')移除已绑定的所有click事件函数
无参数调用off()一次性移除已绑定的所有类型的事件处理函数

事件触发条件
事件的触发总是由用户操作引发的
手动触发change事件：直接调用无参数的change()方法来触发该事件
input.change()相当于input.trigger('change')
浏览器安全限制
有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数

七、动画

用JS实现动画原理：以固定的时间间隔，每次把DOM元素的CSS样式修改一点

show / hide / toggle

直接以无参数形式调用show()和hide()，会显示和隐藏DOM元素。传递一个时间参数进去，就变成了动画。

div.hide(3000); // 在3秒钟内逐渐消失
div.show('slow'); // 在0.6秒钟内逐渐显示

slideUp / slideDown / slideToggle

show()和hide()是从左上角逐渐展开或收缩的，
而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的。

fadeIn / fadeOut / fadeToggle

fadeIn()和fadeOut()的动画效果是淡入淡出，
也就是通过不断设置DOM元素的opacity属性来实现。

自定义动画 animate()

1）参数是DOM元素最终的CSS状态和时间，jQuery在时间段内不断调整CSS达到设定的值。
2）还可以再传入一个函数，当动画结束时，该函数将被调用

div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000, function () {
    console.log('动画已结束');
    // 恢复至初始状态:
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

串行动画
jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停

// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);
}

八、AJAX

jQuery在全局对象jQuery（也就是$）绑定了ajax()函数。
ajax(url, settings)函数需要接收一个URL和一个可选的settings对象。

常用选项：

async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
method：发送的Method，缺省为’GET’，可指定为’POST’、'PUT’等；
contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；
data：发送的数据，可以是字符串、数组或object。
如果是GET请求，data将被转换成query附加到URL上，
如果是POST请求，根据contentType把data序列化成合适的格式；
headers：发送的额外的HTTP头，必须是一个object；
dataType：接收的数据格式，可以指定为’html’、‘xml’、‘json’、'text’等，缺省情况下根据响应的Content-Type猜测。

jQuery的jqXHR对象类似一个Promise对象，我们可以用链式写法来处理各种回调

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}).done(function (data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});

var jqxhr = $.get('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});

第二个参数如果是object，jQuery自动把它变成query string然后加到URL后面
（这样我们就不用关心如何用URL编码并构造一个query string了）

post
传入的第二个参数默认被序列化为application/x-www-form-urlencoded
实际构造的数据作为POST的body被发送
getJSON
快速通过GET获取一个JSON对象

var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});

安全限制

jQuery的AJAX完全封装的是JavaScript的AJAX操作，所以它的安全限制和用JavaScript写AJAX完全一样。( CORS )

JSONP可以在 ajax() 中设置jsonp: 'callback'，让jQuery实现JSONP跨域加载数据

九、插件

步骤

编写jQuery Plugin，要设置默认值，并允许用户修改默认值，或者运行时传入其他值。

给jQuery对象绑定一个新方法是通过扩展$.fn对象实现的

$.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this;
}

函数内部的 this 在调用时被绑定为jQuery对象，
所以函数内部代码可以正常调用所有jQuery对象的方法。

return this;：因为jQuery对象支持链式操作，扩展方法也要能继续链式下去

使用jQuery提供的辅助方法 $.extend(target, obj1, obj2, ...)

把多个object对象的属性合并到第一个target对象中，遇到同名属性，总是使用靠后的对象的值（越往后优先级越高）

// 把默认值和用户传入的options合并到对象{}中并返回:
var opts = $.extend({}, {
    backgroundColor: '#00a8e6',
    color: '#ffffff'
}, options);

综上

$.fn.highlight = function (options) {
    // 合并默认值和用户设定值:
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}

// 设定默认值:
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}

//使用时，只需一次性设定默认值，就可以非常简单地调用
$.fn.highlight.defaults.color = '#fff';
$.fn.highlight.defaults.backgroundColor = '#000';
$('#test-highlight1').highlight();
$('#test-highlight2').highlight({
    color: '#dd1144'
});

原则：

给$.fn绑定函数，实现插件的代码逻辑；
插件函数最后要return this;以支持链式调用；
插件函数要有默认值，绑定在$.fn.<pluginName>.defaults上；
用户在调用时可传入设定值以便覆盖默认值。

针对特定元素的扩展

扩展只能针对某些类型的DOM元素：借助filter()

$.fn.external = function () {
    // return返回的each()返回结果，支持链式调用:
    return this.filter('a').each(function () {
        // 注意: each()内部的回调函数的this绑定为DOM本身!
        var a = $(this);
        var url = a.attr('href');
        if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
            a.attr('href', '#0')
             .removeAttr('target')
             .append(' <i class="uk-icon-external-link"></i>')
             .click(function () {
                if(confirm('你确定要前往' + url + '？')) {
                    window.open(url);
                }
            });
        }
    });
}

//用户调用
$('#main a').external();