컬쳐N라이프

Jquery 이벤트에 대해서 알아보겠습니다.

1.click() 이벤트

가장 많이 사용하는 click 이벤트입니다.

<div id="click1">1번 div</div>

<div id="click2">2번 div</div>

<div id="click3">3번 div</div>

- jQuery

$(document).ready(function() {

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

    alert("1번 div");  

   });

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

    alert("2번 div");  

   });

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

    alert("3번 div");  

   });

});

# id 선택자 이용하여 click 이벤트가 발생했을 때 알람을 띄우는 간단한 예제를 작성했습니다.

예제 : 이동하기

blur 이벤트는 HTML DOM이 포커스를 잃었을 때 발생하는 이벤트입니다.

보통 input DOM에 적용하여 사용합니다.

아이디나 패스워드 입력을 마치고 포커스를 잃었을 때 유효성 검사를 위해 사용하기도 합니다.

<input type="text" id="iptTest"/>

- jQuery

$('#iptTest').blur(function() {

alert("iptTest out");

 });

# id 선택자 이용하여 iptTest가 포커스를 잃었을 때 알람을 띄우는 간단한 예제를 작성했습니다.

예제 : 이동

다음시간에는 jquery 코드를 줄이기 위한 자기 자신을 가르키는 요소 

this를 이용하는 방법을 알아보겠습니다.

this를 이용하면 반복되는 코드도 줄고 간단하게 기능을 구현할 수 있습니다.

가장 많이 사용되는 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 스타일 적용