제이쿼리 기초, 제이쿼리 이미지 슬라이더 기초

# 제이쿼리 기초

## 제이쿼리 불러오기

// 제이쿼리 불러오기
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

See the Pen 제이쿼리 불러오기 by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

 

## 제이쿼리 슬라이더의 사이드 버튼에 클릭이벤트 설정

See the Pen 슬라이더의 사이드 버튼에 클릭이벤트 설정 by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

 

## 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정

See the Pen 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정 by dlagusgh1 (@dlagusgh1) on CodePen

## 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정(사단장 변수 없이)

See the Pen 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정(사단장 변수 없이) by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

 

## 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정(변수 없이)

See the Pen 제이쿼리 엘리먼트 3개 생성하고 각각 클릭하면 서로 다른 경고창 내용이 나오도록 설정(변수 없이) by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

 

## 제이쿼리 엘리먼트 3개 만들고 각각을 클릭하면 서로 다른 디자인 변화가 일어나도록 구현

See the Pen 제이쿼리 엘리먼트 3개 만들고 각각을 클릭하면 서로 다른 디자인 변화가 일어나도록 구현 by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

 

## 제이쿼리 버튼을 클릭하면 반응하는 엘리먼트 생성

See the Pen 제이쿼리 버튼을 클릭하면 반응하는 엘리먼트 생성 by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

## 제이쿼리 버튼 2개 만들고 각각 다르게 반응하게 구현

See the Pen 제이쿼리 버튼 2개 만들고 각각 다르게 반응하게 구현 by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

## 제이쿼리 index, prev, next

See the Pen 제이쿼리 index, prev, next by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

 

# 제이쿼리 이미지 슬라이더 기초

## 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더 배경색 변경되도록 구현

### 코드1

• var $클릭된_버튼 = $(this);
• var $btns = 클릭된_버튼.parent();
• var $슬라이더 = $btns.parent();
• 슬라이더.css('background-color',

See the Pen 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더 배경색 변경되도록 구현 by dlagusgh1 (@dlagusgh1) on CodePen.

 

### 코드2

• var $클릭된_버튼 = $(this);
• var $슬라이더 = $클릭된_버튼.parent().parent();
• $슬라이더.css('background-color', 'pink');
• See the Pen 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더 배경색 변경되도록 구현2 by dlagusgh1 (@dlagusgh1) on CodePen.

 

### 코드3

• var $슬라이더 = $(this).parent().parent();
• 슬라이더.css('background-color',);

See the Pen 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더 배경색 변경되도록 구현3 by dlagusgh1 (@dlagusgh1) on CodePen.

### 코드4

• $(this).parent().parent().css('background-color', 'pink');

See the Pen 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더 배경색 변경되도록 구현4 by dlagusgh1 (@dlagusgh1) on CodePen.

### 코드5 

• var $슬랑이더 = $(this).closest('.slider');
• 슬라이더.css('background-color',);
• $(this).closest('.slider') : this의 조상 중 slider 클래스를 가지고 있는 것으로만 추리고, 그 중 this와 가장 가까운 단 한명만 검색한다.

See the Pen 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더 배경색 변경되도록 구현5 by dlagusgh1 (@dlagusgh1) on CodePen.

 

## 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더에 속한 슬라이드가 삭제되도록 구현

### 코드1

See the Pen 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더에 속한 슬라이드가 삭제되도록 구현1 by dlagusgh1 (@dlagusgh1) on CodePen.

## 코드2

See the Pen 제이쿼리 좌, 우 버튼 클릭 시 관련 슬라이더에 속한 슬라이드가 삭제되도록 구현2 by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

## 제이쿼리 좌, 우 버튼을 클릭 했을 때 관련된 슬라이더만 작동되도록 구현

See the Pen 제이쿼리 좌, 우 버튼을 클릭 했을 때 관련된 슬라이더만 작동되도록 구현 by dlagusgh1 (@dlagusgh1) on CodePen.

 

##