Preface
JSP 공부를 하던 중 jQuery에 대한 지식을 요구하는 부분이 있어 생활코딩에서 제공하는 jQuery 강의를 찾아봤다.
기본적인 사용 방법 부분만을 시청했고, 추후 jQuery를 제대로 사용해야 할 필요성이 느껴지면 그때 공부할 계획이다.
- jQuery의 기본 문법
1) $ 대신 jQuery를 입력할 수 있다.
2) 제어대상엔 클래스, ID 선택자 등이 위치한다.
3) 메소드 뒤에 도트 연산자로 여러개의 메소드를 연결할 수 있다.
$(제어대상).method1().method2();
- jQuery 사용 방법
1) jquery 사이트의 소스코드를 사용
→ https://releases.jquery.com/
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
releases.jquery.com
2) 구글에서 제공하는 jquery 라이브러리를 사용
→ https://developers.google.com/speed/libraries?hl=ko#jquery
호스팅된 라이브러리 | Hosted Libraries | Google for Developers
가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다.
developers.google.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<script src="소스코드 경로"></script>
<!-- head 태그, body 태그 중 원하는 위치에 삽입할 수 있다. -->
<script>
jQuery(document).ready(function($) {
$('body').prepend('<h1>Hello</h1>');
});
</script>
</body>
</html>
- Chat-GPT로부터 얻은 jQuery의 기본적인 기능
1. 선택자(Selectors): CSS 선택자를 사용하여 HTML 요소를 선택합니다.
예: $('element'), $('.class'), $('#id')
2. 이벤트 핸들링(Event Handling): 이벤트를 감지하고 처리하기 위해 on() 메서드를 사용합니다.
예: $('button').on('click', function() { ... })
3. DOM 조작(DOM Manipulation): 선택한 요소를 조작하여 HTML 내용을 변경합니다.
예: $('element').html('New content'), $('element').addClass('class-name')
4. 애니메이션(Animation): 요소를 애니메이션 효과와 함께 보여주거나 숨깁니다.
예: $('element').fadeIn(), $('element').slideUp()
5. Ajax 요청: 서버와의 비동기 통신을 수행하기 위해 ajax() 메서드를 사용합니다.
예: $.ajax({ ... })
6. 이펙트(Effects): 요소에 다양한 시각적 효과를 적용합니다.
예: $('element').hide(), $('element').toggle()
7. 애니메이션 큐(Animation Queue): 애니메이션을 순차적으로 실행하기 위해 queue()와 dequeue() 메서드를 사용합니다. 예: $('element').queue(function() { … }), $('element').dequeue()
8. 플러그인 사용(Plugin Usage): 다양한 jQuery 플러그인을 사용하여 기능을 확장할 수 있습니다.
예: $('element').datepicker(), $('element').slick()
9. 체인 메서드(Chaining): 여러 개의 메서드를 연결하여 한 줄에 여러 작업을 수행할 수 있습니다.
예: $('element').addClass('class').hide().fadeIn()
10. 콜백 함수(Callback Functions): 비동기 작업이 완료되거나 이벤트가 발생했을 때 실행되는 함수를 지정합니다.
예: $('element').fadeOut(500, function() { … })
'Web Front > JavaScript' 카테고리의 다른 글
| Chat-GPT 질의응답 모음 (0) | 2023.07.08 |
|---|---|
| jQuery Ajax (2) | 2023.06.04 |
| Ajax (0) | 2023.06.03 |
| WEB2 - JavaScript (0) | 2023.05.25 |
댓글