왕진 블로그
반응형
Web Development · jQuery
jQuery 기초 —
ready · click · css · text
vanilla JS와 같은 동작을 더 짧고 간단하게
시작 오늘 분석할 코드
앞에서 본 vanilla JS와 동일한 동작을 jQuery로 다시 작성한 코드다. 라이브러리 한 줄을 추가하면 코드가 얼마나 줄어드는지 비교해 본다.
<script src="jquery-1.11.1.min.js"></script> <script> $(document).ready( function() { msg1(); $('#id1').click( function(){ msg2(); }); }); function msg1() { alert('msg1():문서로드후 자동으로 경고창을 표시합니다.'); } function msg2() { $('#id2').css('background','silver'); $('#id2').text('msg2():HTML문서 변경되었습니다.'); } </script>
실제 출력 미리보기
① 페이지 로드 직후
msg1():문서로드후 자동으로 경고창을 표시합니다.
② 버튼 클릭 후
msg2():HTML문서 변경되었습니다.
용어 핵심 키워드
$(...)jQuery 함수 — 기본 진입점
$(document).ready()DOM 준비 완료 후 콜백 실행
.click(fn)클릭 이벤트 핸들러 등록
.css(prop, val)CSS 속성 동적 적용
.text(string)요소의 텍스트 안전 변경
.html(string)HTML 통째 변경 — innerHTML과 동일
1 vanilla JS와 비교
같은 두 동작을 두 방식으로 비교해 보자.
vanilla JavaScript
<body onLoad="init()">document.getElementById('id1').addEventListener('click', ...)document.getElementById('id2').style.background = 'silver';document.getElementById('id2').textContent = '...';jQuery
$(document).ready(function() { ... });$('#id1').click(...)$('#id2').css('background','silver');$('#id2').text('...');💡 핵심 차이 — jQuery는 (1) 선택과 동작을 한 줄로 (2) 메서드 체이닝 가능 (3) 브라우저 호환성 자동 처리.
2 $(document).ready() — 두 가지 의미
$(document).ready(fn)은 두 가지 일을 동시에 한다.
- 지연 실행 — DOM이 다 로딩될 때까지 fn을 미룸
- 이벤트 등록 위치 — 그 안에서 click 핸들러를 다는 게 안전
본 코드는 ready 안에서 $('#id1').click(...)으로 핸들러를 단다. 만약 ready 밖이면 버튼 만들어지기 전에 핸들러 등록 시도 → 실패.
⚙ 축약 —
$(function() { ... })도 같은 의미. 더 짧다.3 .click() — 이벤트 핸들러 등록
$('#id1').click(콜백)은 "id가 id1인 요소를 찾아 클릭 이벤트를 걸어라"이다. HTML에 onClick 속성이 없어도 JS만으로 연결한다.
이 방식의 장점은 HTML과 JS 분리다. HTML은 구조만, JS는 동작만 — 유지보수에 유리하다.
// 본 코드 방식 — JS에서 따로 연결 $('#id1').click(function() { msg2(); }); // 짧게 — 함수 참조만 넘김 $('#id1').click(msg2); // .on() 방식 (공식 권장) $('#id1').on('click', msg2);
반응형
4 .css() vs .text() vs .html()
| 메서드 | 대상 | 예시 |
|---|---|---|
.css(p,v) |
스타일 속성 | .css('color','red') |
.text(s) |
순수 텍스트 — HTML 태그 인식 X (안전) | .text('<b>안녕</b>') → 글자 그대로 표시 |
.html(s) |
HTML — 태그가 해석됨 | .html('<b>안녕</b>') → 안녕 굵게 |
⚠ 외부 입력엔 항상 .text() — .html()로 사용자 입력을 그대로 넣으면 XSS 취약점이 된다.
5 두 줄을 한 줄로 — 체이닝
본 코드의 msg2()는 같은 #id2를 두 번 선택한다 — 비효율적이다. jQuery는 메서드를 줄줄이 이어 쓸 수 있다(체이닝).
// 비효율 (선택자 두 번 실행) $('#id2').css('background','silver'); $('#id2').text('msg2 ...'); // 체이닝 (한 번만 선택) $('#id2').css('background','silver').text('msg2 ...');
6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| jQuery script 누락 | $ is not defined |
jquery.min.js 먼저 로드 |
| ready() 밖에서 click 등록 | 버튼 못 찾음 → 동작 X | ready 안에서 등록 |
.text()로 HTML 넣기 |
태그가 글자로 그대로 보임 | HTML이면 .html() 사용 |
| 같은 선택자 반복 | 속도 저하 | 변수에 저장 또는 체이닝 |
7 현대식 — jQuery 없이
오늘날엔 jQuery 없이도 짧다. document.querySelector가 같은 일을 한다.
document.addEventListener('DOMContentLoaded', () => { alert('msg1...'); document.querySelector('#id1').addEventListener('click', () => { const el = document.querySelector('#id2'); el.style.background = 'silver'; el.textContent = 'msg2 ...'; }); });
핵심 한 줄 요약
$(document).readyDOM 준비 후 실행 — 가장 흔한 진입점
$('#id').click(fn)클릭 이벤트 등록
.css(p, v)스타일 변경 (단일 또는 객체)
.text(s)안전한 텍스트 — XSS 방지
.html(s)HTML 그대로 삽입
체이닝같은 선택자 반복 회피
Tags
#jQuery #ready #click #css #text #html #체이닝 #DOM #이벤트 #XSS #셀렉터 #JS #CSS #HTML #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
jQuery, ready, click, css, text, html, 체이닝, DOM, 이벤트, XSS, 셀렉터, JS, 자바스크립트, CSS, HTML, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| jQuery 기본 선택자 — *, tag, .class, #id 완전 정리 (0) | 2026.06.24 |
|---|---|
| jQuery 노드 함수 — length, text, remove, console.log 완전 정리 (0) | 2026.06.24 |
| JavaScript 기초 — onLoad, onClick, getElementById 완전 정리 (0) | 2026.06.24 |
| jQuery Mobile 중첩 접이식 패널 — nested collapsible 완전 정리 (0) | 2026.06.24 |
| jQuery Mobile 접이식 패널 — collapsible 완전 정리 (0) | 2026.06.24 |
댓글