jQuery 사용하기

1. jQuery 라이브러리 사용 선언

jQuery라이브러리를 사용하기 위해서는 해당 라이브러리를 추가해야합니다. 간단하게 CDN 방식으로 HTML파일에 아래 링크를 추가합니다.

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

CDN(Content Delivery Network)이란?
웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술이다.이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있다.
CDN을 이용하면 jQuery 파일을 서버에 따로 저장하지 않아도 jQuery를 사용할 수 있다.현재 이용할 수 있는 jQuery 버전 3.x의 CDN은 다음과 같으며, 어떤 CDN을 이용하더라도 동일한 동작을 한다.
출처:https://araikuma.tistory.com/605?category=820803 [프로그램 개발 지식 공유]

---

2. jQuery 문법

jQuery 사용하면 간편하게 HTML 요소를 선택할수 있고 선택한 요소에 특정 동작을 추가할수 있습니다.

$(선택자).함수();

$()함수

$() 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해 주는 역할을 한다. $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다. 이러한 $() 함수를 통해 생성된 요소를 jQuery 객체(jQuery object)라고 한다. jQuery는 이렇게 생성된 jQuery 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다.

출처: https://araikuma.tistory.com/605?category=820803 [프로그램 개발 지식 공유]

 

---

3. jQuery 선택자

Id Selector

다음과 같은 html 요소가 있을때

<div id="test"> hello world </div>

해당 div 태그를 선택하여 hello world 값을 변경하고 싶다면 다음과 같이 작성합니다.

$("#test").text("test hello world 입니다.");

 

---

Class Selector

다음과 같은 html 요소가 있을떄

<div class="classTest"> hello world </div>

해당 div 태그를 선택하여 hello world 값을 변경하고 싶다면 다음과 같이 작성합니다.

$(".classTest").text("test hello world 입니다.");

 

---

태그 이름으로 선택

다음과 같은 html 요소가 있을때

  <button>버튼</button>
  <span>hello world</span>

버튼 클릭시 hello world 글자색이 빨간색으로 변경되고, 글자크기를 변경하고 싶다면 다음과 같이 작성합니다.

$("button").click(function() {
  $("span").css( 'color', 'red' );
  $("span").css("font-size","5px");
});

---

3. 간단예제

버튼1번 클릭시 짝수번째 리스트의 글자 색상이 빨간색으로 변경
버튼2번 클릭시 짝수번째 리스트의 글자 색상이 검은색으로 변경
버튼3번 클릭시 리스트 하단에 "새로 추가된 아이템" element 추가
버튼4번 클릭시 리스트 상단에 "추가된 아이템" element 추가

See the Pen jQuery exam1 by So-Jeong (@sojeong1010) on CodePen.

 

 

---

출처

1. https://araikuma.tistory.com/609

[jQuery] 요소의 조작 - 요소의 추가 .append() .prepend() .before() .after()

2. https://www.edwith.org/boostcourse-web/lecture/16785/

[LECTURE] 1) JavaScript 라이브러리 : edwith