jQuery
-
HTML 요소들을 조작하는 JavaScript 라이브러리
-
미리 작성된 JavaScript 코드를 모아둔 것
사용법
- import
<head>태그 안에 아래 script 태그를 붙여넣는다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>- 값을 가져오기를 원하는 태그에 id 부여
Methods
로딩되자마자 실행하기
$(document).ready(function(){
alert('페이지가 로딩되었습니다.')
});값 가져오기 [val, text]
$('#아이디').val();(input box)$('#아이디').text();(input 외)
새 값 넣기 [val, text]
$('#아이디').val("새 값");(input box)$('#아이디').text("새 값");(input 외)
숨기기 [hide]
$('#아이디').hide();
보이기 [show]
$('#아이디').show();
CSS 속성 값 가져오기 [css]
$('#아이디').css('값을 가져올 속성');
속성 변경하기 [attr]
$('#아이디').attr('변경할 속성', '변경할 값');- ex)
$('#아이디').attr('src', '변경할 값');
html 입력하기 [append]
$('#아이디').append("새 값")- Template Literals 이용
let temp_html = `<button>추가 버튼</button>`;
$('#아이디').append(temp_html);Template Literals
- 특별한 형태의 문자열로, 백틱을 사용한다.
`a` == 'a' //true
- 줄바꿈할 때 \n 안 써도 된다.
`abc def`
- 문자열 중간에 다른 변수에 저장된 값 삽입할 때 편리하다.
console.log(`num is ${변수명}`)
특정 문자가 포함되어 있는 지 [includes]
- 반환: true/false
$('#아이디').val().includes('찾을 문자');(input box)$('#아이디').text().includes('찾을 문자');(input 외)
문자열 나누기 [split]
- 반환: 리스트
let arr = $('#아이디').val().split('기준 문자')[찾을 인덱스];(input box)let arr = $('#아이디').text().split('기준 문자')[찾을 인덱스];(input 외)
내부의 태그 비우기 [empty]
$('#아이디').empty();
🍓e-juhee.tistory.com 👈🏻 이사중