[jQuery] 사용법, Methods
2023. 1. 19. 22:01ㆍJavaScript
728x90
반응형
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();
728x90
반응형
'JavaScript' 카테고리의 다른 글
| [Ajax] Ajax로 GET 요청 보내기 (0) | 2023.01.19 |
|---|---|
| 이미지 미리보기 :: createObjectURL vs FileReader (0) | 2022.12.15 |
| [JavaScript] 전역 변수 vs 지역 변수 (0) | 2022.11.16 |