JQuery 시작하기

Cross Browser를 지원하기 위한 조건 처리

JQuery 객체를 이용하면 Browser의 종류를 따질 필요가 없다.

다만 요즘은 DOM이  같아지기 때문에 jQuery를 사용할 필요가 없다.

왜냐하면 웹 표준이 생겨 브라우저들이 그 표준을 지키려고 노력하고 있기 때문이다.

 

우선 DOM이 뭔지 알아야 합니다.

Document Object Model 은 간단히 말하면 HTML, XML의 문서 프로그래밍의 인터페이스다.  

 

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.  --mdn

 

웹 표준이 활성화가 됨에 따라 JQuery를 사용할 이유가 없어졌다. 그 이유는 DOM이 표준화되기에 jQuery의 객체를 사용할 필요가 없기 때문이다. 다만 아직까지도 현장에서 많이 사용한다 하니 그러한 이유로 배운다는 것이 좀 아쉽다.

 

우선 jQuery 사이트에 들어와 cdn형식으로 코드를 가져온다.

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

 

이제 우리는 필요한 기술서를 Jquery홈페이지의 API를 보면서 공부하면 된다. ㅋㅋㅋ

 

 

카테고리를 보면서 범주를 나누면 안 된다. jQuery는 다양한 함수들이 존재하며 그러한 함수들은 엮일 수 있기에 카테고리의 범주들은 단지 속성에 대한 함수들을 나열한 것밖에 되지 않는다.

 

 

우리는 js에서 dom객체를 얻는다. 하지만 JQuery를 사용하면  얻어온 DOM객체를 JQuery객체로 convert한다음

제이쿼리가 제공해주는 함수를 통해 속성을 사용하면 됩니다.

다만 기존의 dom객체의 속성은 사용하지 못합니다.

 

 

jQuery의 특별한 점은 얻어오는 객체를 css 실렉터 기능을 사용해 dom객체를 가져오며 ${DOM}라는 표기법으로

DOM객체를 제이쿼리 객체를 만들어줍니다

 

찾은 DOM객체를 변환했다면 그의 자식을 찾을 때. find(". DOM")으로 찾고 변환까지 가능합니다.

 

또한 페이지를 로드되자마자 실행되도록 하는 법은

$(function){
	var section = ${"#s1"};
    var xInput = section.find(".x-input");
	
}

 

변환했다면 다시 DOM객체로 변환도 할 수 있어야 하므로 get(0)라는 함수를 이용해 얻어옵니다.

기본적으로 컬렉션을 내장하고 있습니다.

컬렉션으로 배열을 가지고 있으므로 한 번에 속성을 변경할 수 있습니다.

 

   등등 자바와 비슷한 getter , setter 가 존재합니다.

attr.() 파라미터가 2개면 setter , 1개면 getter입니다.

. val() 없으면 getter , 1개 setter입니다

 

이러 한식으로  공부하세요