끄적끄적

[기초] JQuery 문법 본문

Development/JavaScript

[기초] JQuery 문법

Go0G 2022. 2. 11. 21:14

개요

Javscript 라이브러리 중 하나로, HTML 태그 및 CSS 속성 접근에 대한 코드 단순화 가능

 

라이브러리 추가

  • 웹 서버내 구성: 직접 Jquery lib를 다운로드(압축된 lib를 사용하고자 하는 경우 "min" 사용)
  • CDN 방식: 인터넷에 연결되어 있거나 별도의 CDN 서버가 구성된 경우 사용 가능

선택자

JQuery에서 HTML를 다루기 위한 문법

  • $("[Tag]") = 태그 선택자: <div>, <body> 등
  • $(".[Class]") = Class 태그 선택자
  • $("[Tag1 Tag2]") = 태그 선택자: <div>내 <ul>라면 $("div ul")
  • $("#[ID]") = 태그 선택자

이벤트 등록

방법 1: $대상.on("이벤트 이름", "이벤트리스너");

방법 2: $대상("단축이벤트함수(이벤트리스너)");

예제

방법 1

$(document).ready(function(){
$("#btnCheck").on("click",function(){
alert("환영합니다.");
});
})
방법 2
$(document).ready(function(){
$("#btnCheck").click(function(){
alert("환영합니다.");
});
})

//HTML문서가 로드된 뒤, ID태그가 "btnCheck"인 버튼을 클릭 시 alert 동작

Reference

 

'Development > JavaScript' 카테고리의 다른 글

[기초] DOM & BOM 개념  (0) 2022.02.24
[XSS 대응] JQuery Safe Method 사용  (0) 2022.02.17
'Development/JavaScript' Related Articles more
Comments