jQuery는 2006년에 발표된 빠르고, 강력하며, 특징이 풍부한 자바스크립트 라이브러리입니다. HTML 문서 탐색, 이벤트 처리, 애니메이션 생성, Ajax 개발 등을 간단한 API를 통해 쉽게 할 수 있게 도와줍니다. 이 API는 여러 브라우저에서 동일하게 동작하도록 설계되었습니다.
jQuery의 주요 기능 :
HTML/DOM 조작: jQuery를 이용하면 HTML 요소를 선택하고, 콘텐츠를 변경하며, 요소를 추가/삭제하는 등의 DOM 조작을 손쉽게 수행할 수 있습니다.
CSS 조작: jQuery를 이용하면 HTML 요소의 CSS를 쉽게 조작할 수 있습니다.
HTML 이벤트 메서드: jQuery는 표준 JavaScript가 제공하는 이벤트에 추가로 사용자 정의 이벤트를 제공합니다. 이를 이용하면 웹 페이지가 사용자의 행동에 반응하도록 만들 수 있습니다.
효과와 애니메이션: jQuery는 다양한 효과와 애니메이션 기능을 제공합니다. fadeIn/fadeOut, slideUp/slideDown 등의 효과와, animate 메서드를 이용한 사용자 정의 애니메이션 등을 쉽게 만들 수 있습니다.
AJAX: jQuery는 AJAX를 이용한 서버와의 비동기 통신을 쉽게 만들 수 있도록 도와줍니다.
유틸리티 함수: jQuery는 배열과 객체를 다루는 데 유용한 유틸리티 함수를 제공합니다.
이러한 기능들을 제공하는 jQuery는 웹 개발을 더욱 간편하고 효율적으로 만들어주는 도구로, 많은 웹 개발자들에게 사랑받고 있습니다.
코드 예시 :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="myDIV" class="header">
<h2>My To Do List</h2>
<input type="text" id="myInput" placeholder="Title...">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL"></ul>
<script>
function newElement() {
var li = $("<li></li>");
var inputValue = $("#myInput").val();
var t = $(document.createTextNode(inputValue));
li.append(t);
if (inputValue === '') {
alert("You must write something!");
} else {
$("#myUL").append(li);
}
$("#myInput").val("");
var span = $("<SPAN></SPAN>");
var txt = $(document.createTextNode("\u00D7"));
span.className = "close";
span.append(txt);
li.append(span);
$(".close").each(function() {
$(this).click(function() {
var div = this.parentElement;
$(div).css('display', 'none');
});
});
}
</script>
</body>
</html>Jquery 문법 :
$(selector): $ 함수는 jQuery의 기본 함수로서, HTML 요소를 선택합니다. 예를 들어, $("#myInput")는 id가 "myInput"인 요소를 선택하고, $("li")는 모든 <li> 태그를 선택합니다.
.val(): 이 메서드는 선택한 요소의 값을 가져오거나 설정합니다. $("#myInput").val()는 id가 "myInput"인 요소의 값을 가져옵니다.
$(document.createTextNode(inputValue)): 이는 jQuery를 이용해 새로운 텍스트 노드를 생성합니다. 여기서는 사용자가 입력한 값을 텍스트 노드로 만듭니다.
.append(): 이 메서드는 선택한 요소의 마지막 자식으로 새 요소나 콘텐츠를 추가합니다. li.append(t)는 li 요소에 t를 추가합니다.
$("#myUL").append(li): 이는 li를 id가 "myUL"인 요소의 마지막 자식으로 추가합니다.
.css(): 이 메서드는 선택한 요소의 CSS 속성을 가져오거나 설정합니다. $(div).css('display', 'none')는 div 요소의 'display' 속성을 'none'으로 설정하여 요소를 숨깁니다.
.click(): 이 메서드는 선택한 요소에 클릭 이벤트를 바인드합니다. $(this).click(function() {...})는 클릭 이벤트가 발생했을 때 실행할 함수를 정의합니다.
.each(): 이 메서드는 선택한 각 요소에 대해 함수를 실행합니다. $(".close").each(function() {...})는 class가 "close"인 각 요소에 대해 함수를 실행합니다.
'Front-End > JAVASCRIPT' 카테고리의 다른 글
| [React.js] 리액트 생명주기에 대해서 (0) | 2024.02.19 |
|---|---|
| [JAVASCRIPT] map으로 for문 대체하기 (0) | 2024.02.14 |
| [JAVASCRIPT] 자바스크립트 함수에 대해서(콜백, 클로저) (0) | 2024.02.05 |
| [JAVASCRIPT] 자바스크립트 연산자에 대해서(feat ... 연산자, 스프레드/나머지 연산자) (0) | 2024.02.05 |
| [JAVASCRIPT] 자바스크립트란?, 변수 할당 주의사항 및 호이스팅 (0) | 2024.02.05 |