jQuery - 변수

jQuery - 변수

선택한 요소를 변수에 저장

형식 var $변수명 = $('선택자'); var 변수명 = document.getElementById('#id'); 여러 개 찾은 경우 배열로 저장 var tds = document.getElementByTagName(‘td’); 주의 jQuery 선택자를 찾아서 자바스크립트 변수에 저장한 경우는 jQuery 메소드 사용 가능 DOM 선택 방식으로 선택해서 자바스크립트 변수에 저장한 경우 jQuery 메소드 사용 불가능

변수 저장 예제 - select-Variable.html

$(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'); // divs2 : 자바스크립트 변수 // //alert(divs2.length); // divs2.css('color', 'pink') // css() 메소드 적용 되었음 // 선택을 $('div')로 했기 때문에 // 속성과 jQuery 메소드 사용 가능 //(3) // 자바스크립트 DOM 선택 방법으로 선택한 경우 // jQuery 메소드 사용 불가 // 변수 속성은 사용 가능 // var box1 = document.getElementById('box1'); // box1.css('color', 'red'); // 오류 : box1.css is not a function var divs = document.getElementsByTagName('div'); alert(divs.length); // DOM 선택 방식으로 선택해도 속성은 사용 가능 // divs.css('color', 'red'); // 오류 : css is not a function });

jQuery 변수

변수명 앞에 $ 붙임

object로 jQuery 메소드 사용 가능

일반적으로 태그를 선택한 경우에는 객체로 $를 붙여서 사용

값을 가져온 경우 $를 붙이지 않고 사용

형식 var $div = $(‘div’); var $divLen = $(‘div’).length; 값을 저장한 경우 타입이 number 인 경우 var divLen = $(‘div’).length;

jQuery 변수 예제 - jQueryVariable.html

$(document).ready(function() { var $box1 = $('#box1'); $box1.css('color','red'); $box1.text(typeof $box1); // innerHTML과 동일 : box1의 텍스트 설정하기 typeof : typeof다음에 오는 변수의 타입 체크해서 텍스트 설정해줌 var $box2 = $('#box2'); // alert($box2.text()); // box2의 텍스트 읽어오기 // var $divLen = $('div').length; // $box2.text(typeof $divLen); var divLen = $('div').length; $box2.text(typeof divLen); });

jQuery 변수 예제 - findElement.html

$(document).ready(function(){ var $menuItem = $('.menuItem'); // 총 4개 // alert($menuItem.length) 길이 확인 // index 값 출력할 태그 선택 var $indexSpan = $('#indexSpan'); // 4개 div에 대해서 // 각 div 객체에 대해 메소드 수행 : each() 메소드 사용 // each() 메소드에는 기본적으로 index 의미의 매개변수 포함 $menuItem.each(function(index) { $(this).hover( function() { // 마우스 올렸을 때 호출되는 함수 $(this).css('background', 'yellow'); $indexSpan.text(index) }, function() {// 마우스 땠을 때 호출되는 함수 $(this).css('background', 'green'); $indexSpan.text("") }); // hover 종료 }); // each() 종료 }); //ready() 종료

from http://5bong2-develop.tistory.com/112 by ccl(A) rewrite - 2021-12-14 11:01:35