2021. 9. 14. 23:52ㆍ제이쿼리
제이쿼리란?
자바스크립트에서 여러 명령을 함수화시켜 만든 함수의 라이브러리 형태의 언어이다.
=> 작성 형태 : 선택자.명령();
1. 제이쿼리 적용 위치
기본적으로 위에서부터 아래로 순서대로 태그를 읽기때문에
style 시트를 먼저 적은 후 제이쿼리 라이브러리를 연결해야 한다.
2. 제이쿼리 연결 방법
외부 스크립트 파일을 연결한 스크립트 태그 내부에는 어떤 내용이든 삽입 하지 않아야 한다.
제이쿼리 라이브러리가 스크립트 제일 위에 있어야 한다.
head 안에서 스타일 시트 밑에 작성한다.
<script src="파일경로.파일명"</script>
ex)
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>제이쿼리</title> <style> *{ margin: 0; padding: 0;} </style> <script src="../jquery-3.6.0.js"></script> // 제이쿼리 연결 방법 <script></script> |
3. 작성 기본형식
- 제이쿼리를 사용할 때 반드시 기본틀 안에서 작성 해야 한다.
- 자바스크립트의 함수 형태를 간단한 명령으로 호출하여서 사용한다.
- 기본형식 :
$(document).ready(function(){
내용
});
4. 명령어 종류
$(선택자).명령(형태);
- 이벤트형태 : fucntion(){} => ex) $(선택자).function(){};
- 속성형태 : {} => ex) $(선택자).css({});
- 단순한 명령, 시간
5. 표기법
- '-' (하이픈) 자동인식이 되지 않고 문자로 인식한다.
=> 하이픈 뒤 알파벳을 대문자로 작성한다.
ex) background-color => backgroundColor
line-height => lineHeight
6. 선택자
- 기본 css 선택자를 모두 활용할 수 있다.
=> 태그 선택자, 아이디 선택자, 클래스 선택자, 구조 선택자
- 작업자가 삽입한 기존 css선택자는 따옴표 안에서 작성하여야 한다.
ex) body안에 id가 box인 div가 있고, box를 제이쿼리에서 선택하려고 할 때
=> $('#box').css({
width: '100px'',
height: '300px'
});
- document, window, this는 제이쿼리에서 이미 만들어져 있는 선택자기때문에 따옴표를 넣을 필요가 없다.
ex) $(document).ready(function(){
내용
});
| 선택자 | 작성방법 |
| 태그 선택자 | $('태그선택자').명령(); |
| 아이디 선택자 | $('#아이디명').명령(); |
| 클래스 선택자 | $('.클래스명').명령(); |
| 구조 선택자 | $('선택자:nth-child(순서)').명령(); |
| 제이쿼리 기본 제공 선택자 | $(window).명령(); $(document).명령(); $(this).명령(); |
7. 스타일 속성을 활용할 수 있는 명령
- .css(); => 스타일 속성 활용 명령
- 형태 :
$(선택자).css({
속성: 속성값,
속성: 속성값
});
=> 다중 속성 작성시 속성: 속성값을 적고 다음 속성 전에 ','(쉼표)를 붙여야 한다.
'제이쿼리' 카테고리의 다른 글
| [jQuery] 이벤트 개념과 마우스 이벤트 종류 (hover, mouseenter, mouseleaver, mouseover, mouseout) (0) | 2021.09.28 |
|---|---|
| [jQuery] window 선택자 / 브라우저 창 크기 구하기 (0) | 2021.09.15 |