Frontend/JQuery
jQuery 변수
olli2
2021. 12. 14. 12:26
jQuery 변수
- 변수명 앞에 $ 붙임
- object로 jQuery 메소드 사용 가능
- 일반적으로 태그를 선택한 경우에는 객체로 $를 붙여서 사용
- 여러 개를 찾은 경우 배열로 저장
- 값을 가져오려는 경우에는 $를 붙이지 않고 사용해도 됨
- 값을 저장한 경우, 타입이 number 인 경우 length 사용 가능
var $변수명 = $(‘선택자’);
var $변수명 = $(‘선택자’);
var 변수명 = document.getElementById('#id'); // 자바스크립와 동일
var tds = document.getElementByTagName('td'); // 여러 개를 찾은 경우 배열로 저장
// 값을 가져온 경우 + 타입이 number -> $ 안 붙이고 사용 가능 + length 사용 가능
var divLen = $('div').length;
주의사항
- jQuery 선택자를 찾아서 자바스크립트 변수에 저장한 경우에는 jQuery 메소드 사용 가능하지만
- DOM 선택 방식으로 선택해서 자바스크립트 변수에 저장한 경우에는 jQuery 메소드 사용 불가
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.group1').css({
float: 'left',
background:'blue',
color:'white',
width: '90%',
height: '30px'
});
$('.group2').css({
float: 'right',
background:'yellow',
color:'black',
width: '90%'
});
// (1)
// jQuery 변수 사용 : $변수명
/* var $divs = $('div'); // $divs : jQuery 변수
alert($divs.length); // 속성 사용
$divs.css('color', 'red'); // 메소드 사용 */
// (2)
// 변수명에서 $제거하고 사용 : 자바스크립트 변수(객체)로 사용
var divs2 = $('div'); // divs : 자바스크립트 변수
// alert($divs2.length);
$divs2.css('color', 'pink'); // css() 메소드 적용 되었음
// 선택을 $('div')로 했기 때문에 속성과 jQuery 메소드 사용 가능
// (3)
// 자바스크립트 DOM 선택 방법으로 선택한 경우
// jQuery 메소드 사용 불가
// 변수 속성은 사용 가능
/* var box1 = document.getElementById('box1');
box1.css('color', 'red'); // css() 메소드 사용 불가 -> 오류 */
var divs = document.getElementByTagName('div');
alert(divs.length);
});
</script>
</head>
<body>
<div id="box1">
<div class="group1">A</div>
<div class="group2">A</div>
<div class="group1">B</div>
<div class="group2">B</div>
<div class="group1">C</div>
<div class="group2">C</div>
</div>
</body>
</html>