[jQuery] intro

jQuery

javascript 라이브러리 중 하나이다

과거 브라우저 간의 호환성 문제를 해결하고자 등장했다.

javascript의 프로그래밍을 혁신적으로 단순화시키고 편리하게 제작이 가능하다

 

주요 기능

HTML DOM/CSS/HTML 이벤트/다양한 이펙트와 애니메이션/AJAX을 쉽게 다룰 수 있다

 

기본적인 jquery 구문

HTML element 선택 + 그 element에 동작(action) 수행

$(selector).action()

 

$ : jquery에 접근하기 위한 함수이다

(selector) : 다양한 방법으로 element 선택 가능하다. 

 

$(selector)의 리턴값은 'wrapped set' 이라고 불리우는 jquery object이다

이 object는 select된 DOM element들을 담고 있는 array와 같은 구조를 갖고 있다

배열처럼 wrapped set를 iterate하여 각각의 element를 접근할 수 있다

혹은 배열 인덱스를 사용하여 접근이 가능하다 (ex : $(selector)[0])

 

※ 2022.2 현재: 최신 버젼은 3.6.0,  CDN 최신 버젼은 3.6.0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>​

 

 

 

-함수나 변수 이름으로 $이 가능하다

$ = function() {
	document.write('<p>hello</p>');
}
$();

//이름 없는 함수 정의하자마자 호출
(function(){
	document.write('<p>hello</p>');
})();

 

 

-jquery가 제공하는 제이쿼리 함수, 이름 없는 함수, ready 웹페이지 로딩이 끝나면 실행되는 함수를 등록한다

$(document).ready(function(){
	$('p').click(function(){
    $(this).hide();
    });
});

 

↓

 

document : 현재 문서 객체

ready : 로딩이 끝나면 실행되는 함수

즉, 웹문서의 로딩이 완료되면 매개변수로 주어진 함수를 수행한다

 

축약된 형태

$(함수) <==>  $(document).ready(함수)

 

$(document).ready(function(){     // ready()  <-- 언제 실행?  <script> 로딩되었을때
   $("button").click(function(){  // click()  <-- 언제 실행? <script> 로딩 될 때 수행하는 함수 안에 있으니까 document 로딩되면 수행
      $('p').hide();              // hide()   <-- 언제 실행? button 클릭했을 때 수행
   });
});