jQuery가 뭘까...?
jQuery란?
jQuery 어떻게 써?
jQuery 연습하며 썼던 메소드들...
정리
📔 Jquery?
Jquery는 자바스크립트를 간편하게 사용할 수 있도록 경량시킨 자바스크립트 라이브러리이다.
덕분에 자바스크립트를 손쉽게 쓸 수 있지만 최근에는 안 쓰는걸 지향한다고 한다.
이렇게 간편한 걸 왜 잘 안쓰지....🤔
- jquery를 지향하는 이유 찾아서 정리하기
📔 어떻게쓸까?
jquery는 라이브러리이기 때문에 사용하기 위해서는 부트스트랩처럼 import를 해야한다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</head>head에 import를 해주면 사용준비 완료
📔 jQuery 연습하며 썼던 메소드들...
$ == jquery?
jquery작성시
let input = $('#input-q1')-
$는 jquery를 접근하기 위한 식별자 역할
-
$()은 jquery의 객체 : 메소드를 동작할 수 있게 해준다.
-
$('# + id') : 해당 객체의 id를 선택
.val()
let input = $('#input-q1').val()- 해당 id에 있는 값을 가져오거나 값을 설정하는 메소드!
= input-q1 양식의 입력된 값 또는 설정
.includes('')
String.includes('searchString, length')- 특정 문자열에서 찾고자하는 문자, 문자열이 있으면 true, 없으면 false 반환하는 메소드
- searchString : 검색하고자 하는 문자 또는 문자열
leangth : 검색을 시작할 위치- 만약 입력을 안 할 경우 전체 문자열을 대상으로 한다.
- 만약 입력을 안 할 경우 전체 문자열을 대상으로 한다.
.split('')
String.split('String')- 괄호 안의 문자를 기준으로 해당문자열을 나눠서 배열로 저장!
ex)
<script>
function q2() {
//id input-q2에 aaa@naver.com을 입력하면 입력값을 가지고 옴
let input = $('#input-q2').val()
//@값이 있는지 확인 : 있을 경우 실행
if(input.includes('@')) {
/*@을 기준으로 배열로 저장!
실행시 결과값 ['aaa','naver.com']}*/
let hostiong = input.split('@')
//hosting의 1번 값에 있는 'naver.com'을 alter창으로 띄우기
alert(hostiong[1])
}
else
alert('이메일이 아닙니다.')
}
</script>.append()
$('#ID').append(source)- 해당객체에 새로운 HTML의 요소를 추가
.empty()
$('#ID').empty()- 해당객체의 요소들을 삭제
.attr
$('#ID').attr('class',value)- 해당 요소들을 가지고와서 value로 바꿔준다
.text
$('#ID').text()- 해당 요소의 내용을 가져온다.
$('#ID').text(value)- 해당 요소의 내용을 지우고 value로 대처한다.
jQuery에 너무 의존하면 JS랑 혼동할 가능성이 있으므로 JS도 공부해야겠다. 가깝고도 먼 JS의 세계..
하루하루 알차게