JQuery
자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리
라이브러리
자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수 있도록 한 자원들의 묶음
JQuery 장점
- 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능
- HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능
- 애니메이션 효과나 대화형 처리를 간단하게 적용
- 같은 동작을 하더라도 더욱 짧게 구현 가능
- 오픈 라이선스를 적용해 누구나 자유롭게 이용가능
JQuery 사용
사용법 1. 파일 다운로드
https://releases.jquery.com/
사용법 2. CDN(Content Delivery Network)사용
<head> 안에 아래의 코드 넣어주기
<script src="https://code.jquery.com/jquery-3.7.1.js" ></script>JQuery 기초
형태
$ (선택자).동착함수();
$는 jQuery() 함수의 축약 형태로, 식별자 역할
JQuery method
값 가져오기 & 설정하기
function getValue() {
let value = $('input').val();
console.log(value); // 값 가져오기
}
function setValue() {
$('input').val('설정완료'); //값 설정하기
}style 변경하기 .css()
$('#hello').css('color', 'red');function changeCSsJs() {
let span = document.querySelector('span');
span.style = 'font-size : 20px; color: red;';
}
function changeCssJquery() {
$('span').css({ 'font-size': '40px', 'font-weight': 'bold' });
}
function getCssJquery() {
console.log($('span').css('color','blue'));
}속성 변경하기 .attr()
$('선택자').attr("속성","속성값");
function changeAttrJs() {
let a = document.querySelector('a');
a.setAttribute('href', 'https://www.youtube.com/');
}
function changeAttrJquery() {
$('a').attr('href', 'https://www.google.com/');
}text 변경하기 .text()
console.log($('#hello').text()); //안녕하세요
$('#hello').text('안녕히가세요'); //변경
console.log($('#hello').text()); //안녕히가세요.html 변경하기 .html()
function changeHtmlJs() {
let p = document.querySelector('.html');
p.innerHTML = '<p>Javascript</p>';
}
function changeHtmlJquery() {
$('.html').html('<p>JQuery</p>');
}요소 추가하기
.append
선택된 요소의 자식 중 마지막에 추가한다.
이때, 요소 추가하기는 항상 기준이 있어야 한다.
function appendJs() {
let ul = document.querySelector('.colors');
let li = document.createElement('li');
li.textContent = '마지막으로 추가된 js';
ul.append(li);
}
function appendJq() {
$('.colors').append('<li>마지막으로 추가하는 jq</p>');
}$(선택자).prepend('요소')
선택된 요소의 자식 요소 중 첫번째로 추가
$(선택자).before('요소')
선택된 요소의 형제 요소로 이전 형제로 추가
$(선택자).after('요소')
선택된 요소의 형제 요소로 다음 형제로 추가
요소 삭제
$(선택자).remove()
선택한 요소를 DOM 트리에서 삭제
인자로 선택자를 넘겨주면, 선택한 요소 중 조건에 만족하는 요소만 삭제
$(선택자).empty()
선택한 요소의 자식 요소를 모두 삭제
선택된 요소는 남아 있고 그 안이 다 비워진다.
요소 탐색
$(선택자).parent().함수()
바로 위에 존재하는 하나의 부모 요소 선택
$(선택자).parents().함수()
바로 위 부모 뿐만 아니라 부모의 부모, 모든 조상을 선택
`
클래식 조작하기
$('선택자').addClass("클래스명")
선택된 요소에 클래스 추가
function addClass() {
$('#hi').addClass('font-size'); //class명만
}$( 선택자 ).removeClass(“클래스명”)
선택된 요소에 클래스 삭제
function removeClass() {
$('#hi').removeClass('font-size'); //특정 클래스만 삭제
$('#hi').removeClass(); //#hi가 가지고 있는 전부를 삭제
}$( 선택자 ).hasClass(“클래스명”)
선택된 요소에 클래스가 있는지 여부 확인
function hasClass() {
console.log($('hi').hasClass('font-size'));
}$( 선택자 ).toggleClass(“클래스명”)
선택된 요소에 클래스가 있으면 추가, 없으면 삭제
function toggleClass() {
$('#hi').toggleClass('bg-color'); //있으면 삭제, 없으면 더해주기
}$( 선택자 ).switchClass('원래 클래스명','바꿀 클래스명',시간)
아래의 Jquery CDN을 추가하고 실행하는 함수이다.
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>function switchClass() {
$('#hi').switchClass('color-blue', 'color-red', 5000);
}시간은 1000는 1초이다.
그래서 5000로 설정하면 5s동안 서서히 바뀌게 만들 수 있다.
JQuery 이벤트 리스너
이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수
//javascript
console.log(document);
//jquery
console.log($(document));js의 document와 jq의 document의 작성법은 위와 같이 다른다.
로딩 이벤트
$().ready()
$()
//$().ready()
$(document).ready(function () {
console.log('ready()- 문서의 Dom 트리가 완성되면 실행되는 이벤트');
});
//$()
$(function () {
console.log('안녕');
});마우스 이벤트
click()
$('.hello').click(function () {
$('.hello').css('color', 'red'); //누르면 red로 글씨색 변경
}); mouseover() 마우스를 올려놓았을 때
$('.numbers').mouseover(function () {
$('.numbers').css('background-color', 'green');
$('.numbers').append('<li>.mouseover() call</li>'); //mouse 올리면 리스트 무한 증식 $(this).caa('background-color', 'green');
});this를 사용하면 이렇게 표현 하면 된다.
hover() 마우스 올렸을 때 /뗐을 때
$('.div-hover').hover(
function () {
$(this).addClass('hover'); //함수 1 - 올렸을 때
},
function () {
$(this).removeClass('hover'); //함수2 - 뗐을 때
}
);이건 마치 toggle()처럼 보이기도 하는데
$('.div-hover').hover(function () {
$(this).toggleClass('hover');
});이 코드와 동일하게 작동한다.
scroll() 스크롤이 생기면
$(window).scroll(function () {
console.log('sroll');
});window는 브라우저 창 전체를 의미한다.
키보드 이벤트
keydown() 누를 때
$('.input-key').keydown(function (e) { //창에 입력을 e라는 변수로 받는다.
if (e.code === 'ArrowUp') { //up화살표 누르면
console.log('up'); //console 창에 up 출력
} else if (e.code === 'ArrowDown') { //down화살표 누르면
console.log('down'); //console 창에 down 출력
}
});
keyup() 누르고 있다가 뗄 때
