[jQuery] 1. jQuery 문법, Selector와 Event

※ 본 내용은 w3schools jQuery 튜토리얼에 잡담, 추가로 검색해서 넣은 내용 등으로 이루어져 있으므로

원래 내용은 아래 링크를 참고하자.

https://www.w3schools.com/jquery/default.asp

02 jQuery 문법

jQuery 문법은 HTML 요소를 선택하고 그 요소가 어떤 작업들을 수행할 수 있도록 만들어진 것이다.

그래서 기본적인 문법은 $(selector).action() 이다.

$ 는 다음으로 나올 구문들이 jQuery 문법이라는 것을 나타내주는 구분자.

(selector) 는 내가 작업을 수행하고 싶은 HTML 요소

action() 은 그 선택요소가 수행하는 작업을 나타낸다.

예를 들어 $("input").hide() 는 HTML에 있는 모든 <input> 요소들을 숨기라는 뜻이 된다.

jQuery 코드를 보면 보통 

$(document).ready(function(){

   // jQuery 내용

}); 

이런식으로 document ready event 안에 메소드들이 정의되어 있다.

ready event 안에 넣으면 메소드들이 head 안에 정의되어 있어도 document 전체가 다 로드될 때까지 기다리기 때문에

아직 로드가 되지 않은 요소들을 건드려서 원하는 결과를 얻지 못하는 불상사들을 방지할 수 있다.

예를 들어 한 input 요소에 hide 메소드를 실행시키는데 그 input 요소가 아직 로드되지 않아 제대로 숨겨지지가 않는다든지 그런 경우가 있겠다.

jQuery 쓸때마다 저렇게 다 적는게 귀찮은 사람들을 위해 만들어진 방법이 있는데

$(function(){

   // jQuery 내용

}); 

이렇게 적으면 위에 ~ready~ 다적는 것과 똑같은 효과를 볼 수 있다.

다 적는게 가독성은 좋지만 귀찮으니 취향에 따라 골라쓰도록 하자.

03 Selector와 Event

 1) Selector(선택자)

Selector는 HTML 요소를 선택하고 내가 원하는 작업을 수행하게 해준다.

name, id, class, type 등 다양한 값으로 HTML 요소를 선택할 수 있다.

CSS Selector와 거의 동일하니 CSS를 많이 사용해봤다면 이해가 쉬울듯.

jQuery 문법에도 다뤘듯이 jQuery에서 Selector는 항상 $() 형태로 사용해야 한다.

- element selector

element selector는 element name으로 HTML 요소를 선택하는 것.

예를 들어, $("p") 이렇게 쓰면 페이지에 있는 모든 p 요소들을 선택한다는 뜻이 된다.

- #id selector

id selector는 HTML 태그 중 id로 HTML 요소를 선택하는 것.

문법은 $("#test") 처럼 앞에 #을 붙여서 id임을 나타낸다.

id값은 그 페이지 내에서 유니크한 값이기 때문에 원하는 요소 하나에 action을 넣을 때 사용한다.

- .class selector

class selector는 말 그대로 class로 HTML 요소를 선택하는 것.

id만큼 유니크하진 않지만 element보다는 선택범위가 훨씬 좁아지기 때문에 유용하게 쓸 수 있을듯.

사용은 $(".test") 이런 식으로 앞에 .을 붙인다.

이 외에도 모든 요소를 다 선택하는 $("*"), 현재 HTML 요소를 선택하는 $(this) 등 많은 종류의 selector들이 있다.

더 많은 jQuery Selector 레퍼런스는

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

이 사이트를 참고하도록 하자.

 2) Event

사용자가 웹 페이지에서 하는 모든 행동을 event라고 하는데

예를 들어 엔터를 친다든지, 마우스 클릭을 한다든지 하는 모든 행동들을 다 event라고 부른다

event 종류도 굉장히 많은데 대표적으로는 마우스 클릭 이벤트를 받는 click()이나

앞에서 배웠던 $(document).ready()도 페이지가 다 로드되면 발생하는 event이다.

더 많은 event 종류를 보고싶다면

https://www.w3schools.com/jquery/jquery_ref_events.asp

사이트를 참고하자.

$("p").click(function(){

  // click하면 실행할 action 

 }); 

하지만 한 selector에 여러 event를 넣고 싶은데 $(selector).event() 이런 식으로 다 따로 적으면

그 selector에 어떠한 event들이 붙어있는지 한 눈에 보기가 어렵다.

이걸 위해 존재하는 것이 바로 on() 메소드.

기존 자바나 안드로이드에서는 onClick() 형태로 event 함수를 만들었는데 왜 여기선 그냥 click일까 싶었는데

이걸 위한 큰 그림이었나보다.

$("p").on({

    mouseenter: function(){

        $(this).css("background-color", "lightgray");

    }, 

    mouseleave: function(){

        $(this).css("background-color", "lightblue");

    }, 

    click: function(){

        $(this).css("background-color", "yellow");

    } 

}); 

event대신 on으로 메소드를 생성하고 그 안에서 event에 따른 action을 설정해주면

해당하는 selector에 붙어있는 event들을 한 눈에 깔끔하게 볼 수 있다.