• JavaScript复习笔记 （十二）jQuery

    一、引入

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

    • 1
    • 2
    • 3

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

    • $占用
      如果这个变量被占用了，还不能改，就只能使用jQuery这个变量
    $; // jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)

    • 1
    • 2
    • 3
    • 4

    原理是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对象

    • 1
    • 2
    • 3

    三、选择器

    1. 按ID查找： var div = $('#abc');
    2. 按tag查找：var ps = $('p'); // 返回所有<p>节点
    3. 按class查找：
      var a = $('.red'); // 所有节点包含class="red"都将返回
      var a = $('.red.green'); // 注意没有空格！
    4. 按属性查找：
      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"

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 组合查找
    2. 多项选择器

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

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

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

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

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

    • 1
    • 2
    1. 过滤器（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)'); // 选出序号为奇数的元素

    • 1
    • 2
    • 3
    • 4
    • 5

    1. 表单相关
      :input：选择<input>，<textarea>，<select>和<button>；
      :file：选择<input type="file">；
      :checkbox：选择复选框，和input[type=checkbox]一样；
      :radio：选择单选框，和input[type=radio]一样；
      :focus：选择当前输入焦点的元素
      :checked：选择当前勾上的单选框和复选框，获得用户选择的项目
      :enabled：选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；
      :disabled：和:enabled正好相反，选择那些不能输入的。

    2. 可见 / 隐藏
      $('div:visible'); // 所有可见的div
      $('div:hidden'); // 所有隐藏的div

    3. 查找
      子节点中查找：find()
      从当前节点开始向上查找：parent()
      同一层级：next()和prev()

    4. 过滤
      过滤掉不符合选择器条件的节点：filter()
      把DOM节点转化为其他对象：map()

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

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

    四、DOM操作

    1. 修改Text和HTML

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

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

    1. 修改CSS： css('name', 'value')
    div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性

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

    • 1
    • 2
    • 3
    1. 显示和隐藏DOM

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

    1. 获取DOM信息
    // 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    1. 操作节点属性

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

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

    • 1
    • 2
    • 3

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

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

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

    • 1
    • 2

    但用is()方法判断更好

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

    • 1
    1. 操作表单

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

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

    • 1
    • 2

    五、DOM修改

    1. 添加DOM
    1. html()
    2. append()
    ul.append('<li><span>Haskell</span></li>');

    • 1

    除了接受字符串，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>';
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

    1. prepend()
      append()把DOM添加到最后，prepend()则把DOM添加到最前。
    2. after() ：同级插入之后
    3. before()：同级插入之前
    2. 删除DOM

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

    六、事件

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 鼠标事件
      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...
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 反复绑定事件处理函数，它们会依次执行
    1. 事件参数
      所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息
    $(function () {
    $('#testMouseMoveDiv').mousemove(function (e) {
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 取消绑定

    off('click', function)

    • 不能移除匿名函数：匿名函数虽然长得一模一样，但是它们是两个不同的函数对象
    • 为了实现移除效果，可以使用off('click')移除已绑定的所有click事件函数
    • 无参数调用off()一次性移除已绑定的所有类型的事件处理函数
    1. 事件触发条件
      事件的触发总是由用户操作引发的
      手动触发change事件：直接调用无参数的change()方法来触发该事件
      input.change()相当于input.trigger('change')
    2. 浏览器安全限制
      有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数

    七、动画

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

    1. show / hide / toggle

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

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

    • 1
    • 2
    1. slideUp / slideDown / slideToggle

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

    1. fadeIn / fadeOut / fadeToggle

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

    1. 自定义动画 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');
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    1. 串行动画
      jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停
    // 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    八、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('请求完成: 无论成功或失败都会调用');
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    1. get
    var jqxhr = $.get('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});

    • 1
    • 2
    • 3
    • 4

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

    1. post
      传入的第二个参数默认被序列化为application/x-www-form-urlencoded
      实际构造的数据作为POST的body被发送
    2. getJSON
      快速通过GET获取一个JSON对象
    var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 安全限制

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

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

    九、插件

    步骤

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

    1. 给jQuery对象绑定一个新方法是通过扩展$.fn对象实现的
    $.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this;
}

    • 1
    • 2
    • 3
    • 4
    • 5

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

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

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 综上
    $.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'
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    原则：

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

    针对特定元素的扩展

    扩展只能针对某些类型的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();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
  • 相关阅读:
    精品基于Uniapp+Springboot实现的患者服药提醒APP
    搭建SSH服务器
    Java并发基石—CAS原理实战
    Java抽象类
    函数调用过程解析——函数栈帧的创建和销毁
    C&C++结构实训(国防科大)
    数据结构与算法拾遗八（认识复杂度）
    【博主推荐】html好看的爱心告白源码
    【数学建模】MATLAB应用实战系列（105）-Logistic回归——二分类（附MATLAB代码）
    “茶叶创新：爆改营销策略，三个月狂销2300万“
  • 原文地址：https://blog.csdn.net/m0_37925276/article/details/125524886