jQuery - Dienstprogramme
Jquery bietet mehrere Dienstprogramme im Format $ (Namensraum). Diese Methoden sind hilfreich, um die Programmieraufgaben abzuschließen. Einige der Dienstprogrammmethoden sind wie folgt.
$ .trim ()
$ .trim () wird verwendet, um führende und nachfolgende Leerzeichen zu entfernen
$.trim( " lots of extra whitespace " );$ .each ()
$ .each () wird verwendet, um über Arrays und Objekte zu iterieren
$.each([ "foo", "bar", "baz" ], function( idx, val ) {
console.log( "element " + idx + " is " + val );
});
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
console.log( k + " : " + v );
});.each () kann für eine Auswahl aufgerufen werden, um die in der Auswahl enthaltenen Elemente zu durchlaufen. .each (), nicht $ .each (), sollte zum Durchlaufen von Elementen in einer Auswahl verwendet werden.
$ .inArray ()
$ .inArray () wird verwendet, um den Index eines Werts in einem Array zurückzugeben, oder -1, wenn sich der Wert nicht im Array befindet.
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( "found it!" );
}$ .extend ()
$ .extend () wird verwendet, um die Eigenschaften des ersten Objekts mithilfe der Eigenschaften nachfolgender Objekte zu ändern.
var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
var newObject = $.extend( firstObject, secondObject );
console.log( firstObject.foo );
console.log( newObject.foo );$ .proxy ()
$ .proxy () wird verwendet, um eine Funktion zurückzugeben, die immer im angegebenen Bereich ausgeführt wird, dh die Bedeutung dieser Funktion innerhalb der übergebenen Funktion auf das zweite Argument setzt
var myFunction = function() {
console.log( this );
};
var myObject = {
foo: "bar"
};
myFunction(); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction();$ .browser
$ .browser wird verwendet, um Informationen zu Browsern bereitzustellen
jQuery.each( jQuery.browser, function( i, val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
});$ .contains ()
$ .contains () wird verwendet, um true zurückzugeben, wenn das vom zweiten Argument bereitgestellte DOM-Element ein Nachkomme des vom ersten Argument bereitgestellten DOM-Elements ist, unabhängig davon, ob es sich um ein direktes untergeordnetes oder tiefer verschachteltes Element handelt.
$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );$ .data ()
$ .data () wird verwendet, um Informationen zu Daten anzugeben
<html lang = "en">
<head>
<title>jQuery.data demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<div>
The values stored were <span></span>
and <span></span>
</div>
<script>
var div = $( "div" )[ 0 ];
jQuery.data( div, "test", {
first: 25,
last: "tutorials"
});
$( "span:first" ).text( jQuery.data( div, "test" ).first );
$( "span:last" ).text( jQuery.data( div, "test" ).last );
</script>
</body>
</html>Eine Ausgabe wäre wie folgt
The values stored were 25 and tutorials$ .fn.extend ()
$ .fn.extend () wird verwendet, um den jQuery-Prototyp zu erweitern
<html lang = "en">
<head>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<label><input type = "checkbox" name = "android">
Android</label>
<label><input type = "checkbox" name = "ios"> IOS</label>
<script>
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// Use the newly created .check() method
$( "input[type = 'checkbox']" ).check();
</script>
</body>
</html>Es liefert die Ausgabe wie unten gezeigt -
$ .isWindow ()
$ .isWindow () wird verwendet, um das Fenster zu erkennen
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.isWindow demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
Is 'window' a window? <b></b>
<script>
$( "b" ).append( "" + $.isWindow( window ) );
</script>
</body>
</html>Es liefert die Ausgabe wie unten gezeigt -
$ .now ()
Es wird eine Zahl zurückgegeben, die die aktuelle Zeit darstellt
(new Date).getTime()$ .isXMLDoc ()
$ .isXMLDoc () prüft, ob eine Datei eine XML-Datei ist oder nicht
jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )$ .globalEval ()
$ .globalEval () wird verwendet, um das Javascript global auszuführen
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();$ .dequeue ()
Mit $ .dequeue () wird die nächste Funktion in der Warteschlange ausgeführt
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.dequeue demo</title>
<style>
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: green;
border-radius: 50px;
}
div.red {
background-color: blue;
}
</style>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Start</button>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" )
.animate({ left: '+ = 400px' }, 2000 )
.animate({ top: '0px' }, 600 )
.queue(function() {
$( this ).toggleClass( "red" );
$.dequeue( this );
})
.animate({ left:'10px', top:'30px' }, 700 );
});
</script>
</body>
</html>Es liefert die Ausgabe wie unten gezeigt -