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 ()는 제공된 범위에서 항상 실행되는 함수를 반환하는 데 사용됩니다. 즉, 전달 된 함수 내에서이 의미를 두 번째 인수로 설정합니다.
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 요소의 후손 인 경우 직계 자식이든 더 깊이 중첩 된 경우 true를 반환하는 데 사용됩니다.
$.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>다음과 같이 출력을 제공합니다.