jQuery의 기본 구문과 선택자
기본 구문
$기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다.
선택자를 이용하여 원하는 HTML요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.
jQuery를 사용하기 위해서는 먼저 jQuery객체를 생성해야 한다. 생성된 jQuery객체는 다양하나 메소드를 가지고 jQuery를 학습하는 것은 대체로 이 다양한 메소드들의 사용법을 익히는 것이다.
✔️$() 함수
$() 함수는 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성해주는 역할을 한다.
$() // jQuery() 함수의 축약형
jQuery()함수는 전달되는 인수의 종류에 따라 다른 동작을 하지만 결국에는 jQuery객체를 반환한다. 제이쿼리는 이렇게 생성된 제이쿼리 객체의 각종 메소드를 사용하여 여러 동작을 설정할 수 있다.
인수의 종류
- HTML을 인수로 받는 경우
- CSS의 선택자를 인수로 받는 경우
- 이벤트를 인수로 받는 경우
- Javascript 객체를 인수로 받는 경우
$("선택자").동작함수1().동작함수2();
$("선택자").함수(function(){
실행구문;
});
$("선택자").함수(function(){
$("선택자").메서드();
});$() 함수에 전달되는 인수는 반드시 따옴표(" ")를 사용한 문자열 형태로 전달되어야 한다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery</title>
<link rel="css/style.css" href="style.css" />
</head>
<body>
<a class="show" href="#none">보이기</a>
<a class="hidden" href="#none">감추기</a>
<p>태그선택자 a를 클릭했습니다.</p>
<!-- 제이쿼리 open source 파일 -->
<script src="script/jquery-1.12.4.js"></script>
<!-- 우리가 만드는 커스텀 js -->
<script src="script/index.js"></script>
</body>
</html>// index.js
$("p").css({ display: "none" });
$(".show").click(function () {
$("p").css({ display: "block" });
});
$(".hidden").click(function () {
$("p").css({ display: "none" });
});
요소 선택하기
HTML태그를 사용한 요소의 선택
document.createElement("p")
$("p") // -> <p>CSS선택자를 사용한 요소의 선택
document.querySelectorAll('.title')
$(".title") // -> class="title"인 요소를 모두 선택
document.getElementById("class")
$("#title") // -> id="class"인 요소를 모두 선택
$("img[alt='flower']") // <img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택<button id="b1" class="btn">Button1</button>
<button id="b2" class="btn">Button2</button>
<button id="b3" class="btn">Button3</button>
<button id="b4" class="btn">Button4</button>// js
// js는 하나의 요소마다 일일히📌 click이벤트를 등록해줘야 한다.
const btn = document.querySelectorAll('.btn');
for(let i; i<btn.length; i++){
btn[i].addEventListener('click', function() { });
}
// jQuery
// jquery는 여러개 요소 리스트일 경우 자동으로📌 다 순회해서 등록해준다.
$('.btn').on('click', function() { });
$() 함수는 선택자에 의해 선택된 요소들을 jQuery 객체로 반환한다. 또한 선택한 요소가 여러개일경우 자동으로 리스트를 만들어 저장해준다.
그래서 여러개 요소 리스트 형태일 경우, 이들을 하나하나 조작할 필요가 있을 경우, 순회하여 일일히 조작해야 하는 js와는 달리, jquery는 따로 조건 없이 바로 자동으로 지정해 조작 해줄 수 있다.
이벤트 등록
<button id="b1" class="btn">Button1</button>
<button id="b2" class="btn">Button2</button>
<button id="b3" class="btn">Button3</button>
<button id="b4" class="btn">Button4</button>// js
// js는 하나의 요소마다 일일히 click이벤트를 등록해줘야 한다.
const btn = document.querySelectorAll('.btn');
for(let i; i<btn.length; i++){
btn[i].addEventListener('click', function() { });
}
// jQuery
// jquery는 여러개 요소 리스트일 경우 자동으로 다 순회해서 등록해준다.
$('.btn').on('click', function() { });
$() 로 반환된 jQuery객체는 당연히 바닐라 자바스크립트의 함수들을 사용할수 없고, jQuery전용 함수를 사용해야 한다.
// js
document.querySelector("p").addEventListener("click", function() {
document.querySelector("#jq").style.border = "2px solid orange";
})
// 📌
document.querySelector("h1").textContent = 'Hello!';
// jQuery
$("p").on("click", function() {
$("#jq").css("border", "2px solid orange"); // 아이디가 "jq"인 요소를 선택함.
});
// 📌
$('h1').text('Hello!');Javascript객체
var foo = {
foo: 'bar',
hello: 'world'
};
var $foo = $(foo); // $()함수에 객체foo를 전달
console.log( $foo.prop('foo') ); // bar
$foo.prop('foo', 'foobar');
console.log( $foo.prop('foo') ); // foobar
HTML입장에서의 속성이 아닌 Javascript입장에서의 속성이다.
➕비표준 선택자를 사용한 요소의 선택
비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다.
문서 내의 모든 <li>요소를 선택하여 변수에 저장한 후, 해당 변수를 사용한다.
$(function() {
var items = $("li"); // <li>요소를 모두 선택하여 변수 items에 저장함.
$("button").on("click", function() {
$("#len").text("저장된 <li>요소의 총 개수는 " + items.length + "개 입니다.");
});
});> 하지만 이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장된다. 즉, 요소가 저장된 이후에 문서에 추가되거나 삭제된 요소들을 자동으로 갱신하지는 않는다.
함수 필터 선택자
// 문서 내의 모든 <li>요소 중에서 <span>요소를 가지고 있는 요소만을 선택한다.
$("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
🔗참고🔗