28일차_jQuery

23.04.19 수 28일차

JQuery

• 이미지 크기 변경

--헤드
<script>
    $(function(){
        var text = " ";
        $('img').each(function(i, item){
        if(i ==  1 || i == 3){
            var src=$(item).attr('src');
            var src2=$('img').attr('width', '200');
            var src3=$('img').attr('height', '200');
            alert(src + " ");
        }        
        });
    })
</script>

--바디

    <img src="aebi.png" width="100" height="100"/>
    <img src="bbang.png" width="100" height="100"/>
    <img src="bae.png" width="100" height="100"/>
    <img src="chunbae.png" width="100" height="100"/>

• index값의 넓이와 높이를 리턴값으로 변경

-- 헤드
<script>
    $(function(){
           $('img').attr('width', function(index){
            return (index + 1) * 70 +10 
           });

           $('img').attr('height', function(index){
            return (index + 1) * 150 +20
           });
        }) 
</script>

-- 바디
    <img src="aebi.png" width="100" height="100"/>
    <img src="bbang.png" width="100" height="100"/>
    <img src="bae.png" width="100" height="100"/>
    <img src="chunbae.png" width="100" height="100"/>

• 짝수 index값의 넓이와 높이를 리턴값으로 변경

-- 헤드
<script>
    $(function(){
           $('img').attr('width', function(index){\
           // IF 문을 추가하여 짝수에만 변경되게 설정
            if ( index % 2 ==1){
            return (index + 1) * 70 +10 
            }
            });

           $('img').attr('height', function(index){
            if ( index % 2 ==1){
            return (index + 1) * 150 +20 
            }
            });
        }) 
</script>

• 넓이와 높이를 함수로 설정하여 크기변경

-- 헤드
    $(function(){
        $('img').attr(
            {
                'width' : function(index){
                    return (index + 1) * 70
                    },
                'height': function(index){
                     return (index + 1) * 70 
                    }
            }
        )
    }); 

• 속성과 클래스 제거

-- 헤드
<script>
    $(function(){
        // removeAttr 태그의 속성을 제거 한번에 제거할 수 있다.
        
        // id를 사용
        $('#img1').removeAttr('height');
        $('#img2').removeAttr('width');
        
        // class를 사용
        $('.class2').removeAttr('height');

        // removeClass : 클래스 제거 ( 클래스 100 제거)
        $('img').removeClass('img100');
});
</script>

-- 바디
    <img src="aebi.png" width="100" height="100" id="img1"/>
    <img src="bbang.png" width="100" height="100"id="img2"/>
    <img src="bae.png" width="100" height="100"id="img3" class="class2"/>
    <img src="chunbae.png" width="100" height="100"id="img4"class="img100"/>

• 객체를 통해서 CSS 속성값 불러오기

style의 color를 클래스를 이용하여
H1 태그에 적용시키고 
color 값을 알림창에 순차적으로 발생시키는 코드

-- 헤더
    $(function(){
        $('h1').each(function(i, item){
        var color = $(item).css('color');
        alert(color);    
        });
    });

-- 바디
    <h1 class="first"> Header - 0 </h1>
    <h1 class="second"> Header - 0 </h1>

------------------------------------------

color 값을 h1태그에 직접 부여한 코드

--헤드
    $(function(){
        var color = $('h1').css('color', '#ff00ff');  
    });

• input 태그의 value 값을 가져오기와 변경하기

-- 헤드
<script>
  $(document).ready(function(){
	var html = $('#h2').text();
  var name = $('#name').val();
  var textarea1 = $('#textarea1').val();
  
  alert(html + ":" + name + ":" + textarea1);    

  var name = $('#name').val("영심이");
  var textarea1 = $('#textarea1').val("JQUERY"); 
     
  });
</script>

-- 바디
<h1 id="h1"><i>Header-1</i> </h1>
<h1 id="h2"><i>Header-2</i> </h1> 
<h1 id="h3"><i>Header-3</i> </h1>
<input  type="text" id="name"  value="둘리">
<textarea id="textarea1"> 기타특이사항 </textarea>

• div 태그 안에 값 추가 하기

-- 헤드
<script>
    $(function(){
        $('#div1').html('<h1>$().html() Method</h1>');
        $('#div2').text('<h1>$().html() Method</h1>');
    });
</script>

--바디
		HTML (h1 태그 적용되어 출력)
    	<div id="div1"> </div>
    	TEXT (h1 태그 글자로 인식하여 그대로 출력)
    	<div id="div2"> </div>
    	<div> </div>

• 태그의 배열의 값 제거하기

-- 헤더
<script>
    $(function(){
        // 첫번째 H1 태그 제거
        $('h1').first().remove();
        
        // 마지막 H1 태그 제거
        $('h1').last().remove();

        // 두번째 태그 제거
        $('h1:eq(2)').remove();

        // 2초과 제거(3,4,5,6 제거)
        $('h1:gt(2)').remove();

        // 전체 제거
        $('h1').remove();
});
</script>
-- 바디
    <h1> Header - 0</h1>
    <h1> Header - 1</h1>
    <h1> Header - 2</h1>
    <h1> Header - 3</h1>
    <h1> Header - 4</h1>
    <h1> Header - 5</h1>
    <h1> Header - 6</h1>

• 느낀점

JQUERY.. 
알다가도 잘 모르겠다 .. 
오늘은 객체의 크기와 색상조절, 태그의 값을 제거하는
제이쿼리 내용을 배웠다.
정확하게 이해가 되지 않는다!!.. 
공부를 더 열심히 하자 ..!