📝목차
- 검색 함수
- Jquery로 배열 다루기 : each();
- 정적 바인딩, 동적 바인딩
1. 검색 함수
선택자만 있으면 대상 요소를 확실하게 선택할 수 있다. 그러나 앞으로 경험할 문제 상황에선 선택자를 사용하지 못하는 경우가 분명 존재한다. 이 경우 우리가 아는 요소의 주소를 기준으로 다른 요소의 주소를 검색해야 한다.
[ 사용 예제 ]
<div id="home">
Home
<div id="grand_parent">
GrandParent
<div id="parent01">
Parent01
<div id="brother01">
Brother01
</div>
<div id="me">
Me
<div id="sister01">
Sister01
<div id="baby">
Baby01
</div>
</div>
<div id="sister02">
Sister02
</div>
</div>
<div id="brother02">
Brother02
</div>
</div>
<div id="parent02">
Parent02
</div>
</div>
</div>
[ 하향 검색 ]
1. children() : 기준 태그의 직계자손만 검색하여 배열로 반환한다.
$("#me").children(); me 태그의 직계자손만 검색하여 반환
$("#me").children()[0]; // == div#sister01단, 반환된 배열에서 요소를 뽑으면, 해당 요소는 제이쿼리 노드가 아닌 자바스크립트 객체라서 제이쿼리 기능을 사용할 수 없다.
물론 제이쿼리 객체인 $(“#sister01”)와 같은 요소를 가리키는 것은 맞다. 하지만 제이쿼리 기능을 사용하기 위해선 $()으로 다시 감싸주거나 $("#me").children("#sister01")처럼 아예 id값으로 지정해서 출력해야 한다.
< 요약 >
- 직계 자손만 검색한다. (후손은 안됨)
- 제이쿼리 배열을 반환한다.
- 제이쿼리 함수이다.
- 배열에서 추출한 요소는 JS 객체이다. 사용하려면 제이쿼리 노드가 되어야 한다.
- 인자값으로 id를 넣어줘서 직접 검색이 가능하다.
2. find(“검색 대상”) : 기준 태그의 후손 검색이 가능하다.
$("#me").find("#sister01");
$("#me").find("#sister02");
$("#me").find("#baby");< 요약 >
- 모든 후손들을 검색할 수 있다.
- 제이쿼리 배열을 반환한다.
[ 동수준 검색 ]
3. siblings() : 동수준의 형제자매 객체를 모두 검색
$("#me").siblings();
$("#me").siblings("#brother02");< 요약 >
- 동격 요소를 검색 가능하다.
- 반환은 배열이지만, 인자값을 줘서 검색하면 제이쿼리 노드로 바로 사용이 가능하다.
[ 상향 검색 ]
4. parent() : 부모태그를 검색할 수 있다.
$("#me").parent();
$("#me").parent(“#parent01”);< 요약 >
- 자신이 속한 상위 태그만 검색이 가능하다.
- 인자값을 넣어 바로 사용도 가능하다.
5. closest(“검색 대상”) : 자신에게 연결된 상위 태그를 검색할 수 있다.
$("#me").closest("#grand_parent");
$("#me").closest(); // 적용 안됨
$("#me").closest(“#parent02”); // 적용 안됨< 요약 >
- 자신이 속한 계열의 상위 태그들만 검색이 가능하다.
- 매개변수가 필수적이다.
- 배열을 반환한다.
2. 제이쿼리로 배열 다루기
기존에 자바스크립트에서 배열의 요소를 다룰 때는 다음과 같이 getElementsByClassName("box"); 함수를 사용했다.
해당 함수 사용시 대상 요소들에서 추출한 값을 배열로 반환해주며, 이를 반복문으로 꺼내서 사용한다.
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
// js방식으로 배열 뽑기
let boxArr = document.getElementsByClassName("box");
for(let i =0; i<boxArr.length; i++){
console.log(boxArr[i]);
};이는 제이쿼리로도 똑같이 구현이 된다.
let boxArr = $(".box"); // 제이쿼리 노드
for (let i = 0; i < boxArr.length; i++) {
console.log(boxArr[0].innerHTML);
}단, 제이쿼리 배열에서 요소를 추출하면 해당 요소는 제이쿼리 노드가 아닌 자바스크립트 객체이다. 그러니 주의해서 사용해야 한다.
< 요약 >
- 같은 선택을 가지고 있으면 배열로 값을 끌어온다.
- 이를 반복문으로 꺼내어 사용할 수 있다.
- 단, 꺼내진 요소는 자바스크립트 객체여서 제이쿼리 노드로 변환해야 한다.
2-1. each()
이제 본론으로 돌아와서, 제이쿼리의 반복문인 each()를 알아보자.
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<script>
$(".box").each(function(index, item){
console.log(index);
console.log(item);
});
</script>each() 는 콜백 패턴을 이용한 반복문으로, 위 예시에서 선택자로 선택된 요소들을 모두 끌어온다. 그 후 요소의 순서를 index에 요소 그 자체를 item에 담고 이를 $(item) 으로 응용해서 써먹을 수 있다.
그 후, 한 객체씩 가지고 와서 안에 정의된 코드를 실행하고 반환하는 반복작업을 마지막 객체까지 진행한다.
< 요약 >
each()로 반복작업을 할 수 있다. (콜백 패턴을 이용한다)- 실행 시 그 순서와 해당 객체를 매개변수에 담는다.
- 그 후, 정의된 코드를 실행 후 다음 순서와 객체를 담고 코드를 실행한다.
- 객체는
$()으로 감싼 뒤, 제이쿼리로 사용할 수 있다. return false를 주면 반복을 멈춘다.
3. 정적 바인딩, 동적 바인딩
여러 개의 요소에 이벤트 처리를 하기 위해서는 바인딩 기법을 사용해야 한다. 단, 해당 요소가 정적 요소인지, 동적 요소인지에 따라서 다른 바인딩 처리를 해줘야 한다. 먼저 정적 요소에 대한 바인딩 처리를 해보자.
1) 정적 바인딩
[ Javascript ]
자바스크립트에서 여러 요소를 긁어오면, 배열 상태로 반환하기 때문에 각 요소를 사용하려면 다음과 같이 반복문으로 추출과 동시에 이벤트 처리한다.
<button class="btn">button1</button>
<button class="btn">button2</button>
<button class="btn">button3</button>
<button class="btn">button4</button>
<button class="btn">button5</button>
<script>
let arr = document.getElementsByClassName("btn");
// 반복문으로 각 객체마다 이벤트 처리
for(let i = 0; i<arr.length; i++){
arr[i].onclick = function(){
alert(arr[i].innerHTML);
}
};
</script>[ Jquery ]
반면 제이쿼리는 똑같이 배열로 묶어두지만, 위의 과정을 자동으로 처리해준다. 단, 각 객체를 구분하기 위해서 this를 사용한다.
$(".btn").on("click", function () {
alert(this.innerHTML);
});여기서 this는 이벤트가 감지된, 또는 발생한 해당 객체 자체를 가리킨다. 즉, 클릭 시 alert가 실행되는 것을 .btn을 가진 요소들에 모두 부여했지만, 각 요소를 구별하지 못해 내부의 텍스트를 가져올 수 없다.
따라서 이벤트가 발생한 해당 소스를 지목하기 위해 this를 쓰며, 이는 자바스크립트 객체가 되므로 $()로 감싸서 사용한다. (배열에 빼냈다)
2) 정적 요소와 동적 요소
- 정적 요소 : HTML의 첫 로딩에 이미 존재하고 있던 요소
- 동적 요소 : 로딩 이후에 추가되는 요소
하지만 정적 바인딩은 다음과 같이 로딩 이후, 생성되는 객체에 대해서는 부여되지 않는다.
// 동적 요소
let record = $(“<tr>”);
record.append($("<td>").HTML(“<button>O</button>”));
$(“table”).append(record); // table은 정적요소위 예시의 요소들을 <script> 내부에서 특정 조건에 따라 생성되는 동적인 요소로서, 해당 요소들은 조건 충족으로 생성되기 이전까지는 존재하지 않는다.
즉, 정적 바인딩을 하게 되면 첫 로딩에 브라우저는 HTML을 쭉 읽으면서 정적 요소들에 이벤트 처리를 해뒀고, 이때 존재하지 않은 동적 요소들은 이벤트 처리가 되지 않았다. 따라서 동적 요소는 동적 바인딩이란 이벤트 처리가 필요하다.
3) 동적 바인딩
제이쿼리에서 동적 바인딩은 정적 바인딩과 크게 다르지 않다. 대신 두 가지 조건만 채워주면 된다.
(1) 동적 요소를 포함하는 상위(parent)의 정적 요소를 대상으로 이벤트 처리한다.
(2) 인자값으로 동적 요소의 선택자를 넣어준다.
let record = $(“<tr>”);
record.append($("<td>").HTML(“<button class=“btn”>O</button>”));
$(“table”).append(record); // table은 정적요소
$(“table”).on(“click”, “.btn” function(){
alert(this.innerHTML);
});이런 이벤트를 가진 버튼을 만들고 이 버튼을 추가해라 가 되는거죠
위 예시에선 table 요소에 내부에서 .btn 이라는 동적 요소가 생성되면, 위 코드에 의해 .btn 값의 버튼에는 click 시 alert(this.innerHTML); 라는 이벤트가 부여된다.
즉, 정적 요소(table) 내부에 동적 요소(.btn)에는 이벤트 발생 시(click) 해당 기능을 하도록 이벤트 처리해라.
또한, 대상이 될 부모 요소는 구조상 상위 요소면 어떤 요소에도 걸어둘 수 있다. (document, body)
< 요약 >
- 다수의 공통된 요소에 이벤트 처리를 위해선 바인딩을 해줘야 한다.
- 하지만 바인딩도 요소가 정적이냐, 동적이냐에 따라 다르다.
- 이는 브라우저의 렌더링 과정에서 요소의 존재 유무 때문이다.
- 따라서 동적 요소엔 동적바인딩을 하며, 다수의 요소일 땐
this를 사용한다. this는 이벤트가 발생한 해당 리소스를 가리킨다.
[ 피드백 ]
- 오늘 수업하면서 대부분의 실수는 어느 객체인지 구별하지 못해서 생겼음
- 제이쿼리 사용시, 배열에서 추출한 요소는 자바스크립트 객체이다.
- 객체가 다르면 제이쿼리의 기능을 사용할 수 없으니
$()으로 감싸줘야한다.
