Simple Is Best

2. [jQuery] jQuery 설치 및 jQuery selector 본문

JavaScript & JQuery

2. [jQuery] jQuery 설치 및 jQuery selector

데이터미널 2021. 7. 26. 12:58

jQuery

: JS 코드를 짧게 축약이 가능하고 HTML 조작을 쉽게 할 수 있도록 개발된 라이브러리

설치법

1. 해당 사이트에 접속

https://code.jquery.com/

 

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

code.jquery.com

 

2. 여러가지 버전 중에서 본인에게 맞는 ver 를 고른다. 

 1. uncomperssed 버전 : 그냥 원본 파일, 용량이 큼
 2. minified 버전 : 공백 제거 버전 , 추천
 3. slim : 기능 많이 빠진 라이트한 버전

 

3. HTML 파일 내부 붙여넣기 한다. 

: HTML은 위에서 아래로 읽어들이는데 외부 JS 파일을 발견하면 잠깐 멈추고 파일을 다운 받아옴

따라서, body 태그 최 하단에 첨부하는 것이 좋다. 

 

아니면 <head> 태그 내에 붙여넣기를 해도 설치가 되긴 한다. 

 

jQuery 셀렉터

jQuery와 JavaScript는 아예 다른 것이 아니다. 

아래의 셀렉터를 통해서 알아보자. 

 

// JavaScript
document.getElementById('test').innerHTML = '변경할 내부 HTML'; 

// jQuery
$('.test').html('변경할 내부 HTML');

 

위의 두개의 코드는 동일하게 동작하는 코드이다. 

하지만 아래의 jQuery 코드는 훨씬 간단하게 작성 가능하다. 

jQuery에서는 HTML 코드를 찾기 위해서 $( )를 사용하여 HTML 태그에 접근이 가능하다. 

 

$( ) 내부에서 id 혹은 class를 찾기 위해서 사용되는 문법은 다음과 같다. 

// class를 찾기 위한 셀렉터 
$('.class명')

// id를 찾기 위한 셀렉터
$('#id명')

이제 document.getElementById( ' ' ) 와 같이 길게 작성할 필요성이 줄어든다. 

 

jQuery 메소드
$('#test').text('이건 제이쿼리식'); // text : 내부에 있는 글자만
$('#test').html('<h1> HI </h1>'); // html : 내부에 있는 모든 html을 조작 가능 
$('#test').css('color', 'red'); // css : style 요소를 변경 가능
$('#test').attr('src', ) // attr : 세부 속성을 지정 가능

▷ .text ( ' ' ) : JS 에서 innerText 와 동일한 기능, 내부에 있는 글자만 조작 

 

▷ .html ( ' ' ) : JS 에서 innerHTML 와 동일한 기능, 내부에 있는 모든 HTML 을 모두 조작 가능

 

▷ .css ( ' ' , ' ' ) : JS 에서 style와 동일한 기능,  style 요소를 조작 가능 ex) .css ( 'color' , 'red' ); 

 

▷ .attr ( ' ' , ' ' ) : 세부 속성을 지정 가능하다.  ex) .attr ( 'src' , './이미지파일/text.jpg' );

 

▷ .addClass(' 추가할 클래스 명 ') : 이미 지정된 HTML 태그에 있어서 기존에 사용 중이던 class를 추가 가능

 

 

자바스크립트로 셀렉터를 사용하였다면 바로 뒤에 자바스크립트 메소드로 작성 해야한다. 
제이쿼리로 셀렉터를 사용하였다면 바로 뒤에 제이쿼리 메소드로 작성 해야한다.
저작자표시

'JavaScript & JQuery' 카테고리의 다른 글

6. [jQuery] ID, Class, Name 별로 input Value 가져오기  (0) 2021.07.26
5. [JQuery] Navbar 애니메이션 넣기 (부가 navbar 기능 추가)  (0) 2021.07.26
4. [jQuery] 모달 창 만들기  (0) 2021.07.26
3. [jQuery] jQuery를 사용하는 이유  (0) 2021.07.26
1. JavaScript  (0) 2021.07.26
'JavaScript & JQuery' Related Articles more