| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- Update
- 컨트롤러
- 테이블
- JSP
- 변수
- 함수
- post방식
- Spring
- Ajax
- 리눅스
- 배열
- order by
- 명령어
- DATE_FORMAT
- SQL
- 인라인뷰
- oracle
- option태그
- 자바스크립트
- 코테
- JS
- select
- 도커
- MySQL
- 동적
- like
- 동적테이블
- 프로그래머스
- 백틱
- JavaScript
- Today
- Total
bom's happy life
[웹 개발 2 주차] 개발일지 9 - jQuery 본문
01. jQuary란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 즉, 자바스크립트 라이브러리!
(MIT가 허용한 오픈 소스 라이선스를 이용함. 애니메이션과 플러그인 개발은 물론, 웹페이지에 상호성과 역동성을 더해줌.)
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었다.
< jQuery와 Javascript - 코드 비교해보기 >
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것! (그렇게 때문에, 쓰기 전에 "임포트"를 해야한다.)
Javascript로 길고 복잡하게 써야 하는 것을
↓
jQuery로 보다 직관적으로 쓸 수 있다. 편리하다!
02. jQuary 사용하기
# 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부른다!
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
# <head> 와 </head> 사이에 아래를 넣으면 끝!
아래코드가 다음과 같이 임포트 되어있다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
# jQuery를 사용하는 방법
css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!
css에서는 선택자로 class를 썼지요?
jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.
03. jQuary 다뤄보기
1) 자주쓰는 제이쿼리 다뤄보기
제이쿼리는 외워서 쓰는게 아니다.
예를 들어 스크롤 움직임을 감지한다거나, 화면 사이즈를 안다거나, 제이쿼리가 할 수 있는 일은 매우 많다.
그러니, 필요할 때에 필요한 기능을 구글링해서 쓰면 된다.
#url 이라는 것은 id url에다가 jQuary를 먹일건데,, 걔의 value를 넣고싶어.
위에 처럼 콘솔창에서 바꾸는 것 가능.
내가 실수한 부분!
첫번째에서 post-box앞에 #을 안붙임.
두번째에서는 '#post-box 하고 뒤에 ' 이거 안붙임
세번째는 제대로 값이 입력됨.
< 포스팅 박스 제어하기 >
< post-box를 시작부터 감춰두기 (CSS의 display:none 속성!) >
'Deveolpment Study🗂️ > Javascript' 카테고리의 다른 글
| [웹 개발 2 주차] 개발일지 11 - jQuery + Ajax의 조합 연습 (0) | 2022.05.30 |
|---|---|
| [웹 개발 2 주차] 개발일지 10 - Ajax (0) | 2022.05.30 |
| [웹 개발 2 주차] 개발일지 8 - 자바스크립트 홀짝 판별 onclick 함수만들어보기 (0) | 2022.05.25 |
| [웹 개발 1 주차] 개발일지 6 - Javascript 기초 문법 배우기(2) (0) | 2022.05.25 |
| [웹 개발 1 주차] 개발일지 5 - Javascript 기초 문법 배우기(1) (0) | 2022.05.24 |
