JavaScript学习-第4天

JQuery

导入方法

• 官网 jQuery (3.0)<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
• $是著名的jQuery符号，是全局变量jQuery的别名。

选择器

• $('查找类型选择器')，返回的对象是jQuery对象。如果查找不到，返回[]。,使用class选择器时，若要选择元素有多个类，直接.class1.class2，注意class1和2之间没有空格！。
• 按属性查找：
  • $('[属性=值]')，若值有特殊字符，比如空格，需要使用双引号引起来。
  • $('[属性^=值1]')或$('[属性$=值2]')，前一个使用^=表示属性以值1为开头的元素，后一个使用$=表示表示属性以值2结束的元素。
• 组合查找
  • 组合查找就是把上述简单选择器组合起来使用，例如：$('input[name=email]')或$('tr.red')。
• 多项选择器
  • 多项选择器就是把多个选择器用,组合起来一块选$(',')多个元素，中间使用逗号。
  • 选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。
• 层级选择器
  • 如果两个DOM元素具有层级关系，就可以用$('祖结点 子节点')来选择，层级之间用空格隔开。
• 子选择器
  • 节点之间一定是直属的父子关系，语法('$(父节点 > 子节点)')
• 过滤器
  • 一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。
  • 子节点后加:，例如$('ul.lang li:first-child'); // 仅选出第一个li
    • first-child，第一个子节点
    • last-child，最后一个子节点
    • nth-child(n)，选出第N个元素，N从1开始
    • nth-child(even)，选出序号为偶数的元素
    • nth-child(odd)，选出序号为奇数的元素
      
    • 可见或隐藏的元素
    • $('div:visible'); // 所有可见的div
    • $('div:hidden'); // 所有隐藏的div
• 查找和过滤
  • 当我们拿到一个jQuery对象后，可以以这个对象为基准，进行查找和过滤。
  • 查找
    1. 在某个节点的所有子节点中查找，使用find()方法，它本身又接收一个任意的选择器。
    2. 从当前节点开始向上查找，使用parent()方法。
    3. 位于同一层级的节点，可以通过next()和prev()方法。
  • 过滤
    1. filter()方法可以过滤掉不符合选择器条件的节点。
    2. 或者传入一个函数，要特别注意函数内部的this被绑定为DOM对象，不是jQuery对象。
    3. map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象。
    4. 一个 jQuery对象如果包含了不止一个 DOM节点， first()、 last()和 slice()方法可以返回一个新的 jQuery对象，把不需要的 DOM节点去掉。

操作DOM

• 修改Text和HTML。
  • jQuery对象的text()和html()方法，无参数调用为获取文本和HTML，有参数调用变为设置文本和HTML。
  • 修改CSS
    • css('name', 'value')，可以链式调用。
      • hasClass()，查看目标jq对象是否包含此class。
      • addClass()，添加class。
      • removeClass()，删除该class。
• 显示和隐藏DOM
  • a.hide(); // 隐藏
  • a.show(); // 显示
• 获取DOM信息
  • width()，获取指定元素宽度。
  • height()，获取指定元素高度。
  • attr()和removeAttr()方法用于操作DOM节点的属性。
    • attr('属性')，表示获取属性值
    • attr('属性', '值')，表示修改属性值。
  • prop()方法和attr()类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种。注：查看prop属性值时，最好使用is()，而不是prop()。
• 操作表单
  • jQuery对象统一提供val()方法获取和设置对应的value属性。

修改DOM结构

• 要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法。
  • append方法可以接受HTML、原始的DOM对象，jQuery对象和函数对象。
  • append()把DOM添加到最后，prepend()则把DOM添加到最前。
• 删除节点
  • remove()

事件

• on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。
• 另一种更简化的写法是直接调用需要绑定的方法()。
  • 鼠标事件
  • 键盘事件
  • 其他事件
    • 我们自己的初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化

    $(document).ready(function () {
       // 需要初始化后的代码
    });
    // 或者可以简化为
    $(function () {
        // init...
    });
    

  • 所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息
• 取消绑定
  • 一个已被绑定的事件可以解除绑定，通过off('click', function)实现
    • 可以使用off('click')一次性移除已绑定的click事件的所有处理函数
    • 无参数调用off()一次性移除已绑定的所有类型的事件处理函数
• 事件触发
  • 我们希望用代码触发一个事件，可以直接调用无参数的**该方法()**来触发该事件。
• 浏览器安全限制
  • 有些JavaScript代码只有在用户触发下才能执行，例如，window.open()

动画

• show / hide
  • 显示和隐藏DOM元素。但是，只要传递一个时间参数进去，就变成了动画，毫秒为单位，但也可以是'slow'，'fast'这些字符串。toggle()方法则根据当前状态决定是show()还是hide()。
  • show()和hide()是从左上角逐渐展开或收缩的，而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的
  • fadeIn()和fadeOut()的动画效果是淡入淡出
  • animate()，它可以实现任意动画效果，我们需要传入的参数就是DOM元素最终的CSS状态和时间，jQuery在时间段内不断调整CSS直到达到我们设定的值，animate()还可以再传入一个函数，当动画结束时，该函数将被调用。
  • delay()方法还可以实现暂停

AJAX

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

'$.ajax('url', {
    选项及类型
}).done(function (data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});

扩展

• 给jQuery对象绑定一个新方法是通过扩展$.fn.函数来实现的，例如：

// options 可以传入参数
$.fn.highlight1 = function (options) {
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    // 返回this为了可以让jQuery对象支持自己写的方法的链式操作。
    return this;
}

• jQuery提供的辅助方法$.extend(target, obj1, obj2, ...)，它把多个object对象的属性合并到第一个target对象中，遇到同名属性，总是使用靠后的对象的值，也就是越往后优先级越高：
• 用来实现对于不同参数的处理。例如：

$.fn.highlight = function (options) {
    // 合并默认值和用户设定值: (extend实现了 如果有用户值，用户值会替换默认值)
    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'
}

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

转载来源：廖雪峰老师的JavaScript教程，个人简单整理。