Using jQuery Core

Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

yundream
2016-01-16
2016-01-16
70214

$ vs $()

jQuery 객체는 일반적으로 다음과 같이 다룬다.

$("h1").remove();

대부분의 jQuery 메서드들은 위에서 처럼 jQuery객체로 부터 호출이 되는데, 이 메서드들은 $.fn namespace에 정의돼 있다. 이를 jQuery 객체 메서드(jQuery object methods)라고 한다.

반면 selection을 이용하지 않고 실행되는 메서드들이 있는데, 이들은 jQuery namespace에 정의돼 있다. 이들은 핵심 jQuery 메서드(core jQuery methods)라고 한다.

이 차이는 jQuery 입문자에게 혼란을 초래하기도 한다. 아래의 사항을 숙지하자.

jQuery selection을 이용해서 호출되는 메서드는 $.fn 네임스페이스에 정의돼 있다. 이들은 자동으로 selection을 this로 받고, selection의 this를 반환한다.
$ namespace 메서드들은 일반적으로 utility-type의 메서드들로 selection을 사용하지 않는다. 자동으로 넘기는 매개변수가 없으며, 다양한 타입의 값을 반환한다.

$.each()와 $.fn.each() 처럼 객체 메서드와 핵심 메서드의 이름이 같은 경우가 있는데, 이 경우 문서를 확인해서 주의깊게 사용하는 수 밖에 없다.

이 문서에서는 메서드 이름이 같은 경우, jQuery selection에서 호출하는 메서드라면 .each()로 표기할 것이다. 만약 유틸리티 메서드라면 - selection으로 호출하는 메서드가 아니라면 - $.each()로 표기한다.

$(document).ready()

문서가 완전히 준비되기 전까지는 페이지를 조작할 수 없다. "ready."를 이용해서 문서가 완전히 준비됐는지를 감지할 수 있다. $(document).ready()는 브라우저가 DOM 트리를 생성하고 난 후 코드를 실행한다. $(window).load(function() {...})는 DOM 분만 아니라 페이지에 있는 모든 객체(이미지나 iframe)들에 대한 준비가 끝난 후에 코드를 실행한다.

$(document).ready( function() {
  console.log("ready!");
});

경험있는 개발자들은 $(document).ready()를 사용하는 대신, 아래처럼 짧은 코드를 사용한다. 동일한 일을 하면서 코드량을 줄일 수 있다.

$(function() {
  console.log("ready!");
});

anonymous 함수대신에 named 함수를 넘길 수도 있다.

function readyFn(jQuery) {
   // 여기에 코드 추가
}

$(document).ready(readyFn);
$(window).load(readyFn);

아래 예제코드를 보자. $(document).ready(), $(window).load()를 모두 사용하고 있다.

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        console.log( "document loaded" );
    });
 
    $( window ).load(function() {
        console.log( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://techcrunch.com"></iframe>
</body>
</html>

$( document ).ready()는 DOM을 읽은 뒤에, $( window ).load()은 iframe까지 모두 로딩한뒤에 실행되는 걸 확인할 수 있을 것이다.

Attribute

앨리먼트의 속성(attribute)은 애플리케이션에서 이용할 수 있는 여러 정보들을 가지고 있다. 따라서 속성 정보를 얻어오는 것이 중요하다. zxv

.attr() 메서드

.attr() 메서드는 gatter과 setter 모두에 사용할 수 있다. key/value 형태라면 setter로, key만 사용하는 형태라면 getter로 작동한다.

setter로 작동

$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
 
$( "a" ).attr({
    title: "all titles are the same too!",
    href: "somethingNew.html"
});

getter로 작동

$("a").attr("href");

<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
   $("a").attr({
       title: "joinc.co.kr",
       href: "http://www.joinc.co.kr"
   });
 });
</script>

href가 http://www.joinc.co.kr로 변경된걸 확인할 수 있을 것이다.

Selecting Elements

jQuery에서 가장 중요한 컨셉은 "엘리먼트를 선택하고 선택한 앨리먼트를 조작하는" 것이다. jQuery는 CSS3의 거의 모든 selector를(몇 개의 비표준 selector들을 포함) 지원한다. select에 대한 레퍼런스 문서는 Selectors documentation on api.jquery.com 문서를 참고하자.

ID로 엘리먼트를 selecting 하기

$("#myId")

ID는 반드시 페이지에서 유일해야 한다.

<p>My name is Donald <b><span id="Lastname">Duck</span><b></p>
<script src="jquery.js"></script>
<script>
  $("#Lastname").click(function() {
    $(this).hide();
  })
</script>

클래스 이름으로 앨리먼트를 selecting 하기

$(".myClass")

예제

<p>My name is Donald <b><span class="Lastname">Duck</span><b></p>
<script src="jquery.js"></script>
<script>
  $(".Lastname").click(function() {
    $(this).hide();
  })
</script>

어트리뷰트로 앨리먼트를 selecting 하기

$("input[name='first_name']");

예제

<input type=text size=20 name='first_name'>
<script src="jquery.js"></script>
<script>
  $("input[name='first_name']").click(function() {
    $(this).val('joinc')
  })
</script>

CSS Selector로 앨리먼트 selecting 하기

$( "#contents ul.people li" );

Pseudo-Selectors

$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

"tr:odd" 예제 : "클릭"을 누르면 모든 짝수 필드에 css가 적용된다.

<span class="oddtest">클릭</span>
<table cellspacing="0" border="1" border:1px gray solid;">
<tr><td>Name</td><td>Address</td></tr>
<tr><td>Yundream</td><td>Seoul</td></tr>
<tr><td>Joinc</td><td>N.Y</td></tr>
<tr><td>Dream</td><td>California</td></tr>
<tr><td>Nilson</td><td>Unknown</td></tr>
</table>

<script>
$(".oddtest").click(function() {
  $("tr:odd").css("background-color", "#0000FF");
})
</script>

Chooshing selectors

앨리먼트가 있는지 확인하기

종종 앨리먼트가 있는지 확인하기 위해서 아래와 같은 코드를 만들고는 한다.

// 제대로 작동하지 않는다.
if ($("div.foo")) {
}

이 코드는 제대로 작동하지 않는다. $()를 이용해서 selection을 하면, 객체를 반환하는데, 객체는 항상 true로 평가되기 때문이다. 결과적으로 "div.foo"가 존재하지 않는다고 하더라도 if 문은 항상 실행이 된다.

앨리먼트가 있는지 확인하기 위한 가장 좋은 방법은 .length 프로퍼티를 이용해서, 선택할 수 있는 앨리먼트의 갯수를 검사하는 거다. 선택할 수 있는 앨리먼트가 하나도 없다면 .length는 0을 반환하고, false로 평가된다.

if ($("div.foo").length) {

}

Selection의 저장

jQuery는 cache 앨리먼트를 제공하지 안는다. 만약 반복적인 사용이 예상되는 selection이 있다면, 변수에 저장해서 사용하면 된다.

var $divs = $("div");

변수명앞에 달러표시가 보인다. 다른 언어들은 달러는 특수한 의미를 가지는 경우가 많은데, 자바스크립트는 다른 문자들과 차이가 없다. 그냥 일반 변수다. 달러를 사용한 이유는 이 변수가 jQuery 객체를 가지고 있다는 것을 알려주기 위함이다.

Refining & Filtering selection

때때로 selection을 수행한 후에 필터링 작업을 해야 하는 경우가 있다. jQuery는 selection을 필터링, 정제하기 위한 여러가지 메서드들을 제공한다.

// Refining selections.
$( "div.foo" ).has( "p" );         // div.foo elements that contain <p> tags
$( "h1" ).not( ".bar" );           // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first();              // just the first unordered list item
$( "ul li" ).eq( 5 );              // the sixth

예제 : "클릭"을 누르면 첫번째 li에 css가 적용된다.

<span class="firsttest">클릭</span>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

<script>
$(".firsttest").click(function() {
  $( "ul li" ).first().css("background-color", "#FF00FF");
})
</script>

form selection

jQuery는 form 엘리먼트를 위한 몇 개의 pseudo-selectors를 제공한다. 표준 css 셀렉터와 함께 사용하면, 여러 개의 form 중에서 원하는 form을 쉽게 선택할 수 있다.

:button	type="button"
:checkbox	type="checkbox"
:checked	체크된 checkbox와 radio button
:disable	disable된 input 앨리먼트
:enabled	enabled된 input 앨리먼트
:file	type="file"
:image	type="image"
:password	type="password"
:radio	type="radio"
:reset	type="reset"
:submit	type="submit"
:text	type="text"

type="button"인 form을 선택.

<style>
.marked {
  background-color: yellow;
  border: 3px red solid;
}
</style>

<input type="button" value="button1"><br>
<input type="button" value="button2"><br>

<script>
  // 첫 번째 button에 css를 적용했다. 
  $(":button").first().addClass("marked")
</script>

checked된 checkbox의 갯수 확인

<span class="buttest">클릭</span>
<br>
<input type="checkbox" value="1"> 1<br>
<input type="checkbox" value="2"> 2<br>
<input type="checkbox" value="3"> 3<br>
<script>
$(".buttest").click(function() {
  var n = $(":checked").length;
  alert(n);
})
</script>

Working with Selections

getters과 setters

jQuery는 메서드 오버로드(overloads)를 지원한다. 그래서 같은 이름의 메서드로 get value와 set value를 함께 할 수 있다. 메서드가 set value(값을 설정)에 사용되면 setter이라고 부르고, get value(값을 읽기)로 사용되면 getter라고 부른다. Setter은 선택된 모든 앨리먼트에 적용된다. Getter는 선택된 앨리먼트들 중 첫번째 앨리먼트의 값을 가져온다.

// .html() 메서드를 setter로 사용했다.
$("h1").html("hello world");

// .html() 메서드를 getter로 사용했다.
$("h1").html()

Setter는 jQuery 객체를 반환한다. 개발자는 이 객체를 이용해서 selection 메서드를 계속 호출할 수 있다. Getter의 경우에는 객체가 아닌 값을 반환하기 때문에, selection 메서드를 호출하기 위한 용도로 사용할 수 없다.

// setter의 경우 아래와 같이 사용할 수 있다.
var n = $("h1").html("hello world");
n.html()

// getter는 안된다.
$( "h1" ).html().addClass( "test" );

chaining

만약 메서드가 jQuery 객체를 반환한다면, 아래와 같이 메서드를 연속해서 호출할 수 있다. 이러한 호출방법을 "chaining"라고 한다.

$( "#content" ).find( "h3" ).eq( 2 ).html( "new text for the third h3!" );

가독성을 높이기 위해서 여러 줄로 코딩하기도 한다.

$( "#content" )
    .find( "h3" )
    .eq( 2 )
    .html( "new text for the third h3!" );

Manipulating Elements

jQuery의 manipulation 메서드 사용에 대한 완전한 내용은 api.jquery.com의 manipulation 부분을 참고하기 바란다.

앨리먼트를 수정하는 주된 목적의 하나는 inner HTML을 수정하거나 앨리먼트의 어트리뷰트를 수정하기 위함이다. jQuery는 브라우저에 상관없이 사용할 수 있는 여러가지 조작방법들을 제공한다. 많은 메서드들이 getter와 setter의 역할을 동시에 하기 때문에 기억해서 사용하기도 쉽다. 여기에서는 앨리먼트를 조작하는 몇 가지 방법들에 대해서 살펴볼 것이다.

.html() : HTML 문서의 내용을 가져오거나 설정한다.
.text() : 텍스트정보를 가져오거나 설정한다. HTML 문서일 경우 태그를 벗겨준다.
.attr() : 어트리뷰터의 값을 가져오거나 설정한다.
.width() :
.height() :
.position :
.val() : form 앨리먼트의 값을 가져오거나 설정한다.

앨리먼트를 조작하는 것은 간단하지만, selection의 모든 앨리먼트가 변경된다는 것에 주의해야 한다. 만약 하나의 앨리먼트만 조작하기를 원한다면 setter 메서드를 호출하기 전에 어떤(혹은 몇번째)앨리먼트를 조작할지를 정해야 한다.

<div id="myDiv">
<p>1</p>
<p>2</p>
</div>
<script>
$( "#myDiv p:first" ).html( "New <strong>first</strong> paragraph!" );
</script>

앨리먼트의 이동, 복사, 삭제

앨리먼트를 DOM상에서 이동하기 위한 여러 방법 중, 아래의 방법들을 주로 이용한다.

다른 앨리먼트를 기준으로 선택한 앨리먼트를 배치한다.

예를들어 jQuery는 .insertAfter()과 .after() 등의 메서드를 제공한다. .insertAfter() 메서드는 매개변수의 앨리먼트 다음에 앨리먼트를 배치한다. .after()앨리먼트는 셀렉트된 앨리먼트 뒤에 매개변수의 앨리먼트를 추가한다. 비슷한 유형으로 .insertBefore(), .appendTo(), .prependTo() 메서드들이 있다.

<div id="myList">
<li>bus</li>
<li>train</li>
<li>taxi</li>
</div>
<script>
// myList의 마지막에 airplane를 추가.
$("<li>airplane</li>").appendTo("#myList")

// myList의 마지막에 ship을 추가 
$("#myList").append("<li>ship</li>")

// myList의 첫번째 앨리먼트를 myList의 마지막으로 이동 
$("#myList li:first").appendTo("#myList")

</script>

cloning 앨리먼트

.appendTo()메서드를 이용해서 앨리먼트를 이동할 수 있다. 만약 앨리먼트를 복사하길 원한다면 .clone()메서드를 이용하면 된다.

// myList의 첫번째 li 앨리먼트를 마지막에 복사한다.
$("#myList li:first").clone().appendTo("#myList")

앨리먼트 삭제

앨리먼트 삭제를 위해서 .remove()와 .detach() 메서드를 사용할 수 있다.

.remove()를 호출하면 페이지에 있는 selection을 완전히 제거할 수 있다. .remove()는 제거된 앨리먼트를 반환하는데, 앨리먼트와 관련된 데이터와 이벤트를 전달 받을 수 없다.

.detach()는 이벤트와 데이터를 계속유지하고 싶을 때 사용한다. .remove()와 마찬가지로 앨리먼트를 반환하는데, 이벤트와 데이터도 함께 반환한다. 이들 데이터와 이벤트는 나중에 사용할 수 있다.

.empty()는 선택한 앨리먼트의 하위 앨리먼트를 지우기 위해서 사용한다. 아래코드를 테스트해보자. .empty()와 .remove()의 차이점을 확인할 수 있을 것이다.

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
Example
<p>div first</p>
<p>div second</p>
</div>
<br>
<button id='button1'>Remove div</button>
<button id='button2'>Empty div</button>

<script>

$("#button1").click(function(){
$("#div1").remove();
});

$("#button2").click(function(){
$("#div1").empty();
});

</script>

새로운 앨리먼트 만들기

$()메서드를 이용해서 간단하게 새로운 앨리먼트를 만들 수 있다.

HTML 문자열을 이용해서 새로운 앨리먼트를 만들기.

$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );

어트리뷰트 객체를 이용해서 새로운 앨리먼트를 만들기.

$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

위 코드를 보면 class는 쌍따움표가 있는데, html과 href는 쌍따움표가 없는 걸 확인할 수 있다. 일반적으로 프로퍼티(property)이름은 예약어로 쌍따움표가 필요 없다.

새로운 앨리먼트를 만들었다고 해서, 바로 페이지에 적용되는건 아니다. .appendTo(), .insertAfter() 등의 메서드를 이용해서 새로만든 앨리먼트를 배치해야 한다.

var $myNewElement = $( "<p>New element</p>" );
$myNewElement.appendTo( "#content" );
$myNewElement.insertAfter( "ul:last" ); // This will remove the p from #content!
$( "ul" ).last().after( $myNewElement.clone() );

코드에서는 새로 만든 앨리먼트를 변수에 저장했는데, 굳이 변수를 이용할 필요 없이 $()메서드를 이용해서 바로 앨리먼트를 추가할 수 있다. 앨리먼트를 여러 영역에 배치할 경우가 아니라면 직접 추가하도록 하자.

<script>
// Getting a new element on to the page.
$( "ul" ).append("<li>Hello world</li>")
</script>

이 문법을 이용하면 새로운 앨리먼트를 쉽게 추가할 수 있지만, DOM에 반복해서 추가할 경우 성능상에 상당한 비용이 추가된다. 만약에 동일한 컨테이너에 많은 앨리먼트를 추가해야 한다면, 배열에 앨리먼트를 추가하고 나중에 한번만 append를 호출하는게 훨씬 효율적이다.

<div id="myList">
</div>
<script>
var myItems = [];
var $myList = $( "#myList" );
 
for ( var i = 0; i < 100; i++ ) {
    myItems.push( "<li>item " + i + "</li>" );
}
 
$myList.append( myItems.join( "" ) );
</script>

어트리뷰트 조작하기

jQuery는 다양한 어트리뷰트 조작 기능들을 가지고 있다. 간단한 조작에서 부터 .attr() 메서드를 이용한 복잡한 조작도 가능하다.

하나의 어트리뷰트 조작

$("#myDiv a:first").attr("href", "http://www.joinc.co.kr")

여러개의 어트리뷰트 조작

$( "#myDiv a:first" ).attr({
    href: "http://www.joinc.co.kr",
    rel: "super-special"
});

Anonymous 함수를 이용해서 원래의 어트리뷰트를 수정

$( "#myDiv a:first" ).attr({
    rel: "super-special",
    href: function( idx, href ) {
        return "/new/" + href;
    }
});

Search For:

BY TAGS

Contents

$ vs $()

$(document).ready()

Attribute

.attr() 메서드

Selecting Elements

ID로 엘리먼트를 selecting 하기

클래스 이름으로 앨리먼트를 selecting 하기

어트리뷰트로 앨리먼트를 selecting 하기

CSS Selector로 앨리먼트 selecting 하기

Pseudo-Selectors

Chooshing selectors

앨리먼트가 있는지 확인하기

Selection의 저장

Refining & Filtering selection

form selection

Working with Selections

getters과 setters

chaining

Manipulating Elements

앨리먼트의 이동, 복사, 삭제

cloning 앨리먼트

앨리먼트 삭제

새로운 앨리먼트 만들기

어트리뷰트 조작하기

Recent Posts

Archive Posts

Tags

About

Get in Touch

Categories

Search For:

BY TAGS

Using jQuery Core

Contents

$ vs $()

$(document).ready()

Attribute

.attr() 메서드

Selecting Elements

ID로 엘리먼트를 selecting 하기

클래스 이름으로 앨리먼트를 selecting 하기

어트리뷰트로 앨리먼트를 selecting 하기

CSS Selector로 앨리먼트 selecting 하기

Pseudo-Selectors

Chooshing selectors

앨리먼트가 있는지 확인하기

Selection의 저장

Refining & Filtering selection

form selection

Working with Selections

getters과 setters

chaining

Manipulating Elements

앨리먼트의 이동, 복사, 삭제

cloning 앨리먼트

앨리먼트 삭제

새로운 앨리먼트 만들기

어트리뷰트 조작하기

Recent Posts

Archive Posts

Tags

About

Get in Touch

Categories

Subscribe