Developer Factory

[jQury] 엘리먼트 탐색 - 사용 참고.. 본문

Developer/Jquery

[jQury] 엘리먼트 탐색 - 사용 참고..

Jeremy.Park 2014. 6. 24. 09:59



            $(document).ready( function () {
                $( 'tr:odd').css( 'background' , '#ff0000' ); // odd 짝수
                $( 'tr:even').css( 'background' , '#0000ff' ); // even 홀수
             
              // tr:first' 한번만 찾으면 되지만...
                $( 'tr:first').css( 'background' , '#000000' ).css( 'color', '#FFFFFF' );
               // tr:first' 두번을 찾아야 되는 코딩이다
                // $('tr:first').css('background', '#000000');
                // $('tr:first').css('color', '#FFFFFF');



                 // CSS3 표준 문법 13-27
                $( 'tr:eq(0)').css( 'background' , '#000000' ).css( 'color', 'white' );
                $( 'td:nth-child(3n+1)' ).css('background' , '#565656' );
                $( 'td:nth-child(3n+2)' ).css('background' , '#A9A9A9' );
                $( 'td:nth-child(3n)' ).css('background' , '#F9F9F9' );





                // 변수를 선언합니다. 13-29
                var array = [
                    { name: 'Hanbit Media', link: 'http://hanb.co.kr' },
                    { name: 'Naver', link: 'http://naver.com' },
                    { name: 'Daum', link: 'http://daum.net' },
                    { name: 'Paran', link: 'http://paran.com' }
                ];

                // $.each() 메서드를 사용합니다.
              // 자바스크립트에서 forEach가 안먹히는 브라우져(ie 9부터).                    
              // 그래서 jquery의 each사용하는게 좋다
                $.each(array, function (index, item) {



var array = [
             {id : 'uid', length : 5 , text : '6글자 입력'},
               {id : 'password', length : 6 ,text : '6글자 입력'},
               {id : 'name', length : 3 ,text : '3글자 입력'}
            ];

      $( 'input').keyup( function(){ 
             var thisId = $(this ).attr("id" );
             var thisVal = $( this).val();
            
            $.each(array, function(key,item ){
                   if( thisId == item.id){  
                         if(thisVal.length < item.length){                           
                        console.log(item.text);
                        }
                  }
            });
            
      });
      
      
              // addClass
            $(document).ready( function () {
                $( 'h1').addClass( 'high-light' );
            });
              



             // 변수를 선언합니다. ** 객체에 내용 추가 시키기 **
            var object = { name: '윤인성' };
            // $.extend() 메서드를 사용합니다.
            $.extend(object, {
                region: '서울특별시 강서구' ,
                part: '세컨드 기타'
            });
            // 출력합니다.
            var output = '';
            $.each(object, function (key, item) {
                output += key + ': ' + item + '\n';
            });
            alert(output);





        // 플러그인간의 충돌을 제거합니다.
        $.noConflict();
        var J = jQuery;

        // jQuery를 사용합니다.
        J(document).ready( function () {
            J( 'h1').removeClass( 'high-light');
        });





        //  ***  filter -> 체크하는거라 출력은다하고...체크된것만 css적용한다.
        $(document).ready( function () {
            $( 'h3').filter( ':even').css({
                backgroundColor: 'black',
                color: 'white'
            });
        });
    <h3 >Header-0 </h3 > v
    <h3 >Header-1 </h3 >
    <h3 >Header-2 </h3 > v
    <h3 >Header-3 </h3 >
    <h3 >Header-4 </h3 > v
    <h3 >Header-5 </h3 >