jQuery - Utilitas
Jquery menyediakan utilitas server dalam format $ (spasi nama). Metode ini berguna untuk menyelesaikan tugas pemrograman. Beberapa metode utilitas seperti yang ditunjukkan di bawah ini.
$ .trim ()
$ .trim () digunakan untuk menghapus spasi kosong di depan dan di belakang
$.trim( " lots of extra whitespace " );$ .each ()
$ .each () digunakan untuk mengulang array dan objek
$.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 () bisa dipanggil pada pilihan untuk mengulang elemen yang ada dalam pilihan. .each (), bukan $ .each (), harus digunakan untuk iterasi elemen dalam pemilihan.
$ .inArray ()
$ .inArray () digunakan untuk Mengembalikan indeks nilai dalam larik, atau -1 jika nilainya tidak ada dalam larik.
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( "found it!" );
}$ .extend ()
$ .extend () digunakan untuk mengubah properti objek pertama menggunakan properti objek berikutnya.
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 () digunakan untuk Mengembalikan fungsi yang akan selalu berjalan dalam ruang lingkup yang disediakan - yaitu, menetapkan artinya di dalam fungsi yang diteruskan ke argumen kedua
var myFunction = function() {
console.log( this );
};
var myObject = {
foo: "bar"
};
myFunction(); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction();$ .browser
$ .browser digunakan untuk memberikan informasi tentang browser
jQuery.each( jQuery.browser, function( i, val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
});$ .contains ()
$ .contains () digunakan untuk mengembalikan nilai true jika elemen DOM yang disediakan oleh argumen kedua adalah turunan dari elemen DOM yang disediakan oleh argumen pertama, apakah itu turunan langsung atau bersarang lebih dalam.
$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );$ .data ()
$ .data () digunakan untuk memberikan informasi tentang data
<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>Outputnya adalah sebagai berikut
The values stored were 25 and tutorials$ .fn.extend ()
$ .fn.extend () digunakan untuk memperluas prototipe jQuery
<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>Ini memberikan output seperti yang ditunjukkan di bawah ini -
$ .isWindow ()
$ .isWindow () digunakan untuk mengenali jendela
<!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>Ini memberikan output seperti yang ditunjukkan di bawah ini -
$. sekarang ()
Ini mengembalikan angka yang mewakili waktu saat ini
(new Date).getTime()$ .isXMLDoc ()
$ .isXMLDoc () memeriksa apakah file adalah xml atau bukan
jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )$ .globalEval ()
$ .globalEval () digunakan untuk mengeksekusi javascript secara global
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();$ .dequeue ()
$ .dequeue () digunakan untuk menjalankan fungsi selanjutnya dalam antrian
<!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>Ini memberikan output seperti yang ditunjukkan di bawah ini -