🍁jQuery() 함수
jQuery() 함수는 CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다.
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>jQuery() 함수</h1>
<input type="button" value="확인" name="btn1" id="btn1">
<hr>
<!-- div#box$.box{상자$}*5 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<div id="box4" class="box">상자4</div>
<div id="box5" class="box">상자5</div>
<script src="../asset/js/jquery-1.12.4.js"></script>
</body>
</html>
Array.from()
//forEach > new Array()에서 동작
//list.forEach(box => box.style.color = 'yellow'); //HTMLCollection (유사 배열)
Array.from(list).forEach(box => box.style.color = 'tomato');
자바스크립트는 구조상 진짜 배열이 없다고 했다. 하지만 new Array()로 만들어진 것을 진짜 배열로 취급한다.
위에서 선언한 list는 배열이 아닌 HTMLCollection(유사 배열)이며, 유사 배열은 forEach가 동작하지 않는다.
유사 배열을 forEach에서 동작하게 하려면 Array.from() 안에 넣어서 매핑을 해주면 된다.
jQuery() 함수의 특징
1. jQuery로 찾은 결과는 항상 배열이다.
2. 반환값에 무언가를 적용하면 항상 자동으로 루프가 동작되어 각 요소마다 적용된다.
3. 자바스크립트 객체를 변환하여 jQuery 객체로 만들 수있다.
jQuery() 함수의 사용
jQuery('.box').css('color', 'green');
color를 green으로 적용하면 자동으로 루프가 동작되어 각 요소마다 적용된다.
태그 선택자
jQuery('div').css('color', 'orange');
id 선택자
jQuery('#box1').css('color', 'blue');
class 선택자
jQuery('.box').css('color', 'green');
그 외의 선택자
jQuery('h1, div:nth-child(even)').css('color', 'tomato');
객체 형변환
const a = document.all.btn1; //BOM
const b = document.getElementById('btn1'); //DOM
const c = jQuery('#btn1'); //jQuery
alert(a === b); //true
alert(b === c); //false
alert(a === c); //false
BOM과 DOM으로 찾은 버튼은 같지만, jQuery로 찾은 건 다르다.
BOM과 DOM은 같은 자료형을 반환하지만, jQuery는 jQuery만의 객체를 반환한다.
a.value = 'BOM';
b.value = 'DOM';
b.setAttribute('value', 'DOM');
//c.value = 'jQuery'; //호환 X
//c.val = 'jQuery'; //호환 XBOM과 DOM은 내부구조가 같기 때문에 어떤 방식으로 찾던지 상관이 없다.
하지만 jQuery로 찾은 것은 jQuery만의 사용법이 따로 있기 때문에 BOM과 DOM의 사용법을 쓸 수 없다.
jQuery(a).val('DOM');객체 형변환을 하여 BOM 또는 DOM 객체에 jQuery 기능을 사용할 수 있다.
c[0].value = 'jQuery';반대로 jQuery 객체로부터 [index]를 사용해서 꺼내면 순수 자바스크립트의 객체가 반환된다.
jQuery()를 $()로 대체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>jQuery Event</h1>
<input type="button" value="버튼1" id="btn1" class="btn">
<input type="button" value="버튼2" id="btn2" class="btn">
<input type="button" value="버튼3" id="btn3" class="btn">
<script src="../asset/js/jquery-1.12.4.js"></script>
<script>
</script>
</body>
</html>
$()의 사용
jQuery('#btn1').css('color', 'blue');
$('#btn2').css('color', 'orange');
jQuery는 변수 형태의 프로퍼티가 없고 무조건 메소드 형태의 프로퍼티만 존재한다.
jQuery() 함수를 자주 사용하다보니 풀네임 대신 $를 사용할 수 있다.
