관련 문서
- http://api.jquery.com/category/manipulation/
- http://api.jquery.com/category/events/
- http://api.jquery.com/category/effects/
- http://api.jquery.com/category/utilities/
목차
Manipulation
DOM의 제어, 갱신 조작
.append()
.append( content [, content ] )
매치되어진 요소에 주어진 내용을 추가로 삽입한 후 객체 반환
|
<script>
// p 태그에 내용 추가 -> 결과 : 『중요과목 : 프레임워크』
$(“p”).append(“<b>프레임워크</b>”);
</script>
<p>중요과목: </p>
|
cs |
.appendTo()
.appendTo( target )
매치되어진 요소들의 내용들을 주어진 조건에 맞는 요소에 추가로 삽입한 후 객체 반환
|
<script>
// body 마지막 부분에 제이쿼리 추가
$(“<div><p>제이쿼리</p></div>”).appendTo(“body”);
// id가 a인 태그의 뒷 부분에 span 태그의 내용을 추가 -> 결과 : 『중요과목 : 프레임워크』
$(“span”).appendTo(“#a”);
</script>
<span>프레임워크</span>
<div id=”a”>중요과목 : </div>
|
cs |
.prepend()
.prepend( content [, content ] )
매치되어진 요소들에 맨앞에 주어진 내용을 삽입한후 객체를 반환
|
<script>
$(“p”).prepend(“<b>Hello </b>”);
</script>
<p><!–삽입위치–>there friend!</p>
|
cs |
.prependTo()
.prependTo( target )
매치되어진 요소의 내용을 주어진 것에 매치되는 요소의 맨앞에 추가 삽입한후 객체를 반환
|
<script>
$(“span”).prependTo(“#foo”);
</script>
<div id=”foo”> <!–삽입위치–>FOO!</div>
<span>I have something to say…</span> //span element는 기존 위치에서 사라짐
|
cs |
.after()
.after( content [, content ] )
매치되는 모든 요소의 뒤에 주어진 내용을 삽입
|
<script>
$(“p”).after(“<b>Hello</b>”);
</script>
<p>I would like to say: </p>
<!–삽입위치–>
|
cs |
.before()
.before( content [, content ] )
매치되는 모는 요소의 앞에 주어진 내용 삽입
|
<script>
$(“p”).before(“<b>Hello</b>”);
</script>
<!–삽입위치–>
<p> is what I said…</p>
|
cs |
.insertAfter()
.insertAfter( target )
매치되어진 요소들을 주어진 것에 매치되는 요소의 뒤에 삽입한다.
|
<script>
// <p>태그 객체가 #foo 뒤로 이동한다.
$(“p”).insertAfter(“#foo”);
</script>
<p> is what I said… </p><div id=”foo”>FOO!</div>
|
cs |
.insertBefore()
.insertBefore( target )
매치되어진 요소앞에 주어진 것에 매치된 요소를 삽입한다.
|
<script>
//<p>태그 객체가 #foo 앞으로 이동한다.
$(“p”).insertBefore(“#foo”);
</script>
<div id=”foo”>FOO!</div><p>I would like to say: </p>
|
cs |
.wrap()
.wrap( wrappingElement )
매치되어진 요소를 주어진 wrappingElement로 각각 감싼다. 선택된 요소가 n개일 때 감싸는 요소도 n개가 된다.
|
<script>
// p요소를 지정 div로 둘러싼다.
$(“p”).wrap(“<div class=’wrap’><b></b></div>”);
</script>
<p>Test Paragraph.</p>
|
cs |
.wrapAll()
.wrapAll( wrappingElement )
매치되는 요소들을 주어진 wrappingElement로 모두 감싼다. 선택된 요소가 다수여도 감싸는 요소는 하나다.
|
<script>
$(document).ready(function(){
$(“p”).wrapAll(document.createElement(“div”));
});
</script>
<style type=”text/css”>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
|
cs |
.wrapInner()
.wrapInner( wrappingElement )
매치되어진 요소 내부의 요소를 주어진 wrappingElement로 각각 감싼다.
|
$(“body”).wrapInner(“<div><div><p><em><b></b></em></p></div></div>”);
|
cs |
.unwrap()
감싸고 있는 요소(즉 부모)를 제거한다.
|
<script>
// <p>태그를 감싸고 있는 <div> 요소를 제거
$(‘p’).unwrap();
</script>
<div>
<p>Foo</p>
</div>
|
cs |
.replaceWith()
.replaceWith( newContent )
매치되어진 요소를 주어진 내용과 치환한다.
|
$(“button”).click(function () {
$(this).replaceWith(“<div>” + $(this).text() + “</div>”);
});
//버튼을 클릭하면 해당객체의 텍스트만 가져와 <div>객체로 치환한다.
|
cs |
.replaceAll()
.replaceAll( target )
매치되어진 것들을 주어진 것에 매치되는 것에 모두 바꾼다. replaceWith()와 비슷하지만 source/target의 위치가 반전되어 있다.
|
$(“<b>Paragraph. </b>”).replaceAll(“p”);
|
cs |
.empty()
선택된 요소의 자식에 해당되는 노드를 모두 제거한다.
|
//<p> element의 자식 element, 텍스트, html이 사라진다.
$(“button”).click(function() {
$(“p”).empty();
});
|
cs |
.remove()
.remove( [selector ] )
empty()가 선택된 요소의 자식 노드만 제거한다면 remove()는 선택된 요소도 같이 제거한다.
|
$(“button”).click(function () {
$(“p”).remove();
});
|
cs |
.detach()
.detach( [selector ] )
동적인 조작을 돕기 위해서 detach() 라는 새로운 메서드가 추가되었다. 특정한 요소를 제거한다는 것은 remove()와 기능적으로 동일하지만 해당 요소의 데이터(이벤트 등)를 제거하지 않는다는 주요한 차이가 있다. 쉽게 말해 document에서 잠시 때낸다고 보면 된다.
|
p = $( “p” ).detach();
|
cs |
재사용 될 만한 요소에만 사용하는 것이 중요하다. DOM에서 요소를 제거하거나 추가하는 일이 빈번하게 발생할 때 매우 유용하게 사용할 수 있다.
.clone( [withDataAndEvents ] )
- withDataAndEvents: 요소에 바인드된 이벤트와 data를 복사에 포함할지 여부
선택된 요소를 복제한 새로운 객체를 반환한다. withDataAndEvents가 true일 땐 이벤트 핸들러와 data(value가 아니라 data 프로퍼티)도 함께 복제한다.
Events
이벤트 관련 메서드. Ajax 이벤트는 작성하지 않았음.
.ready()
.ready( handler )
DOM 로드가 완료되면 handler를 실행한다.
|
window.onload = function(){ alert(“onload1”); }
window.onload = function(){ alert(“onload2”); } // 마지막것 한번만 실행
$(document).ready(function(){
alert(“ready1”);
})
$(function() { // $(document).ready와 같음
alert(“ready2”);
})
// 실행결과
// ready1
// ready2
// onload2
// 브라우저에 따라 항상 실행순서가 바뀔 수 있다.
|
cs |
.load()
.unload()
.load(), .unload()는 jQuery 1.8에서 deprecated 되었음
.bind()
.bind( eventType [, eventData ], handler )
- eventType: 핸들러를 할당할 이벤트 타입의 이름
- eventData: 핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능
- handler: 이벤트가 발생했을 때 실행할 함수
선택된 요소에 이벤트 핸들러를 설정한다.
|
// 프로퍼티 접근제어자(.)를 통해 메서트 호출을 연속으로 정의한다. (method chaining)
$(‘img’).bind(‘click’, function(event) {
alert(‘안녕1!’);
}).bind(‘click’, function(event) {
alert(‘안녕2!’);
}).bind(‘click’, function(event){
alert(‘안녕3!’);
});
// a 라는 id를 가지고 있는 요소를 마우스 클릭 시 body에 test_class라는 CSS class를 추가한다.
$(function(){
$(‘#a’).bind(‘click’, function(){
$(‘body’).addClass(‘test_class’);
});
});
|
cs |
|
// a 라는 id를 가지고 있는 요소를 마우스 오버시 ‘마우스오버’라는 경고 문구가 나타나고
마우스 클릭시 ‘클릭’이라는 경고 문구가 나타난다.
$(function() {
$(“#a”).bind({
click : function() {
alert(“클릭”);
},
mouseover : function() {
alert(“마우스오버”);
}
});
});
|
cs |
.unbind()
선택된 요소의 이벤트 핸들러를 제거한다.
|
// a 라는 id를 가지고 있는 요소를 마우스 클릭시 test의 기능인 body에 test_class라는
// CSS class를 추가하는 기능을 만든후 unbind 메서드를 이용하여 다시 그 기능을 제거하고 있다.
$(function(){
var test = function(){
$(‘body’).addClass(‘test_class’);
};
$(‘#a’).click(test);
$(‘#a’).unbind(‘click’, test);
});
|
cs |
.one()
.one( events [, data ], handler )
- eventType: 핸들러를 할당할 이벤트 타입의 이름
- eventData: 핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능
- handler: 이벤트가 발생하면 실행할 함수
선택된 요소에 이벤트 핸들러를 설정한다. 이 핸들러는 단 한 번만 실행되고 사라진다.
|
// a 라는 id를 가지고 있는 요소를 클릭 하면
//one CSS class를 추가하고 바로 click 이벤트가 해제된다.
$(function(){
$(‘#a’).one(‘click’, function(){
$(‘body’).addClass(‘one’);
});
});
|
cs |
.trigger()
.trigger( eventType [, extraParameters ] )
선택된 요소에 인수로 전달한 이벤트를 발생시킨다.
|
// a라는 id를 가진 요소의 click 이벤트를 발생시킨다.
$(function(){
$(‘#a’).trigger(‘click’);
});
// trigger() 메서드 기능을 간소화하여 사용하였다.
$(function(){
$(‘#a’).click();
});
$(function(){
$(“#div1”).click(function(){
alert(“엣헴”);
});
$(“#div2”).one(“click”, function(){
alert(“난 한번만 실행한다”);
});
$(“#div1”).trigger(“click”);
//#div1.click 이벤트를 페이지 로드시에 발생시킨다.
//위에서 정의한 이벤트함수를 강제로 실행하는 용도로 쓰인다.
|
cs |
.triggerHandler()
.triggerHandler( eventType [, extraParameters ] )
선택된 요소에 인수로 전달한 이벤트를 발생시킨다. 단 이때 핸들러로 전달한 함수만 실행하며 브라우저가 기본으로 갖는 작동은 수행하지 않는다.
.on()
http://noritersand.tistory.com/218
.off( events [, selector ] [, handler ] )
.off( events [, selector ] )
.off( event )
.off()
요소에 설정된 이벤트 핸들러를 제거한다.
|
$(“#btn”).click(function(){
$(document).off(“click”, “div”);
});
//div click 이벤트에 해당하는 함수를 제거해 더 이상 해당 함수가 실행되지 않는다.
|
cs |
.click()
.click( handler )
.click( [eventData ], handler )
.click()
핸들러를 이벤트에 연결하는 것은 흔한 작업이기 때문에, jQuery는 보다 더 간단하고 명료한 방식의 간소화된 이벤트 메서드를 제공하고 있다.
인수가 있냐 없냐에 따라 작동이 달라지는데 인수가 있으면 .bind(‘click’)과 같으며 인수가 없을땐 클릭 이벤트를 발생시킨다.
|
<script>
$(function(){
// a 라는 id를 가지고 있는 요소를 클릭시 body에 test_class라는 CSS class를 추가시킨다.
// 1…
$(‘#a’).click(function(){
$(‘body’).addClass(‘test_class’);
});
// 2…
$(‘table tr:gt(0) td’).click(
alert($(this).text());
);
$(‘table’).append(“<tr><td>테스트</td></tr>”); // click 이벤트 적용되지 않음
});
</script>
<table border=”1″>
<tr><td>제목</td></tr>
<tr><td>자바</td></tr>
<tr><td>프레임워크</td></tr>
</table>
|
cs |
|
// a 라는 id를 가지고 있는 요소의 click 이벤트를 실행시킨다.
$(function(){
$(‘#a’).click();
});
|
cs |
.hover()
.hover( handlerIn, handlerOut )
요소에 마우스 커서가 올라가거나 벗어났을때의 핸들러를 설정한다.
|
// a 라는 id 가지고 있는 요소에 마우스 커서가 들어가면 hover CSS class 를 추가하고 마우스가
// 떠나면 hover CSS class를 제거 한다.
$(function(){
$(‘#a’).hover(function(){
$(‘body’).addClass(‘hover’);
}, function(){
$(‘body’).removeClass(‘hover’);
});
});
|
cs |
.change(): 요소의 change 이벤트를 발생시키거나 핸들러를 설정한다. input과 textarea의 경우 포커스를 잃을 때 change 이벤트도 같이 발생한다.
.dblclick(): 요소의 더블클릭 이벤트를 발생시키거나 핸들러를 설정한다.
.error()
.error()는 1.8에서 deprecated 되었음
.focus(): 요소의 focus 이벤트를 발생시키거나 핸들러를 설정한다.
.blur(): 요소의 blur 이벤트를 발생시키거나 핸들러를 설정한다.
.focusin(): 요소의 focusin 이벤트를 발생시키거나 핸들러를 설정한다. focus()와 다른점은 이벤트 버블이 일어나지 않는다. (이것은 부모 요소가 선택된 요소보다 먼저 트리거되는 것을 의미한다.)
.focusout(): 요소의 focusout 이벤트를 발생시키거나 핸들러를 설정한다. focusin()과 같이 이벤트 버블이 일어나지 않는다.
.keydown(): 요소의 keydown 이벤트를 발생시키거나 핸들러를 설정한다.
.keypress(): 요소의 keypress 이벤트를 발생시키거나 핸들러를 설정한다.
.keyup(): 요소의 keyup 이벤트를 발생시키거나 핸들러를 설정한다.
.mousedown(): 요소의 mousedown 이벤트를 발생시키거나 핸들러를 설정한다.
.mousemove(): 요소의 mousemove 이벤트를 발생시키거나 핸들러를 설정한다.
.mouseout(): 요소의 mouseout 이벤트를 발생시키거나 핸들러를 설정한다.
.mouseover(): 요소의 mouseover 이벤트를 발생시키거나 핸들러를 설정한다.
.mouseup(): 요소의 mouseup 이벤트를 발생시키거나 핸들러를 설정한다.
.resize(): 요소의 resize 이벤트를 발생시키거나 핸들러를 설정한다.
.scroll(): 요소의 scroll이벤트를 발생시키거나 핸들러를 설정한다.
.select(): 요소의 select이벤트를 발생시키거나 핸들러를 설정한다. input과 textarea의 문자열을 선택하거나 선택 범위를 변경했을 때에 발생한다.
.submit(): 요소의 submit이벤트를 발생시키거나 핸들러를 설정한다.
Effects
이펙트 관련. 애니메이션을 다루는 메서드가 많다.
.show( [duration ] [, complete ] )
.show( options )
선택된 요소를 보이게 한다. CSS의 display 속성을 block으로 지정하는 것과 같다. 숨겨져 있다가 다시 나타날 때의 속도를 설정할 수 있다. 또 완전히 나타난 이후 실행될 콜백 함수를 할당 할 수 있다.
|
//a의 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 나타난다. speed를 사용시 정한 시간동안
//요소의 높이를 맨 위로부터 바닥까지, 너비는 왼쪽에서 오른쪽까지, 불투명도는 0에서 1까지 증가시킨다.
$(“button”).click(function () {
$(“p”).show(“slow”);
});
|
cs |
.hide()
.hide( [duration ] [, complete ] )
.hide( options )
선택된 요소를 보이지 않게 한다. CSS의 display 속성을 none으로 지정하는 것과 같다. .show()와 같이 사라지는 속도를 설정하거나 완전히 사라진 후 실행될 함수를 할당 할 수 있다.
|
// a라는 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 사라진다. speed를 사용시 요소의
//높이, 너비, 불투명도를 정한 시간동안 0까지 감소시키고 display:none 상태를 적용시킨다.
$(“button”).click(function () {
$(“p”).hide(“slow”);
});
|
cs |
.toggle()
.toggle( [duration ] [, complete ] )
.toggle( options )
.toggle( handler, handler [, handler ] )
선택된 요소의 가시성을 반전시킨다. 숨겨져 있을 땐 보이게 하고 반대로 보이는 상태일 땐 숨기는 것.
.toggle() 중 핸들러를 세 개까지 할당하던 방식은 1.8에 deprecated 되었고 1.9에서 완전히 제거되었다.
|
$(“button”).click(function () {
$(“p”).toggle(); //show(), hide() 함수가 토글 시 매번 교차호출
});
|
cs |
.delay( duration [, queueName ] )
콜백과 애니메이션 사이이의 혼란을 방지하고 “setTimeout” 함수를 호출하지 않고도 지연시키고 싶은 만큼 애니메이션을 지연시킬수 있다.
|
jQuery(‘#foo’)
.slideDown() // Slide down
.delay(200) // Do nothing for 200 ms
.fadeIn(); // Fade in
//”.delay()”의 첫 번째 인자로 밀리세컨즈 단위의 지연 시간값을 기입한다. 만약 다른 애니메이션
//대기열을 사용하려면 두번째 인자로 대기열 이름을 전달할 수 있다.(기본: “fx”)
|
cs |
.slideUp(): 요소를 높이가 제로가 될 때까지 서서히 보이지 않게 한다.
.slideDown(): 비표시 상태인 요소를 그 요소의 높이가 될 때까지 서서히 표시해 간다.
.slideToggle(): 이 함수가 호출될 때마다 각 요소에 slideDown/slideUp(을)를 교대로 실행한다.
.fadeIn(): 지정한 시간동안 투명도를 0에서 1로 증가시키고 style의 display를 none의 이전상태 (block 또는 liline)로 적용시킨다. 해당 요소가 서서히 나타나게 표현된다.
.fadeOut(): 지정한 시간동안 투명도를 1에서 0으로 감소시키고 style의 display:none 상태로 적용시킨다. 해당 요소가 서서히 사라지게 표현된다.
.fadeTo(): 지정한 시간동안 투명도를 opacity만큼 증가 또는 감소시킨다.(opacity 만큼 fade 시킨다.)
|
// a 라는 id를 가진 요소를 클릭하면 b라는 id를 가진 요소가 0.5초간 투명도를 0.33으로 변경되면서 페이딩(To) 효과를 나타낸다.
$(function(){
$(“#a”).click(function(){
$(“#b”).fadeTo(500, 0.33);
});
});
|
cs |
.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )
애니메이션을 작성해 실행한다.
|
$(“#left”).click(function(){
$(“.block”).animate({“left”: “-=50px”}, “slow”);
});
// test_id1이라는 id를 가진 요소를 클릭하면 a라는 요소의 width값을 90%, height값을
// 270px로 0.5초동안 변화 후 fontSize를 10px로 변경한다.
// test_id2라는 id를 가진 요소를 클릭하면 a라는 요소의 width값을 50%, height값을
// 500px로 3초동안 변경 과 동시에 queue:false 설정으로 대기 없이 바로 fontSize 24px로 변경한다.
$(function(){
$(“#test_id1”).click(function() {
$(“#a”).animate({
width : “90%”, height : “270px”
}, 500).animate({
fontSize : “10px”
});
});
$(“#test_id2”).click(function() {
$(“#a”).animate({
width: “50%”, height : “500px”
}, {
queue : false, duration : 3000
}).animate({
fontSize : “24px”
});
});
});
|
cs |
.stop()
.stop( [clearQueue ] [, jumpToEnd ] )
.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
실행중인 애니메이션을 정지시킨다.
|
// test_id라는 id를 가진 요소를 클릭하면 a라는 요소의 애니메이션을 정지
$(function(){
$(“#test_id”).click(function(){
$(“#a”).stop();
});
});
|
cs |
.queue( [queueName ] )
요소가 갖는 애니메이션 큐를 배열로 돌려준다. 해당 요소에 남아있는(실행 예정인) 애니메이션을 알 수 있다.
|
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>queue demo</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 60px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
p {
color: red;
}
</style>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
</head>
<body>
<p>The queue length is: <span></span></p>
<div></div>
<script>
var div = $( “div” );
function runIt() {
div
.show( “slow” )
.animate({ left: “+=200” }, 2000 )
.slideToggle( 1000 )
.slideToggle( “fast” )
.animate({ left: “-=200” }, 1500 )
.hide( “slow” )
.show( 1200 )
.slideUp( “normal”, runIt );
}
function showIt() {
var n = div.queue( “fx” );
$( “span” ).text( n.length );
setTimeout( showIt, 100 );
}
runIt();
showIt();
</script>
</body>
</html>
|
cs |
위 예시에서 ‘fx’는 큐의 이름으로 지정하지 않았을 때 기본값으로 설정되는 값이다. 없어도된다고
jQuery.queue()
jQuery.queue( element [, queueName ] )
element와 일치하는 요소가 갖는 애니메이션 큐를 배열로 돌려준다. 해당 요소에 남아있는(실행 예정인) 애니메이션을 알 수 있다. .queue()랑 다른 점은 문법정도…
|
jQuery.queue($(‘div’)[0], ‘fx’); // $(‘div’)[0]와 일치하는 요소를 찾아 queue를 리턴
|
cs |
.dequeue(): 대기 중인 애니메이션, 즉 큐에 대기중인 애니메이션 하나를 꺼내 실행한다.
.clearQueue(): 큐의 모든 애니메이션을 초기화한다. 큐의 이름을 지정하지 않으면 ‘fx’를 기본값으로 한다.
jQuery.fx.off: effects를 활성화/비활성화 한다. 전역으로 동작한다.
|
// test_id라는 id를 가진 요소를 클릭 시 a가 0.5초동안 서서히 사라지지 않고 바로 사라져 버린다.
$(function(){
jQuery.fx.off = false;
$(“#test_id”).click(function(){
$(“#a”).hide(500);
});
});
|
cs |
Utilities
잡다한 메서드 모음집. extend를 제외하곤 자주 사용되지 않는다.
jQuery.each()도 utilities에 포함되지만 여기에 작성하지 않음.
jQuery.support
jQuery.browser
jQuery.boxModel
support는 1.9에서 deprecated,
browse, boxmodel은 1.3에서 deprecated 되었고 현재 완전히 제거되었음
jQuery.trim( string ): 문자열 trim
jQuery.extend( target, object1 [, objectN ] ): 오브젝트를 확장
jQuery.grep( array, callback[, invert ] ): 배열로부터, 함수를 이용해 특정의 값을 제거
jQuery.makeArray( object ): 배열과 같이 이용하고 있는 오브젝트를, 실제로 배열로 변환
jQuery.map( array, callback ): 배열의 각 수치를 함수로 처리하고, 새로운 배열을 작성
jQuery.inArray( value, array ): 지정한 값이 배열중에 있으면, 그 인덱스를 리턴
jQuery.unique( array ): 배열의 중복된 값을 제거
jQuery.isArray( object ): object가 배열인지 판단
jQuery.isFunction( object ): object가 함수인지 판단
함수의 컨텍스트 조작하기
jQuery 1.4부터 새롭게 제공되는 jQuery.proxy는 jQuery의 네임스페이스를 관리할 수 있게한다. 이 함수는 “scope”와 메서드 이름을 받는 두개의 인자를 가지며 자바스크립트의 “this” 키워드를 통하여 다른 개체를 유지할 수 있게 한다.
예를 들어 “app” 는 “config” 와 “clickHandler” 메서드로 구성된 두개의 속성을 가지고 있다면,
|
var app = {
config: {
clickMessage: ‘Hi!’
},
clickHandler: function() {
alert(this.config.clickMessage);
}
};
|
cs |
“clickHandler” 메서드를 실행하면 “this” 키워드를 통하여 “app” 개체에 접근하고 “config” 개체를 호출하여 값을 취득할 수 있음을 확인할 수 있다.
|
app.clickHandler(); // “Hi!” is alerted
|
cs |
이 메서드를 이벤트 핸들러로 바인딩하면:
|
jQuery(‘a’).bind(‘click’, app.clickHandler);
|
cs |
이렇게 바인딩된 메서드는 정상적으로 작동하지 않는다. jQuery(정확히 말하면 event model)에 의해서 “this”가 재정의 되어 버리기 때문이다. 이러한 문제들을 해결하기 위해서 제공하는 함수가 바로 jQuery.proxy다:
|
jQuery(‘a’).bind(‘click’,
jQuery.proxy(app, ‘clickHandler’)
);
|
cs |
이제 앵커를 클릭하면 “Hi!”라는 문구가 나타난다.
jQuery.proxy가 리턴하는 것은 “wrapped”된 함수이다. 여기에는 이벤트가 되돌려준 개체와 “app”가 들고있는 두 속성을 “this”로 확장해서 돌려준 것이다. 이것은 이벤트를 바인딩 할 때 뿐만아니라 플러그인을 만들거나 콜백을 호출하는 데에도 유용하게 사용될 수 있다.
jQuery.contains()
jQuery.contains( container, contained )
jQuery 1.4에서는 jQuery 네임스페이스에 “contains” 함수를 제공한다. 이 함수는 낮은 수준의 함수로써 두개의 DOM 노드를 인자로 받아 수용여부를 구분한다. 첫 번째 요소가 두번째 요소를 포함하고 있는지에 대한 여부를 boolean 타입으로 리턴된다.
|
jQuery.contains(document.documentElement, document.body);
// Returns true – <body> is within <html>
|
cs |
[출처]http://noritersand.tistory.com/215