jQuery - 변수

선택한 요소를 변수에 저장

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

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

    <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');      // 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
            });
    </script>

jQuery 변수

• 변수명 앞에 $ 붙임
• object로 jQuery 메소드 사용 가능
• 일반적으로 태그를 선택한 경우에는 객체로 $를 붙여서 사용
• 값을 가져온 경우 $를 붙이지 않고 사용
• 형식
  • var $div = $(‘div’);
  • var $divLen = $(‘div’).length;
    • 값을 저장한 경우 타입이 number 인 경우
    • var divLen = $(‘div’).length;

jQuery 변수 예제 - jQueryVariable.html

        <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의 텍스트 설정하기 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);
           });
        </script>

jQuery 변수 예제 - findElement.html

        <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript"> 
            $(document).ready(function(){ 
                var $menuItem = $('.menuItem'); // 총 4개
                // alert($menuItem.length) 길이 확인
                // index 값 출력할 <span> 태그 선택
                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() 종료
        </script>