[Node.js] JQuery란

 

---

1. JQuery 

jQuery는 자바스크립트 라이브러리로, HTML 문서의 클라이언트 측 조작을 단순화하고 간소화하는 데 도움을 주는 도구이다.

 

 

 

2. JQuery  특징

2-1.DOM 조작

jQuery는 CSS 선택자를 사용하여 HTML 문서의 요소를 선택하고 조작할 수 있는 강력한 기능을 제공합니다. 예를 들어, $('p')와 같은 선택자를 사용하여 모든 <p> 요소를 선택할 수 있습니다.

 

 

2-2.이벤트 처리

jQuery는 이벤트 핸들러를 쉽게 연결하고 제어할 수 있는 메서드를 제공합니다. 예를 들어, .click(), .hover(), .on() 등의 메서드를 사용하여 클릭, 호버 등의 이벤트를 처리할 수 있습니다.

 

2-3.애니메이션과 효과

jQuery는 요소의 애니메이션 효과를 쉽게 추가할 수 있는 메서드를 제공합니다. .fadeIn(), .fadeOut(), .slideUp(), .slideDown() 등의 메서드를 사용하여 요소를 부드럽게 표시하거나 숨길 수 있습니다.

 

2-4.AJAX

jQuery는 AJAX 요청을 보내고 받는 메서드를 제공하여 서버와의 데이터 통신을 간편하게 처리할 수 있습니다. .ajax(), .get(), .post() 등의 메서드를 사용하여 비동기적으로 데이터를 가져오거나 전송할 수 있습니다.

 

2-5.플러그인

jQuery는 다양한 플러그인을 제공하며, 이를 사용하여 강력한 기능을 손쉽게 추가할 수 있습니다. 예를 들어, 갤러리 플러그인, 캐러셀 플러그인 등을 사용하여 웹사이트에 다양한 기능을 추가할 수 있습니다.

 

2-6.크로스 브라우징

jQuery는 다양한 웹 브라우저에서 일관된 동작을 보장하며, 크로스 브라우징 이슈를 해결하는 데 도움을 줍니다.

 

 

 

 

 

 

 

 

3. JQuery  설치

npm으로 설치가 가능하다

 

npm install jquery

 

 

 

 

 

4.JQuery 사용법

4-1.JQuery 객체 생성

jQuery를 사용하기 위해서는 먼저 jQuery 객체를 생성하여야 한다.

jQuery()
//축약형
$()

 

 

4-2. CSS 스타일의 selector

jQuery() 함수는 선택자에 의해 선택된 요소들을 jQuery 객체를 반환한다.
(한개 또는 여러개)

jQuery('h1');
$('h1');

 

 

4-3.jQuery() 함수 메소드

성성된 Matched set이 여러 개의 요소를 담고 있을 때, jQuery는 반복문 없이 해당하는 모든 요소에 접근할 수 있다.

$('h1').text('수정');

 

 

4-4.HTML 인수

HTML 문자열을 인수로 받으면 새로운 HTML 요소를 생성한다.

$('<p id="test">새롭게추가테스트</p>').appendTo('body');

 

 

 

4-5.JavaScript 객체인수

JavaScript 객체를 인수로 받으면 그 객체를 jQuery 객체로 wrap한 객체를 반환한다.

var $foo = $(foo);

 

 

 

 

4-6.선택자

jQuery는 CSS 스타일의 Selector를 이용하여 요소를 선택할 수 있다.

$('li');
$('#container');
$('.articles');
 $('#destinations .promo')
 $('#destinations > li')
 $('#france > li, .promo')
 $('#destinations li:first')

 

 

 

 

 

 

5.Manipulation

DOM에 새로운 요소를 추가/삭제, 복사, 속성 변경

 

5-1.Appending

append() : 선택 요소의 닫는 태그 앞에 콘텐츠를 삽입
prepend() : 선택 요소의 여는 태그 뒤에 콘텐츠를 삽입.
after() : 선택 요소의 뒤에 콘텐츠를 삽입
before() : 선택 요소의 앞에 콘텐츠를 삽입

 

5-2.Removing

remove()

 

5-3.Copying 

clone()

 

 

 

 

 

 

 

6.이벤트

다음 형식으로 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수를 지정한다.

.on( events [, selector ] [, data ], handler )

$('button').on('click', function (e) {
  var txt = $('<p>짠</p>');
  $('.vacation').append(txt);
  $(this).remove();
});