왕진 블로그
반응형
Web Development · jQuery · JavaScript
jQuery + JavaScript 기초
선택자 · DOM 조작 · 입력 타입 완전 정리
$ 한 글자로 끝나는 jQuery, 똑같은 일을 하는 vanilla JS
시작 jQuery는 vanilla JS의 단축어
JavaScript로 document.getElementById('id2').innerHTML = '...'를 쓰는 것과 jQuery로 $('#id2').html('...')을 쓰는 것은 동일한 일을 한다. 다만 jQuery는 훨씬 짧고 일관성 있게 표현된다. 이번엔 두 표기를 나란히 비교하면서 핵심 개념(document.ready, 선택자, DOM 변경)을 정리한다.
용어 핵심 키워드
$jQuery 함수의 별칭
$(document).ready()DOM 로드 후 실행
$('selector')CSS 선택자로 요소 선택
.css()CSS 속성 변경
.text() / .html()텍스트 / HTML 변경
.click()클릭 이벤트 핸들러
getElementByIdvanilla JS의 id 선택
innerHTMLvanilla JS의 .html() 대응
onLoad / onClickHTML 인라인 이벤트 속성
type=password입력값 가림
data-role="slider"select → 토글 스위치
1 JavaScript vs jQuery — 같은 일, 다른 표기
JavaScript — body의 onLoad와 onClick
<!-- HTML --> <body onLoad="init();"> <button onClick="msg2();">선택하면 메시지를 변경합니다.</button> <div id="id2">메시지 :</div> </body> // JavaScript function init() { msg1(); } function msg1() { alert('문서 로드 후 자동 실행'); } function msg2() { document.getElementById('id2').innerHTML = '<div style="background:silver">변경됨</div>'; }
jQuery — 같은 일을 더 짧게
$(document).ready(function() { msg1(); // 문서 준비 시 자동 실행 $('#id1').click(function() { // 버튼 클릭 시 msg2(); }); }); function msg2() { $('#id2').css('background', 'silver'); $('#id2').text('jQuery로 변경됨'); }
| JavaScript | jQuery | 설명 |
|---|---|---|
onLoad="init()" |
$(document).ready(...) |
문서 로드 후 실행 |
onClick="msg2()" |
$('#id1').click(...) |
클릭 이벤트 |
document.getElementById('x') |
$('#x') |
id로 선택 |
.innerHTML = '...' |
.html('...') |
HTML 교체 |
.style.background = '...' |
.css('background', '...') |
CSS 변경 |
💡 관심사 분리 — vanilla JS 예시처럼 HTML에
onClick을 직접 쓰는 방식은 요즘 권장하지 않는다. JavaScript는 JS 파일에, HTML은 구조에만 집중하는 게 좋다. jQuery의 $().click() 방식이 그 예.2 $(document).ready — 왜 필요한가
HTML이 위에서 아래로 파싱될 때, <script>가 위에 있으면 아직 로드되지 않은 DOM에 접근하게 된다. $(document).ready()는 "DOM이 다 준비되면 그 때 실행"하라는 신호.
$(document).ready(function() { // 여기서는 모든 요소에 안전하게 접근 가능 $('h1').text('안녕'); }); // 축약형 — 동일한 의미 $(function() { $('h1').text('안녕'); });
⚠ onLoad와의 차이 —
window.onload는 이미지·iframe까지 모두 로드돼야 실행. $(document).ready는 DOM만 준비되면 실행 → 더 빠름.3 jQuery 선택자 — CSS와 동일
jQuery 선택자는 CSS 선택자와 100% 같다. CSS를 쓸 줄 알면 jQuery 선택자도 쓸 줄 안다.
$('*') .css('border-style', 'hidden'); // (1) 전체 요소 $('p') .css('border', 'dashed thick red'); // (2) 모든 p $('.class1') .css('border', 'solid thick green'); // (3) class="class1" $('#p3') .css({ // (4) id="p3" 'background-color': 'purple', 'color': 'white' });
선택자 매칭 시각화
div#div0
└ div#div1
└ span#span1, span#span2, span#span3, span(no id)
└ div#div2
└ p#p1
└ p#p2 .class1 .class2
└ p#p3 .class1 ← (4) 보라+흰글씨
└ p#p4
└ div#div3 .class2
└ p, p(empty)
$('p')
모든 p 태그 = 빨간 점선$('.class1')
p#p2, p#p3 = 초록 실선$('#p3')
p#p3 하나 = 보라 배경 + 흰 글씨$('*')
모든 요소 = border 숨김📌 적용 순서 — 위에서 아래로 적용된다. 마지막에 적용된 것이 우선.
$('*') → $('p') → $('.class1') → $('#p3') 순으로 점점 구체적인 선택이 덮어쓴다.4 jQuery 핵심 함수 — length · text · remove
$('div').click(function() { console.log("div 노드 개수: " + $('div').length); console.log("h1 노드 개수: " + $('h1').length); console.log("h1 텍스트: " + $('h1').text()); console.log("id 가진 요소: " + $('*[id]').length); $(this).remove(); // 클릭한 div 제거 $('#id2').text('실행 결과'); });
실행 결과 콘솔
▸div 노드 개수: 1
▸h1 노드 개수: 2
▸h1 텍스트 노드 내용: jQuery 클릭하세요
▸id 가진 요소 개수: 2
// remove() 실행 후
▸div 노드 개수: 0 // div 사라짐
▸h1 노드 개수: 1 // 안에 있던 h1도 같이
▸h1 텍스트: jQuery 실행결과입니다.
▸id 가진 요소: 1
| jQuery 함수 | 역할 |
|---|---|
.length |
매칭된 요소 개수 |
.text() |
텍스트만 가져오기/설정 (HTML 제거) |
.html('<b>...</b>') |
HTML 포함 가져오기/설정 |
.css('속성', '값') |
CSS 1개 변경 |
.css({속성:값, ...}) |
CSS 여러 개 변경 |
.click(fn) |
클릭 이벤트 |
.remove() |
요소 자체 제거 |
$(this) |
이벤트가 발생한 그 요소 |
반응형
5 .text() vs .html()
.text('<b>안녕</b>')
- 화면에 그대로 <b>안녕</b>이라고 표시
- HTML 태그를 텍스트로 인식
- XSS 공격 방어에 유리
.html('<b>안녕</b>')
- 화면에 안녕 (굵은 글씨)로 표시
- HTML로 해석
- 외부 입력값을 그대로 넣으면 위험
6 HTML5 input 타입 — 모바일 키보드 자동 전환
jQuery Mobile은 HTML5의 input type을 그대로 인식하고, 모바일 키보드를 자동으로 적합한 형태로 띄운다 — 숫자 키패드, 이메일 키보드 등.
<input type="password" placeholder="패스워드를 입력하세요"> <input type="number" placeholder="숫자를 입력하세요"> <input type="email" placeholder="이메일을 입력하세요"> <input type="tel" placeholder="전화번호를 입력하세요"> <input type="url" placeholder="URL을 입력하세요"> <input type="search" placeholder="키워드를 입력하세요">
| type | 모바일 키보드 | 특수 동작 |
|---|---|---|
password |
일반 | 입력 글자 ●로 가림 |
number |
숫자 키패드 | 숫자만 허용 |
email |
@ 키 표시 | 형식 자동 검증 |
tel |
다이얼 패드 | 형식 검증 없음 |
url |
.com 키 표시 | URL 검증 |
search |
일반 + ✕ 클리어 버튼 | 검색 의도 표시 |
type별 input 미리보기
📌
class="ui-hidden-accessible" — 화면에는 안 보이지만 스크린리더는 읽을 수 있다. 검색창에 라벨을 시각적으로 안 보여주고 싶을 때 접근성을 챙기는 패턴.7 textarea — 여러 줄 입력
<div data-role="fieldcontain"> <label for="txtarea1">도시설명</label> <textarea cols="25" rows="5" id="txtarea1"></textarea> </div>
cols × rows 크기의 입력창. 자동 줄바꿈 지원
8 Switch — select를 토글 스위치로
iOS 스타일의 온/오프 스위치를 만들려면, option 2개짜리 select에 data-role="slider"를 주면 된다. jQuery Mobile이 자동으로 토글 UI로 변환.
<select id="gender1" data-role="slider"> <option value="male">남자</option> <option value="female">여자</option> </select>
두 옵션 = 양쪽 라벨이 있는 토글 스위치
남자 여자
※ select + data-role="slider" 의 의미
- 본질은 여전히
select— 폼 제출 시 value가 그대로 전송됨 - UI만 토글로 보이게 변환 — 모바일 친화적
- option이 정확히 2개일 때만 동작
9 자주 하는 실수
| 증상 | 원인 | 해결 |
|---|---|---|
| $ is not defined | jQuery 라이브러리 로드 전에 사용 | script 순서를 jQuery 본체 → 내 코드 순으로 |
| $('#id')에서 null 반환 | DOM이 아직 준비 안 됨 | $(document).ready로 감싸기 |
| onClick과 $().click() 둘 다 실행됨 | 둘 다 등록 | 한 가지 방식만 사용 |
| .html('<script>...</script>')가 실행 안 됨 | 보안상 자동 무시 | 외부 함수로 빼서 직접 호출 |
| $('.class')가 1개만 반환 | document.getElementsByClassName와 헷갈림 | jQuery는 모든 매칭 요소 컬렉션 반환 |
| 토글 스위치가 select처럼 보임 | data-role="slider" 누락 또는 option 3개 이상 | 속성 추가 + option 2개로 |
10 핵심 한 줄 요약
JQUERY · JAVASCRIPT BASICS
DOM 준비 대기$(document).ready(fn) 또는 $(fn)
선택자$('*'), $('p'), $('.class'), $('#id') — CSS와 동일
CSS 변경.css('속성', '값') / .css({객체})
텍스트/HTML.text() = 안전 / .html() = HTML 해석
클릭 이벤트$('#id').click(function() { ... })
현재 요소$(this) — 이벤트 핸들러 안에서
개수 / 제거.length / .remove()
input 타입password/number/email/tel/url/search
토글 스위치select(option 2) + data-role="slider"
Tags
#jQuery #JavaScript #documentReady #selector #getElementById #innerHTML #cssMethod #inputType #switchInput #textarea #DOM조작 #티스토리
▼ 티스토리 태그 입력란 복사용
jQuery, JavaScript, documentReady, selector, getElementById, innerHTML, cssMethod, inputType, switchInput, textarea, DOM조작, 티스토리
반응형
'php' 카테고리의 다른 글
| jQuery Chart 심화 — 막대 · 버블 · 파이 + Native Form 완전 정리 (0) | 2026.06.11 |
|---|---|
| jQuery 효과 · 이벤트 · jqPlot 차트 완전 정리 (0) | 2026.06.10 |
| jQuery Mobile — Bar · Form · Select · Collapsible 완전 정리 (0) | 2026.06.10 |
| jQuery Mobile — Listview 심화 · 아이콘 버튼 · 페이지 탭 완전 정리 (0) | 2026.06.10 |
| jQuery Mobile — Button · Panel · Listview · Column Toggle 완전 정리 (0) | 2026.06.10 |
댓글