JQuery

JQuery

: 자바스트립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 오픈 소스 기반의 자바스크립트 라이브러리

 

 

 

장점

• HTML DOM를 손쉽게 조작 가능, CSS 스타일도 간단히 적용 가능
• 애니매이션 효과나 대화형 처리를 간단하게 적용
• 같은 동작을 하더라도 코드를 더욱 짧게 구현 가능
• 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

 

 

 

사용 방법

1)  파일 다운로드

2)  cdn 사용

     JQuery 검색  >  CDN클릭  >  코드 긁어오기

      *  uncompressed: 압축이 되어있지 않은 형태

      *  compressed: 압축된 형태

 

 

 

JQuery 기초

$(선택자).동작함수();
// $는 JQuery()의 축약 형태로, 식별자 역할

 

 

 

JQuery 메소드

• 값 가져오기 및 변경하기

//값 가져오기
$(선택자).val();
  -> var value = $('input').val();
  
//값 설정하기
$(선택자).val('설정할 값');
  -> $('input').val('설정완료');

//style 변경하기
$('선택자').css('속성','속성값');
  -> $('span').css('font-size','28px');
  -> $('span').css('color','red');
//document와 비교
car span = document.querySelector('span');
span.style = 'font-size:10px; color:red;';

//속성 변경하기
$('선택자').attr('속성','속성값');
  -> $('#li2').attr('style','color:red');
  -> $('img').attr('src','apple.jpg');

//text 변경하기
$(선택자).text("글자");
  -> $("span").text("jQuery로 글자 변경하기");

//html 변경하기
$(선택자).html(html);
  -> $("p").html("<h1>jQuery<h1>");

 

• 요소 추가 및 삭제

//맨 뒤에 추가
function append() {
    $('#ul').append("<li>>append</li>"); 
}
//맨 앞에 추가
function prepend() {
    $('#ul').prepend('<li>prepend</li>'); 
}
//나를 기준으로 형제태그 추가(앞)
function before() {
    $('#li1').before('<li>before</li>'); 
}
//나를 기준으로 형제태그 추가(뒤)
function after() {
    $('#li1').after('<li>after</li>'); 
}
//해당이 되는 모든 요소들이 자기 자신을 지우는 것
function remove() {
    $('li').remove();
}
//부모 아래에 있는 모든 자식(자손 포함)들 삭제
function empty() {
    $('#ul').empty();
}

참고) document와 JQuery의 차이점

function append1() {
    document.querySelector('#p1').append('<h2>h2</h2>'); //<>를 문자열로 인식
    $('#p1').append('<h3>h3태그입니다.</h3>'); //<>를 HTML요소로 인식
}

 

• 요소 탐색

$(선택자).parent().함수();
: 바로 위에 존재하는 하나의 부모 요소 선택
$(선택자).parents().함수();
: 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택
$(선택자).next().함수();
: 선택된 요소 바로 다음에 위치한 형제요소 선택
$(선택자).prev().함수();
: 선택된 요소 바로 이전에 위치한 형제 요소 선택
$(선택자).children().함수();
: 선택된 요소의 자식 요소 모두 선택

 

• 클래스 조작하기

//선택된 요소에 클래스 추가
$("선택자").addClass("클래스명"); //띄어쓰기로 구분하여 여러 개의 클래스 추가 가능
//선택된 요소에 클래스 삭제
$("선택자").removeClass("클래스명");
// 선택된 요소에 클래스가 있는지 여부 확인(true, false)
$("선택자").hasClass("클래스명");
//선택된 요소에 클래스가 있으면 추가, 없으면 삭제
$("선택자").toggleClass("클래스명");

 

JQuery UI

: JQuery에서 무료로 배포한 라이브러리

• 웹에서 더욱 다양한 효과를 낼 수 있음

 

사용 방법

//jQuery ui검색 > download > 경로 가져오기
<script src="./jquery-ui-1.13.2/jquery-ui.js"></script>
<link href="./jquery-ui-1.13.2/jquery-ui.css">

 

ex) SwitchClass: 클래스를 부드럽게 변경하도록 도와줌

// 클래스1을 클래스2로 바꿈
// 이때, 시간은 클래스1을 클래스2로 바꿀 때 걸리는 시간을 의미(2000->2초)
$("선택자").switchClass("클래스명","클래스명2",시간)

switchClass 참고

switchClass(a,b)

>> ( a ) -> b : a값이 없어도 b(클래스)로 바뀜

 

switchClass 문제

.switchClass(a,b);
.switchClass(a,c);
.switchClass(b,d);

▼위 코드를 실행 했을 때 남은 값은?

c와 d

switchClass(a,b) → b

switchClass(a,c) → c

switchClass(b,d) → b → d

 

즉, switchClass는 실행하는 순서에 따라 결과값이 계속 바뀜!