1. jQuery
jQuery 또한 Java Script의 일환이다.
다만 자바스크립트로 빈번하게 사용되는 기능들을 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리다.
일단 먼저 jQuery를 사용하려면 파일을 직접 다운로드 받아야 한다.
제이쿼리 홈페이지에 들어가 다운로드 페이지를 열면
이렇게 뜨는데 이 중 초록색 표시 있는 걸 다운받아 사용하면 된다.
제이쿼리파일이 없으면 제이쿼리문법을 썼을 때 오류가 나게 된다.
제이쿼리 문법을 쓰고 콘솔창에 출력을 했는데
'$ is not defined ~~' 라고 쓰여있다면, 제이쿼리가 다운되지 않았다는 뜻!
파일을 다운받은 뒤에는 html head태그내에 다운받은 파일을 불러와야 사용가능하다.
2. jQuery 문법
: jQuery 문법의 기호 : $
<body>
<img id="pic" width="200px" src="https://i.ytimg.com/vi/GaUClstMb4I/maxresdefault.jpg" />
<p id="abc">여러분 안녕하세요~ </p>
<input type="text" id="inputTxt">
<button id="btn">내용 변경!</button>
<br>
<button id="style-btn">스타일 변경</button>
<button id="pic-btn">사진 변경</button>
</body>
일단 실습하면서 배우기 위해 body태그를 작성해보자
위와 같이 body 태그를 작성하면 웹페이지엔 이렇게 나온다.
1) 내가 원하는 html 요소 가져오기
v-JS : document.getElement~
jQuery : $('선택자')
let element = $('#abc')
console.log('요소 :', element)
콘솔창에 id가 abc인 태그는 p태그로 이루어져 있고, 길이가 1 이라는 요소를 알 수 있다.
2) 내가 원하는 요소의 내용만 가져오기
v-JS : .innerText
jQuery : .text()
console.log('내용만 :', element.text())
id가 abc인 태그내용을 불러와준다.
3) 내가 원하는 내용으로 바꾸기
v-JS : .innerText = '바꿀 값'
jQuery : .text('바꿀 값')
element.text('내용 바꾸기')
'여러분 안녕하세요~' 였던 내용이 '내용 바꾸기'로 변한 걸 볼 수 있다.
4) 태그까지 포함해서 바꾸기
element.html('<button>내용 바꾸기</button>')
텍스트였던 '내용 바꾸기'가 버튼이 되었다.
5) 버튼을 눌렀을 때 input 값으로 내용 변경하기
| 5-1) 버튼이벤트 | 5-2) input 값 가져오기 | |
| v-JS | .addEventListener('click', 함수) | v-JS : .value |
| jQuery | jQuery : .click(함수) | jQuery : .val() |
// 아이디가 btn인 태그를 클릭하면 이 함수가 실행될거다
$('#btn').click(() => {
// 이벤트 확인용
console.log('btn event')
// input 값 가져와 val 변수에 담기
let val = $('#inputTxt').val()
console.log('input :', val)
// 내가 입력한 이름으로 설정하기
element.html(val)
// 입력한 이름으로 설정한 후 input value 값 초기화시키기
$(#inputTxt').val('')
})
입력창에 '재롱이'라고 입력하고(아무거나 입력해도 됨)
내용변경! 버튼을 누르면 내용이 바뀐다.
6) 이미지 속성 변경하기
v-JS : .속성이름, getAttribute / setAttribute
jQuery : .attr()
$('#pic-btn').click(() => {
$('#pic').attr('src', 'https://image-notepet.akamaized.net/resize/620x-/seimage/20200320%2F7f4bc91b2a154ec7efa8b86064522650.jpg')
})
아이디가 pic-btn인 태그를 클릭하면 이미지를 바꿔주게끔 한 것.
사진변경 버튼을 누르게 되면 다른 사진이 나오게 된다.
7) 스타일 속성 변경하기
v-JS : .style.속성 = '값'
jQuery : .css()
$('#style-btn').click(() => {
element.css('color', 'salmon')
})
아까 맨 처음에 아이디가 abc인 태그를 element 라는 변수에 넣어줬기 때문에
element.css() 를 쓰는 것이다.
'재롱이' 글자색이 salmon으로 바뀐 걸 볼 수 있다.
jQuery는 이제 많이 쓰지 않게 되었지만
그래도 기초 중 기초는 알아야하지 않겠습니까
공부해라 줜..!
'JS > 기초정리' 카테고리의 다른 글
| JS 기초 - 비동기통신 실습 (0) | 2023.01.20 |
|---|---|
| JS 기초 - 비동기통신 (0) | 2023.01.20 |
| JS 기초 - DOM 속성 / DOM 스타일 (0) | 2023.01.17 |
| JS 기초 - DOM이벤트 (0) | 2023.01.17 |
| JS 기초 - DOM객체 (0) | 2023.01.16 |