<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>JavaScript</title><scriptsrc="jquery-3.6.0.min.js"></script><scripttype="text/javascript">
$(document).ready(function(){
var $box1 = $('#box1');
$box1.css('color','red');
$box1.text(typeof $box1); // innerHTML과 동일 : box1의 텍스트 설정하기var $box2 = $('#box2');
alert($box2.text()); // box2의 텍스트 읽어오기var $divLen = $('div').length;
$box2.text(typeof $divLen);
var divLen = $('div').length;
$box2.text(typeof divLen);
});
</script></head><body><divid="box1">box1</div><divid="box2">box2</div><divid="box3">box3</div></body></html>
findElement.html
hover 메소드를 사용하여 마우스 포인터가 올라갔을 때의 동작 확인하기
2개의 함수 호출
마우스 올렸을 때 : background : yellow, index 번호 적기
마우스 뗐을 때 : backgound : green, index 번호 지우기
<!doctype html><html><head><metacharset="UTF-8"><title>CSS 선택자를 이용해 원하는 노드 찾기</title><styletype="text/css">#menuBoxdiv {
float:left;
background-color:green;
width:100px;
height:50px;
}
</style><scriptsrc="jquery-3.6.0.min.js"></script><scripttype="text/javascript">// menuItem 클래스 선택
$(document).ready(function(){
var $menuItem = $('.menuItem');
// alert($menuItem.length); // 길이 확인// index 값 출력할 <span> 태그 선택var $indexSpan = $('#indexSpan');
// 4개의 div에 대해 각 div 객체에 대한 메소드 수행 : each() 메소드 사용// each() 메소드는 기본적으로 index 의미의 매개변수 포함되어 있음
$menuItem.each(function (idx){
$(this).hover(
function() { // 마우스 올렸을 때
$(this).css('background','yellow');
$indexSpan.text(idx);
},
function() { // 마우스 뗐을 때
$(this).css('background', 'green');
$indexSpan.text("");
}
); // hover() 종료
}); // each() 종료
}); //ready() 종료</script></head><body><divid="wrap"><h2>인덱스 : <spanid="indexSpan">index</span></h2><divid="menuBox"><divclass="menuItem"></div><divclass="menuItem"></div><divclass="menuItem"></div><divclass="menuItem"></div></div></div></body></html>