참고 https://opentutorials.org/course/1375/6630
라이브러리: 자주사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어
Jquery
-DOM을 내부에 감추고 보다 쉽게 웹 페이지를 조작할 수 있도록 돕는 도구이다.
*DOM
Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미
[라이브러리 다운방법]
=>jquery 홈페이지에 들어가서 라이브러리 다운 받은후, 자바스크립트에 url 불러온 후(불러오는 코드 홈페이지에 있으므로 copy &paste) 소스 작성한다
<!DOCTYPE html><html><body><script src="//code.jquery.com/jquery-1.11.0.min.js"></script> //jquery를 로드하는 방법 ! 항상 파란색글자 써진부분의 형식대로 쓰고 <script> //내 생각을 담아 코딩할 부분은 빨간색글자 부분 jQuery( document ).ready(function( $ ) { $('body').prepend('<h1>Hello world</h1>'); //prepend body 앞부분에 ''내용을 적겠다. }); </script></body></html>[제어 대상을 찾기]
jquery의 기본문법은 단순하고 강력하다.
$('li').css('color','red');
$()은 jquery의 함수이다. 이 함수의 인자로 css 선택자(li)를 전달하면 jquery 객체라는 것을 리턴한다.
이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다.
css는 선택자에 해당하는 객체에 color를 red로 변경한다.
[DOM을 이용했을때와 jquery를 이용했을때를 비교해보자 !]
-같은 작업이지만 jquery를 이용했을때 코드가 간결하다.
예 1)
<DOM>
var lis= document.getElementsByTagName('li');
for(var i=0; i<lis.length ;i++)
{
lis[i].style.color= 'red';
}
<jquery>
$('li').css('color','red');
예 2)
<DOM>
var lis= document.getElementsByClassName('active');
for(var i=0; i<lis.length ;i++)
{
lis[i].style.color= 'red';
}
<jquery>
$('.active').css('color','red'); // 클래스 이름이 active 인것 찾기
예 3)
<DOM>
var li= document.getElementById('active');
li.style.color='red'
li.style.textDecoration='underline'
<jquery>
$('#active').css('color,'red'). css('textDecoration','underline');
//선택한 메소드에 대해서 연속적인 메소드 호출을 통해 효과를 줄수있음 이걸 chaining이라고 한다.!!