-
jQuery 각 태그별 값 불러오기DEV/javascript 2022. 5. 1. 23:56
H1, a, div, input(text, radio, checkbox), select, datalist(예시코드 참조) 등 각 태그에 따라 값을 불러오는 방식이 다르다.
각 태그별로 값을 가져오는 방법을 정리했다.
(선택한 요소 값 가져오는 방법)
'-' : 선택자
H1, a 태그 값 가져오기 (H1, 2, 3 ... 등) : $('-').text();
div 값 가져오기 : $('-').text()
input(text) 값 가져오기 : $('-').val()
input(radio) 값 가져오기 : $('-').prop("checked")
input(checkbox) 값 가져오기 : $('-').prop("checked")
select 값 가져오기 : $('- option:selected').val()
input(datalist) 값 가져오기 : $('#textDatalist').val()test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <input type="button" name="" id="testBtn" value="CHECK"> <!-- $('#textH1').text(); --> <h1 id="textH1">1</h1> <!-- $('#textA').text(); --> <a href="" id="textA">1</a> <!-- $('#textDiv').text()); --> <div id="textDiv"> Div 테스트 </div> <!-- $('#testText').val()); --> <input type="text" name="" id="testText"> <!-- $('#textRadio').prop("checked")); --> <input type="radio" value="Y" name="" id="textRadio"> <!-- $('#textCheckbox').prop("checked")); --> <input type="checkbox" value="X" name="" id="textCheckbox"> <!-- $('#textSelect option:selected').val()); --> <select name="" id="textSelect"> <option value="1" id="">one</option> </select> <!-- $('#textDatalist').val()); --> <input list="datalistTest" id="textDatalist" name="" /> <datalist id="datalistTest"> <option value="1"> <option value="2"> <option value="3"> </datalist> </body> <script src="./test.js"></script> </html>test.js
$(document).on('click', '#testBtn', function() { console.log("textH1 : ", $('#textH1').text()); console.log("textA : ", $('#textA').text()); console.log("textDiv : ", $('#textDiv').text()); console.log("testText : ", $('#testText').val()); console.log("textRadio : ", $('#textRadio').prop("checked")); console.log("textCheckbox : ", $('#textCheckbox').prop("checked")); console.log("textSelect : ", $('#textSelect option:selected').val()); console.log("textDatalist : ", $('#textDatalist').val()); });
추가로...
https://seokbong.tistory.com/9
jQuery 다운로드 및 사용 방법
성격 급한 사람들을 위한 CDN ( Contents Delivary Network ) 방식 사용 방법. 헤더에 하단 스크립트를 추가하면 사용 가능하다. 연습용으로 코드를 작성하다 보니 Jquery가 필요하였다. 항상 패키지 매니저
seokbong.tistory.com
https://seokbong.tistory.com/8
jQuery 선택자(태그) 접근 방법 1 (HTML DOM 접근 방법)
Javascript의 Jquery를 이용하여 HTML 태그 ID, Class 접근 방법을 알아보자. 샘플 HTML <!DOCTYPE html> 고객 Jquery id 값을 통해 태그를 접근하는 예시 id가 "userName"인 태그(a 태그)에 접근하여 내용을 "석..
seokbong.tistory.com
'DEV > javascript' 카테고리의 다른 글
Javascript setTimeout 함수 (0) 2022.05.02 jQuery 선택한 요소 제거, 선택한 요소 내용 제거 (0) 2022.05.02 Javascript innerText, innerHTML, textContent 차이 (0) 2022.04.28 Javascript 백틱(`, backtick) 간단 사용 설명서 (0) 2022.04.22 Javascript 텍스트 여백 제거하기 (0) 2022.04.20