JQuery
2022. 11. 16. 17:38ㆍWEB개발/TIL
반응형
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는 실행하는 순서에 따라 결과값이 계속 바뀜!
반응형
'WEB개발 > TIL' 카테고리의 다른 글
서버(클라우드 정의, 서버구축과 생성 및 접속, FileZilla, Apache) (0) | 2022.11.19 |
---|---|
JQuery 이벤트 리스너 (0) | 2022.11.16 |
프레임워크와 라이브러리 (0) | 2022.11.16 |
Javascript DOM (0) | 2022.11.15 |
Javascript(자료형-object) (1) | 2022.11.14 |