css
<style>
div {
width: 50px;
height: 50px;
float: left;
background-color: brown;
margin: 10px;
}
</style>
body
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<span></span>
</body>
script
<script>
$(document).ready(function(){
//div가 5개 생성되고 div객체들을 배열로 저장하고 있다.
var $divList = $("div");
//get()는 리턴값이 Element요소가 넘어온다. 하여 get()받은 것을
//style을 설정하고자 한다면 자바스크립트 방법으로 줘야 한다.
var $div_one = $divList.get(0);
//배열은 0부터 시작을 하니 인덱스가 1이라면 2번째의 div만 가져오고 있다.
//eq() 리턴값이 div의 jQuery객체가 넘어온다.
var $div_two = $divList.eq(1); //index를 주면 해당인덱스의 값을 리턴
//[]로 인덱스를 주어 노드를 찾아서 다룰 수 있다. 리턴값이 Element요소가 넘어온다.
var $div_five = $divList[4];
$div_one.style.border = "3px dashed red";
$div_two.css("background", "blue");
$div_five.style.background = "yellow";
//*** 배열값으로 넘어오는 경우 *** 3가지 방법 중에서 eq()를 추천한다.
});
</script>
eq(idx)와 get(idx)의 공통점
: index를 주면 해당 인덱스의 값을 리턴한다
eq(idx)와 get(idx)의 차이점
: get()는 Element요소를 리턴하고, eq()는 해당 인덱스의 값을 리턴한다
그 차이때문에 css를 줄 때에도 위의 코드처럼 작성해야한다.
'공부 기록노트 > javascript' 카테고리의 다른 글
| [jQuery] 노드 다루기-3 (태그의 length 구하기) (0) | 2024.02.16 |
|---|---|
| [jQuery] 노드 다루기-2 (속성으로 노드 찾기) (0) | 2024.02.16 |
| [jQuery] 노드 다루기-1 (아이디, 태그이름, 클래스 이름으로 찾기) (0) | 2024.02.16 |
| day2. 빠르게 자바스크립트 복습하기(함수) (0) | 2023.05.08 |
| day1. 빠르게 자바스크립트 복습하기 (0) | 2023.05.04 |