- 제이쿼리 : 자바스크립트 라이브러리
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
다운로드 시 production 버전이 소스압축된 경량화/최소화 버전 이다
다운로드 받고 스크립트 폴더 안에 넣기
- 폴더구조 (예시)
- 링크
제이쿼리 오픈소스 파일이 먼저 링크되어야한다.
1. body 태그 맨뒤
body맨 끝이라서 당연히 html문서를 다 받아왔다고 생각함
$('.open-modal').click()
계층구조가 하나 줄어든다.
<body>
<script src="script/제이쿼리오픈소스.js"></script>
<script src="script/custom.js"></script>
</body>
2. head 사이
head사이에 js파일을 링크했다면 $(function() {} 이 필요하다.
$(function() {
$('.open-modal').click()
여기서 펑션이란
Document ready , html문서를 다 받아왔으면 그때 이 구문을 실행해라 라는 뜻이다.
})
<head>
<title>Document</title>
<script src="script/제이쿼리오픈소스.js"></script>
<script src="script/custom.js"></script>
</head>
- 제이쿼리 기본구문
$('css 선택자').함수(function() {
실행구문;
});
// css()메서드는 사용하기보다는 css파일에 직접 작성하는 것이 좋다.
// 페이지 상의 모든 <p> 선택
$('p')
// 클래스 선택자 : 클래스명이 btn인 요소를 선택
$('.btn')
// 아이디 선택자 : id가 test인 요소를 선택
$('#test')
'Web > Java Script' 카테고리의 다른 글
| tab menu (with jquery) #1 프로토타입 (0) | 2021.07.15 |
|---|---|
| js 변수와 조건문 - 20세 체크, 별점 주기(with jquery) (0) | 2021.07.14 |
| 제이쿼리(jQuery) 시작하기 #4 addClass(), children() (0) | 2021.07.10 |
| 제이쿼리(jQuery) 시작하기 #3 효과 메서드 (slideDown|Up, fadeIn|Out) (0) | 2021.07.10 |
| 제이쿼리(jQuery) 시작하기 #2 click, mouse enter 함수 (0) | 2021.07.09 |