06-老马jQuery教程-jQuery高级-阿里云开发者社区

开发者社区> aicoder> 正文

06-老马jQuery教程-jQuery高级

简介: 1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQuery.fn === jQuery.prototype,参考jQuery源码: .
+关注继续查看

1.jQuery原型对象解密

jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQuery.fn === jQuery.prototype,参考jQuery源码:

...
jQuery.fn = jQuery.prototype = {

// The current version of jQuery being used
jquery: version,

constructor: jQuery,

// The default length of a jQuery object is 0
length: 0,

toArray: function() {
  return slice.call( this );
},
...

1.1 each函数

jQuery的包装对象封装了each(callback)方法,以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

实例:

// 迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
// HTML 代码:
// <img/><img/>
$("img").each(function(i){
  this.src = "test" + i + ".jpg";
  // this 指向当前的变量的dom对象。 i是当前dom对象在选择器返回数组中的索引。
 });

1.2 获取元素的个数

两种方法可以获取选择器匹配的元素的个数。

第一种方法:$('p').size();
第二种方法:$('p').length

以上两种方法都可以。推荐使用length属性

1.3 其他属性和方法

属性/方法名 用法 介绍
selector $('p').selector 返回选择器的字符串
get() $('p').get(); 返回所有的选择的dom对象的集合
get(index) $('p').get(1); 返回第2个dom对象,索引从0开始
toArray() $('p').toArray(); 把jQuery集合中所有DOM元素恢复成一个数组。

�2.jQuery构造函数解密

2.1 构造函数的each方法

  • 语法:jQuery.each(object, [callback])

  • 概述

    通用例遍方法,可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

  • 参数

    • object:需要例遍的对象或数组。
    • callback:每个成员/元素执行的回调函数。
  • 示例

    // 例遍数组,同时使用元素索引和内容。
    $.each( [0,1,2], function(i, n){
      alert( "Item #" + i + ": " + n );
    });
    // 例遍对象,同时使用成员名称和变量内容。
    $.each( { name: "John", lang: "JS" }, function(i, n){
      alert( "Name: " + i + ", Value: " + n );
    });
    

2.2 构造函数的map方法

  • 语法 :jQuery.map(arr|obj,callback)

  • 返回值: Array新数组

  • 概述

    将一个数组中的元素转换到另一个数组中。作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。

  • 参数

    • array:待转换数组。
    • callback:为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可返回任何值。
  • 示例

    // 将原数组中每个元素加 4 转换为一个新数组。
    $.map( [0,1,2], function(n){
      return n + 4;
    });
    // 结果:
    // [4, 5, 6]
    
    // 原数组中大于 0 的元素加 1 ,否则删除。
    $.map( [0,1,2], function(n){
      return n > 0 ? n + 1 : null;
    });
    // 结果:
    // [2, 3]
    
    // 原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组。
    $.map( [0,1,2], function(n){
      return [ n, n + 1 ];
    });
    // 结果:
    // [0, 1, 1, 2, 2, 3]
    

2.3 数组的过滤方法grep

  • 语法 jQuery.grep(array, callback, [invert])

  • 概述

    使用过滤函数过滤数组元素。此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

  • 参数

    • array:待过滤数组。

    • callback:此函数将处理数组每个元素。第一个参数为当前元素,第二个参数而元素索引值。

    • invert:如果 "invert" 为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当"invert" 为 true,则返回过滤函数中返回 false 的元素集。

  • 返回值: 数组Array

  • 示例

    // 过滤数组中小于 0 的元素。
    $.grep( [0,1,2], function(n,i){
      return n > 0;
    });
    // 结果:
    // [1, 2]
    
    // 排除数组中大于 0 的元素,使用第三个参数进行排除。
    $.grep( [0,1,2], function(n,i){
      return n > 0;
    }, true);
    // 结果:
    // [0]
    

2.4 转换数组方法jQuery.makeArray

  • 语法:jQuery.makeArray(obj)

  • 概述

    将类数组对象转换为数组对象。类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。

  • 参数: obj:类型Object,类数组对象。

  • 示例

    // 过滤数组中小于 0 的元素。
    // <div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
    
    var arr = jQuery.makeArray(document.getElementsByTagName("div"));
    arr.reverse(); // 使用数组翻转函数
    // 结果:
    // Fourth
    // Third
    // Second
    // First
    

2.5 数组包含校验inArray

  • 语法:jQuery.inArray(value,array,[fromIndex])

  • 概述

    确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 )。

  • 参数

    • value:用于在数组中查找是否存在
    • array:待处理数组。
  • fromIndex:用来搜索数组队列,默认值为0。

  • 示例

    // 查看对应元素的位置
    var arr = [ 4, "Pete", 8, "John" ];
    jQuery.inArray("John", arr);  //3
    jQuery.inArray(4, arr);  //0
    jQuery.inArray("David", arr);  //-1
    jQuery.inArray("Pete", arr, 2);  //-1
    

2.6 合并数组方法merge

  • 语法:jQuery.merge(first,second)

  • 概述

    合并两个数组返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique()

  • 参数

    • first:第一个待处理数组,会改变其中的元素。
    • second:第二个待处理数组,不会改变其中的元素。
  • 示例

    // 合并两个数组到第一个数组上。
    $.merge( [0,1,2], [2,3,4] )
    // 结果:
    // [0,1,2,2,3,4]
    

2.7 数组去重unique

  • 语法:jQuery.unique(array)

  • 概述

    删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。

  • 示例

    // 删除重复 div 标签。
    $.unique(document.getElementsByTagName("div"));
    // 结果:
    // [<div>, <div>, ...]
    

2.8 jQuery构造函数的扩展对象方法(继承)

  • 语法:jQuery.extend([deep], target, object1, [objectN])

  • 概述

    用一个或多个其他对象来扩展一个对象,返回被扩展的对象。如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。 未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。

  • 参数

    • target:一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数将扩展jQuery的命名空间。
    • object1:待合并到第一个对象的对象。
    • objectN:待合并到第一个对象的对象。
    • deep:如果设为true,则递归合并。
  • 示例

    // 合并 settings 和 options,修改并返回 settings。
    var settings = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    jQuery.extend(settings, options);
    // 结果:
    // settings == { validate: true, limit: 5, name: "bar" }
    

2.9 其他构造函数上的方法和属性

属性名 实例 说明
noop var f = jQuery.noop; 一个空函数
isArray $.isArray([1,3,4]) 测试对象是否为数组。
isFunction jQuery.isFunction(obj) 测试对象是否为函数。
isNumeric jQuery.isNumeric(value) 确定它的参数是否是一个数字。
isWindow jQuery.isWindow(obj) 测试对象是否是窗口
error jQuery.error(message) 接受一个字符串,并且直接抛出一个包含这个字符串的异常
trim jQuery.trim(str) 去掉字符串起始和结尾的空格

3.链式编程和隐式迭代

3.1 链式编程

由于大部分jQuery的api方法内部返回值都是jQuery的包装对象自身。所以我们可以在jQuery的api调用之后继续调用jQuery的方法,这样就称作是链式编程。

例如代码:

$('#p1').css('color', 'red').height(200).hide('slow');
// 等价于
$('#p1').css('color', 'red');
$('#p1').height(200);
$('#p1').hide('slow');

由于css方法、height、hide方法都返回jQuery包装对象自身。所以就可以继续链式调用。

有些方法可以破坏链式的结构,比如:
nextAll(),prevAll(),sibilings(),find(),children(),parent(),parents()...

如果想回到最近一次破坏链式结构之前的代码可以使用end方法。

$('#p1').nextAll().hide().end().css('color', 'red');

3.2 隐式迭代

jQuery包装对象本身就是一个伪数组,匹配的元素有多个的时候,要做设置操作的时候,jQuery内部会隐式的变量所有的匹配元素调用设置操作,所以称为隐式迭代。

4.jQuery的插件封装

4.1 给jQuery包装对象扩展方法属性

  • 直接给$.fn添加方法和属性
(function(jQuery) {
  jQuery.fn.logText = function() {
    console.log(this.text());
  };
})(jQuery);

4.2 给构造函数扩展方法和属性

  • 通过$.extend()来扩展jQuery构造函数
$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //!JavaScript中月分是从0开始的
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(time + ' My App: ' + message);
    }
});

$.log('initializing...'); //调用
  • 直接给jQuery构造函数添加属性和方法
(function(jQuery) {
  jQuery.appName = 'laoma Extend';
})(jQuery);

5.jQuery常用插件

  • jQuery UI

  • jQuery EasyUI

  • jQuery formvalidate

  • jQuery 延迟加载插件

.....


对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码

 
微信:Flydragon_malun 或者18911865673

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10004 0
微信无法连接到服务器怎么诊断网络【微信高级教程3】
  有时我们出门在外难免会出现网络信号不好的时候,微信会提示“无法连接到服务器”,可能还会弹出一个“诊断网络”的按钮窗口。要是没弹出怎么弄呢?其实微信早就藏着这个彩蛋了,我们没挖掘到而已。   在微信任意聊天窗口输入 //traceroute 并发送,还可以调出“诊断网络”功能。
1543 0
微信快速发送位置定位怎么弄【微信高级教程4】
  耗电量大是大多数智能手机的痛,好玩的东西多了,电量也撑不了多久。手机快没电时如何快速发送微信位置给好友好让他容易找到你呢?微信就内藏这样的彩蛋。   在微信任意聊天窗口输入 //pickpoi 并发送,可以快速定位自己当前的位置!当然这也与微信中的“发送位置”的功能是基本一致的。
682 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13802 0
重拾C#教程:高级部分-索引器(Indexer)
重拾C#教程:高级部分-索引器(Indexer) 索引器(Indexer) 允许一个对象可以像数组一样被索引。当您为类定义一个索引器时,该类的行为就会像一个 虚拟数组(virtual array) 一样。
969 0
python 高级教程
类 !/usr/bin/python -- coding: UTF-8 -- class Employee: '所有员工的基类' empCount = 0 def init(self, name, salary): self.
1100 0
+关注
aicoder
资深全栈开发工程师,曾任职金和软件等知名公司。对Web前端全栈开发技术、PHP、Java、DotNet、HTML5、数据库集群等有深入研究。曾参与大型分布式高并发互联网项目设计开发等工作,对于分布式应用架构设计、系统优化等经验丰富
90
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载
《2021云上架构与运维峰会演讲合集》
立即下载