Allgemeine jQuery-Toolmethoden

Die vorherigen Wörter

jQuery bietet einige Werkzeugmethoden, die nichts mit Elementen zu tun haben. Sie können diese Methoden direkt verwenden, ohne das Element auszuwählen. Wenn Sie das Vererbungsprinzip von nativem JavaScript verstehen, können Sie die Essenz von Tool-Methoden verstehen. Es handelt sich um eine im jQuery-Konstruktor definierte Methode, d. h. jQuery.method(), sodass sie direkt verwendet werden kann. Diese Methoden zum Betreiben von Elementen sind Methoden, die für das Prototypobjekt des Konstruktors definiert sind, d. h. jQuery.prototype.method(). Daher muss vor der Verwendung eine Instanz generiert werden (d. h. das Element wird ausgewählt). Stellen Sie sich Tool-Methoden einfach als Methoden vor, die direkt wie native JavaScript-Funktionen verwendet werden können. Im Folgenden werden die gängigen Werkzeugmethoden von jQuery ausführlich vorgestellt

Elementbezogen

[each()]

Es handelt sich um eine allgemeine Iterationsfunktion die zur nahtlosen Iteration über Objekte und Arrays verwendet werden kann. Arrays und arrayähnliche Objekte durchlaufen eine Längeneigenschaft (z. B. das Argumentobjekt einer Funktion) mit numerischen Indizes von 0 bis zur Länge - 1. Andere Objekte werden über ihre Eigenschaftsnamen iteriert

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

Die Funktion jQuery.each() unterscheidet sich von jQuery(selector).each(), die speziell zum Iterieren über a verwendet wird jQuery-Objekt. Die Funktion jQuery.each() kann zum Durchlaufen jeder Sammlung verwendet werden, unabhängig davon, ob es sich um ein „Name/Wert“-Objekt (JavaScript-Objekt) oder ein Array handelt. Bei der Iteration eines Arrays werden der Callback-Funktion jedes Mal ein Array-Index und der entsprechende Array-Wert als Argumente übergeben. (Der Wert kann auch durch Zugriff auf das Schlüsselwort this abgerufen werden, aber JavaScript behandelt diesen Wert immer als Objekt, auch wenn es sich um eine einfache Zeichenfolge oder einen numerischen Wert handelt.) Die Methode gibt ihr erstes Argument zurück, das das zu seinde Objekt ist iteriert über

$.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 );
});

[contains()]

Überprüfen Sie, ob ein DOM-Element ein Nachkomme eines anderen DOM-Elements ist

jQuery.contains( container, contained )

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

【extend()】

Füge den Inhalt von zwei oder mehr Objekten im ersten Objekt zusammen

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);

Datenbezogen

【data()】

　 Speichern Sie beliebige Daten im angegebenen Element und/oder geben Sie den eingestellten Wert zurück

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()】

Ein zuvor gespeichertes Datenfragment löschen

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"}

Typerkennung

【type()】

　 Die Methode type() wird verwendet, um den Typ des Javascript-Objekts zu erkennen

Wenn das Objekt vorhanden ist undefiniert oder null , dann das entsprechende „undefiniert“ oder „null“ zurückgeben

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

Wenn das Objekt eine interne [[Klasse]] und das integrierte Objekt eines Browsers hat [[ Class] ] Das Gleiche gibt den entsprechenden [[Class]]-Namen zurück

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"

Diese Methode ähnelt also der gekapselten Object.prototype.toString()-Methode in nativem Javascript

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

[isArray()]

In nativem JavaScript ist die Array-Erkennung ein klassisches Problem. Wenn eine Webseite mehrere Frames enthält, funktioniert die Array-Erkennung nicht. Es könnte nicht einfacher sein

jQuery bietet die Methode isArray() zum Erkennen von Arrays

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

【isFunction()】

Die isFunction ()-Methode wird verwendet, um zu erkennen, ob die eingehenden Parameter Funktionen sind

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

Wenn Sie natives Javascript verwenden, können Sie typeof verwenden, um

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

【 isNumeric()】

Die Methode isNumeric() wird verwendet, um zu erkennen, ob der eingehende Parameter eine Zahl ist

[Hinweis] Der Parameter kann eine reine Zahl oder eine sein numerische Zeichenfolge

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

Wenn Sie natives Javascript verwenden, können Sie typeof verwenden, aber das Ergebnis ist etwas anders

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

[ isEmptyObject()]

Die Methode isEmptyObject() wird verwendet, um zu erkennen, ob ein Objekt ein leeres Objekt ist

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

【isPlainObject()】

Native Objekte, d. h. Objekte, die durch „{}“ oder „neues Objekt“ erstellt wurden

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

Array-bezogen

【inArray( ) 】

Die Methode inArray(value, array [, fromIndex]) ähnelt der Methode indexOf() von nativem JavaScript. Sie gibt -1 zurück, wenn kein passendes Element gefunden wird. Wenn das erste Element des Arrays mit dem Parameter übereinstimmt, gibt $.inArray() 0 zurück

Der Parameter fromIndex ist der Array-Indexwert, der angibt, wo mit der Suche begonnen werden soll. Der Standardwert ist 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()]

Die Methode makeArray() wird verwendet, um ein Array-ähnliches Objekt in ein echtes Javascript-Array umzuwandeln

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

Wenn Sie natives Javascript verwenden, können Sie die Methode „slice()“ verwenden, um das Array-ähnliche Objekt in ein echtes Array umzuwandeln

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

 

Das obige ist der detaillierte Inhalt vonAllgemeine jQuery-Toolmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!