[jQury] 1. 함수 - (예제15장) .addClass .removeClass .attr('속성값', 값); .removeAttr .html() .text() .empty() .appendTo( 'body') .append .clone()

① 객체.함수() -> 값을 꺼낼 때

② 객체.함수(값) -> 값을 설정

③ 객체.함수(function(...){ return 값;}); -> 함수의 리턴값으로 값 설정

④ 객체.함수({key:값, . . .}); 한꺼번에 여러개의 값을 설정하고 싶을때

     

        .addClass //라벨 붙이기

        $(document).ready( function () {

            $( 'h1').addClass( function (index) {

                return 'class' + index;

            });

        });        

        .removeClass //라벨 제거

        $(document).ready( function () {

            $( 'h1').removeClass( 'select');

        });

        .attr('속성값', 값);

        $(document).ready( function () {

            // 변수를 선언합니다.

            var src = $( 'img').attr( 'src');

            // 출력합니다.

            alert(src);

        });

        // 값 설정하기 - 자동 비율 조정됨.

        $(document).ready( function () {

            $( 'img').attr( 'width', 200);

        });

          

        // 값 자리에 함수 사용가능

        $(document).ready( function () {

            $( 'img').attr( 'width', function (index) {

                return (index + 1) * 100;

            });

        });

        $(document).ready( function () {

            $( 'img').attr({

                width: function (index) {

                    return (index + 1) * 100;

                },

                height: 100

            });

        });

        .removeAttr // 속성 제거하기

        $(document).ready( function () {

            $( 'h1').removeAttr( 'data-index');

        });

        // 색상을 배열로 선언하여 지정해주기 방법

        $(document).ready( function () {

            // 변수를 선언합니다.

            var color = [ 'red', 'white', 'purple'];

            // 문서 객체의 스타일을 변경합니다.

            $( 'h1').css( 'color', function (index) {

                return color[index];

            });

        });

        $(document).ready( function () {

            // 변수를 선언합니다.

            var color = [ 'red', 'white', 'purple'];

            // 문서 객체의 스타일을 변경합니다.

            $( 'h1').css({

                color: function (index) {

                    return color[index];

                },

                backgroundColor: 'black'

            });

        });

        $(document).ready( function () {

            // 변수를 선언합니다.

            var html = $( 'h1').html();

            // 출력합니다.  

            alert(html);  // Header-0 출력함

        });

     <h1 >Header-0 </h1 >

     <h1 >Header-1 </h1 >

     <h1 >Header-2 </h1 >

        $(document).ready( function () {

            // 변수를 선언합니다.

            var text = $( 'h1').text();

            // 출력합니다. 첫번째만 아닌 전체 붙여서 출력한다.

            alert(text);  // Header-0 Header-1 Header-2

        });

    <h1 >Header-0 </h1 >

    <h1 >Header-1 </h1 >

    <h1 >Header-2 </h1 >

        $(document).ready( function () {

            $( 'div').html( '<h1>$().html() Method</h1>');

        });

    <div ></div >

    <div ></div >

    <div ></div >

$().html() Method

$().html() Method

$().html() Method

        $(document).ready( function () { //.text 값을 꺼낼때 모두 꺼내준다.

            $( 'div').text( '<h1>$().html() Method</h1>');

        });

   <div ></div >

    <div ></div >

    <div ></div >

<h1>$().html() Method</h1>

<h1>$().html() Method</h1>

<h1>$().html() Method</h1>

        $(document).ready( function () {

            $( 'h1').first().remove();

        });

    <div >

        <h1 >Header-0 </h1 >

        <h1 >Header-1 </h1 >

    </div >

Header-1

        

        // 시작 태그와 끝태그 사이에 있는 내용 다 지우기

        $(document).ready( function () {

            $( 'div').empty();

        });

    <div >

        <h1 >Header-0 </h1 >

        <h1 >Header-1 </h1 >

    </div >

        // 태그를 만들어라~ .appendTo ~에 붙여라

        $(document).ready( function () {

            $( '<h1></h1>').html('Hello World .. !' ).appendTo('body');

        });

        // 이미지 태그를 만들라 1

        $(document).ready( function () {

            $( '<img />').attr('src' , 'Chrysanthemum.jpg').appendTo('body' );

        });

        // 이미지 태그를 만들라 2

        $(document).ready( function () {

            $( '<img />', {

                src: 'Chrysanthemum.jpg',

                width: 350,

                height: 250

            }).appendTo( 'body');

        });

        $(document).ready( function () {

            // 변수를 선언합니다.

            var h1 = '<h1>Header1</h1>';

            var h2 = '<h2>Header2</h2>';

            // 문서 객체를 추가합니다.

            $( 'body').append(h1, h2, h1, h2);

        });

Header1
Header2
Header1
Header2

        $(document).ready( function () {

            // 변수를 선언합니다.

            var content = [

                { name: '윤인성', region: '서울특별시 강서구' },

                { name: '윤하린', region: '서울특별시 광진구' },

                { name: '윤인아', region: '미국 메사추세츠' }

            ];

            // 문서 객체를 추가합니다.

            $( 'div').append( function (index) {

                // 변수를 선언합니다.

                var item = content[index];

                var output = '';

                output += '<h1>' + item.name + '</h1>' ;

                output += '<h2>' + item.region + '</h2>' ;

                return output;

            });

        });

          //** .append 대신 .html 을 사용할수 있지만 기존 태그안에 내용이 있다면 지워진다

윤인성

서울특별시 강서구

윤하린

서울특별시 광진구

윤인아

미국 메사추세츠

        $(document).ready( function () { // 롤링이미지 만들기

            // .image의 크기를 조정합니다.

            $( 'img').css( 'width', 250);

            // 함수를 2초마다 실행합니다.

            setInterval( function () {

                // 첫 번째 이미지를 마지막으로 보냅니다.

                $( 'img').first().appendTo( 'body');

            }, 2000);

        });

    <img src ="Chrysanthemum.jpg" />

    <img src ="Desert.jpg" />

    <img src ="Hydrangeas.jpg" />

    <img src ="Jellyfish.jpg" />

    <img src ="Koala.jpg" />

        $(document).ready( function () {

             /*

            $('div').html(function()index,oldvalue){

                  return oldvalue + 'haha<h1>nono</h1>';

            }

             */

            //$('div').append('<h1>00</h1>');

             $( 'div').append($( 'h1'));

        });

    <h1 >HEADER </h1 >

    <hr /><div >헐~~~ 기존값에 + 하기 </div ><hr />

헐~~~ 기존값에 + 하기

HEADER

         // 복제하기~~

        $(document).ready( function () {

            $( 'div').append($( 'h1').clone());

        });

    <h1 >HEADER </h1 >

    <hr /><div ></div ><hr />

HEADER

---

HEADER