몽땅뚝딱 개발자

[jQuery] 제이쿼리 :: (1) 개념 및 기본 선택자 본문

Development/Javascript

[jQuery] 제이쿼리 :: (1) 개념 및 기본 선택자

레오나르도 다빈츠 2021. 12. 8. 11:32

👉🏻 (1) 개념 및 기본 선택자

(2) 문서 객체 조작(DOM Control)

(3) 이벤트(Event)

(4) 효과(Effects)

 

◽ 제이쿼리란?

자바스크립트의 가장 대표적인 라이브러리 언어이다.

다양한 애니메이션 효과의 구현을 위한 기능적인 함수들이 많이 추가되어 있다.

 

◽ 실행함수 작성

제이쿼리는 <body>보다 위에서 import(삽입)되기 때문에 문서의 모든 요소들이 로딩된 이후에 요소 선택자를 사용할 수 있다.

따라서 먼저 실행함수를 작성하여야 한다.

 

// 기본 문법
$(document).ready(function() {
	...실행문
});

// 간단하게 줄여쓸 수 있다.
$(function() {
	...실행문
});

 

◽ 기본 선택자 및 속성(Selector & Attribute)

선택자 설명
$("*") 전체 요소 선택
$("태그명") 태그명 요소 선택
$("#아이디명") 아이디명으로 선택
$(".클래스명") 클래스로 선택
$("태그명1 태그명2") 하위 요소 선택
$("태그명1>태그명2") 자식 요소 선택
$("선택요소").parent() 선택요소의 부모 요소 선택
$("선택요소").children() 선택요소의 자식 요소들 선택
$("선택요소").prev() 선택요소의 형제 요소 중 이전 요소 선택
$("선택요소").next() 선택요소의 형제 요소 중 다음 요소 선택
$("선택요소").sibilings("태그명") 선택요소를 기준으로 모든 형제 요소 선택
$(":종류") 폼의 input 요소 중 종류(type)가 일치하는 요소 선택 
// 예시
// 이렇게 하나의 선택자에 대해 메서드를 여러 차례 이어서 작성하는 적용 기법을 '체이닝 기법'이라고 한다.
$(".obj5").parent().css("border", "solid 1px black");
$(".obj6").siblings("li").css("text-align", "center");

 

 

출처

김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020)

 

 

 

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

 

 

저작자표시

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

[jQuery] 제이쿼리 :: (3) 이벤트(Event)  (0) 2021.12.09
[jQuery] 제이쿼리 :: (2) 문서 객체 조작(DOM Control)  (0) 2021.12.08
[Javascript] null과 undefined의 차이 / 검출하는 방법  (0) 2021.11.04
[Javascript] 마우스 오버 시 포인터 변경하기 / a href="javascript:;  (0) 2021.07.26
[Javascript] 실행 콘텍스트(Execution Context)  (0) 2021.07.07
'Development/Javascript' Related Articles more
Comments

티스토리툴바