Front/jQuery
jQuery - 변수
by Hyeon_
2021. 12. 14.
jQuery 변수
- 변수명 앞에
$를 붙임
- object로 jQuery 메소드 사용 가능
- 일반적으로 태그를 선택한 경우에는 객체로
$를 붙여서 사용
- 값을 가져온 경우에는
$를 붙이지 않고
var $div = $(‘div’);var $divLen = $(‘div’).length;
- 값을 저장한 경우 타입이 number 인 경우
var divLen = $(‘div’).length;
jQuery 변수 예제
jQueryVariable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="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>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</body>
</html>
findElement.html
- hover 메소드를 사용하여 마우스 포인터가 올라갔을 때의 동작 확인하기
- 2개의 함수 호출
- 마우스 올렸을 때 : background : yellow, index 번호 적기
- 마우스 뗐을 때 : backgound : green, index 번호 지우기
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 선택자를 이용해 원하는 노드 찾기</title>
<style type="text/css">
#menuBox div {
float:left;
background-color:green;
width:100px;
height:50px;
}
</style>
<script src="jquery-3.6.0.min.js"></script>
<script type="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>
<div id="wrap">
<h2>인덱스 : <span id="indexSpan">index</span></h2>
<div id="menuBox">
<div class="menuItem"></div>
<div class="menuItem"></div>
<div class="menuItem"></div>
<div class="menuItem"></div>
</div>
</div>
</body>
</html>