컬쳐N라이프

jQuery this에 대해서 알아보겠습니다.

this 즉, 자기자신을 가르키는 변수라고 생각하시면 될꺼 같습니다.

예제를 통해 함께 알아보겠습니다.

<div class="click">1번 div</div>

<div class="click">2번 div</div>

<div class="click">3번 div</div>

지난 시간에는 id를 이용하여 각 DOM 마다 button 클릭 이벤트를 하나씩 설정해줬습니다.

this를 통해서 소스를 깔끔하고 편하게 작성해보겠습니다.

- jQuery

$(document).ready(function() {

   $('.click').click(function() {

    var idx = $('.click').index(this);

        alert(idx + "번 div, 내용 : " + $(this).text());

   });

});

this는 선택된 자기자신을 표현합니다.

1번 DIV가 클릭 됐다면 1번 DIV로 선언된 DOM(<div class="click">1번 div</div>)을 

2번 DIV가 클릭 됐다면 2번 DIV로 선언된 DOM(<div class="click">2번 div</div>)을 

3번 DIV가 클릭 됐다면 1번 DIV로 선언된 DOM(<div class="click">3번 div</div>)을 

나타냅니다.

class 셀렉터를 통해 click 클래스에 클릭 이벤트를 정의했습니다.

index() 함수는 해당 DOM의 순서를 반환합니다. 제일 처음은 0, 1, 2 0번부터 순서대로 증가합니다.

예제 : 이동

this를 통해서 이전과 비교했을 때 코드도 줄고 보기도 편해졌습니다.

this를 활용해서 더 편하고 쉽게 코드를 작성하시기 바랍니다~

다음 시간은 trigger에 대해서 알아보겠습니다.

가장 많이 사용되는 id와 class 셀렉터를 먼저 알아보겠습니다.

1. class 셀렉터

<div class="test">class 테스트입니다.</div>
<div id="test">id 테스트입니다.</div>

ex) $( ".text" ).text( "The DOM is now loaded" );

=> 실행 결과

<div class="test">class 테스트입니다.</div>
<div id="test">id 테스트입니다.</div>

1. all selector  ("*")

ex) $("*").css("border", 3px solid red");

-----------------------------------------------------------------------------------------------

2. 속성 prefix 셀렉터 [name|=”value”]

<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>

ex) $( "a[hreflang|='en']" ).css( "border", "3px dotted green" );

=> 실행 결과

Some text Some other text will not be outlined

-----------------------------------------------------------------------------------------------

3. 문자를 포함하는 셀렉터  [name*=”value”]

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

ex) $( "input[name*='man']" ).val( "has man in it!" );

=> 실행 결과

-----------------------------------------------------------------------------------------------

4. 단어를 포함하는 셀렉터  [name~=”value”]

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

ex) $( "input[name*='man']" ).val( "mr. man is in it!" );

=> 실행 결과

-----------------------------------------------------------------------------------------------

jquery 셀렉터에 대해 간략하게 소개하였습니다~

다음 강의에서 만나요~

+ More jQuery

 - [jQeury] jquery this, 코드 줄이기, jquery index, 인덱스

 - [jQuery] - jQeury] val(), text() 값 셋팅, 값 가져오기 setValue, setText

 - [jQuery] - [jQeury] jquery 클래스 추가(addClass), class 추가 삭제(removeClass) 및 확인(hasClass)

 - [jQuery] - [jQeury] jquery tigger, jquery 함수 실행, 이벤트 실행

 - [jQuery] - [jQeury] jQuery css, jQuery 스타일 적용