-
jQuery 선택자(태그) 접근 방법 1 (HTML DOM 접근 방법)DEV/javascript 2022. 2. 11. 15:06
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
'DEV > javascript' 카테고리의 다른 글
Javascript Toast grid 예시 (1) 2022.02.16 Javascript 물음표 연산자와 물음표 두개 연산자 (? 연산자와 ?? 연산자) (0) 2022.02.15 jQuery 선택자(태그) 접근 방법 2 (여러 Id, Class 사용하여 접근하기) (0) 2022.02.15 Javascript Data 속성 활용 예시 (0) 2022.02.12 Javascript DATA 속성 (0) 2022.02.12