Méthodes des outils communs jQuery

Les mots précédents

jQuery fournit des méthodes d'outils qui n'ont rien à voir avec les éléments. Vous pouvez utiliser ces méthodes directement sans sélectionner l'élément. Si vous comprenez le principe d'héritage du JavaScript natif, vous pouvez comprendre l'essence des méthodes outils. Il s'agit d'une méthode définie sur le constructeur jQuery, c'est-à-dire jQuery.method(), elle peut donc être utilisée directement. Ces méthodes pour faire fonctionner les éléments sont des méthodes définies sur l'objet prototype du constructeur, c'est-à-dire jQuery.prototype.method(), donc une instance doit être générée (c'est-à-dire que l'élément est sélectionné) avant utilisation. Considérez simplement les méthodes outils comme des méthodes qui peuvent être utilisées directement comme les fonctions natives JavaScript. Ce qui suit présentera en détail les méthodes d'outils courantes de jQuery

Liées aux éléments

[each()]

Il s'agit d'une fonction d'itération générale qui peut être utilisé pour parcourir de manière transparente des objets et des tableaux. Les tableaux et les objets de type tableau parcourent une propriété de longueur (telle que l'objet argument d'une fonction) avec des indices numériques, de 0 à la longueur - 1. D'autres objets sont itérés via leurs noms de propriété

jQuery.each( collection, callback(indexInArray, valueOfElement) )

La fonction jQuery.each() est différente de jQuery(selector).each(), qui est spécifiquement utilisée pour itérer sur un Objet jQuery. La fonction jQuery.each() peut être utilisée pour parcourir n'importe quelle collection, qu'il s'agisse d'un objet « nom/valeur » (objet JavaScript) ou d'un tableau. Dans le cas de l'itération d'un tableau, la fonction de rappel reçoit à chaque fois un index de tableau et la valeur de tableau correspondante comme arguments. (La valeur peut également être obtenue en accédant au mot-clé this, mais JavaScript traitera toujours la valeur this comme un objet, même s'il s'agit d'une simple chaîne ou d'une valeur numérique.) La méthode renvoie son premier argument, qui est l'objet à traiter. itéré sur

$.each( ['a','b','c'], function(index,value){//Index #0: a//Index #1: b//Index #2: cconsole.log( "Index #" + index + ": " + value );
});

$.each( { name: "John", lang: "JS" }, function(index,value){//Index #name: John//Index #lang: JSconsole.log( "Index #" + index + ": " + value );
});

[contient()]

Vérifier qu'un élément DOM est le descendant d'un autre élément DOM

jQuery.contains( container, contained )

$.contains( document.documentElement, document.body ); // true

【extend()】

Fusionner le contenu de deux objets ou plus dans le premier objet

jQuery.extend( target [, object1 ] [, objectN ] )

target: Object 一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
object1: Object 一个对象，它包含额外的属性合并到第一个参数
objectN: Object 包含额外的属性合并到第一个参数

$.extend({}, object1, object2);

jQuery.extend( [deep ], target, object1 [, objectN ] )

deep: Boolean 如果是true，合并成为递归（又叫做深拷贝）。
target: Object 对象扩展。这将接收新的属性。
object1: Object 一个对象，它包含额外的属性合并到第一个参数.
objectN: Object 包含额外的属性合并到第一个参数

$.extend(true, object1, object2);

Données liées

【data()】

　 Stocke des données arbitraires dans l'élément spécifié et/ou renvoie la valeur définie

jQuery.data( element )

element:Element 要关联数据的DOM对象
key: String 存储的数据名
value:Object 新数据值

$.data(document.body, 'foo', 52);
$.data(document.body, 'bar', 'test');
console.log($.data( document.body, 'foo' ));//52console.log($.data( document.body ));//{foo: 52, bar: "test"}

【removeData()】

Supprimer un fragment de données précédemment stocké

jQuery.removeData( element [, name ] )

var div = $("div");
$.data(div, "test1", "VALUE-1");
$.data(div, "test2", "VALUE-2");
console.log($.data(div));//{test1: "VALUE-1", test2: "VALUE-2"}$.removeData(div, "test1");
console.log($.data(div));//{test2: "VALUE-2"}

Détection de type

【type()】

　 La méthode type() est utilisée pour détecter le type d'objet javascript

Si l'objet est undéfini ou null , puis renvoie le "undéfini" ou "null" correspondant

jQuery.type( undefined ) === "undefined"jQuery.type() === "undefined"jQuery.type( window.notDefined ) === "undefined"jQuery.type( null ) === "null"

Si l'objet a une [[Classe]] interne et un objet intégré au navigateur [[ Class] ] La même chose, renvoie le nom [[Class]] correspondant

jQuery.type( true ) === "boolean"jQuery.type( 3 ) === "number"jQuery.type( "test" ) === "string"jQuery.type( function(){} ) === "function"jQuery.type( [] ) === "array"jQuery.type( new Date() ) === "date"jQuery.type( new Error() ) === "error" jQuery.type( /test/ ) === "regexp"

Cette méthode est donc similaire à la méthode encapsulée Object.prototype.toString() en javascript natif

function type(obj){return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

[isArray()]

En JavaScript natif, la détection de tableau est un problème classique Lorsqu'une page Web contient plusieurs frames, la détection de tableau ne fonctionnera pas. Cela ne pourrait pas être plus simple

jQuery fournit la méthode isArray() pour détecter les tableaux

console.log($.isArray([]));//true

【isFunction()】

La isFunction () est utilisée Pour détecter si les paramètres entrants sont des fonctions

console.log($.isFunction(function(){}));//true

Si vous utilisez du javascript natif, vous pouvez utiliser typeof pour obtenir

console.log(typeof function(){});//"function"

【 isNumeric()】

La méthode isNumeric() est utilisée pour détecter si le paramètre entrant est un nombre

[Note] Le paramètre peut être un nombre pur ou un chaîne numérique

$.isNumeric("-10");  // true$.isNumeric(-10);  // true

Si vous utilisez du javascript natif, vous pouvez utiliser typeof, mais le résultat est légèrement différent

console.log(typeof 10);//"number"console.log(typeof '10');//"string"

[ isEmptyObject()]

La méthode isEmptyObject() est utilisée pour détecter si un objet est un objet vide

jQuery.isEmptyObject({}) // truejQuery.isEmptyObject({ foo: "bar" }) // false

【isPlainObject()】

Objets natifs, c'est-à-dire les objets créés via "{}" ou "nouvel objet"

console.log($.isPlainObject({}));//trueconsole.log($.isPlainObject(document.documentElement));//falseconsole.log($.isPlainObject(new Boolean(true)));//falseconsole.log($.isPlainObject(true));//false

Liés au tableau

【inArray( ) 】

La méthode inArray(value, array [, fromIndex]) est similaire à la méthode indexOf() de JavaScript natif. Elle renvoie -1 lorsqu'aucun élément correspondant n'est trouvé. Si le premier élément du tableau correspond au paramètre, alors $.inArray() renvoie 0

Le paramètre fromIndex est la valeur de l'index du tableau, indiquant par où commencer la recherche. La valeur par défaut est 0

var arr = [1,2,3,'1','2','3'];
console.log(arr.indexOf('2'));//4console.log(arr.indexOf(3));//2console.log(arr.indexOf(0));//-1var arr = [1,2,3,'1','2','3'];
console.log($.inArray('2',arr));//4console.log($.inArray(3,arr));//2console.log($.inArray(0,arr));//-1

[makeArray()]

La méthode makeArray() est utilisée pour convertir un objet de type tableau en un véritable tableau javascript

console.log($.isArray({ 0: 'a', 1: 'b', length: 2 }));//falseconsole.log($.isArray($.makeArray({ 0: 'a', 1: 'b', length: 2 })));//true

Si vous utilisez du javascript natif, vous pouvez utiliser la méthode slice() pour transformer l'objet de type tableau en un véritable tableau

var arr = Array.prototype.slice.call(arrayLike);

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })// ['a', 'b']Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

【unique()】

　　unique()方法用于数组去重

var $arr = [document.body,document.body];
console.log($.unique($arr));//[body]var $arr = [1,2,1];
console.log($.unique($arr));//[2,1]

　　使用原生javascript实现如下

Array.prototype.norepeat = function(){var result = [];for(var i = 0; i < this.length; i++){if(result.indexOf(this[i]) == -1){
            result.push(this[i]);
        }
    }return result;
}

var arr = [1,2,1];
console.log(arr.norepeat());//[1,2]var arr = [document.body,document.body];
console.log(arr.norepeat());//[body]

【grep()】

　　查找满足过滤函数的数组元素。原始数组不受影响

jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )
array: Array 用于查询元素的数组。function: Function() 该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素，第二个参数是该元素的索引值。该函数应返回一个布尔值。this将是全局的window对象。
invert: Boolean 如果“invert”为false，或没有提供，函数返回一个“callback”中返回true的所有元素组成的数组，。如果“invert”为true，函数返回一个“callback”中返回false的所有元素组成的数组。

　　$.grep()方法会删除数组必要的元素，以使所有剩余元素通过过滤函数的检查。该测试是一个函数传递一个数组元素和该数组内这个的索引值。只有当测试返回true，该数组元素将返回到结果数组中。

　　该过滤器的函数将被传递两个参数：当前正在被检查的数组中的元素，及该元素的索引值。该过滤器函数必须返回'true'以包含在结果数组项

var result = $.grep( [0,1,2], function(n,i){   return n > 0;
 });
console.log(result);//[1, 2]

var result = $.grep( [0,1,2], function(n,i){   return n > 0;
 },true);
console.log(result);//[0]

【merge()】

　　合并两个数组内容到第一个数组

jQuery.merge( first, second )

console.log($.merge( [0,1,2], [2,3,4] ));//[0, 1, 2, 2, 3, 4]

 

其他

【proxy()】

　　proxy()方法接受一个函数，然后返回一个新函数，并且这个新函数使用指定的this

　　proxy()方法类似于bind()，但并不相同。区别在于，bind()方法是改变原函数的this指向，而proxy()方法是新建一个函数，并使用参数中的this指向，原函数的this指向并无变化

var a = 0;function foo(){
    console.log(this.a);
}var obj = {
    a:2};
foo();//0$.proxy(foo,obj)();//2foo();//0

　　proxy()方法支持多种参数传递方式

function foo(a,b){
    console.log(a+b);   
}

$.proxy(foo,document)(1,2);//3$.proxy(foo,document,1,2)();//3$.proxy(foo,document,1)(2);//3

　　在绑定事件时一定要合理使用proxy()方法的参数传递方式，否则事件还没有发生，可能函数已经被调用了

$(document).click($.proxy(foo,window,1,2))

【trim()】

　　jQuery.trim()函数用于去除字符串两端的空白字符

　　这个函数很简单，没有多余的参数用法

console.log($.trim("    hello, how are you?    "));//'hello, how are you?'

 【noop()】

　　一个空函数

jQuery.noop() 此方法不接受任何参数

　　当你仅仅想要传递一个空函数的时候，就用他吧

　　这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行

【now()】

　　返回一个数字，表示当前时间

jQuery.now() 这个方法不接受任何参数

　　$.now()方法是表达式(new Date).getTime()返回数值的一个简写

【parseHTML()】

　　将字符串解析到一个DOM节点的数组中

jQuery.parseHTML( data [, context ] [, keepScripts ] )
data : String 用来解析的HTML字符串
context (默认: document): Element DOM元素的上下文，在这个上下文中将创建的HTML片段。
keepScripts (默认: false): Boolean 一个布尔值，表明是否在传递的HTML字符串中包含脚本。

　　jQuery.parseHTML 使用原生的DOM元素的创建函数将字符串转换为一组DOM元素，然后，可以插入到文档中。

　　默认情况下，如果没有指定或给定null or undefined，context是当前的document。如果HTML被用在另一个document中，比如一个iframe，该frame的文件可以使用

var result = $.parseHTML( "hello, my name is jQuery");
$('div').append(result);

【parseJSON()】

　　接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象

jQuery.parseJSON( json )

var obj = jQuery.parseJSON('{"name":"John"}');
console.log(obj.name === "John");//true

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!