jQuery函数库提供了一个jQuery对象(简写为$),这个对象本身是一个构造函数,可以用来生成jQuery对象的实例。有了实例以后,就可以调用许多针对实例的方法,它们定义jQuery.prototype对象上面(简写为$.fn)。

除了实例对象的方法以外,jQuery对象本身还提供一些方法(即直接定义jQuery对象上面),不需要生成实例就能使用的静态方法。由于这些静态的方法类似“通用工具”的性质,所以我们把它们称为“工具方法”(utilities)。

工具方法多为静态的。

常用的工具方法

  1. $.trim方法
    $.trim方法用于移除字符串头部和尾部多余的空格。
  2. $.contains方法
    $.contains方法返回一个布尔值,表示某个DOM元素(第二个参数)是否为另一个DOM元素(第一个参数)的下级元素。
    $.trim('   Hello   ') // Hello
    
    $.contains(document.documentElement, document.body);
    // true $.contains(document.body, document.documentElement);
    // false

    参数只能是DOM元素,JQuery对象可以吗?

  3. $.each,$.map

    $.each方法用于遍历数组和对象,然后返回原始对象。它接受两个参数,分别是数据集合和回调函数。需要注意的,jQuery对象实例也有一个each方法($.fn.each),两者的作用差不多。
    $.map方法也是用来遍历数组和对象,但是会返回一个新对象。
    前者侧重原始数据输出,后者侧重原始数据处理返回?

    $.each([ 52, 97 ], function( index, value ) {
    console.log( index + ": " + value );
    });
    // 0: 52
    // 1: 97 var obj = {
    p1: "hello",
    p2: "world"
    };
    $.each( obj, function( key, value ) {
    console.log( key + ": " + value );
    });
    // p1: hello
    // p2: world var a = ["a", "b", "c", "d", "e"];
    a = $.map(a, function (n, i){
    return (n.toUpperCase() + i);
    });
    // ["A0", "B1", "C2", "D3", "E4"]
  4. $.inArray

    $.inArray方法返回一个值在数组中的位置(从0开始)。如果该值不在数组中,则返回-1。

  5. $.extend

    $.extend方法用于对象扩展,可以将多个对象合并进成一个对象。

    //$.inArray()
    var a = [1,2,3,4];
    $.inArray(4,a) // //$.extend()
    var o1 = {p1:'a',p2:'b'};
    var o2 = {p1:'c'}; $.extend(o1,o2);
    o1.p1 // "c" //$.extend()
    var o1 = {p1:'a',p2:'b'};
    var o2 = {p1:'c'}; var o = $.extend({},o1,o2);
    o
    // Object {p1: "c", p2: "b"}

    取待合并对象属性集合,重名属性后者覆盖前者。

    默认情况下,extend方法生成的对象是“浅拷贝”,也就是说,如果某个属性是对象或数组,那么只会生成指向这个对象或数组的指针,而不会复制值。如果想要“深拷贝”,可以在extend方法的第一个参数传入布尔值true。

    var o1 = {p1:['a','b']};
    
    var o2 = $.extend({},o1);
    var o3 = $.extend(true,{},o1); o1.p1[0]='c'; o2.p1 // ["c", "b"]
    o3.p1 // ["a", "b"]

    上面代码中,o2是浅拷贝,o3是深拷贝。结果,改变原始数组的属性,o2会跟着一起变,而o3不会。

  6. $.proxy

    $.proxy方法类似于ECMAScript 5的bind方法,可以绑定函数的上下文(也就是this对象)和参数,返回一个新函数。

    由上面代码2种写法可知,$.proxy()方法有2种使用方法

    第一种写法是为函数(function)指定上下文对象(context),第二种写法是指定上下文对象(context)和它的某个方法名(name)。

    //$(this)指向引发事件的DOM对象$('#myElement')
    $('#myElement').click(function() {
    $(this).addClass('aNewClass');
    }); //$(this)因使用setTimeout延迟函数而指向了window
    $('#myElement').click(function() {
    setTimeout(function() {
    $(this).addClass('aNewClass');
    }, 1000);
    }); //使用$.proxy()改变this指向
    $('#myElement').click(function() {
    setTimeout($.proxy(function() {
    $(this).addClass('aNewClass');
    }, this), 1000);
    });

    正常情况下,下面代码中的this对象指向发生click事件的DOM对象。
    如果我们想让回调函数延迟运行,使用setTimeout方法,代码就会出错,因为setTimeout使得回调函数在全局环境运行,this将指向全局对象。
    这时,就可以用proxy方法,将this对象绑定到指定的对象。
    setTimeOut()解决绑定了吗?需要测试。

  7. $.data,$.removeData

    $.data方法可以用来在DOM节点上储存数据。$.removeData方法用来移除DOM节点存储的数据。读取所有数据返回的是对象?

    // 存入数据
    $.data(document.body, "foo", 52 ); // 读取数据
    $.data(document.body, "foo"); // 读取所有数据
    $.data(document.body); // 移除数据
    $.removeData(document.body, "foo");
  8. $.parseHTML,$.parseJSON,$.parseXML  将字符串解析为特定对象

    $.parseHTML方法用于将字符串解析为DOM对象。

    $.parseJSON方法用于将JSON字符串解析为JavaScript对象,作用与原生的JSON.parse()类似。但是,jQuery没有提供类似JSON.stringify()的方法,即不提供将JavaScript对象转为JSON对象的方法。

    $.parseXML方法用于将字符串解析为XML对象。

    var html = $.parseHTML("hello, <b>my name is</b> jQuery.");
    var obj = $.parseJSON('{"name": "John"}'); var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>";
    var xmlDoc = $.parseXML(xml);
  9. $.makeArray

    $.makeArray方法将一个类似数组的对象,转化为真正的数组。

  10. $.merge

    $.merge方法用于将数组并。

    // $.makeArray()
    var a = $.makeArray(document.getElementsByTagName("div")); // $.merge()
    var a1 = [0,1,2];
    var a2 = [2,3,4];
    $.merge(a1, a2); a1
    // [0, 1, 2, 2, 3, 4]
  11. $.now

    $.now方法返回当前时间距离1970年1月1日00:00:00 UTC对应的毫秒数,等同于(new Date).getTime()。

    $.now()
    //

判断数据类型的方法

jQuery提供一系列工具方法,用来判断数据类型,以弥补JavaScript原生的typeof运算符的不足。以下方法对参数进行判断,返回一个布尔值。

  • jQuery.isArray():是否为数组。
  • jQuery.isEmptyObject():是否为空对象(不含可枚举的属性)。
  • jQuery.isFunction():是否为函数。
  • jQuery.isNumeric():是否为数值(整数或浮点数)。
  • jQuery.isPlainObject():是否为使用“{}”或“new Object”生成的对象,而不是浏览器原生提供的对象。
  • jQuery.isWindow():是否为window对象。
  • jQuery.isXMLDoc():判断一个DOM节点是否处于XML文档之中。
$.isEmptyObject({}) // true
$.isPlainObject(document.location) // false
$.isWindow(window) // true
$.isXMLDoc(document.body) // false

除了上面这些方法以外,还有一个$.type方法,可以返回一个变量的数据类型。它的实质是用Object.prototype.toString方法读取对象内部的[[Class]]属性

$.type(/test/) // "regexp"

参考

【1】阮一峰 http://javascript.ruanyifeng.com/jquery/utility.html

JQuery系列(3) - 工具方法的更多相关文章

  1. jquery-12 jquery中的工具方法有哪些

    jquery-12 jquery中的工具方法有哪些 一.总结 一句话总结:四个较常用方法.1.isArray();2.isFunction();3.isEmptyObejct();4.trim(); ...

  2. jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()

    本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type 在javascript中对变量类型的判断中,我们讲解了了jqu ...

  3. JQuery extend()与工具方法、实例方法

    使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul' ...

  4. jQuery笔记之工具方法extend插件扩展

    jQuery工具方法 $.extend()插件扩展(工具方法) $.fn.extend()插件扩展(实例方法) 浅度克隆.深度克隆 两个方法基本是一样的,唯一不同的就是调用方式不一样 -------- ...

  5. jQuery笔记之工具方法

    jQuery 工具方法 $.type()判断数据类型 $.isArray() $.isFunction() $.isWindow()... $.trim()消除空格 $.proxy()改变this指向 ...

  6. jQuery 第九章 工具方法之插件扩展 $.extend() 和 $.fn.extend()

    $.extend() $.fn.extend() -------------------------------------------------- $.extend() 插件扩展(工具方法) jq ...

  7. jQuery 第九章 工具方法

    $.type() $.isArray() $.isFunction() $.isWindow()... $.trim() $.proxy() $.noConflict() $.each() $.map ...

  8. jQuery 第十章 工具方法-高级方法 $.ajax() $.Callbacks() .....

     $.ajax() $.Callbacks() $.Deferred() .then() $.when() ---------------------------------------------- ...

  9. jQuery笔记之工具方法—Ajax 优化回调地狱

    在上一篇文我们说到了回调地狱不好的地方,今天我们看看怎么来优化它,让它可以运用到实际开发中. 什么是回调地狱?回调地狱就是一个函数里面嵌套了所有功能函数,然后缩略图形成一个三角形. 这样的代码可复用性 ...

  10. jQuery笔记之工具方法—高级方法Ajax

    $.ajxa() ——基本使用 前提:先了解js的执行机制 $.Callbacks()——回调 $.Deferred()——异步 $.when() 网络服务器链接由<渡一教育>提供 --- ...

随机推荐

  1. 90% 前端开发者都不知道的 JavaScript 实用小技巧

    面试神器之数组去重 const a = [...new Set([1, 2, 3, 3])] >> [1, 2, 3] 操作数组担心 falsy 值? const res = myArra ...

  2. html遮罩层实现

    html文件内容如下 <!--调出子窗口按钮--> <button class="add" onclick="addClick();"> ...

  3. 初识阿里开源的本地Java进程监控调试工具arthas(阿尔萨斯)

    转载自:https://www.cnblogs.com/linhui0705/p/9795417.html 上个月,阿里开源了一个名为Arthas的监控工具.恰逢近期自己在写多线程处理业务,由此想到了 ...

  4. Debian系Linux源码安装Redis5.0.6

    一,先在官网下载源码包:https://redis.io/download 二,解压源码包,并cd到解压后的目录: 三,执行make MALLOC=libc: 接着cd src[解压的目录里有这个子目 ...

  5. 了解下Scala隐式转换与柯理化

    之前有看过kafka源码,有很多implict声明的方法,当时看的一头雾水,今天趁着空闲,了解下scala 的隐式转换和柯理化相关语法知识. 隐式转换 需要类中的一个方法,但是这个类没有提供这样的一个 ...

  6. MongoDB的安装,mongod和mongo的区别

    一. mongoDB安装路径 安装路径(最新4.0.11):https://www.mongodb.com/download-center/community?jmp=nav 建议另外找路径下载,外网 ...

  7. HTML5+规范:Geolocation(管理设备位置信息) 定位

    Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在 ...

  8. java之抽象类介绍

    什么抽象方法和抽象类 抽象方法 在类里面定义的没有方法体且用关键字“abstract”来修饰的方法就是抽象方法,所谓的没有方法体指的是在方法声明的时候没有大括号以及其中的内容,而是直接在声明时在方法名 ...

  9. MVC学习笔记(二)—用EF创建数据库

    1.创建一个空项目 2.在项目中创建EFCore的类库 3.在NuGut控制台为EFCore项目中安装entity  3.1 命令为:Install-Package EntityFramework(在 ...

  10. Tensorflow替换静态图中的OP

    import tensorflow as tf import collections from tensorflow.core.framework import tensor_shape_pb2 # ...