개발나라 스용공주

[JavaScript] jQuery 기본 구조 설명 본문

WEB/JavaScript

[JavaScript] jQuery 기본 구조 설명

스용공주 2024. 10. 26. 05:38
728x90
728x90

이번 글은 jQuery의 기본 구조에 대한 설명글이다.

 

[ jQuery의 기본 구조 ]

 

1) js 파일 삽입 위치

jQuery를 사용하기 위해서는 js파일을 html본문에 넣어줘야한다.

아래 코드와 같이 <body>의 맨 아래 넣어주면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- css는 <head>사이에 <link>를 사용함 -->
</head>
<body>
    
    <!-- js는 <body>가 끝나기 전 위에 넣어주고 <script>를 사용함 -->
    <script src="script/jqery-1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>

 

 

2) 기본 형태

기본 형태는 아래 이미지와 같다.

항상 시작은 $로 하며 선택자의 경우 css, 태그, 아이디, 클래스, this 등이 위치할 수 있다.

함수는 해당 선택자를 누를지 마우스를 올릴지 등에 대한 것으로 마우스의 대표적인 이벤트로는 click이 있다.

function() 이하의 부분에는 위에서 설명한 함수 부분과 동일한 신호가 들어왔을 때 실행되어야할 실행 구문이 오게 된다.

 

 

실행구문은 $('선택요소').메서드();의 형태로 이루어져있다.

이때 선택요소는 메서드()가 실행될 부분이다.

=> 예제 해석 : div라는 태그를 클릭(click) 시 a 태그가 사라진다(hide())

 

메서드의 기능은 보이고 감추고 등을 하는 '이펙트(effect) 기능'과 클래스를 넣고 지울 수 있는 '클래스 제어 기능'과 선택한 요소의 부모, 자식 등을 찾는 '요소 탐색의 기능'을 한다.

 

< 메서드 종류 >

https://hwangseoyoung.tistory.com/165

 

[JavaScript] jQuery 메서드 종류와 이론 설명

이번 글은 jQuery의 종류와 이론에 대한 설명글이다. [ 메서드 기능 ]메서드 종류메서드 기능이펙트 (effect)요소를 보거나 감추거나 등클래스 제어클래스를 넣거나 지우거나 등요소 탐색선택한 요

hwangseoyoung.tistory.com

 

 

728x90
728x90

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

[JavaScript] 비주얼스튜디오 코드(Visual Studio Code) - 유용한 플러그인 설치  (0) 2024.11.21
[JavaScript] jQuery 메서드 종류와 이론 설명  (0) 2024.10.26
[생활코딩] JavaScript 왕기초 12장 - Visual Studio Code / 객체 (Object) 데이터 모두 가져오기  (1) 2024.09.10
[생활코딩] JavaScript 왕기초 11장 - Visual Studio Code / 객체 (Object)  (1) 2024.09.04
[생활코딩] JavaScript 왕기초 10장 - Visual Studio Code / 함수의 활용 - 리팩토링에 함수 이용하기  (3) 2024.09.02
'WEB/JavaScript' Related Articles more
Comments