jQuery
-
요소들을 선택하는 강력한 방법을 제공하고, 선택된 요소들을
효율적으로 제어할 수 있게 해주는 자바스크립트 라이브러리 -
자바스크립트 라이브러리이므로, 자바스크립트 언어에 대해 기초 지식이 필요하다.
또한, HTML 요소를 선택하고, CSS 스타일을 변경하는 등 HTML과 CSS와도 많은
연관이 있습니다.
-
제이쿼리란 오픈 소스 기반의 자바스크립트 라이브러리입니다.
-
제이쿼리는 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해준다.
또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나
연출을 적용할 수 있습니다.
제이쿼리의 장점
-
제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다.
-
HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다.
-
애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다.
-
같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다.
-
다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다.
-
오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있습니다.
라이브러리 추가
jQuery 기본 문법
-
$("선택자")
아이디 선택자 : $("#아이디명")
태그 선택자 : $("태그명")
클래스 선택자 : $(".클래스명")
속성 선택자 : $("[속성명=속성값]")
ex) $("[type=radio]") : type속성값이 radio인것들을 선택
태그의 값
- $("선택자").val() : value 속성의 값을 가져오기
- $("선택자").val("바꿀값") : value 속성의 값을 바꾸기
태그의 내부 문자열
- $("선택자").text() : 태그 내부의 텍스트 내용
- $("선택자").text("바꿀값") : 태그 내부의 텍스트 내용을 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1_jQuery</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" class="num" value="1">
<br>
<input type="text" class="num" value="2">
<br>
<input type="text" class="num" value="3">
<br>
<input type="button" value="변경(바닐라)" onclick="change()">
<input type="button" value="변경(제이쿼리)" onclick="$('.num').css('border-color','red')">
</body>
<script>
function change() {
let tags = document.getElementsByClassName("num");
for(let tag of tags) {
tag.style.borderColor = "red";
}
}
</script>
</html>
태그의 스타일
$("선택자").css("속성명","속성값") : 태그의 스타일 변경
반복문
$("선택자").each(
function(){
선택자로 선택된 요소를 하나씩 꺼내오며 익명함수 호출
$(this) 선택된 요소중 한개(jQuery 객체)
}); <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2_jQuery2</title>
<script src="https://jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="students">
<li>안호진</li>
<li>윤서영</li>
<li>정규민</li>
<li id="hate">신민석</li>
</ul>
</body>
<script>
// jquery에서 제공하고 있는 반복문을 사용해야 하는데
// 그것이 each라는 메소드이다.
// each앞에 있는요소가 여러 요소면 그 요소들을 하나씩 내부적으로 넘겨오면서
// 처리하는 function을 호출한다.
$(".students li").each(
function(){
// $(this) : 앞에서 꺼내오는 li 태그 객체
// 제이쿼리객체.attr("속성명") : 해당 속성의 값
if($(this).attr("id") != "hate"){
console.log($(this).text());
}
});
$(".students li").each((index,item) =>{
// index : 몇번째 반복인지
// item : 앞에서 꺼내오는 li 태그 객체(바닐라js 객체)
console.log(index+"번째의 내용 : " +item.innerHTML);
})
// $.each(반복자, 함수) : 반복자 안에서 하나씩 요소를 꺼내오며 함수 호출
$.each([10,20,30,40,50],function(index,item){
console.log(index +"번째의 내용 : " +item);
})
</script>
</html>jQuery를 사용하면 순수 Javascript에 비해 속도가 느려진다. 하지만 간결한 문법으로 인해 개발속도 증가와 처리비용 감소에 대한 장점이 있다.
따라서 까다로운 UI 작업의 경우 가벼운 DOM 스크립트를 이용하고, 적절한 상황에 맞춰서 둘 다 사용할 줄 알아야 한다.
탬플릿
