jQuery - Утилиты
Jquery предоставляет несколько служебных программ в формате $ (пространство имен). Эти методы полезны для выполнения задач программирования. Некоторые из служебных методов показаны ниже.
$ .trim ()
$ .trim () используется для удаления начальных и конечных пробелов
$.trim( " lots of extra whitespace " );$ .each ()
$ .each () используется для перебора массивов и объектов
$.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 () может быть вызван для выборки для перебора элементов, содержащихся в выборке. .each (), а не $ .each (), следует использовать для итерации по элементам в выделении.
$ .inArray ()
$ .inArray () используется для возврата индекса значения в массиве или -1, если значение отсутствует в массиве.
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( "found it!" );
}$ .extend ()
$ .extend () используется для изменения свойств первого объекта, используя свойства последующих объектов.
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 () используется для возврата функции, которая всегда будет выполняться в предоставленной области, то есть устанавливает значение this внутри переданной функции для второго аргумента
var myFunction = function() {
console.log( this );
};
var myObject = {
foo: "bar"
};
myFunction(); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction();$ .browser
$ .browser используется для предоставления информации о браузерах
jQuery.each( jQuery.browser, function( i, val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
});$ .contains ()
$ .contains () используется для возврата истины, если элемент DOM, предоставленный вторым аргументом, является потомком элемента DOM, предоставленного первым аргументом, независимо от того, является ли он прямым дочерним элементом или более глубоко вложенным.
$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );$ .data ()
$ .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>Результат будет следующим
The values stored were 25 and tutorials$ .fn.extend ()
$ .fn.extend () используется для расширения прототипа 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>Он обеспечивает вывод, как показано ниже -
$ .isWindow ()
$ .isWindow () используется для распознавания окна
<!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>Он обеспечивает вывод, как показано ниже -
$ .now ()
Он возвращает число, представляющее текущее время.
(new Date).getTime()$ .isXMLDoc ()
$ .isXMLDoc () проверяет, является ли файл xml или нет
jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )$ .globalEval ()
$ .globalEval () используется для глобального выполнения javascript
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();$ .dequeue ()
$ .dequeue () используется для выполнения следующей функции в очереди
<!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>Он обеспечивает вывод, как показано ниже -