jQuery - Tiện ích
Jquery cung cấp các tiện ích phục vụ ở dạng $ (không gian tên). Các phương pháp này rất hữu ích để hoàn thành các tác vụ lập trình. Một vài phương thức tiện ích như được hiển thị bên dưới.
$ .trim ()
$ .trim () được sử dụng để Loại bỏ khoảng trắng đầu và cuối
$.trim( " lots of extra whitespace " );$ .each ()
$ .each () được sử dụng để Lặp lại các mảng và đối tượng
$.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 () có thể được gọi trên một vùng chọn để lặp qua các phần tử có trong vùng chọn. .each (), không phải $ .each (), nên được sử dụng để lặp qua các phần tử trong một vùng chọn.
$ .inArray ()
$ .inArray () được sử dụng để Trả về chỉ số của một giá trị trong một mảng hoặc -1 nếu giá trị không có trong mảng.
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( "found it!" );
}$ .extend ()
$ .extend () được sử dụng để thay đổi các thuộc tính của đối tượng đầu tiên bằng cách sử dụng các thuộc tính của các đối tượng tiếp theo.
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 () được sử dụng để Trả về một hàm sẽ luôn chạy trong phạm vi được cung cấp - nghĩa là, đặt ý nghĩa của hàm này bên trong hàm đã truyền thành đối số thứ hai
var myFunction = function() {
console.log( this );
};
var myObject = {
foo: "bar"
};
myFunction(); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction();$ .browser
$ .browser được sử dụng để cung cấp thông tin về trình duyệt
jQuery.each( jQuery.browser, function( i, val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
});$ .contains ()
$ .contains () được sử dụng để trả về true nếu phần tử DOM được cung cấp bởi đối số thứ hai là con của phần tử DOM được cung cấp bởi đối số đầu tiên, cho dù nó là phần tử con trực tiếp hay được lồng sâu hơn.
$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );$ .data ()
$ .data () được sử dụng để cung cấp thông tin về dữ liệu
<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>Một đầu ra sẽ như sau
The values stored were 25 and tutorials$ .fn.extend ()
$ .fn.extend () được sử dụng để mở rộng nguyên mẫu 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>Nó cung cấp đầu ra như hình dưới đây -
$ .isWindow ()
$ .isWindow () được sử dụng để nhận dạng cửa sổ
<!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>Nó cung cấp đầu ra như hình dưới đây -
$ .now ()
Nó trả về một số đại diện cho thời gian hiện tại
(new Date).getTime()$ .isXMLDoc ()
$ .isXMLDoc () kiểm tra xem tệp có phải là xml hay không
jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )$ .globalEval ()
$ .globalEval () được sử dụng để thực thi javascript trên toàn cầu
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();$ .dequeue ()
$ .dequeue () được sử dụng để thực thi hàm tiếp theo trong hàng đợi
<!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>Nó cung cấp đầu ra như hình dưới đây -