모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다.
jQuery는 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리이다. 2006년 1월 존 레식이 발표했고 무료로 사용가능한 오픈소스 라이브러이이다.
jQuery의 기능은 다음과 같다.
- 문서 객체 모델과 관련된 처리를 쉽게 구현
- 일관된 이벤트 연결을 쉽게 구현
- 시각적 효과를 쉽게 구현
- Ajax 애플리케이션을 쉽게 개발
jQuery를 사용한 모든 웹페이지는 $(document).ready() 로 시작한다.
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script> /* $(document).ready() */ $(document).ready(function (){ }); </script> </head> <body> </body> </html> | cs |
복수 개의 이벤트 연결
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 31 32 33 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script> /* $(document).ready() */ $(document).ready(function (){ alert('1'); }); $(document).ready(function (){ alert('2'); }); $(document).ready(function (){ alert('3'); }); </script> </head> <body> </body> </html> | cs |
선택자의 종류
전체선택자 : * 표기
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script> /* $(document).ready() */ $(document).ready(function (){ $('*').css('color','red'); }); </script> </head> <body> <h1>hello jQuery</h1> </body> </html> | cs |
태그선택자 : 특정한 태그를 선택하는 선택자
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 31 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script> /* $(document).ready() */ $(document).ready(function (){ $('h1, p').css('color','blue'); }); </script> </head> <body> <h1>hello jQuery</h1> <p>hello jQuery</p> <h1>hello jQuery2</h1> <p>hello jQuery2</p> </body> </html> | cs |
아이디선택자 : 특정 id 속성이 있는 문서 객체를 선택하는 선택자
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 31 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script> /* $(document).ready() */ $(document).ready(function (){ $('#hello1, #hello2').css('color','blue'); }); </script> </head> <body> <h1 id="hello1">hello jQuery</h1> <p>hello jQuery</p> <h1 id="hello2">hello jQuery2</h1> <p>hello jQuery2</p> </body> </html> | cs |
클래스선택자
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 31 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script> /* $(document).ready() */ $(document).ready(function (){ $('.hello1').css('color','blue'); }); </script> </head> <body> <h1 class="hello1">hello jQuery</h1> <p class="hello1 select">hello jQuery</p> <h1 class="hello1">hello jQuery2</h1> <p>hello jQuery2</p> </body> </html> | cs |
퇴사 관련 이야기들을 모아 책으로 출판했습니다.
아래 링크에서 전체 목차를 읽어보세요!
대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659
아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.
http://www.bookk.co.kr/community/postscript
'문돌이의 IT > jQuery' 카테고리의 다른 글
| 제이쿼리 횡단탐색(jQuery Traversing) 공부 정리 (0) | 2018.09.05 |
|---|---|
| jQuery 기본(속성선택자 필터선택자) (0) | 2017.10.21 |
| jQuery contains(), has() Selector (0) | 2017.08.28 |
| jQuery AJAX(2) get() 메소드, post() 메소드 (2) | 2017.08.26 |
| jQuery AJAX (1) - load()메소드 (0) | 2017.08.25 |