반응형
SMALL
기본 구문 만들기
$('선택자'), 함수(function(){
실행구문;
});
기본구문 작성할때 괄호 체크, 중괄호 체크
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제이쿼리 기본구문</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="show-btn" href="#none">보이기</a>
<a class="hide-btn" href="#none">감추기</a>
<p>
태그선택자 a를 클릭했습니다.
</p>
<!-- body 컨텐츠 넣기 -->
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
</body>
</html>
세미콜론은 넣으나 안넣으나 작동됨
$('p').css({'display':'none'});
$('.show-btn').click(function(){
$('p').css({'display':'block'});
});
$('.hide-btn').click(function(){
$('p').css({'display':'none'});
});
| 기본 구문 만들기 | |
| $('선택자').함수(function(){ $('선택자').메서드(); }); |
$('.btn').click(function(){ $('.modal').fadeIn(); }); |
제이쿼리 단어두개 붙여쓸때 2번째 단어 첫글자 대문자로 작성
| 선택자 종류 | 필수 함수 종류 | 필수 메서드 종류 |
| CSS 클래스 선택자 CSS 아이디 선택자 CSS 태그 선택자 this |
click mouseenter mouseleave |
slideDown() slideUp() stop() show() hide() fadeIn() fadeout() addClass() removeClass() children() siblings() |
와우 제이쿼리 핵심 이론 선택자, 필수 함수, 필수 메서드 종류 정리해보았다.
생각보다 외울게 많다!
반응형
LIST
'학 습 일 지 2 0 2 2' 카테고리의 다른 글
| 제이쿼리 - 메서드 3가지 종류 (0) | 2022.08.06 |
|---|---|
| 웹디자인 기능사 제이쿼리 필수핵심이론 - 함수 (0) | 2022.08.04 |
| 코딩웍스 제이쿼리 jQuery : 시작하기(폴더구조, 링크방법) (0) | 2022.08.02 |
| 코딩웍스 인강 : 가상클래스 만들기 nth-child, nth-of-type (0) | 2022.08.01 |
| 코딩웍스 인강 : 마우스 오버 이펙트 hover, transition (0) | 2022.08.01 |
