JQuery 기초

브라우저마다 객체의 종류차이와 그에 따른 자바스크립트 처리에 약간씩의 차이가 생길 수 있다. 여러 브라우저에서 모두 호환이 되는 스크립트를 사용하는 표준 라이브러리로써 JQuery를 사용하면 브라우저 호환성 문제를 쉽게 해결할 수 있다.

 

 

 

---

JQuery

형태  =>     $(선택자).메서드(매개변수,매개변수)

 

$(document).ready(function (){} );

문서를  웹브라우저에서 완전히 로드한 뒤 한번 실행되는데, 예시에선  매개변수인 익명 함수를 실행하게 된다.

 

(document).ready를 생략해서 사용할 수도 있다.

 

ex ) $(function(){} ); 

 

 

자바스크립트에서 { } 중괄호 안에 key : value의 쌍으로 이루어진 구조를 사용할 수 있는데, 

이렇게 웹에서 데이터 전달을 위한 데이터의 집합을 JSON(Java Script Object Notation)이라고 한다.

 

 

 

메서드 체이닝

 

ex) $('#box').on('click', function() {} ).on('mouseenter',function() {} );

 

 

위 예시처럼 메서드를 선택자로 가져온 객체 뒤에 계속해서 이어붙여 사용할 수 있다. 한 객체에 여러가지 기능을 한꺼번에 동작시키거나 부여할 때 유용할 수 있다.

 

하지만 위 처럼 동일한 종류의 메서드를 사용할 경우, 필요한 기능들을 JSON 형식으로 한번에 보낼 수 있다.

 

 

$box('#box') .on({

click : function () {}

 $(this).css('background-color' , 'orange');

}) ,

mouseenter : function () {}

 $(this).css('background-color' , 'red');

}) ;

이와 같이 on 이벤트에 보낼 key값과 value값을 여러개 보낼 수 있다.

 

 

 

 

---

추가로 알게된 점

$(document).ready도 이벤트 핸들러 중 하나이다.

 

$(document).ready 안에서 on('click', function(){})  등의 이벤트 핸들러를 등록하면,  처음 웹페이지를 불러온 뒤에도 on click 메서드가 작동한다고 한다. 이에 관련해서 검색해보니 이벤트 리스너의 이벤트 위임 관련 개념이 나오던데, 수업시간에 배우지 않은 부분이라 나중에 따로 다뤄야 할 것 같다.

 

jquery로 사용하는 .css에서 

width : 100 처럼 숫자만 입력하면 " " 인용구호를 찍지 않아도 되지만 크기단위 까지 명시하고 싶을 때는

width : ' 100px ' 처럼 두종류의 따옴표중 하나를 입력해줘야 한다.

 

색깔 비교를 할 때는 rgb값으로 비교하는 것이 더 안전하다. 색깔명으로 비교시 특정 브라우저에서는 rgb값을 사용할 수 있기 때문이다.

 

 

---

 

시간이 되면 이번에 알게된 이벤트 리스너와 이벤트 위임에 관해서 더 찾아봐야겠다.