'WebFont-end'에 해당되는 글 52건

  1. [jQuery] Ajax 기초
  2. [jQuery] Chain
  3. [jQuery] Animation
  4. [jQuery] Effects
  5. [jQuery] Event
  6. [jQuery] Attribute/CSS
  7. [jQuery] DOM Manipulation
  8. [jQuery] Traversing
  9. [jQuery] Wrapper
  10. [JavaScript] Object

[jQuery] Ajax 기초

Ajax 기초


1. Ajax란?

- Asynchronous JavaScript and XML 의 약자

- 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.

- 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.

- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.


2. 선행지식

- 폼


3. $.ajax(settings)

- jQuery를 이용한 ajax통신의 가장 기본적인 API

- 주요속성

   data 서버에 전송할 데이터, key/value 형식의 객체

   dataType 서버가 리턴하는 데이터 타입 (xml, json, script, html)

   type : 서버로 전송하는 데이터의 타입 (POST, GET)

   url : 데이터를 전송할 URL

   success : ajax통신에 성공했을 때 호출될 이벤트 핸들러


예제1-1. 웹페이지

<!DOCTYPE html>

<html>

    <head>

        <script src="http://code.jquery.com/jquery-latest.js"></script>

    </head>

    <body>

        <div id="result"></div>

        <input type="text" id="msg" />

        <input type="button" value="get result" id="getResult" />

        <script>

            $('#getResult').click( function() {

                $('#result').html('');

        // 사용자가 getResult 버튼을 눌렀을 때 텍스트 노드에 있는 결과값을 지워준다.

                $.ajax({

                    url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',

                    dataType:'json',

            // 서버가 리턴해주는 데이터 타입이 json이다.

                    type:'POST',

                    data:{'msg':$('#msg').val()},

            // data 속성 내부에 또다른 {}가 있다. 중괄호 내부는 객체이다.

                    // data: 서버에 전송할 데이터로서 값은 key와 value로 이루어진 객체

                    success:function(result){

    // 인자 result에는 서버에서 리턴해준 배열이 들어감

                    // 배열이 들어온 이유는 dataType속성을 JSON으로 했기 때문에 리턴되는 데이터가 텍스트더라도 내부적으로 그 데이터를                                     // JSON으로 해석하여 배열로 변환

                    // 그래서 배열에 있는 result값을 체크하면 result가 true라면 성공 이벤트 관련 로직을 출력한다.

                    // 서버와의 통신이 성공하면 호출되는 이벤트 핸들러인 function(result)

                    // result 인자에는 서버가 리턴해주는 데이터가 들어감

                        if(result['result']==true){

    //result['result']는 연상 배열인가 확인하자

                          $('#result').html(result['msg']);

                        }

                    }

                });

            })

       // 자바스크립트에서 중괄호는 객체를 의미 , $ajax{}도 마찬가지이다. 

        </script>

    </body>

</html>


예제 1-2. 서버 쪽 로직

<?

echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));

?>

//json_encode메소드로 배열을 JSON 데이터 형식으로 php가 변경해줌

'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] 문서 준비 이벤트  (0) 2015.01.11
[jQuery] Ajax 설정  (0) 2015.01.11
[jQuery] Chain  (0) 2014.12.07
[jQuery] Animation  (0) 2014.12.07
[jQuery] Effects  (0) 2014.12.07

[jQuery] Chain

Chain


1. Chain이란?

jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다.

이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다.


예제1. jQuery를 이용해서 코딩하는 경우

<html>

    <body>

        <a id="tutorial" href="http://jquery.com" target="_selfxxxxx">jQuery</a>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');

        </script>

    </body>

</html>


예제2. javascript의 DOM을 이용해서 코딩하는 경우

<html>

     <body>

         <a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

         <script type="text/javascript">

             var tutorial = document.getElementById('tutorial');

             tutorial.setAttribute('href', 'http://jquery.org');

             tutorial.setAttribute('target', '_blank');

             tutorial.style.color = 'red';

         </script>

     </body>

 </html>


cp.) 보충 예제

<html>

<head><title>chain이란--JQuery</title></head>

    <body>

        <a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            jQuery('#tutorial').attr('href', 'http://www.naver.com').attr('target', '_blank').css('color', 'green');    

        </script>

    </body>

</html>


<a>태그의 속성을 변경함 

chain의 원리

jQuery('#tutorial')

--> 리턴값.attr('href', 'http://www.naver.com')

--> 리턴값.attr('target', '_blank')

--> 리턴값.css('color', 'green')

-->사슬처럼 연속적으로 명령문을 칠 수 있다.


<html>

     <head><title>chain이란--JavaScript</title></head>

     <body>

         <a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

         <script type="text/javascript">

             var tutorial = document.getElementById('tutorial'); // jQuery('#tutorial')

             /* console.log(tutorial.setAttribute('href', 'http://jquery.org'));  */// attr('href', 'http://www.naver.com')

             tutorial.setAttribute('href', 'http://jquery.org');

             tutorial.setAttribute('target', '_blank');// attr('target', '_blank')

             tutorial.style.color = 'red'; //css('color', 'green')

         </script>

     </body>

</html> 



2. chain의 장점

- 코드가 간결해진다.

- 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함.


'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Ajax 설정  (0) 2015.01.11
[jQuery] Ajax 기초  (0) 2014.12.07
[jQuery] Animation  (0) 2014.12.07
[jQuery] Effects  (0) 2014.12.07
[jQuery] Event  (0) 2014.12.07

[jQuery] Animation

Animation


지금까지 학습한 effect는 기본적으로 jQuery에 내장된 함수이다.

만약 height 말고 width를 조절하고 싶은 경우, 컬러를 부드럽게 조절하고 싶은 경우, 스크롤을 부드럽게 움직이게 하는 효과를 주고 싶은 경우 등 개인적으로 커스터마이징하여 요소에 효과를 주고 싶을 때,

jQuery는 이러한 것들을 해결할 수 있는 함수를 제공해주는 데 그것이 바로 animate() 함수이다.


.animate(properties [, duration] [, easing] [, complete]) returns: jQuery

- properties: 움직임을 만들어 낼 수 있는 CSS 속성들

- duration: 애니메이션 시간

- easing: 애니메이션에 가.감속을 조절

- complete: 애니메이션이 모두 멈춘 후에 실행될 콜백 함수


1. properties

첫 번째 오는 매개 변수인 properties는 애니메이션의 속성과 값을 설정한다.

형식은 Object로 아래와 같이 표현한다.

{ property:value; property:value, ......}

property에는 CSS 속성들이 올 수 있지만, 모든 속성이 다 올 수 있는 것은 아니다.

(1) property에 올 수 있는 값

숫자를 사용할 수 있는 CSS 속성으로, border, margin, padding, height, width, font-size, bottom, left, top, right, line height 등과 같은 픽셀이 아닌 em과 % 같은 값들도 지원해준다.

scrollTop, scrollLeft 애니메이션 효과에 적용할 수 있다.


(2) property에 올 수 없는 값

수치형이 아닌 속성 값에는 애니메이션 효과를 줄 수 없다. background-color, 축약형 표현 방법에는 border: "px solid black" 등이 있다.

그러나 jQuery UI plugin 기능을 사용하면 color도 애니메이션을 구현할 수 있다.


2. 애니메이션의 다양한 표현 방법

.animate({fontSize:"2em"}, 3000} = .animate({"font-size":"2em"}, 3000} 

요소의 폰트 사이즈를 현재 크기의 2배로, 3초 동안 애니메이션한다.

cf.) font-size가 변수일 경우 fontSize로 표기해야 한다.


.animate({marginLeft:100, margin-right:100} ,"slow"); = .animate({"margin-left":100, "margin-right":100} ,"600"); 

요소의 왼쪽과 오른쪽의 마진을 100px로, 600 밀리세컨드 동안 애니메이션한다.


.animate({width:"30%"},"fast");

요소의 가로 크기를 부모 가로 크기의 30% 크기로, 200밀리세컨드 동안 애니메이션한다.


.animate({width:"200px", height:"200px"},"fast");

요소의 가로 크기를 200px 세로 크기의 200px 크기로, 200밀리세컨드 동안 애니메이션한다.


.animate({left:"+=20"}, 2000, function(){ }

요소의 위치를 현재 위치를 기준으로 2초동안 계속 오른쪽으로 20px만큼 이동한 후, 콜백 함수를 호출한다.


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title> animate()를 활용한 가로slide  </title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

// overflow:hidden를 설정한 이유는 animate() 함수가 width를 조절할 때에 자동으로 overflow:hidden으로 처리하기 때문에 

// width가 조절되고 난 후에도 overflow:hidden 상태를 유지해주기 위해서이다.

 div{ overflow:hidden; width:300px; display:inline;}

</style>

</head>

<body>

<div>

<img src="sample1.jpg" alt="" width="300" height="307"/>

</div>

<button id ="up">slide감추기</button>

<button id ="down">slide보이기</button>


<!---------- jQuery code Start ---------->

<script>

$('#up').click(function() {

  // #up 버튼을 클릭하면 1초 동안 div 요소의 width가 0px로 변경된다.

  $('div').animate({width:"0px"},1000);  

});

$('#down').click(function() {

  // #up 버튼을 클릭하면 1초 동안 div 요소의 width가 300px로 변경된다.

  $('div').animate({width:"300px"},1000);  

});

</script>

</body>

</html>

cf.) 기본 효과에는 이러한 기능이 없기 때문에 animate() 함수로 처리하였다. 

한 가지 중요한 사실은 slideUp() 이나 slideDown() 함수와 같이 효과가 끝나면 display 상태를 none이나 block으로 변경해주는데,

animate() 함수는 display() 함수는 display 상태를 변경하지 않는다는 것이다.


3. 애니메이션 큐

애니메이션 큐는 여러 개의 애니메이션이 실행을 기다리는 대기열을 의미한다.


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> animate_queue  </title>

<script src="jquery-1.7.2.min.js"></script>

</head>

<title>Untitled Document</title>

<style type="text/css">

div {

background: #6699FF;

height: 100px;

width: 100px;

position: relative;

}

</style>

</head>


<body>

<p><a href="#" class="run">animate</a></p>

<div> </div>


<!---------- jQuery code Start ---------->

<script>

$("a").click(function(e) {

    // 불투명도 0.5로, 현재 위치에서 오른쪽으로 400만큼씩 2초 동안 이동한다.

    $("div").animate({opacity: "0.5", left: "+=400"}, 2000);

// 현재 위치에서 위에서부터 밑으로 100만큼씩 1초 동안 이동한다.

$("div").animate({top:"+=100"}, 1000);

//slideUp() 함수를 사용하여 height가 줄어들며 접히는 모습을 보여준다. 매개변수가 없을 때에는 'normal'은 0.4초를 의미한다.

$("div").slideUp();

});

</script>

</body>

</html>

jQuery는 위에 있는 세 가지의 animated() 함수를 동시에 실행하지 않고 하나씩 끝나기를 기다리면서 순서대로 실행된다.

animated() 함수는 큐에 들어온 순서대로 실행되기 때문에 제일 먼저 들어온 animated() 함수가 제일 먼저 실행되고 큐에서 제거된다.


cf.) 체이닝

jQuery는 메서드를 연속하여 나열할 수 있는 방법을 제공한다. 이 세 가지의 메서드는 아래와 같이.(dot)로 계속 기술할 수 있는데, 이를 '체이닝'이라고 부른다.

$("div").animated({opacity:"0.1", left:"+=400"}, 2000)

.animated({top:+=100"}, 1000)

.slideUp();


4. 애니메이션 정지

마우스 오버를 하면 opacity가 1로 애니메이션되고, 마우스 아웃을 하면 opacity가 0.3으로 애니메이션되는 이미지가 있다고 가정하자.

사용자가 마우스 오버 또는 아웃을 수시로 한다면 애니메이션 큐에 쌓아놓고 끝날 때까지 모두 실행하게 된다. 

따라서 기존 큐에 있는 모든 애니메이션을 지우고 새로운 애니메이션을 가능하도록 하기 위해 jQuery에서는 stop()이라는 함수를 제공한다.

이를 통해 애니메이션을 처음부터 실행할 수 있다.


stop( [clearQueue] [, jumpToEnd]) returns: jQuery


(1) 매개 변수

- clearQueue: 기본 값을 false이며, 큐에 대기 중인 효과들을 삭제할 것인지의 여부를 결정한다.

- jumpToEnd: 기본 값은 false이며, 진행 중인 애니메이션을 완료할 것인지를 결정한다. true이면 현재 진행 중인 애니메이션의 종료 시점으로 이동한다.


stop() 함수가 호출되면, 현재 진행 중인 애니메이션이 즉시 멈춘다. stop() 함수의 매개 변수(2개)에 따라 큐에 대기 중인 애니메이션이난 효과 등에 대한 처리가 조금씩 다르다.

첫 번째 매개 변수의 경우, 큐에 대기하고 있는 효과를 삭제하려면 true, 삭제하지 않고 실행하려면 false로 설정한다. 기본 값은 false이다.

두 번째 매개 변수의 경우, 진행되고 있는 현재 애니메이션을 끝으로 즉시 이동하려면 true, 그렇지 않고 stop() 명령이 수행된 지점에서 멈추고 끝내려면 false로 설정한다.

기본 값은 false이다.


예를 들어, CSS와 animate 사이에 있는 stop() 함수는 애니메이션(opacity 변경) 먼저 진행 중일 경우 애니메이션이 모두 끝나지 않아도 정지시키고 새로운 애니메이션을 작동시키는 것이다.


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>animate_stop() </title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<style type="text/css">


div {margin-bottom:50px;}

a{text-decoration:none;}

#box1 {

background: #F00;

height: 50px;

width: 50px;

position: relative;

}

#box2 {

background: #FF0;

height: 50px;

width: 50px;

position: relative;

}

#box3 {

background: #F0F;

height: 50px;

width: 50px;

position: relative;

}

#box4 {

background: #0FF;

height: 50px;

width: 50px;

position: relative;

}

</style>

</head>

<body>

효과 순서<br />

.animate({opacity: "0.1", left: "500"}, 1000)<br />

.animate({opacity: "0.4", top: "0",  left: 0, height: "100", width: "100"}, 1000)<br />

.slideUp(1000)<br />

.slideDown(1000)<br />

.animate({left: "0"}, 1000)<br />

<br />

<br />  

<a href="#" id="startbtn1">효과시작</a> &nbsp; <a href="#" id="stopbtn1">stop(true,true)</a>

<div id="box1"></div>

<a href="#" id="startbtn2">효과시작</a> &nbsp; <a href="#" id="stopbtn2">stop(true,false)</a>

<div id="box2"></div>

<a href="#" id="startbtn3">효과시작</a> &nbsp; <a href="#" id="stopbtn3">stop(false,true)</a>

<div id="box3"></div>

<a href="#" id="startbtn4">효과시작</a> &nbsp; <a href="#" id="stopbtn4">stop(false,false)</a>

<div id="box4"></div>

<script type="text/javascript">

$("#stopbtn1").click(function(){

 $("#box1").stop(true,true)

})

$("#startbtn1").click(function(){

$("#box1").animate({opacity: "0.1", left: "500"}, 1000)

.animate({opacity: "0.4", top: "0",  left:100, height: "100", width: "100"}, 1000)

.slideUp(1000)

.slideDown(1000)

.animate({left: "0"}, 1000)

return false;

});

//----------------------------------------

$("#stopbtn2").click(function(){

 $("#box2").stop(true,false)

})

$("#startbtn2").click(function(){

$("#box2").animate({opacity: "0.1", left: "500"}, 1000)

.animate({opacity: "0.4", top: "0",  left: 100, height: "100", width: "100"}, 1000)

.slideUp(1000)

.slideDown(1000)

.animate({left: "0"}, 1000)

return false;

});

//-------------------------------------------

$("#stopbtn3").click(function(){

 $("#box3").stop(false,true)

})

$("#startbtn3").click(function(){

$("#box3").animate({opacity: "0.1", left: "500"}, 1000)

.animate({opacity: "0.4", top: "0",  left: 100, height: "100", width: "100"}, 1000)

.slideUp(1000)

.slideDown(1000)

.animate({left: "0"}, 1000)

return false;

});

//----------------------------------------------

$("#stopbtn4").click(function(){

 $("#box4").stop(false,false)

})

$("#startbtn4").click(function(){

$("#box4").animate({opacity: "0.1", left: "500"}, 1000)

.animate({opacity: "0.4", top: "0",  left: 100, height: "100", width: "100"}, 1000)

.slideUp(1000)

.slideDown(1000)

.animate({left: "0"}, 1000)

return false;

});

</script>

</body>

</html>

이 예제에서 효과 시작을 누르면 다섯가지의 효과 순서가 작동된다. 이 때 stop() 함수의 매개 변수에 따라 어떻게 정지되는지 확인하자.


5. 애니메이션 연기(지연)

.delay( duration [, queueName]) returns: jQuery

delay() 메서드는 애니메이션  효과 및 기본 효과를 약간 지연시킬 수 있는 방법이다. 하지만 매개 변수 없는 함수들, 즉 show()나 hide()들은 지연되지 않는다.


<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>delay demo</title>

  <style>

  div {

    position: absolute;

    width: 60px;

    height: 60px;

    float: left;

  }

  .first {

    background-color: #3f3;

    left: 0;

  }

  .second {

    background-color: #33f;

    left: 80px;

  }

  </style>

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

 

<p><button>Run</button></p>

<div class="first"></div>

<div class="second"></div>

 

<script>

$( "button" ).click(function() {

  // slideUp() 함수와 fadeIn() 함수 사이를 0.8초 동안 지연시킨다.

  $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

  $( "div.second" ).slideUp( 300 ).fadeIn( 400 );

});

</script>

</body>

</html>

cf.) $("div").slideUp(300).fadeIn(500);

<div> 요소에 0.3초동안 sideUp()을 수행한 후 곧바로 0.5초 동안 fadeIn() 효과를 적용한다.


cp.) 메서드 체인

메서드 체인은 사슬처럼 연결하여 메서드를 처리할 수 있다. 대부분의 jQuery 메서드는 jQuery 객체를 반환한다. 이렇게 반환된 객체에 지속적으로 다른 메서드를 추가하여

작업할 수 있다.

$("div#box").find('span').text("standard dummy").css("color","red");

--> 지속적으로 결과 집합을 유지하면서 메서드를 적용할 수 있다. jQuery 메서드를 연속적으로 수행하는 방식을 '메서드 체인'이라고 한다.


예제1)

<!DOCTYPE html>

<html>

    <head>

        <style>       

                span {

                color:red;

                cursor:pointer;

            }

            div {

                margin:3px;

                width:80px;

                height:80px;

            }

            div {

                background:#f00;

            }

</style>

        <script src="http://code.jquery.com/jquery-latest.js"></script>

    </head>

    <body>

        <input type="button" id="fadeout" value="fade out" />

        <input type="button" id="fadein" value="fade in" />

        <input type="button" id="hide" value="hide" />

        <input type="button" id="show" value="show" />

        <input type="button" id="slidedown" value="slide down" />

        <input type="button" id="slideup" value="slide up" />

        <input type="button" id="mix" value="mix" />

        <div id="target">

            target

        </div>

        <script>$('input[type="button"]').click( function(e) {

                var $this = $(e.target);

        //$(e.target): 이벤트가 발생한 엘리먼트 반환하니까 예를 들러 id=fadeout을 클릭하면 <input type="button" id="fadeout" value="fade out" />에 대한

                //엘리먼트 object값을 전달

                //->object값을 레퍼로 감싸서 $this에 저장

                switch($this.attr('id')) {

                    case 'fadeout':

                        $('#target').fadeOut('slow');

         //fadeOut('slow'): slow라는 인자는 fadeOut되는 속도를 나타냄, fast나 숫자로 정교하게 작업 가능하다.

                        break;

                    case 'fadein':

                        $('#target').fadeIn('slow');

                        break;

                    case 'hide':

                        $('#target').hide();

                        break;

                    case 'show':

                        $('#target').show();

                        break;

                    case 'slidedown':

                        $('#target').hide().slideDown('slow');

                        break;

                    case 'slideup':

                        $('#target').slideUp('slow');

                        break;

                    case 'mix':

                        $('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});

                 //delay(1000): 1초간 애니메이션 정지

            //function(){alert('end'): slideDown()이라는 이벤트가 끝나면 익명함수 호출된다.(일종의 이벤트)

                        break;

                }

            }) 

        </script>

    </body>

</html>


예제2)

<!DOCTYPE html>

<html>

    <head>

        <style>        

            div {

                background-color:#bca;

                width:100px;

                border:1px solid green;

            }

        </style>

        <script src="http://code.jquery.com/jquery-latest.js"></script>

    </head>

    <body>

        <button id="go">

            &raquo; Run

        </button>

 

        <div id="block">

            Hello!

        </div>

        <script>/* Using multiple unit types within one animation. */

        

/* animate(): 디테일하게 애니메이션 효과를 제어할 수 있음-> 첫번째 인자는 최종적으로 선택된 엘리먼트가 어떤 모습을 하고 있어야 하는가를 나타냄  두번째 인자는 (3000)는 애니메이션 효과가 3초만에 끝난다.*/

            $("#go").click( function() {

                $("#block").animate({

                    width: "300px", // 기본:100px

                    opacity: 0.4,

                    marginLeft: "50px",

                    fontSize: "30px",

                    borderWidth: "10px"

                }, 3000);

            });</script>

    </body>

</html>



'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Ajax 기초  (0) 2014.12.07
[jQuery] Chain  (0) 2014.12.07
[jQuery] Effects  (0) 2014.12.07
[jQuery] Event  (0) 2014.12.07
[jQuery] Attribute/CSS  (0) 2014.12.07

[jQuery] Effects

Effects


플래시 전용으로만 생각되었던 다양한 모션 그래픽과 애니매이션 그리고 인터랙티브들을 웹 표준에서 작업할 수 있게 제공해주는 것이 바로 JQuery의 Effects와 Custom와 Custom Animations이다.



1. effect 함수의 매개변수

(1) duration

시간 값으로, 1/1000밀리세컨드 단위이다.

문자열로 "show", "normal", "fast"를 사용할 수도 있으며, 이는 각각 200, 400, 600 밀리세컨드를 의미한다.

매개변수 생략시 기본 값은 normal이며 400밀리세컨드로 움직이게 된다.(show(), hide() 제외)


(2) easing

easing 함수란, 스피드를 조작하여 특별한 효과를 나타나게 하는 함수를 의미한다.

jQuery가 기본적으로 가지고 있는 easing 표현은 swing, linear이다. 더 많은 easing효과는 jQuery UI site를 방문한다. 단, easing 함수는 플러그인이므로 관련된 라이브러리를 포함하고 있어야만 사용할 수 있다.


(3) callback

콜백 함수는 스스로 호출되는 함수의 의미로 이 챕터에서는 이펙트 애니메이션 효과가 완료되면 자동으로 호출되는 함수를 말한다.

콜백 함수는 매개변수를 전달할 수는 없지만 this 키워드는 자동으로 전달된다. 콜백 함수 내부 코드에서 this는 이펙트 애니메이션의 주체인 요소 노드를 의미한다. 

특정 이펙트 애니메이션 효과를 지속적으로 반복하고 싶을 때 자주 사용되는 함수이다.


2. Basics

Basics는 말 그대로 기본 효과이다. 기본 효과는 HTML 객체를 보이거나 감추는 기능이다.

여기에 시간을 정해주면 약간의 애니메이션 효과를 줄수 있다. 이 함수를 적용하면 객체는 CSS의 display 상태를 변경해주는데, hide() 함수는 display:none로 바꿔주고,

show() 함수는 display:block 또는 display:inline으로 바꿔주게 된다. display:nonel상태가 되면 DOM 영역에서 제거되면서 그 빈 부분을 다른 HTML이 채우게 된다.

opacity:0으로만 해서는 DOM에서 제거되지 않는다.


(1) hide()

.hide() Returns: jQuery

hide() 함수에 매개 변수가 전달되지 않으면 즉시 노드의 상태를 display:none으로 변경하면서 눈에 보이지 않게 된다.


.hide(duration ([,callback])        Returns: jQuery

서서히 보이지 않게 하려면 시간 값(1/1000)을 매개 변수로 전달해주면 된다.


.hide([duration] [,easing] [,callback])        Returns: jQuery

easing은 요소의 애니메이션 상태에 다양한 가.감속등을 설정할 수있다.

세번째 매개변수인 콜백 함수가 지정되면 모든 hide() 작업이 끝난 후에 호출된다.


(2) show()
show() returns: jQuery
show() 함수에 매개 변수가 전달되지 않으면 즉시 노드의 상태를 display:block 또는 inline으로 변경하면서 눈에 보이게 된다.

.show(duration [,callback])      returns: jQuery
서서히 보이게 하려면 시간 값을 매개 변수로 전달한다.

.show([duration] [,easing] [,callback])        returns: jQuery
show 기능이 모두 끝나고 난 후에 호출된 콜백 함수이다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hide()/show()</title>
<!-- jQuery library -->
<script src="jquery-1.7.2.min.js"></script>
<style>
</style>
</head>
<body>
<img src="sample1.jpg" alt="" width="300" height="307" />
<br />
<button id="hide">hide()</button>
<button id="show">show()</button>
<script>
$('#show').click(function() {
$('img').show(1000, function() {
alert('지금 상태는' + $(this).css("display") + "입니다.");
});
});
// id가 hide인 버튼을 클릭하면 1초 동안 hide() 효과가 나타나면서 img가 보이지 않는 상태로 변경되고, 경고 창으로 현재 이미지의 display 상태를 출력한다.
$('#hide').click(function() {
// 이미지에 1초 동안 hide() 효과가 나타난 후, 콜백 함수를 호출한다.
$('img').hide(1000, function() {
alert('지금 상태는' + $(this).css("display") + "입니다.");
});
});
</script>

</body>
</html>

------>   ------>  

cf.) jQuery로 선택된 요소를 숨기는 방법에는 아래와 같이 두 가지 방법이 있을 수 있는데, 이 둘의 차이
$("요소").css("display:none");
$("요소").css("display:none");를 사용하면 style="display:none"과 같이 inline style 형식으로 처리되면서 요소가 사라진다.

$("요소").hide();
hide()를 사용하여 요소를 숨기게 되면 display 속성 값을 jQuery의 데이터 캐시에 저장해두기 때문에 show()나 toggle에 의해 복원될 때에 display 설정을 초기값으로 전환해준다.

(3) toggle()
toggle()은 show()와 hide()를 번갈아 실행시켜주는 함수이다.
만약 상태가 show이면 hide로 hide이면 show로 바꿔줁다.
toggle([duration] [,callback]) returns: jQuery

3. Fading
fading은 요소의 불투명도(opacity)만을 조절하는 함수이다. 크기를 조절하지 않는 것을 빼면 show(), hide()와 다르지 않다. 요소의 원래 불투명도를 기억하고 있으면서 점점 흐리게 또는 밝게 조절할 수 있다.
물론 여기도 fadeToggle()이라는 함수로 fadeIn, fadeOut 함수를 번갈아 실행할 수 있다. 또 하나 주의 깊게 보아야 할 부분은 fadeTo() 함수로, 이 함수는 불투명도 값을 지정하여 그 불투명도까지 애니메이션을 수행해준다.
하지만 이 함수는 display 상태를 none로 만들지 않기 때문에 영역은 그대로 유지된다.

 함 수

 기 능

 fedeIn()

 opacity 0에서 1로 전환하며 서서히 나타나게 처리한다.

 display 상태는 block이나 inling으로 설정된다.

 fadeOut()

 opacity 1에서 0로 전환하며 서서히 사라지게 처리한다.

 display 상태는 none로 설정된다.

 fadeToggle()

 fadeIn()과 fadeOut()을 번갈아 가며 실행해준다.

 fadeTo()

 불투명도(opacity)를 지정하여 fade를 조절한다.


(1) fadeIn()
.fadeIn([duration] [, easing] [callback]) returns: jQuery
fadeIn() 함수가 시작되고 display 상태가 none으로 되어 있을 때에는 가장 먼저 display 상태를 원래대로 바꾸고, opacity가 0에서 1로 변경되면서 서서히 나타나도록 한다. 
매개변수의 의미는 hide()/ show() 함수와 같다. 단 [duration] 매개변수를 생략하면 기본 값인 400 밀리컨드로 움직인다.

(2) fadeOut()
.fadeOut([duration] [, easing] [, callback])     returns: jQuery
.fadeOut() 함수가 시작되면, opacity가 1에서 0으로 변경되면서 서서히 사라지도록 한다. 모두 사라지면 display 상태를 none으로 설정한다. 단, [duration] 매개 변수를 생략하면 기본 값인
400 밀리세컨드로 움직인다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> fadeIn() fadeOut()   </title>
<!-- jQuery library -->
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<img src="sample2.jpg" alt="" width="300" height="307" />
<br/>
<button id="fadeOut">fadeOut</button>
<button id="fadeIn">fadeIn</button>
<!---------- jQuery code Start ---------->
<script>
$("body").append("<p></p>");

$('button#fadeOut').click(function() {
   $('img').fadeOut(1000, function() {
    $("p").text('지금 display 값은 '+$(this).css("display")+" 입니다.");
  });
});
$('button#fadeIn').click(function() {
   $('img').fadeIn(1000, function() {
    $("p").text('지금 display 값은 '+$(this).css("display")+" 입니다.");
  });
});
</script>
</body>
</html>

----->    ------>  

(3) fadeToggle()

.fadeToggle([duration] [, easing] [, callback]) returns: jQuery

.fadeToggle() 함수는 fadeIn()m fadeOut() 함수를 교대로 수행해준다.


(4) fadeTo()

.fadeTo(duration, opacity  [, easing]  [, callback]) returns: jQuery

fadeTo() 함수는 opacity를 지정하여 서서히 사라지거나 나타나게 한다. opacity 값의 범위는 0~1 사이이다.

불투명도는 이미지 효과를 적용하는 등과 같이 다양하게 사용된다.


※ 다른 함수와 차이점

- fadeTo() 함수는 반드시 duration을 명시해주어야 한다.

- fadeTo() 함수는 opacity가 0으로 되어 있기 때문에 눈에 보이지 않더라도 display 상태를 none으로 변경하지 않는다. 따라서 문서의 구조에 영향을 미치지 않는다.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title> fadeTo()  </title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

</head>

<body>

<img src="sample3.jpg" alt="" width="300" height="307" />

<br>

// opacity를 변화시킬 버튼 4개를 준비한다. <button> 태그의 title 값에 opacity 값을 설정해 놓았다.

<button title="0">0</button>

<button title="0.3">0.3</button>

<button title="0.6">0.6</button>

<button title="1">1</button>

<!---------- jQuery code Start ---------->

<script>

$("body").append("<p></p>");

$('button').click(function() {

var opacity = $(this).attr("title");

    $('img').fadeTo("slow" , opacity ,  function() {

    $("p").append('display : '+$(this).css("display")+"<br/>");

$("p").append('opacity : '+$(this).css("opacity")+"<br/>");

  });

});

</script>

</body>

</html>


4. Sliding Effects
Sliding 효과는 노드의 높이를 조절하여 접혔다 하는 효과를 보여준다. 매개변수로는 [duration] [ ,callback] [sildeToggle]이 가능하다.
아주 간단한 함수지만 접었다 폈다 하는 기능을 가진 어코디언 메뉴와 세로 내비게이션 등에 많이 사용된다.

 함수

 기 능

 sildeDown()

 슬라이딩 스타일로 요소를 보이게 한다.

 sildeUp()

 슬라이딩 스타일로 요소를 숨기게 한다.

 sideToggle()

 slideDown()와 sildeUp()를 반복하여 바꿔준다.



(1) slideDown()
.slideDown([duration] [, easing] [, callback])      returns: jQuery
slideDown은 노드의 높이 값을 0부터 원래 가지고 있던 높이까지 늘리면서 펼쳐주는 효과를 나타낸다. 물록 최종적으로 display 상태가 block이나 inline이 될 것이다.

(2) slideUp()
.slideUp([duarion] [ ,callback]) returns: jQuery
slideUp은 노드의 현재 높이 값에서 0까지 줄어들어 접는 효과를 나타낸다. 최종적으로 display 상태는 none이 된다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> slideDown() slideUp() </title>
<!-- jQuery library -->
<script src="jquery-1.7.2.min.js"></script>
<style>
</style>
</head>
<body>
<div>
<img src="sample1.jpg" alt="" width="300" height="307"/>
</div>
<button id ="up">slide감추기</button>
<button id ="down">slide보이기</button>
<!---------- jQuery code Start ---------->
<script>

$('#up').click(function() {
  // <div> 태그의 slideUp()을 실행하면 1초 동안 접히게 된다.
  $('div').slideUp(1000, function() {
    alert('지금 상태는'+$(this).css("display")+"입니다.");
  });
});

$('#down').click(function() {
  $('div').slideDown(1000, function() {
    alert('지금 상태는'+$(this).css("display")+"입니다.");
  });
});
</script>
</body>
</html>

          ------------>


(3) slideToggle()

slideToggle()([duration] [, callback]) returns: jQuery
slideToggle() 함수는 slideUp()와 slideDown()를 번갈아 실행시켜주는 함수이다.
매개변수와 관련된 의미는 다른 effect 함수들과 같다.


'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Chain  (0) 2014.12.07
[jQuery] Animation  (0) 2014.12.07
[jQuery] Event  (0) 2014.12.07
[jQuery] Attribute/CSS  (0) 2014.12.07
[jQuery] DOM Manipulation  (0) 2014.12.07

[jQuery] Event

Event


사용자의 반응을 기다리거나 그 사건이 일어날 때까지 기다리다가 그 사건이 일어났을 때에 바로 프로그램이 실행되도록 해주는 개념이 바로 '이벤트'이다. 

jQuery에서는 기본적으로 마우스 관련 이벤트 뿐만아니라 문서로딩, 폼, 키보드, 스트롤과 관련되 많은 이벤트가 제공된다.



기본적으로 전역에 작성된 프로그램은 프로그램이 실행됨과 동시에 바로 실행되지만 함수로 묶인 부분은 호출되지 않으면 실행되지 않는다.

이러한 이유 때문에 원하는 시점에 원하는 기능을 실행하기 위해서는 프로그램 실행의 계기가 되는 점이 필요하다. 이러한 역할을 하는 것이 Event이며, 모든 함수는 Event와 연결되어 호출되는 형태를 가진다.


1. JQuery 이벤트 처리 방식

(1)  객체에 직접 이벤트를 등록
$("#obj").click(함수);
function sum(){
alert("hello");
}
$("div").click(sum);

(2) bind 메서드를 이용하여 등록
$("#obj").bind("click", 함수);

cp.) 다수의 이벤트를 한 번에 설정하기
$("#obj").bind("mouseenter mouseleave", 함수)

function sum(){
alert("hello");
}
$("div").bind("click", sum);

(3) 이벤트 제거
// id가 obj 객체에 click 이벤트를 제거
$("#obj").unbind("click");

//id가 obj객체에 모든 이벤트를 제거
$("#obj").unbind();

cf.) hover 이벤트
hover 이벤트는 mouseenter와 mouseleave 이벤트를 하나로 묶어 처리해주는 이벤트이다.

$("selector").hover(function( ){ }, function( ) { });
 // hover 매개변수 각각 mouseenter 이벤트시 호출  mouseleave 이벤트시 호출
hover는 2개의 함수를 가지고 있는데, 첫 번째 함수는 mouseenter 이벤트 때에 호출되는 함수이고, 두 번째 함수 mouseleave 이벤트 때에 호출되는 함수이다.


2. 이벤트 흐름 및 차단

(1)  이벤트 흐름

이벤트 흐름이란, 이벤트가 전달되는 단계 또는 순서라고 생각하면 된다.

예를 들어 문서 구조의 <div> 요소 안에 <a> 요소가 있다고 가정할 때 <a> 요소에 click 이벤트가 발생하면 <a> 태그도 click 이벤트를 감지할 수 있고, <div> 요소도 감지할 수 있다.

이렇게 여러 개의 중첩되는 요소가 있는 구조에 이벤트가 발생한다.

이벤트의 흐름은 크게 세 가지로 나누어 볼 수 있다.

1 capture 단계: 부모 노드에서부터 target 노드 전까지를 의미한다.

2 target 단계: 현재 클릭한 마지막 자식 노드를 의미한다.

3 bubbling 단계: target 노드부터 조상 노드까지를 의미한다.

이처럼 이벤트는 세 가지 흐름을 통해 순차적으로 이벤트가 전달된다. jQuery에서는 기본적으로 bubbling 단계를 지원하므로 이 단계를 잘 이해하자.


(2) 이벤트 차단

이벤트 차단이란, 이벤트의 흐름을 막는 것을 말한다. 이는 여러 개의 중첩 요소가 있는 구조에 이벤트가 발생했을 때에 이벤트의 흐름이 더 이상 진행되지 못하도록 차단하는 것으로, jQuery에서는 이벤트 차단을 위해

stopPropagation( ) 메서드를 제공한다

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Event Flow</title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

div {

width: 60px;

height: 60px;

background: #999;

padding: 20px 20px 20px 20px;

}


a {

display: block;

width: 60px;

height: 60px;

background: #0F0;

border: #000 thin solid;

}

</style>

</head>

<body>

<div>

<a href="#"> </a>

</div>

<!-- jQuery code Start-->

<script>

$("div").click(function(e) {

$(this).css("background", "yellow");

});

$("a").click(function(e) {

$(this).css("background", "yellow");

//이벤트 흐름을 정지하여 더이상 부모에게 이벤트 흐름이 전달되지 않는다. bubbling 차단

e.stopPropagation();

});

</script>

</body>

</html>


e.stopPropagation(); e.stopPropagation();


문서 구조의 <div> 요소 안에는 <a> 요소가 있는데, 이 두 요소 모두에 click 이벤트를 설정하고 click 이벤트를 발생시키면 요소를 노란색으로 변경할 수 있다.(bubbling)

위의 그림에서 a를 click하면 <a> 요소가 click 이벤트를 감지하여 배경색을 노란색을 변경한다. 그리고 click 이벤트가 부모에게 전달되어 <div> 요소의 배경색도 노란색으로 변경된다.

이렇게 이벤트가 bubbling되면서 부모 노드에세도 이벤트가 전달되므로 부모가 해당 이벤트를 설정하고 있다면 호출된다.

이렇게 stopPropagation() 메서드로 이벤트가 bubbling되는 것을 막음으로써 부모 노드로 이동하는 이벤트 흐름을 차단하게 된다. 그래서 <a> 요소를 click하기만 해도 <a> 요소의 배경색이 변경되는 것을 알 수 있다.


예제1. bind, unbind, trigger를 이용한 이벤트의 설치, 제거, 호출

<html>

    <head>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            function clickHandler(e){

                alert('thank you');

            }

            $(document).bind('ready', function(){

    //bind: ready이벤트를 감지하기 위해 사용

                 $('#click_me').bind('click', clickHandler);

                 $('#remove_event').bind('click', function(e){

         //function(e)익명함수를 사용한 이유: 이벤트를 설치할 때 사용하는 로직들은 보통 재활용되지 않는 경우가 많아서

              //그러한 경우 익명함수를 사용하는 것이 편리하다.

                 $('#click_me').unbind('click', clickHandler);

         //unbind함수의 인자가 bind와 동일한 이유: 이벤트를 제거할 때는  어떤 이벤트 타입의, 

                 // 어떤 이벤트 핸들러 인지를 정확히 지정해야 삭제할 수 있다. 

                 // unbind 버튼을 누르고 난 후부터는 click me를 눌러도 이벤트가 발생하지 않는다.

                 });

                 $('#trigger_event').bind('click', function(e){

                 $('#click_me').trigger('click');

         // unbind가 해제되어 이벤트가 발생한다.

                 });

             })

        </script>

    </head>

    <body>

        <input id="click_me" type="button" value="click me" />

        <input id="remove_event" type="button" value="unbind" />

        <input id="trigger_event" type="button" value="trigger" />

    </body>

</html>


예제2. 이벤트 헬퍼

<html>

    <head>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            function clickHandler(e){

                alert('thank you');

            }

            $(document).ready(function(){

    //이벤트 헬퍼: bind로 이벤트 핸들러를 설치하는 것보다 간결, 바로 ready함수 사용

                 $('#click_me').click(clickHandler);

                 $('#remove_event').click(function(e){

                 $('#click_me').unbind('click', clickHandler);

                 });

                 $('#trigger_event').click(function(e){

                 $('#click_me').trigger('click');

                 });

             })

        </script>

    </head>

    <body>

        <input id="click_me" type="button" value="click me" />

        <input id="remove_event" type="button" value="unbind" />

        <input id="trigger_event" type="button" value="trigger" />

    </body>

</html>


예제3. live를 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 수 있다.

<html>

    <head>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            function clickHandler(e) {

                alert('thank you');

            }

        // 보통 ready라는 타이밍을 넣어 안전한 타이밍을 넣어주나 live는 그러한 타이밍이 없이 바로 이벤트 발생

            // live를 사용하게 되면 현재 화면상에 존재하지 않는 element라고 하더라도 이벤트를 설치할 수 있다.    

            $('#click_me').live('click', clickHandler);

            $('#remove_event').live('click', function(e) {

            $('#click_me').die('click', clickHandler);

            });

            $('#trigger_event').live('click', function(e) {

            $('#click_me').trigger('click');

            });

        </script>

    </head>

    <body>

        <input id="click_me" type="button" value="click me" />

        <input id="remove_event" type="button" value="unbind" />

        <input id="trigger_event" type="button" value="trigger" />

    </body>

</html>


'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Animation  (0) 2014.12.07
[jQuery] Effects  (0) 2014.12.07
[jQuery] Attribute/CSS  (0) 2014.12.07
[jQuery] DOM Manipulation  (0) 2014.12.07
[jQuery] Traversing  (0) 2014.12.07

[jQuery] Attribute/CSS

Attribute/CSS


Selector를 사용하여 조작을 원하는 HTML 노드를 선택했다면, 이제는 선택한 노드에 어떠한 작업을 할 순서이다.

선택한 노드의 속성 값을 가져오거나 텍스트를 변경할 수 있고, CSS() 함수를 사용하면 CSS에 의해 적용되는 상태를 동적인 상황에서도 변경할 수 있다.



jQuery의 강력한 기능 중 하나는 CSS를 조작할 수 있다는 것이다. 일반적인 CSS는 HTML의 구조에 표현을 입히는 작업이라 할 수 있는데, jQuery의 CSS 관련 메서드는 동적으로 CSS를 변경할 수 있다는 것이 가장 큰 장점이다. 변경을 할 때에 클래스를 추가할 수도 있고, 제거할 수도 있기 때문에 매우 유용하다.


※ <p> 태그의 배경색을 빨간색으로 설정

 CSS

 jQuery.CSS()

 p {background : #F00}

 $("p").css("backgournd", "#F00");


※ jQuery CSS 관련 메서드

 메서드

 설 명

 .addClass()

 특정한 클래스를 노드에 추가할 수 있다.

 .css()

 css() 함수는 element의 속성 값을 알아낼수 도 있고, 설정할 수도 있다.

 .hasClass()

 특정한 클래스가 있는지를 찾을 수 있다.

 .removeClass()

 특정한 클래스를 요소에서 제거할 수 있다.

 .toggleClass()

 특정한 클래스의 추가, 제거를 한 번에 처리할 수 있다.


1. CSS()

.css(propertyName) returns: String

css(propertyName)- 속성 값 알아내기

.css() 함수에서 속성 값만을 지정하면 해당 속성의 값을 알아낼 수 있다. 웹 브라우저마다 다르게 표현이라는 속성이라 하더라도 jQuery는 알아서 웹 브라우저에 맞게 동일한 결과를 가져다 준다.

$("div").css("background-color");

// 요소 배경색의 컬러 값을 반환

$("div").css("width");

// 요소 가로폭의 크기 px 값을 반환


.css(propertyName, value) returns: jQuery

css(propertyName, value)- 속성 값 설정하기

단순히 특정 객체의 속성을 읽어노는 것뿐만 아니라 속성을 설정할 수도 있다.

$("div").css('color','#f00');

//<div> 태그의 내용을 빨간색으로 설정

이렇게 될 때 jQuery는 div의 style 속성을 편집하게 되어 inline style를 적용하는 것과 같게 된다.


cf.) { }를 사용하면 한 번에 여러 개를 적용할 수 있다.

$("div").css({'background-color' : '#ddd', 'color' : '#f00', 'font-size' : '10px'});


2. addClass() 

.addClass(className) returns: jQuery

jQuery에서 많이 활용되는 함수로, CSS가 필요한 상황에 적용할 수 있다.

$('p').addClass('myclass');

// p 요소에 myclass 추가

<p class="myclass">XXX</p>


cf.) 기존에 클래스가 있는 경우

<p> 태그에 class가 추가된다. 기존 클래스는 그대로 유지된다.

$('p').addClass("myclass"); 를 사용하면 <p> 태그의 상태는 아래와 같이 기존 클래스와 새로 추가된 클래스(myclass)가 함께 적용된다.

<p class="existClass myclass">


3. removeClass()

.removeClass([className]) returns: jQuery

removeClass는 기존 태그에 적용되어 있는 클래스를 제거하는 함수이다.


- 하나 이상의 클래스를 제거하려면 아래와 같이 공백을 사용해야 한다.

$('p').removeClass('classA classB classC');


- 클래스 이름이 myClass인 <p> 태그에 jQuery 코드 $('p').removeClass("myClass");가 실행되면 <p> 태그 <p class="myclass"></p> 에서

myClass가 제거되기 때문에 <p class=""></p>처럼 변경된다.

'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Effects  (0) 2014.12.07
[jQuery] Event  (0) 2014.12.07
[jQuery] DOM Manipulation  (0) 2014.12.07
[jQuery] Traversing  (0) 2014.12.07
[jQuery] Wrapper  (0) 2014.12.07

[jQuery] DOM Manipulation



DOM Manipulation


DOM Manipulation은 DOM 구조를 변경할 수 있는 jQuery 메서드들이다. 동적으로 문서 구조를 변경할 수 있고, 특정 노드의 내.외부 삽입과 삭제도 가능하다.



1. DOM Insertion, Inside

 메서드

 기 능

 append()

 선택된 내부의 맨 뒤에 자식 노드를 새로 추가한다.

 appendTo(target)

 새로운 노드를 target에 해당하는 노드 내부의 마지막에 추가한다.

 prepend()

 선택된 노드 내부의 맨 앞에 자식 노드를 새로 추가한다.

 prependTo(target)

 새로운 노드를 target에 해당하는 노드 내부의 첫 번째로 추가한다.

 html()

 노드 내부의 HTML을 읽고 쓸 수 있다.

 text()

 노드의 텍스트를 읽고 쓸 수 있다.


.append(content, [content]) Returns: jQuery
append() 함수는 선택된 요소의 내부에 가장 뒤에 있는 매개변수로 전달되는 HTML 문자열, <DOM> 요소 등을 추가해주는 함수이다.
cf.) 매개변수: content
선택된 요소 내부의 앞에 추가될 HTML 문자열, DOM 요소, jQuery 객체 뒤의 content는 매개변수로 여러 개를 가질 수 있다는 뜻이다.
$("div").append("<p>반갑습니다.</p>");
<div id="container">
<p>안녕하세요</p>
//<p> append() 실행시 추가될 공간 </p>
</div>

cf.) append(method)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>append()활용</title>
<!-- jQuery library -->
<script src="jquery-1.7.2.min.js"></script>
<style>
div {
border: #00F solid 1px;
}
</style>
</head>
<body>

<div id="container"></div>
<button id="append" title="append">append</button>

<!---------- jQuery code Start ---------->
<script>
$("#append").click(function(e) {

$("div#container").append(fetchImg());
});

function fetchImg() {
var n = Math.ceil(Math.random() * 3);
var imgPath = "<img src='pic"+n+".jpg' alt='' width='100' height='100' />";
return imgPath;
}
</script>
</body>
</html>


   append() 실행후 


.prepend(content, [content]) Returns: jQuery

prepend() 함수는 선택된 요소 내부의 가장 앞에 매개 변수로 전달되는 HTML 문자열, <DOM> 요소 등을 추가해주는 함수이다.
append()와는 요소가 추가되는 위치가 다르다.
$("div").prepend("<p>반갑습니다.</p>");
<div id="container">
  //<p> prepend() 실행시 추가될 공간 </p>
<p>안녕하세요</p>
</div>

prepend() 활용예제)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> prepend활용  </title>
<!-- jQuery library -->
<script src="jquery-1.7.2.min.js"></script>
<style>
  img {padding:0px; margin:5px;}
</style>
</head>
<body>
<div id="container">
<img src='pic1.jpg' alt='' width='100' height='100' />
<img src='pic2.jpg' alt='' width='100' height='100' />
<img src='pic3.jpg' alt='' width='100' height='100' />
</div>
<p> prepend를 사용하여 사진을 순환합니다. </p>
<button id ="prepend"   title="prepend">prepend</button>
<!---------- jQuery code Start ---------->
<script>
$("button#prepend").click(function(e) {
    $("div#container").prepend( $("div#container img:last") ); // 매개변수로 jQuery 객체나 나오는 모습
});
</script>
</body>
</html>


html()/html(htmlString) html() 함수는 javaScipt에서 innerHTML과 같은 기능을 하는 것으로, 선택 집합의 내부 요소들을 HTML 문자열로 반환한다. html() 함수에 인자로 HTML 문자열이 전달되면 그 요소에 HTML을 추가하는 것이다. .html() returns: String HTML 문서에서 어떤 요소의 내부 html을 알아내고자 할 때 html() 함수를 사용할 수 있다.

var htmlString = $("div#intro").html(); // div#intro 요소내부의 html 내용을 htmlString 변수에 저장 // htmlString= <p>intro 입니다.</p>

<div id="intro"> <p>intro 입니다.</p> </div>

return 되는 값이 문자열이라는 것에 주의하자.

실제 htmlString에 대입되는 값은 <p>intro 입니다.</p> 이다.


.html(htmlString) returns:jQuery 선택 집합의 요소에 들어가는 html을 변경하는 것이다.

var htmlString = $("div#intro").html();

$("div#main").html(htmlString); // htmlString변수값을 #main 요소내부에 새로운 html 문자열을 추가한다. 기존에 있는 html은 제거됩니다. <div id="intro"> <p>intro 입니다.</p> </div> <div id="main"> <p>여기는 main 입니다.</p> //<p>intro 입니다.</p> <p> <img src='pic1.jpg' /> </p> </div>

실행결과)

<p>여기는 main 입니다.</p>

<p><img src='pic1.jpg' /></p>

내용은 삭제 되고 <p>intro 입니다.</p> 가 추가된다.


.text(textString) returns: jQuery
선택 집합의 노드에 들어가는 내용을 변경하는 것이다. (텍스트 노드 영역만 변경)
예를 들어 HTML이 <div> <p>HI</p> </div> 와 같은 구조일 때 $("div").text("TITLE")라는 명령어일 경우 <div> <p>TITLE</p> <div> 로 변경된다.
var textString = $("div#intro").text();
// div#intro 요소의 텍스트 내용을 textString 변수에 저장한다.
// textString = intro 입니다.
$("div#main").text(textString);
// textString변수값을 #main 요소에 텍스트로 추가, 기존에 있는 텍스트는 제거된다.
<div id="intro">
<p>intro 입니다.</p>
</div>
<div id="main">
<p>여기는 main 입니다.</p>
<p>
<img src='sample1.jpg' />
</p>
</div>

2. DOM Insertion, Outside

 메서드

  기 능

 after()

 선택된 노드 뒤에 새로운 노드를 추가한다.(형제 관계)

 before()

 선택된 노드 앞에 새로운 노드를 추가한다.(형제 관계)

 insertAfter()

 작성된 jQuery 객체를 target 뒤에 삽입한다.(형제 관계)

 insertBefore()

 작성된 jQuery 객체를 target 앞에 삽입한다.(형제 관계)


$("p").after("<b>Hello</b>");

// after: p태그 내용안에 들어가는 자식태그가 아니라 대등한 태그로...

<p>

       I would like to say:

</p>

        


3. DOM Insertion, Around

 메서드 

 기 능

 wrap()

 선택된 집합을 각각의 매개 변수로 넘긴 HTML 구조로 감싼다.

 wrapAll()

 선택된 집합의 전체 외곽을 매개 변수로 넘긴 HTML 구조로 감싼다.

 wrapInner()

 선택된 집합의 내부에 매개 변수로 넘긴 HTML 구조를 감싼다.


 $("span").wrap("<div><div><p><em><b></b></em></p></div></div>"); 

        <span>Span Text</span>

        <strong>What about me?</strong>

        <span>Another One</span>


4. DOM Removal

 메서드

 기 능

 detach()

 DOM에서 조건에 일치되는 노드들을 제거한다.(단, 메모리에 남아 있기 때문에 다시 사용할 수  있다.)

 empty()

 DOM에서 조건과 일치하는 노드들의 자식 노드들을 제거한다.

 remove()

 DOM에서 조건과 일치하는 노드들을 제거한다.

 unwrap()

 wrap()의 반대로, 선택된 집합을 감싸고 있는 HTML을 제거한다.


.remove([selector]) returns: jQuery
remove() 함수는 선택된 노드를 DOM에서 제거한다.
$("img:first").remove();
// 이미지 중 첫번째 노드를 제거한다.
<div class="container">
<img src='th_pic1.jpg'/> //제거된다.
<img src='th_pic2.jpg'/> 
<img src='th_pic3.jpg'/>
</div>

.empty() returns: jQuery
선택 객체의 자식 노드(자손까지 포함) 노드를 삭제한다. 하지만 선택 객체 자체는 삭제되지 않는다. 이것이 remove()와 다른 점이다.
$("p:first").empty();
// <p> 태그 중의 첫 번째 <p> 태그의 내용을 삭제합니다.<p> 노드 자체가 제거되지 않습니다.
<div class="container">
<p>jQuery</p>
<p>write less</p>
<p>do more</p>
</div>

cf.) empty() 와 remove() 함수는 DOM에서 노드를 걷어내는 점이 비슷하다. remove()를 사용하면 해당 노드를 포함한 모든 노드들이 제거된다. 이 때에는 노드와 관련된 모든 이벤트와 jQuery 데이터들도 제거된다.
데이터와 이벤트를 노드에서 제거하지 않으려면, detach()를 사용해야 한다.

detach()
remove() 함수와 똑같은 일을 한다. remove() 함수와 다른 점은 detach() 함수에 의해 제거된 노드들을 임시로 보관할 수 있다는 것이다.
이 함수는 DOM에서 제거했다가 다름에 다시 삽입할 수 있기 때문에 제거와 삽입을 반복할 때 유용하다.
var temp = $("div#content").detach();
// id가 content인 div의 모든 내용을 DOM 구조에서 제거하고, 제거된 내용은 temp에 저장한다.


5. DOM Replacement

 메서드

 기 능

 replaceAll()

 조건에 맞는 노드들을 타깃 노드들로 대체한다.

 replaceWith()

 조건에 맞는 노들들을 매개 변수로 넘긴 새로운 HTML로 대체한다.


6. clone(): 선택한 노드와 똑같은 노드를 복사한다.

간략 정리)
자식으로 삽입 (.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text())
형제로 삽입 (.after(), .before(), .insertAfter(), .insertBefore())

부모로 감싸기 (.unwrap(), .wrap(), .wrapAll(), .wrapInner())

삭제 (.detach(), .empty(), .remove(), .unwrap())

치환 (.replaceAll(), .replaceWith())



'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Event  (0) 2014.12.07
[jQuery] Attribute/CSS  (0) 2014.12.07
[jQuery] Traversing  (0) 2014.12.07
[jQuery] Wrapper  (0) 2014.12.07
[jQuery] Selector  (0) 2014.11.29

[jQuery] Traversing

Traversing


Traversing에 나열되어 있는 jQuery 메서드들은 jQuery의 선택자를 기준으로 하여 새로운 노드를 찾아가는 방법을 제공한다.



1. 트리 구조 탐색(Tree Traversal)

DOM에 접근하여 원하는 노드를 찾는 방법을 제공한다. 즉, DOM Tree 구조를 기반으로 찾아가는 방식이다. 이 방법을 잘 활용하며 DOM에 id나 class를 최소한으로 사용할 수 있다.

선택한 노드를 기준으로 형제, 자식, 부모 등으로 접근하는 다양한 방법이 있다.

ex.)

jQuery('li).parent().css('background-color','red');

// parent() 메서드는 현재 지정된 li의 부모 노드를 의미한다. 따라서 li 노드들의 부모를 선택하여 배경색을 빨간색을 설정한다.


 메서드

  설 명

 children()

 선택된 노드의 모든 자식노드만 선택한다.

 find()

 선택한 노드의 자손 노드 중 조건에 맞는 노드를 선택한다.

 next()

 선택한 노드의 다음 노드를 선택한다.

 nextAll()

 선택한 노드의 다음 모든 노드를 선택한다.

 parent()

 선택한 노드의 노드를 선택한다.

 parents()

 선택한 노드의 모든 부모 노드를 선택한다.

 prev()

 선택한 노드의 이전 노드를 선택한다.

 prevAll()

 선택한 노드의 모든 이전 노드를 선택한다.

 closest()

 선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택한다.

 nextUntil()

 다음에 위치한 노드를 조건에 맞을 때까지 찾는다.

 parentsUntil()

 조건이 참이 될 때까지 부모 노드를 찾는다.

 prevUntil()

 이전에 위치한 노드를 조건에 맞을 때까지 찾는다.

 siblings()

 형제 노드들을 모두 찾는다.


$("div#container").children("p")

div#container 태그의 자식 태그들 중에서 <p> 태그를 모두 선택한다. 여기서 주의할 점은 자손 레벨에서 찾지 않고 자식 레벨에서만 찾는다는 것이다.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>children</title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

div,p {

float: left;

margin: 10px;

background-color: #FFF;

}


div#sub {

width: 80px;

height: 80px;

border: #000 thin solid;

}


p {

width: 50px;

height: 50px;

border: #000 thin solid;

}

</style>

</head>

<body>

<div id="container">

<div id="sub">

<p>div p</p>

</div>

<p>p</p>

<p>p</p>

</div>

<!---------- jQuery code Start ---------->

<script>

$("div#container").children("p").css("background-Color", "yellow");

</script>

</body>

</html>


$('div#container').find('p')

<div> 태그의 자손 태그들 중에서 <p> 태그를 모두 찾아 선택한다. children()과 find()의 차이점은 자식까지 찾느냐, 자손까지 찾느냐이다.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>find</title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

div,p {

float: left;

margin: 10px;

background-color: #FFF;

}


div#sub {

width: 80px;

height: 80px;

border: #000 thin solid;

}


p {

width: 50px;

height: 50px;

border: #000 thin solid;

}

</style>

</head>

<body>

<div id="container">

<div id="sub">

<p>div p</p>

</div>

<p>p</p>

<p>p</p>

</div>

<!---------- jQuery code Start ---------->

<script>

$("div#container").find("p").css("background-Color", "yellow");

</script>

</body>

</html>


$('p#part1').prev()

id 값이 part1인 <p> 태그의 바로 앞에 위치한 노드를 선택한다. 매개 변수로 찾고 싶은 노드를 전달할 수도 있다.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Traversal- prev</title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

div,p {

float: left;

margin: 10px;

background-color: #FFF;

}


div#sub {

width: 80px;

height: 80px;

border: #000 thin solid;

}


p {

width: 50px;

height: 50px;

border: #000 thin solid;

}

</style>

</head>

<body>

<div id="container">

<div id="sub">

<p>div p</p>

</div>

<p id="part1">p</p>

<p>p</p>

<p>p</p>

</div>

<!---------- jQuery code Start ---------->

<script>

$("p#part1").prev().css("background-Color", "yellow");

</script>

</body>

</html>


$('p#part1').next()

id 값이 part1인 <p> 태그의 다음에 위치한 노드를 선택한다. 매개 변수로 찾고 싶은 노드를 전달할 수도 있다.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Traversal- next</title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

div,p {

float: left;

margin: 10px;

background-color: #FFF;

}


div#sub {

width: 80px;

height: 80px;

border: #000 thin solid;

}


p {

width: 50px;

height: 50px;

border: #000 thin solid;

}

</style>

</head>

<body>

<div id="container">

<div id="sub">

<p>div p</p>

</div>

<p id="part1">p</p>

<p>p</p>

<p>p</p>

</div>

<!---------- jQuery code Start ---------->

<script>

$("p#part1").next().css("background-Color", "yellow");

</script>

</body>

</html>


$('p'#part1').siblings()

id 값이 part1인 <p> 태그의 형제 노드를 선택한다. 매개 변수로 찾고 싶은 노드를 전달할 수도 있다.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Traversal- siblings</title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

div,p {

float: left;

margin: 10px;

background-color: #FFF;

}


div#sub {

width: 80px;

height: 80px;

border: #000 thin solid;

}


p {

width: 50px;

height: 50px;

border: #000 thin solid;

}

</style>

</head>

<body>

<div id="container">

<div id="sub">

<p>div p</p>

</div>

<p id="part1">p</p>

<p>p</p>

<p>p</p>

</div>

<!---------- jQuery code Start ---------->

<script>

$("p#part1").siblings().css("background-Color", "yellow");

</script>

</body>

</html>

$('p#part1').parent()

id 값이 part1인 <p> 태그의 부모 노드를 선택한다.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>parent</title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

div,p {

float: left;

margin: 10px;

background-color: #FFF;

}


div#sub {

width: 80px;

height: 80px;

border: #000 thin solid;

}


p {

width: 50px;

height: 50px;

border: #000 thin solid;

}

</style>

</head>

<body>

<div id="container">

<div id="sub">

<p>div p</p>

</div>

<p id="part1">p</p>

<p>p</p>

<p>p</p>

</div>

<!---------- jQuery code Start ---------->

<script>

$("p#part1").parent().css("background-Color", "yellow");

</script>

</body>

</html>


2. 필터링

선택된 집합에서 다시 조건에 맞는 jQuery 집합을 선택한다.


 메소드

 설 명

 eq()

 인덱스 번호에 해당하는 노드를 찾습니다. index 0은 첫 번째 노드를 의미한다.

 filter()

 선택된 노드 집합에서 선택자를 추가하거나 함수를 사용하여 원하는 결과를 추출해낼 수 있다.

 first()

 선택된 노드 집합에서 첫 번째 자식 노드를 찾는다.

 has()

 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여  범위를 축소한다.

 is()

 매개 변수로 selector, element, jQuery를 입력하여 입력한 객체가 있으면 true를 반환한다.

 last()

 선택된 노드 집합을 변경한다.

 map()

 대상이 되는 노드 집합을 변경한다.

 not()

 조건에 맞지 않는 것들만 찾아서 선택한다.

 slice()

 선택된 집합을 조건의 범위로 재선택한다. 배열의 slice()와 같은 기능이다.


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Filtering</title>

<!-- jQuery library -->

<script src="jquery-1.7.2.min.js"></script>

<style>

div,p {

float: left;

margin: 10px;

background-color: #FFF;

}


div#sub {

width: 80px;

height: 80px;

border: #000 thin solid;

}


div.middle {

width: 80px;

height: 80px;

border: #000 thin solid;

}


p {

width: 50px;

height: 50px;

border: #000 thin solid;

}

</style>

</head>

<body>

<div id="main">

<div class="middle">div</div>

<p>p</p>

<p>p</p>

<p>p</p>

<p>p</p>

<div id="sub">

<p>div p</p>

</div>

</div>

<!---------- jQuery code Start ---------->

<script>

// 한줄씩 주석으로 처리해가며 확인하여 보세요

$("div#main p").first().css("background-Color", "yellow");

// $("div#main p").last().css("background-Color","yellow");

// $("div#main p").eq(1).css("background-Color","yellow");

// $("div#main div").filter(".middle").css("background-Color","yellow");

// $("div#main div").not(".middle").css("background-Color","yellow");

  // $('div').has('p').css("background-Color","yellow");

</script>

</body>

</html>


$("div#main p").first()

id가 main인 <div> 태그의 첫 번째 <p> 태그를 선택한다.


$("div#main p").last()

id가 main인 <div> 태그의 마지막 <p> 태그를 선택한다.


$("div#main p").eq(1)

id가 main인 <div> 태그의 두 번째 <p> 태그를 선택한다. 인덱스는 0부터 시작한다.



$("div#main div").filter(".middle")

<div> 태그 중에서 클래스 속성 값이 middle인 것을 선택한다.


$("div#main div").not(".middle")

<div> 태그 중에서 클래스 속성 값이 middle이 아닌 것을 선택한다.


$('div').has('p')

<div> 태그 자손 중에 <p> 태그가 있는 <div> 태그를 선택한다.


cf.) Selectors의 :first와 Traversing의 first()는 어떤 차이가 있나?

선택된 집합에서 첫 번째 노드를 반환하는 데에는 차이가 없다. 단지 Selector의 :first 보다 Traversing의 first()가 더 최신 버전이기 때문에 필터링 속도가 빠르고 여러 가지 메서드를 연속해서 나열할 수 있는 메서드 체인 방식의 표기에 더 적합하다.

- Selectors의 :first

$("div").click(fn);

$("div:first").css("background-color", "red");


- Traversing의 first()

$("div").click(fn).first().css("background-color", "red");


cp.) find() 메서드를 이용한 chain

chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법

--> traversing을 이용해서 chain안에서 대상을 움직일 수 있다.

- http://api.jquery.com/category/traversing/

- taeyo.net jQuery traverse 강좌

- 너무 복잡한 chain은 코드의 가독성을 떨어 뜨릴 수 있다.


예제. traversing을 이용해서 chain안에서 대상을 움직일 수 있다.

<html>

    <body>

        <ul class="first">

            <li class="foo"> list item 1 </li>

            <li> list item 2 </li>

            <li class="bar"> list item 3 </li>

        </ul>

        <ul class="second">

            <li class="foo"> list item 1 </li>

            <li> list item 2 </li>

            <li class="bar"> list item 3 </li>

        </ul>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');</script>

    </body>

</html>

ul.first 엘리먼트 중에서 .foo를 찾아라, 찾은 다음 

-traversing(탐색): ul.first 선택자가 find()를 통해서 chain Context(제어의 대상)가 변경되는 것을 말함

end():chain context를 유지하다가 마지막으로 사용한 traversing을 취소하게 된다.

end()라는 메소드를 시작하기 전에는 li엘리먼트가 지정되었으나 end()메소드가 지정되고 나서는 find로 지정한 것이 취소가 되고

ul 엘리먼트로 chain context가 전환되었다는 것을 의미

--> 탐색 기능을 이용하면 하나의 context에서 필요에 따라 제어하고자 하는 대상을 변경할 수 있다. 


3. 다양한 탐색(Miscellaneous Traversing)

.contents() 

선택한 요소의 자식 요소를 가져온다.(text node 포함)

$('.container').contents().filter(function(){}); 

// class container 요소의 자식요소(text 포함)를 가져와 filter 한다. iframe text를 가져올때 사용


.add() 

요소를 추가 선택한다. 

$("p").add("div")  // p 요소와 div 요소를 선택한다.


.end()

jQuery 함수를 연쇄적으로(chain)으로 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아간다.

 $('ul:first').find('.foo).css('background-color' , 'red')  // ul의 첫번째 요소에서 class=foo를 찾아 배경 변경

 .end().find('bar').css('background-color', 'green'); // find를 호출하기 전의 요소($('ul:first))에서 class=bar를 찾아 배경 변경


.andSelf() 

선택된 구조 요소를 이어붙인다.

$('div').find('p').andSelf().css(..);  

// div와 내부의 p요소를 선택해서 결합 후 css 적용

'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Event  (0) 2014.12.07
[jQuery] Attribute/CSS  (0) 2014.12.07
[jQuery] DOM Manipulation  (0) 2014.12.07
[jQuery] Wrapper  (0) 2014.12.07
[jQuery] Selector  (0) 2014.11.29

[jQuery] Wrapper


Wrapper


1. 레퍼(wrapper)란? --> jQuery의 시작점

jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')

붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환


2. 레퍼의 안전한 사용

$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리(다른 라이브러리도 $를 쓴다.)들과의 충돌 때문에 다음과 같은 방법을 사용한다.

(1) 첫번째 방법: $대신 고유명사 jQuery를 쓴다.

<script type="text/javascript">

//$ 대신 jQuery를 사용

jQuery('body').html('hello world');

</script>


(2) 두번째 방법

<script type="text/javascript">

//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방

// 지역변수가 로컬변수보다 우선순위가 높다.

(function($){

    $('body').html('hello world');

})(jQuery)

// 함수를 선언하는 동시에 호출하는 문장이다.

</script>


3. 제어 대상을 지정하는  방법

- jQuery( selector, [context] )([context]는 옵션이다.)

- jQuery( element )

예제 1. jQuery( selector, [context] )

<html>

    <body>

        <ul>

            <li>test2</li>

        </ul>

        <ul class="foo">

            <li>test</li>

        </ul>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            (function($){            

                $('ul.foo').click( function() {//$('ul.foo')은 getElementById의 리턴값과 같다.==>엘리먼트 오브젝트

                    $('li', this).css('background-color','red');//this는 ([context]로 있어도 되고 없어도 되고) click 이벤트

                });

/* ul.foo가 선택되었을때 click 이벤트가 발생시 css메소드가 실행된다. */

            })(jQuery)

        </script>

    </body>

</html>


예제 2. jQuery( element )

<html>

    <body>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            jQuery(document.body).css( "background-color", "black" );

        </script>

    </body>

</html>




'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Event  (0) 2014.12.07
[jQuery] Attribute/CSS  (0) 2014.12.07
[jQuery] DOM Manipulation  (0) 2014.12.07
[jQuery] Traversing  (0) 2014.12.07
[jQuery] Selector  (0) 2014.11.29

[JavaScript] Object


Object


Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. 

var grades = {'test1': 10, 'test2': 6, 'test3': 80};

동시에 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다.

Object의 prototype은 모든 객체의 prototype이 된다.

Object가 가지고 있는 prototype는 모든 객체가 사용할 수 있는 기능이다. 즉, 모든 객체가 공통적으로 사용할 기능이 있다면 Object의 prototype으로 지정해 쓸 것이다. 

모든 객체가 가지고 있었으면 하는 기능이 있다면 개발자가 기능을 추가할 수 있다.

또한 Object 객체를 확장하면 모든 객체가 접근할 수 있는 API를 만들 수 있다. 아래는 Object 객체를 확장한 사례다.


- Object.메소드() 와 Object.prototype.메소드()의 차이


Object.keys(arr); --> Object.keys=function(){ }


Object.protptype.toString() --> Object.prototype.toString = function(){ }

메소드가 프로토타입 소속이라는 것은 new한 순간 객체를 만들고 그 객체는 포로토타입이라는 특수한 프로퍼티에에 저장된 객체를 원형으로 하는 객체가 생성된다.

그렇게 생성된 객체는 toString()을 사용할 수 있게 된다.


Object는 자바스크립트의 공통 조상이다. 그래서 Object중에 ptototype이 중간에 낀 메소드들은 모든 객체들이 상속받고 있는 공통의 기능이 된다.

개발자가 만드는 자바스크립트 웹어플리케이션에서 모든 객체들이 공통적으로 가지고 있어야 하는 기능이 있다면 Object의 prototype 객체를 수정하여 그러한 기능을 만들 수 있다.

Object.prototype.contain = function(needle) {//어떠한 메소드를 갖게 하고 싶다면  

    for(var name in this){//메소드가 소속되어 있는 객체 -->this

        if(this[name] === needle){// 객체들은 for-in문을 사용하여 하나하나 꺼내서 볼 수 있다.

            return true;

        }

    }

    return false;

}

var o = {'name':'test1', 'city':'test2'}

console.log(o.contain('test1'));//contain은 value가 존재하는지 체크-->true or false

var a = ['test1','test2','test3'];

console.log(a.contain('test2'));

그런데 Object 객체는 확장하지 않는 것이 바람직하다. 왜냐하면 모든 객체에 영향을 주기 때문이다. 


확장 후에 아래 코드를 실행해보자.

for(var name in o){

    console.log(name);  

}

결과)

name

city

contain

--> prototype의 메소드인 contain까지 포함되는 결과를 낳게 된다.(원래 var o = {'name':'test1', 'city':'Seoul'})


확장한 프로퍼티인 contain이 포함되어 있다. 객체가 기본적으로 가지고 있을 것으로 예상하고 있는 객체 외에 다른 객체를 가지고 있는 것은 개발자들에게 혼란을 준다. 

이 문제를 회피하기 위해서는 프로퍼티의 해당 객체의 소속인지를 체크해볼 수 있는 hasOwnProperty를 사용하면 된다. 

for(var name in o){

    if(o.hasOwnProperty(name))

        console.log(name);  

}

결과)

name

city

hasOwnProperty는 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 판단한다. 만약 prototype으로 상속 받은 객체라면 false(contain은 부모로부터 상속받은 프로퍼티이다.)가 된다. 

--> 객체의 직접적인 소유인 체크



'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 클로저  (1) 2014.12.21
[JavaScript] 유효범위  (0) 2014.12.21
[JavaScript] prototype  (0) 2014.12.07
[JavaScript] 상속  (0) 2014.12.07
[JavaScript] this  (0) 2014.12.07