jQuery 선택자(태그) 접근 방법 1 (HTML DOM 접근 방법)
Javascript의 Jquery를 이용하여 HTML 태그 ID, Class 접근 방법을 알아보자.
샘플 HTML
<!DOCTYPE html>
<html>
<head>
<script src="./jQuery 3.6.0.js"></script>
</head>
<body>
<div class="cosList">
고객 <br>
<a id="userName"> </a>
</div>
</body>
<script src="./test.js"></script>
</html>Jquery id 값을 통해 태그를 접근하는 예시
id가 "userName"인 태그(a 태그)에 접근하여 내용을 "석봉"으로 변경
예시(샘플 HTML)에서는 test.js 안에 해당 코드를 넣어 실행하였다.
$('#userName').text("석봉"); // $('#id') << id로 요소를 찾는 방법
Jquery class 값을 통해 태그를 접근하는 예시
class가 "cosList"인 태그(div 태그)에 접근하는 예시
"cosList" div 내 요소 색상과 div 크기를 변경시켰다.
$('.cosList').css({ // #('.class') << class로 요소를 찾는 방법
'width': '100px',
'height': '100px',
'color': 'red',
});위 코드가 실행되는 경우 예시(샘플 HTML)의 "cosList" div가 하단 코드와 동일한 역할을 한다.
<div class="cosList" style="width: 100px; height: 100px; color: red;">
Jquery 를 아직 받지 않았다면...?
https://seokbong.tistory.com/9
jQuery 다운로드 및 사용 방법
연습용으로 코드를 작성하다 보니 Jquery가 필요하였다. 항상 패키지 매니저를 통하여 받거나 했으나 이번에는 수동으로 받아보기로 했다. 아주 간단하다. Jquery를 사용하기 위해 다운로드 사이트
seokbong.tistory.com
혹시 궁금하다면...?
https://seokbong.tistory.com/12
jQuery 선택자(태그) 접근 방법 2 (여러 Id, Class 사용하여 접근하기)
저번 시간에 Javascript의 jQuery를 이용하여 HTML DOM에 접근하는 기본적인 방법에 대해 알아보았다. https://seokbong.tistory.com/8 고객 Jquery id 값을 통해 태그를 접근하는 예시 id가 "userName"인 태그(a..
seokbong.tistory.com