프로젝트를 리펙토링하면서 JQuery에서 꼭 좀 개선하고 싶은 부분이 있었다.

중복되는 함수에 대해 하나의 js파일에 담아두고 필요한 곳에서 호출해 사용하게 하고 싶었다.

 

예를들어 jQuery를 통해 하나의 테이블을 만들어야 된다고 가정.

function tableStr(arr) {
    let str = "<table class=\"table\">" + 
                  "<thead>" +
                      "<tr>" +
                          "<th>header1</th>" + 
                          "<th>header2</th>" + 
                          "<th>header3</th>" +
                      "</tr>" +
                  "</thead>" + 
                  "<tbody>";
    
    $(arr).each(function(i, attach) {
        str += "<tr>" +
                   "<td>" + arr.body1 + "</td>" +
                   "<td>" + arr.body2 + "</td>" +
                   "<td>" + arr.body3 + "</td>" +
               "</tr>";
    }
    
    str += "</tbody>" +
           "</table>";
    
    return str;
}

 

이렇게 데이터를 받아 테이블을 파싱하는 코드가 여러곳에 존재한다고 하면, 각각의 js 파일에 중복되어 작성되게 된다.

그럼 가장 좋은 방법은 이 tableStr 이라는 함수를 하나의 js 파일에 분리하거나 필요한 곳 중 한군데에만 작성해두고 그 함수를 호출하는 것이 가장 좋은 방법일 것.

 

처리는 js 파일을 새로 만들고 그 안에 함수를 작성한 뒤 필요한 곳에서 호출하게 했다.

 

필요한 곳을 parent1.js, parent2.js 라고 가정하고 분리해서 작성한 곳을 child1.js로 가정한다.

//parent1.js
function setTable() {
    $.getJSON("/getTableData", function(arr) {
        let str = jQuery.tableStr(arr);
        $(".formDiv").append(str);
    }
}

//parent2.js
function setTable() {
    $.getJSON("/getBoardTableData", function(arr) {
        let str = jQuery.tableStr(arr);
        $(".formDiv").append(str);
    }
}


//child1.js
jQuery.tableStr = function(arr) {
    let str = "<table class=\"table\">" + 
                  "<thead>" +
                      "<tr>" +
                          "<th>header1</th>" + 
                          "<th>header2</th>" + 
                          "<th>header3</th>" +
                      "</tr>" +
                  "</thead>" + 
                  "<tbody>";
    
    $(arr).each(function(i, attach) {
        str += "<tr>" +
                   "<td>" + arr.body1 + "</td>" +
                   "<td>" + arr.body2 + "</td>" +
                   "<td>" + arr.body3 + "</td>" +
               "</tr>";
    }
    
    str += "</tbody>" +
           "</table>";
    
    return str;
}

 

방법은 위와 같다.

호출되는 함수는 jQuery.함수명 = function() { } 이런 구조로 작성하면 되고, 호출할때는 jQuery.함수명 으로 호출하면 된다.

여기서 주의사항.

해당 html 혹은 jsp 파일에 parent, child가 모두 들어가있어야 한다.

 

<html>
....
<script type="text/javascript" src="/js/parent1.js"></script>
<script type="text/javascript" src="/js/child1.js"></script>
....

이렇게 되어있다면 정상적으로 호출해서 사용할 수 있다.

 

'Front > JQuery' 카테고리의 다른 글

JQuery(비동기방식연동 Ajax)  (0) 2020.05.26
JQuery(애니메이션 효과 제어 메소드)  (0) 2020.05.26
JQuery(효과 및 애니메이션 메소드)  (0) 2020.05.22
JQuery(그룹이벤트)  (0) 2020.05.22
JQuery(이벤트 객체)  (0) 2020.05.22

Ajax란?

  비동기방식의 Javascript와 XML을 가리킨다.

  동기방식은 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있고 비동기 방식은 그와 반대로

  신호를 보냈을때 응답 상태와 상관없이 다음 동작을 수행할 수 있다는 점이 다르다.

  

  Ajax를 이용하는 이유는 화면 전환 없이 클라이언트와 서버간에XML, JSON(JavaScript Object Notation), 텍스트,

  HTML등의 정보를 교환하기 위해서이다.

  다시말해, Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면전환없이 요청한 자료를 전송받을 수 있다.

  또한 자료를 요청할 경우 어느정도 시간이 소요되는데 반해 Ajax를 이용하면 사용자가 기다릴 필요 없이

  다른 작업을 바로 수행할 수 있다.

  

Ajax 관련 메소드

 

종류 설명
load() 외부 컨텐츠를 가져올 때 사용한다.
$.ajax() 데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며, HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메소드이다. 이 표에 있는 $.post(), $.get(), $.getJSON() 메소드의 기능을 하나로 합쳐 놓은것이라고 보면 된다.
$.post() 데이터를 서버에 HTTP POST 방식으로 전송한 후 서버측의 응답을 받을 때 사용한다.
$.get() 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용한다.
$.getJSON() 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버측의 응답을 JSON형식으로 받을 때 사용한다.
$.getScript() Ajax를 이용하여 외부 자바스크립트를 불러온다.
예) $(“button”).click(function(){
    $.getScript(“demo_ajax_script.js”);
    });
.ajaxStop(function(){…}) 비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수가 실행된다.
.ajaxSuccess(function(){…}) ajax 요청이 성공적으로 완료되면 함수가 실행된다.
.ajaxComplete(function(){…}) ajax 통신이 완료되면 함수가 실행된다.

 

load() 메소드

  사용자가 지정한 URL주소에 데이터를 전송하고 외부 컨텐츠를 요청하여 가져올 때 사용한다.

  요청한 컨텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있다.

  기본형은 다음과 같다.

$(요소 선택).load(url, data, 콜백 함수)

  다음 URL주소에는 외부 컨텐츠를 요청할 외부 주소를 입력하고, data에는 전송할 데이터를 입력한다.

  그리고 전송이 완료되면 콜백함수에 저장된 코드가 실행된다. 이때 전송할 데이터와 콜백함수의 입력은 생략할 수

  있다.

 

  다음은 load() 함수를 사용하여 외부파일(jquery_ajax_news.html)의 일부요소를 불러오는 예제이다.

jquery_ajax_news.html

<body>
  <p id="news_1">Contrary to popular belief, Lorem Ipsum is not simply random text.
    It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
  <p id="news_2">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p>    
</body>
<script>
  $(function(){
    $("#newsWrap_1")
    .load("jqeury_ajax_news.html #news_1");

    $("#newsWrap_2")
    .load("jquery_ajax_news.html #news_2");
  });
</script>
</head>
<body>
  <h1>LOAD 1</h1>
  <div id="newsWrap_1"></div>
  <h1>LOAD 2</h1>
  <div id="newsWrap_2"></div>
</body>

 

$.ajax() 메소드

  사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다.

  이때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있으며, 선택한 요소에 Ajax를 이용해

  요청한 외부 데이터를 불러온다.

  다음은 $.ajax() 메소드의 기본형이다.

  중괄호 내에 다양한 옵션을 입력할 수 있다. 옵션은 속성과 값으로 이루어진다.

$.ajax({
  1. url:"전송 페이지"(action url),
  2. type:"전송 방식"(get, post 방식),
  3. data:"전송할 데이터",
  4. data Type:"요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
  5. success:function(data){
     전송에 성공하면 실행할 코드;
     },
        error:function(){
        전송에 실패하면 실행할 코드;
        }
     });

  1의 url에는 데이터 전송 및 요청할 외부 주소를 입력한다.

  2의 type에는 전송방식을 입력한다.

  3의 data에는 전송할 데이터를 입력한다.

  4의 dataType은 서버로부터 받아올 데이터 형식을 지정한다. 데이터가 HTML일 경우에는 "html", XML일 경우에는

   "xml", JSON일 경우에는 "json"이라고 입력한다.

  5는 데이터 전송 및 요청이 정상적으로 이루어지면 함수가 실행된다. 이때 매개변수(result)에는 요청한 데이터가 저장

   된다.

 

  다음은 $.ajax()메소드의 옵션 종류이다.

종류 설명
async 통신을 동기 또는 비동기 방식으로 설정하는 옵션이다. 기본값은 비동기 통신 방식은 true로 설정되어 있다. 만일 비동기 방식으로 설저오디어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있다.
beforeSend 요청하기 전에 함수를 실행하는 이벤트 핸들러이다.
cache 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정한다. 기본값은 true이다.
complete Ajax가 완료되었을 때 실행하는 이벤트 핸들러이다.
contentType 서버로 전송할 데이터의 content-type을 설정한다. 기본값은 application/x-www-form-ur-lencoded이다.
data 서버로 전송할 데이터를 지정한다
dataType 서버에서 받아올 데이터의 형식을 지정한다. 생략하면 요청한 자료에 맞게 자동으로 형식이 설정된다.
error 통신에 문제가 발생했을 때 함수를 실행한다.
success Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행한다.
timeout 통신 시간을 제한한다. 시간 단위는 밀리초이다.
type 데이터를 전송할 방식(get/post)을 설정한다.
url 데이터를 전송할 페이지를 설정한다. 기본값은 현재페이지이다.
username HTTP 액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정한다.

 

  또한 비동기 통신 방식으로 데이터를 전송하거나 요청하려면 데이터를 가공해야 한다.

  다음은 비동기 통신 방식으로 데이터를 전송하거나 요청할 때 사용하는 Ajax 전송 데이터 가공 메소드이다.

종류 사용법 설명
serialize() $(“form”).serialize(); 사용자가 입력 요소에 값을 입력한 데이터의 전송방식을 ‘name1=value1 & name2=value2,…’와 같은 쿼리 스트링 형식의 데이터로 변환해 반환한다.
serializeArray() $(“form”).serializeArray() 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을[{name1:value1},{name2:value2}]와 같은 배열 객체로 변환해 반환한다.
$.param() $.param(Object); {name1:value1, name2:value2}와 같이 작성된 객체를 가공해 ‘name1=value1 & name2=value2, …’와 같은 쿼리 스트링 형식의 데이터로 변환해 반환한다.
JSON.parse() JSON.parse(‘{“name”:”value”}’); 객체 형태로 작성한 문자열 데이터를 객체로 가공하여 반환한다.
JSON.stringify() JSON.stringify({“name1”:”value1”, “name2”:”value2”}) 객체를 문자열 데이터로 가공하여 반환한다.

 JSON.parse() 메소드는 입력하는 자료형이 '객체형태'일 뿐 '문자열'의 데이터를 입력하여 객체를 반환한다.

 

Ajax로 JSON 데이터 바인딩하기

  바인딩(binding)은 '묶다'라는 의미이다. 비동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고,

  데이터베이스에 요청한 데이터를 받아와 HTML 문단태그에 결합하는 것을 바인딩이라고 한다.

  HTML에서 $.ajax() 메소드로 가상회원 데이터(JSON)를 불러온다.

  그런 다음 가상 회원 데이터를 표(Table)로 가공하여 class값이 "wrap"인 문단 태그에 결합하여 출력한다.

<script>
  $(function(){
    $.ajax({
      url:"js/MOCK_DATA.json",
      dataType:"json",
      success:function(data){ //data는 MOCK_DATA.json이 참조된다.
        if(data.lenth > 0){
          var tb=$("<table/>");
          for(var i in data){
            var $id = data[i].id;
            var $first_name = data[i].first_name;
            var $last_name = data[i].last_name;
            var $email = data[i].email;
            var $gender = data[i].gender;

            var row= $("<tr/>").append(
                    $("<td/>").text($id),
                    $("<td/>").text($first_name),
                    $("<td/>").text($last_name),
                    $("<td/>").text($email),
                    $("<td/>").text($gender)
            );

            tb.append(row);
          }
          $(".wrap").append(tb);
        }
      }
    });
  });
</script>
</head>
<body>
  <div class="wrap"></div>
</body>

  각각의 배열 객체(JSON)의 데이터가 테이블(<tr>...</tr>)에 한 행씩 출력된다.

 

Ajax로 XML 데이터 바인딩하기

  xml(eXtensible Markup Language, 확장성 마크업 언어)란?

    XML은 확장 가능한 언어이므로 태그명을 사용자가 임의로 작성할 수 있다.

    이렇게 사용자가 임의의 태그명을 만들어 사용할 수 있기 때문에 많은 지식이 없어도 된다. 즉, 서버의 데이터를

    XML데이터로 가공하는것은 어렵지 않다. 그래서 XML은 주로 데이터를 배포할 목적으로 사용한다.

 

    XML의 기본형은 다음과 같다. 상단에는 버전과 인코딩 방식을 선언하고 사용자가 임의로 시작 태그와 종료 태그를

    사용하여 구조화된 데이터를 만든다.

<?xml version="1.0" encoding="UTF-8"?>
<tag1>
<tag2>내용</tag2>
</tag1>

  

  HTML에서 $.ajax()메소드를 사용하여 외부데이터(XML)를 불러온다. 그런다음 불러온 가상회원 데이터를 표(Table)로

  가공하여 class 값이 "wrap"인 문단 태그에 결합시켜 출력한다.

<script>
  $(function(){
    $.ajax({
      url:"js/dataset.xml",
      dataType="xml",
      success:function(data){
        var $data = $(data).find("record");//dataset.xml에서 find()메소드를 사용해 얻어낸
                                           //<record>객체를 참조한다.
        if($data.length>0){
          var tb = $("<table/>");
          $.each($data, function(i, o){
            var $id=
            $(o).find("id").text();

            var $first_name =
            $(o).find("first_name").text();

            var $last_name =
            $(o).find("last_name").text();

            var $email =
            $(o).find("email").text();

            var $gender =
            $(o).find("gender").text();

            var row = $("<tr/>").append(
              $("<td/>").text($id),
              $("<td/>").text($first_name),
              $("<td/>").text($last_name),
              $("<td/>").text($email),
              $("<td/>").text($gender)
            );

            tb.append(row);
          });
          $(".wrap").append(tb);
        }
      }
    });
  });
</script>
</head>
<body>
  <div class="wrap"></div>
</body>

 각각의 <record>...</record>의 개수만큼 테이블(<tr>..</tr>)에 한 행씩 출력된다.

 

자바스크립트의 보안정책과 외부 데이터 바인딩하기

  자바스크립트의 보안정책은 자바스크립트로 A 사이트의 데이터를 B사이트로 불러오는것을 허용하지 않는다.

  이 정책을 동일 출처 원칙(Same-origin policy)이라 한다. 즉, ajax()메소드로는 서로 다른 도메인의 데이터를 전송할 수 

  없을 뿐만 아니라 교차 도메인(Cross-Domain)도 허용하지 않는다.

  서로 다른 사이트에서 데이터를 서로 주고 받으려면 서버 언어를 사용해 데이터를 가져오거나 JSONP를 사용하는 

  방법이 있다.

  서버 언어를 사용하는 방법은 서로 다른 사이트에서 데이터를 요청하고 이를 ajax로 가공하면 된다.

  이 방법은 주로 관리자가 직접 접근할 수 없는 외부 서버의 데이터를 가져올 때 사용한다.

  JSONP를 사용하는 방법은 '동일 출처 보안 정책'을 피해야 하고 관리자의 외부 서버 접근이 가능해야 한다는 

  전제조건이 필요하다. 이 방법은 교차 도메인으로 데이털르 불러올 때 사용한다.

  아예 다른 서버로는 관리자가 직접 접근할 수 없기 때문에 서버 언어를 사용해서 데이터를 가져오는 방법은

  사용할 수 없다.

  하지만 관리하는 사이트가 2개이면 관리자가 서버에 접근할 수 있기 때문에 JSONP를 사용하면 된다.

 

RSS(신문사 새 소식)연동하기

  신문사 사이트에 접속하여 RSS(Really Simple Syndication)를 불러오는 방법을 알아볼것이다.

  자바스크립트는 동일 출처 원칙에 따라 도메인이 다른 사이트느 서로 데이터를 요청할 수 없다.

  RSS란 '초 간편 배포'라는 의미앋. 즉, 새로운 읽을거리가 자주 갱신되는 블로그나 뉴스에서 주로 사용하는 XML

  기반의 컨텐츠 배급 포맷이다. RSS를 사용하면 뉴스나 블로그의 관심있는 읽을거리만 모아서 볼 수 있다는 장점이

  있다. 또한 사이트 연동이 가능하다. 사이트에 RSS를 연동하면 자신이 운영하는 사이트의 내용이 풍부해져

  설치하기 전보다 방문자가 늘어나는 효과를 얻을 수 있다.

 

신문사 RSS(오늘의 주요뉴스) XML URL 경로 복사하기

  신문사를 방문하여 '오늘의 주요 뉴스'RSS를 클릭한 다음 XML URL경로를 복사한다.

  그런 다음 $.ajax() 메소드를 사용해 신문사 RSS를 사져온다. 하지만 동일 출처 원칙에 따라 RSS를 불러오지 못하고

  오류가 발생할 것이다.

<script>
  $(function(){
    $.ajax({
      url:"http://myhome.chosun.com/rss/www_section_rss.xml",
      dataType:"xml",
      success:function(data){
        console.log(data);
      }
    });
  });
</script>
</head>
<body>
  <div class="wrap"></div>
</body>

 

서버언어(PHP)로 교차 도메인 데이터(XML)불러오기

  PHP언어는 서버가 서로 통신할 수 있는 cURL(Client URL Library Functions)메소드를 지원한다.

  이 메소드를 사용하면 교차 도메인 데이터(XML)를 불러올 수 있다. PHP 언어를 사용하기 위해 먼저 PHP 선언문을

  작성하는 방법과 변수를 정의하는 방법을 알아보자.

 

  다음은 PHP 선언문과 변수 선언문의 기본형이다.

1. PHP 선언문
<?php
  php코드
?>

2. 변수 선언문
<?
  $변수 이름=값;
?>

  PHP선언문을 작성했으니 cURL 메소드를 사용해 교차 도메인 데이터를 불러와야 한다.

  다음은 cURL메소드의 기본형이다.

1. curl_init() : cURL을 사용하기 위해 초기화 하는 메소드로, cURL 세션을 생성한다.
2. curl_setopt(세션, 옵션, 값) : 생성된 cURL 세션의 옵션을 설정한다.
   옵션에 적용 가능한 값
   CURLOPT_URL:접속할 url 주소 설정
   CURLOPT_SSL_SERIFYPEER:SSL인증서 검사 여부 결정
   CURLOPT_RETURNTRANSFER:결과값을 받을 것인지의 여부 설정
   CURLOPT_HEADER:헤더 정보 출력 여부 설정
3. curl_exec():cURL 세션을 실행한다.
4. curl_close():cURL 세션을 종료한다.

  다음은 웹 호스팅에서 PHP언어의 cURL 메소드를 사용해 오늘의 주요뉴스 데이터(XML)를 불러오는 예제이다.

<?php
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_HEADER, 0);
  curl_setopt($ch, CURLOPT_URL,
    "http://myhome.chosun.com/rss/www_section_rss.xml");
  $url_source = curl_exec($ch);
  curl_close($ch);
  
  echo $url_source;
?>

  다음은 위의 예제에서 가져온 데이터(XML)를 $.ajax()메소드를 사용하여 HTML 문서로 불러오는 예제이다.

<script>
  $(function(){
    $.ajax({
      url:"news.php",
      dataType:"xml",
      success:function(data){
        var $items = $(data).find("item");

        if($items.length > 0){//<item>요소가 1개 이상인 경우 실행한다.
          $items = $items.slice(0, 10);//$items 배열에 <item> 요소를 10개 가져온다.
          var $ulTag = $("<ul/>");
          $.each($items, fuction(i,o){
            var $title = $(o).find("title").text();
            var $link = $(o).find("link").text();

            var$aTag=$("<a/>")
            .attr({
              "href":$link,
              "target":"_blank"
            })
            .text($title);

            var $liTag=$("<li/>")
            .append($aTag);

            $ulTag.append($liTag);
          });
          $(".wrap").append($ulTag);
        }
      }
    });
  });
</script>
</head>
<body>
  <div class="wrap"></div>
</body>

  위 예제를 실행하면 10개의 오늘의 주요 뉴스 데이터가 출력된다. 기사 제목을 클릭하면 기사의 상세 페이지로

  이동한다.

 

JSONP로 교차 도메인 데이터(XML)불러오기

  1. 가상회원데이터(json)을 만들어 서버에 업로드하고 다음과 같이 PHP코드를 작성한다.

     여기서 $_GET["callback"]은 이후에 작성할 HTML문서에서 get 방식으로 전송한 데이터를 받을 매개변수이다.

<?php
  $data='[
   {"id","1","name":"Choldcroft","email":"dcroft@hibu.com"},
   {"id","2","name":"Levi","email":"wlev1@blogger.com"},
   {"id","3","name":"Axcell","email":"laxcellc@ebay.co.uk"}
  ]';
  echo $_GET["callback']."(".$data.")";
?>

   php에서 . 연산자는 문자열 결합 연산자이다.

  2. 교차 도메인 환경에서 실행하기 위해 HTML파일은 PHP파일과 서로 다른 서버에 저장한다.

<script>
  $(function(){
    var href="http://localhost/9장/member_2.php?callback=myFnc";
    $.ajax({
      url:href,
      dataType:"jsonp"
    }).done(function myFnc(data){
       console.log(data)
    });
  });
</script>

  파일을 실행하면 교차 도메인 서버 간 요청한 데이터를 정상적으로 불러올 수 있다.

  먼저 데이터를 요청한 교차 도메인서버에서 함수(myFnc())를 실행한다. 그런다음 객체가 담긴 배열(json)을

  인자값으로 전달한다. 마지막으로 done에 작성한 함수를 호출하고 매개변수(data)에 인자값(json)을 할당한다.

 

  3. $.ajax()메소드를 사용하여 JSONP 방식으로 불러온 데이터(json)를 HTML 문단 태그에 결합한다

<script>
  $(function(){
    var href="http://localhost/9장/member_2.php?callback=myFnc";
    $.ajax({
      url:href,
      dataType:"jsonp"
    }).done(function myTest(data){
      if(data.length > 0){
        var $table=$("<table/>");
        data.forEach(function(o){
        $id=o.id;
        $name=o.name;
        $email=o.email;

        var trTag=$("<tr/>");
        trTag.append(
          $("<td/>").text($id),
          $("<td/>").text($name),
          $("<td/>").text($email)
        );

        $table.append(trTag);
      });

      $(".wrap").append($table);
      }
    });
  });
</script>
</head>
<body>
    <div class="wrap"></div>
</body>

  파일을 실행하면 데이터(json)가 테이블에 삽입된다.

 

Ajax로 로그인 프로그램 만들기

  Ajax로 로그인하는 프로그램을 만들것.

  아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 비동기 통신 방식으로 서버에 아이디와 비밀번호가 전송된다.

  만약 아이디와 비밀번호가 일치하면 문단태그에 환영 메시지가 나타난다.

  

 

<script>
  $(function(){
    var $frm=$(".login_f");
    $frm.on("submit", function(e){
      e.preventDefault();
      //[submit]버튼을 눌러도 action페이지로 이동하지 않는다.
      var myData=$frm.seralize();
      //사용자가 폼 입력 요소에 작성한 값을 쿼리 스트리아 형식의
      //데이터로 변환하여 myData에 대입한다.

      $.ajax({
        type:"POST",
        url:$frm.attr("action"),
        data:myData,
        success:function(res){
          if(res){
            var jsonData=JSON.parse(res);
            //res에 요청한 데이터를 받아온다. 그런다음
            //res를 json 형식으로 변형하여 jsonData에 대입한다.
            var message=jsonData.user_name+
            "("+jsonData.user_id+")"
            +"님 반갑습니다";
            $(".login_wrap").html(message);
          }
        }
      });
    });
  });
</script>
</head>
<body>
    <div class="login_wrap">
      <h1>로그인</h1>
      <form class="login_f" method='post' action='member_login_ok.php'>
        <p>
          <label for="user_pw">비밀번호</label>
          <input type="password" name="user_pw" id="user_pw" value="12345"/>
        </p>
        <p><input type="submit" value="로그인" class="login_btn"/></p>
      </form>
    </div>
</body>

  다음은 사용자가 입력한 아이디와 비밀번호가 일치하는지를 검사하는 PHP페이지이다.

  사용자가 전송한 아이디와 비밀번호가 일치하면 JSON 데이터를 반환한다.

<?php
  if(!isset($_POST['user_id'])||
  !isset($_POST['user_pw']) exit;
  
  $user_id=$_POST['user_id'];
  $user_pw=$_POST['user_pw'];
  
  $members=array(
    'korean'=>array('pw'=>'12345',
    'name'=>'박부장'),
    'seoul'=>array('pw'=>'56789',
    'name'=>'홍대리')
  );
  
  if(isset($members[$user_id])&&
  $members[$user_id]['pw']==$user_pw){
    echo'{"user_id":".$user_id'",
    "user_name":".$members[$user_id]['name'].'"}';
  }
?>

 

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery) 다른 js 파일의 함수 호출  (0) 2024.03.08
JQuery(애니메이션 효과 제어 메소드)  (0) 2020.05.26
JQuery(효과 및 애니메이션 메소드)  (0) 2020.05.22
JQuery(그룹이벤트)  (0) 2020.05.22
JQuery(이벤트 객체)  (0) 2020.05.22

애니메이션 효과 제어 메소드란?

  '효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메소드이다.

 

애니메이션 적용 원리와 큐의 개념

  애니메이션 메소드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장된다.

  큐는 ATM기기를 통해 은행 일을 보는 사람들을 생각하면 쉽다.

  사람들이 줄을 서있고 일을 먼저 마친 사람은 먼저 나온다.

  큐도 마찬가지로 큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행된다.

 

  다음은 애니메이션을 적용한 요소의 동작을 제어하는 메소드를 정리한 표이다.

종류 설명
stop() 현재 실행중인 효과를 모두 정지 시킨다
delay() 지정한 시간만큼 지연했다가 애니메이션을 진행한다
queue() 큐에 사용자 정의 함수를 추가하거나 큐에 대기중인 함수를 배열에 담아 반환한다. 그리고 queue()메소드 이후의 애니메이션 효과 메소드는 모두 취소한다.
clearQueue() 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기중인 애니메이션은 모두 제거한다.
dequeue() queue()메소드를 이용하면 대기하고 있는 애니메이션 메소드는 제거된다. 하지만 dequeue()메소드를 이용하면 메소드가 제거되는 것을 막을 수 있다.
finish() 선택한 요소의 진행중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료한다.

 

stop() / delay() 메소드

  stop() 메소드는 요소에 적용한 애니메이션을 정지시키고, delay() 메소드는 요소에 적용한 애니메이션을 지정한

  시간만큼 지연시킨다.

  다음은 stop()메소드의 기본형이다.

1. $("요소 선택").stop();
2. $("요소 선택").stop(clearQueue, finish);

  1은 진행중(inprogress)인 첫 번째 애니메이션만 정지시킨다. 큐에 대기중인 애니메이션은 계속해서 실행한다.

  2는 clearQueue, finish는 true나 false의 값을 입력할 수 있다(기본값은 false).  clearQueue가 true면 큐에서

  대기중인 애니메이션을 모두 제거한다. finish가 true면 진행중인 애니메이션을 강제로 종료한다.

 

1. 진행중인 애니메이션만 정지시키는 경우
   $(".txt1").animate({opacity:0.5}, 1000)
   .animate({marginLeft:"500px"}, 1000};
   $(".txt1").stop();
   
2. 대기중인 애니메이션은 제거하고 진행중인 애니메이션은 강제로 종료하는 경우
   $(".txt2").animate({opacity:0.5}, 1000)
   .animate({marginLeft:"500px"}, 1000);
   $(".txt2").stop(true, true);

  stop() 메소드는 첫번째, 두번째 인자값(clearQueue, finish)에 따라 메소드 적용방식이 달라진다.

  모든 인자값을 생략한 stop()메소드는 진행중인 애니메이션만 정지시키낟.

  모든 인자값에 true를 적용하면 대기중인 애니메이션은 제거되고 진행중인 애니메이션은 강제로 종료된다.

  그래서 실제로는 애니메이션이 아닌 css메소드를 적용한 것 처럼 보인다.

 

  다음은 애니메이션 실행을 지연시키는 delay()의 기본형이다.

$("요소 선택").delay(지연시간).애니메이션 효과 메소드();

  애니메이션 함수 앞에 delay(3000)메소드를 적용하면 3초 후에 애니메이션이 적용된다.

$(".txt1").delay(3000).animate({marginLeft:"500px"}, 1000);

  다음은 delay()메소드와 stop()메소드를 적용한 예제이다.

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"300px"}, 1000);

    $(".txt2").delay(3000) //3초후에 애니메이션이 적용
    .animate({marginLeft:"300px"}, 1000);

    $(".btn1").on("click", moveElement);

    function moveElement(){
      $(".txt3")
      .animate({marginLeft:"+=50px"}, 800);
      //[버튼1]을 누를때마다 class값이 "txt3"인 요소가
      //0.8초간 50px씩 이동한다.

      $(".txt4")
      .animate({marginLeft:"+=50px"}, 800);
      $(".txt4").stop();
      //stop()이 실행되면 [버튼1]을 눌러도 애니메이션이 동작하지 않는다.

      $(".txt5")
      .animate({marginLeft:"+=50px"}, 800);
      $(".txt5").stop(true, true);
      //stop(true, true)가 실행되면 [버튼1]을 눌러도 애니메이션이
      //바로 종료 시점응로 이동한다.
      //그래서 애니메이션 없이 css()메소드를 적용한 것 처럼
      //50px씩 이동한다.
    }
  });
</script>
<style>
  p{width:110px;text-align: center;}
  .txt1{background-color:aqua;}
  .txt2{background-color:pink;}
  .txt3{background-color:orange;}
  .txt4{background-color:green;}
  .txt5{background-color:gold;}
</style>
</head>
<body>
  <p class="txt1">효과1</p>
  <p class="txt2">효과2<br>delay(3000)</p>
  <p><button class="btn1">50px 전진</button></p>
  <p class="txt3">효과3</p>
  <p class="txt4">효과4<br>stop()</p>
  <p class="txt5">효과5<br>stop(true, true)</p>
</body>

queue() / dequeue() 메소드

  queue()메소드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가한다.

  queue()메소드를 실행하면 실행 이후의 모든 애니메이션이 취소된다.

  dequeue()메소드는 queue()메소드 실행 이후에 적용된 애니메이션 메소드가 취소되지 않게 연결해 준다.

 

  다음은 queue()메소드와 dequeue()메소드의 기본형이다.

1. 큐(Queue)의 함수 반환
   $("요소 선택").queue();
2. 큐(Queue)에 함수 추가
   $("요소 선택").queue(function(){자바스크립트코드});
3. dequeue()메소드
   $("요소 선택").dequeue();

 

  다음은 애니메이션이 적용된 요소에 queue(function(){...})를 사용하여 새로운 함수를 큐에 추가하는 예제이다.

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"200px"}, 1000)
    .animate({marginTop:"200px"}, 1000)
    .queue(function(){
      $(this).css({background:"red"});
      $(this).dequeue();
    })
    //queue()메소드를 실행하고 dequeue()메소드를 생략하면
    //queue()메소드 이후의 애니메이션이 적용되지 않는다.
    .animate({marginLeft:0},1000)
    .animate({marginTop:0}, 1000);
  });
</script>
<style>
  *{margin:0;}
  .txt1{
    width:500px;text-align:center;background-color:aqua;
  }
</style>
</head>
<body>
  <p class="txt1">내용1</p>
</body>

clearQueue()메소드

  진행중인(첫 번째) 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거한다.

  다음은 clearQueue()메소드의 기본형이다.

$("요소 선택").clearQueue();

  다음은 clearQueue()의 사용법을 보는 예제이다.

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"110px"}, 1000)
    .animate({marginLeft:"300px"}, 1000)
    .animate({marginLeft:"400px"}, 1000);

    $(".txt2")
    .animate({marginLeft:"100px"}, 1000)
    .animate({marginLeft:"300px"}, 1000)
    .animate({marginLeft:"400px"}, 1000);
    $(".txt2").clearQueue();
    //clearQueue()를 실행하면 현재 진행중인 애니메이션을 제외하고
    //대기중인 애니메이션은 모두 제거된다.
  });
</script>
<style>
  .txt1, .txt2{width:50px; text-align:center; background-color:aqua;}
  .txt2{background-color:orange;}
</style>
</head>
<body>
  <p class="txt1">내용1</p>
  <p class="txt2">내용2</p>
</body>

 

총 정리

  animate() 메소드를 사용하여 슬라이드 요소를 만드는 예제이다.

  [Go]버튼을 누르면 요소가 오른쪽으로 이동하고 반대로 [Back]버튼을 누르면 요소가 왼쪽으로 이동한다.

<script>
  $(function(){
    var txt1=$(".txt1");
    var count=1;
    $(".btnWrap button").on("click", function(){
      if(!txt1.is(":animated")){ //[내용1]이 애니메이션 중이면 동작하지 않는다.
        if($(this).hasClass("backBtn")){
          count--;
          if(count<1){
            count = 1;
            return false;
          }
          txt1.animate({marginLeft:"-=10%"}, 300);
          //class값이 "backBtn"인 경우에 동작
        }else{
          count++;
          if(count>10){
            count=10;
            return false;
          }
          txt1.animate({marginLeft:"+=10%"}, 300);
          //class값이 "backBtn"이 아닌경우에 동작.
        }
      }
    });
  });
</script>
<style>
  .txt1, .txt2{width:50px; text-align:center; background-color:aqua;}
  .txt2{background-color:orange;}
</style>
</head>
<body>
  <p class="btnWrap">
    <button class="backBtn">Back</button>
    <button class="goBtn">Go</button>
  </p>
  <div class="wrap">
    <p class="txt1">내용1</p>
  </div>
</body>

 

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery) 다른 js 파일의 함수 호출  (0) 2024.03.08
JQuery(비동기방식연동 Ajax)  (0) 2020.05.26
JQuery(효과 및 애니메이션 메소드)  (0) 2020.05.22
JQuery(그룹이벤트)  (0) 2020.05.22
JQuery(이벤트 객체)  (0) 2020.05.22

문서 객체를 보이게 했다가 안보이게 하려면 css의 display 속성을 이용해야 한다.

단, css를 이용하는 방법은 객체를 단순하게 조절하는 정도의 효과만 기대할 수 있다.

효과(Effect)메소드를 이용하면 css를 이용하는 것 보다 좀 더 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 

보이게 만들 수 있다.

애니메이션 메소드까지 사용하면 선택한 요소에 다양한 동작(Motion)까지 적용 할 수 있다.

 

효과 메소드

  효과(Effect)메소드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메소드가 있다.

 

  다음은 효과 메소드의 종류를 간략히 정리한 표이다.

구분 종류 설명
숨김 hide() 요소를 숨긴다
fadeOut() 요소가 점점 투명해지면서 사라진다
slideUp() 요소가 위로 접히며 숨겨진다.
노출 show() 숨겨진 요소가 노출된다
fadeIn() 숨겨진 요소가 점점 선명해진다
slideDown() 숨겨진 요소가 아래로 펼쳐진다
노출, 숨김 toggle() hide(), show() 효과를 적용한다.
fadeToggle() fadeIn(), fadeOut() 효과를 적용한다.
slideToggle() slideUp(), slideDown() 효과를 적용한다.
fadeTo() 지정한 투명도를 적용한다.

효과 메소드의 기본형

  효과 메소드는 효과 소요시간, 가속도, 콜백 함수를 인자값으로 전달 할 수 있다.  

  다음은 효과 메소드의 기본형이다.

$("요소 선택").효과 메소드(효과 소요시간, 가속도, 콜백함수);

 

  효과 소요시간은 요소를 숨기거나 노출할 때 소요되는 시간이다.

  효과 소요시간은 다음과 같이 적용할 수 있다.

방법 1: "show","nomal","fast"
방법 2: 1.000(1초), 500(0.5초)

 

  가속도은 숨기거나 노출하는 동안의 가속도를 설정한다.

  가속도에 적용할 수 있는 값은 다음과 같다.

방법 1: "swing"
시작과 끝은 느리게, 중간은 빠른 속도로 움직인다(기본값)

방법 2: "linear"
일정한 속도로 움직인다.

 

  콜백 함수는 노출과 숨김 효과가 끝난 후에 실행할 함수이다. 콜백함수는 생략 할 수 있다.

  

  다음은 id값이 'box'인 요소를 2초간 위로 올려 숨기는 예로, 가속도는 "inner"다. 요소가 숨겨지면 콜백 함수가 

  실행되어 "hello"라는 메시지가 나타난다.

$("#box").slideUp(2000, "linear", function(){
 alert("hello");
});

fadeTo()메소드

  다음은 fadeTo()메소드의 기본형이다.

$("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백 함수);

  투명도는 0~1까지의 값을 입력할 수 있다. 1에 가까울수록 선명하게 보인다.

 

  다음은 버튼을 누르면 다양한 효과가 적용되는 예제이다.

<script>
  $(function(){
    $(".btn2").hide();

    $(".btn1").on("click", function(){
      $(".box").slideUp(1000, "linear",
      function(){
        $(".btn1").hide();
        $(".btn2").show();
      });
    });
    //[slideUp]버튼을 클릭하면 class값이 "box"인 요소가 
    //위로 접히며 숨겨진다.
    //그런 다음 콜백 함수가 실행되어 [slideUp]버튼은
    //숨겨지고 [fadeIn]버튼이 나타난다.
    $(".btn2").on("click", function(){
      $(".box").fadeIn(1000, "swing",
      function(){
        $(".btn2").hide();
        $(".btn1").show();
      });
    });

    $(".btn3").on("click", function(){
      $(".box").slideToggle(1000,"linear");
    });
    //[toggleSlide]버튼을 클릭하면 class값이 "box"인 요소가 접히거나
    //펴진다.
    $(".btn4").on("click", function(){
      $(".box").fadeTo("fast", 0.3);
    });

    $(".btn5").on("click", function(){
      $(".box").fadeTo("fast", 1);
    });
    //fadeTo(0, 3)을 클릭하면 class값이 "box"인 요소가 70%투명해진다
    //다시 클릭하면 투명화를 취소한다.
  });
</script>
<style>
  .content{
    width:400px;
    background-color:#eee;
  }
</style>
</head>
<body>
  <p>
    <button class="btn1">slideUp</button>
    <button class="btn2">fadeIn</button>
  </p>
  <p>
    <button class="btn3">toggleSlide</button>
  </p>
  <p>
    <button class="btn4">fadeTo(0,3)</button>
    <button class="btn5">fadeTo(1)</button>
  </p>
  <div class="box">
    <div class="content">
      Lorem ipsum dolor sit amet. consectetur adipiscing elit. Ut...
      ...
    </div>
  </div>
</body>

 

동작을 불어넣는 애니메이션 메소드

  애니메이션 메소드를 적용하면 스타일을 적용한 요소를 움직이게 할 수 있다.

 

animate() 메소드

  선택한 요소에 다양한 동작(Motion)효과를 적용할 수 있다.

  예를들어 요소를 앞으로 이동시키거나 점차 커지게 하는 등 다양한 동작을 적용할 수 있다.

 

  다음은 animate() 메소드의 기본형이다.

$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백함수)

  스타일 속성은 애니메이션으로 적용할 스타일 속성이다.

  적용 시간은 동작에 반응하는데 소요되는 시간이며, 적용 시간의 옵션은 효과 함수에 적용한 것과 같다.

 

  다음은 버튼을 클릭하면 지정한 요소에 애니메이션이 적용되는 예제이다.

<script>
  $(function(){
    $(".btn1").on("click", function(){
      $(".txt1").animate({
        marginLeft:"500px",
        fontSize:"30px"
      },
      2000, "linear", function(){
        alert("모션 완료!");
      });
    });

    $(".btn2").on("click", function(){
      $(".txt2").animate({
        marginLeft:"+=50px"
      }, 1000);
    });
  });
</script>
<style>
  .txt1{background-color:aqua;}
  .txt2{background-color:pink;}
</style>
</head>
<body>
  <p><button class="btn1">버튼1</button></p>
  <span class="txt1">"500px"이동</span>
  <p><button class="btn2">버튼2</button></p>
  <span class="txt2">"50px"씩 이동</span>
</body>

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery(비동기방식연동 Ajax)  (0) 2020.05.26
JQuery(애니메이션 효과 제어 메소드)  (0) 2020.05.26
JQuery(그룹이벤트)  (0) 2020.05.22
JQuery(이벤트 객체)  (0) 2020.05.22
JQuery(이벤트 등록 메소드)  (0) 2020.05.22

그룹 이벤트 등록 메소드

  한번에 2개 이상의 이벤트를 등록할 때 사용한다.

  즉, 선택한 요소에 이벤트 등록 메소드를 한번만 적용하여 '마우스 포인터를 올렸을 때'와 '포커스가 생성되었을때'

  처럼 두 종류의 이벤트가 발생하도록 만들 수 있다.

 

  다음은 그룹 이벤트 등록 메소드를 간단히 정리한 표이다.

종류 설명
on() 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. 사용방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
bind() 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다
delegate() 선택한 요소의 하위 요소에 이벤트를 등록한다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
one() 이벤트 대상 요소에 1개 이상의 이벤트를 등록한다. 지정한 이벤트가 1회 발생하고 자동으로 해제된다.

 

on()메소드

  선택한 요소에 이벤트를 등록한 이후에도 새롭게 생성되거나 복제된 요소에 이벤트를 적용할 수 있다.

  즉, 동적으로 생성되거나 복제된 요소에도 이벤트가 등록된다.

  

  다음은 동적으로 생성된 요소에도 이벤트가 등록되는 on() 메소드의 '라이브 이벤트 등록 방식'의 기본형이다.

$([document]"이벤트 대상의 상위 요소 선택"].on("이벤트 종류", "이벤트 대상 선택", function(){
  자바스크립트 코드;
});

  다음은 on()메소드에 '라이브 이벤트 등록 방식'을 사용하여 동적으로 생성된 요소에 이벤트를 등록하는 예제이다.

<script>
  $(function(){
    $(".btn_1.on").on("mouseover focus", function(){
      alert("HELLO!");
    });
    $(".btn_1").addClass("on");
    //이벤트를 등록하고 class값을 생성하면
    //이벤트가 정상적으로 등록되지 않는다.

    $(document).on("mouseover focus", ".btn_2.on", function(){
      alert("WELCOME!");
    });
    $(".btn_2").addClass("on");
    //라이브 이벤트 등록방식으로 이벤트를 등록한 다음
    //class값을 생성하면 이벤트가 정상적으로 등록된다.
  });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button></p>
    <p><button class="btn_2">버튼2</button></p>
  </div>
</body>

delegate()/one() 이벤트 등록 메소드

  delegate() 메소드는 선택한 요소의 하위 요소에 이벤트를 등록한다.

  그리고 이벤트를 등록한 이후에도 동적으로 생성된 요소와 복제된 요소에도 이벤트를 등록한다.

 

  다음은 delegate()의 기본형이다.

$([document | "이벤트 대상의 상위 요소 선택"]).delegate("이벤트 대상 요소 선택", "이벤트 종류",
function(){
  자바스크립트코드;
});

 

  one() 메소드는 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거된다.

  즉, 1회성 이벤트를 등록할 때 사용한다. one() 메소드도 등록 방식에 따라 '라이브 이벤트'의 등록이 가능하다.

  다음은 one()의 기본형이다.

1. one() 기본 이벤트 등록 방식
   $("이벤트 대상 선택").one("이벤트종류", function(){
     자바스크립트코드;
   });

2. one() 라이브 이벤트 등록 방식
   $([document | "이벤트 대상의 상위 요소 선택"]).one("이벤트 종류", "이벤트 대상 요소 선택",
   function(){
     자바스크립트코드;
   });

  

  다음은 delegate(), one() 메소드를 사용한 예제이다.

<script>
  $(function(){
    $(".btn_wrap").delegate(".btn_1.on",
    "mouseover focus", function(){
      alert("HELLO!");
    });
    $(".btn_1").addClass("on");
    //[버튼1]에 마우스 포인터(포커스)를 올리면 경고창에
    //"HELLO!"라는 메시지가 출력.
    //라이브 이벤트 방식으로 이벤트를 등록하기 때문에
    //새로 생성한 요소에도 이벤트가 적용된다.

    $(document).one("mouseover focus"
    ".btn_2.on", function(){
      alert("WELCOME!");
    });
    $(".btn_2").addClass("on");
    //[버튼2]에 마우스 포인터(포커스)를 올리면 경고창에
    //"WELCOME!"이라는 메시지가 출력
    //이벤트는 1회만 발생
  });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button>
    </p>
    <p><button class="btn_2">버튼2</button></p>
  </div>
</body>

이벤트 제거 메소드

  이전에 등록된 이벤트를 제거할 때 사용한다.

  다음은 이벤트 제거 메소드의 종류를 정리한 표이다.

종류 설명
off() on() 메소드로 등록한 이벤트를 제거한다
unbind() bind() 메소드로 등록한 이벤트를 제거한다.
undelegate() delegate() 메소드로 등록한 이벤트를 제거한다

 

off() / unbind() / undelegate()로 이벤트 해제하기

  이벤트 등록 메소드에 따라 이벤트를 해제하는 방법도 달라진다.

  on()메소드는 off()메소드로, bind()메소드는 unbind()로, delegate()는 undelegate()로 이벤트를 해제한다.

 

  다음은 각 이벤트 해제 메소드의 기본형이다.

1. on()이벤트 해제를 위한 off()메소드
  - 기본 이벤트 제거 방식
     $("이벤트 대상 요소 선택").off("이벤트 종류");
  - 라이브 이벤트 제거 방식
     $([document | "이벤트 대상 상위 요소 선택"]).off("이벤트 종류", "이벤트 대상 요소 선택");
     
2. bind() 이벤트 해제를 위한 unbind()메소드
     $("이벤트 대상 요소 선택").unbind("이벤트 종류");
     
3. delegate() 이벤트 해제를 위한 undelegate() 메소드
  - 기본 이벤즈 제거 방식
     $("이벤트 대상 요소 선택").delegate("이벤트 종류");
  - 라이브 이벤트 제거 방식
     $([document | "이벤트 대상의 상위 요소 선택"]).undelegate("이벤트 대상 선택", "이벤트 종류");

  다음은 on() 메소드로 '기본 등록 방식'과 '라이브 이벤트 등록 방식'을 사용해 각각의 버튼에 이벤트를 등록하고,

  이벤트 해제 버튼을 클릭하면 이벤트가 해제되는 예제이다.

<script>
 $(function(){
   $(".btn_1").on("mouseover", function(){
     alert("HELLO!");
   });
   $(document).on("mouseover", "btn_2", function(){
     alert("WELCOME!");
   });
   var btn_2=$("<p><button class=\"btn_2\">버튼2</button></p>");
   $("#wrap").append(btn_2);

   $(".del_1").on("click", function(){
     $(".btn_1").off("mouseover");
   });
   $(".del_2").on("click", function(){
     $(document).off("mouseover", ".btn_2");
   });
 });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button></p>
  </div>
  <p>
    <button class="del_1">버튼 1 이벤트 해제</button>
    <button class="del_2">버튼 2 이벤트 해제</button>
  </p>
</body>

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery(애니메이션 효과 제어 메소드)  (0) 2020.05.26
JQuery(효과 및 애니메이션 메소드)  (0) 2020.05.22
JQuery(이벤트 객체)  (0) 2020.05.22
JQuery(이벤트 등록 메소드)  (0) 2020.05.22
JQuery(객체조작)  (0) 2020.05.20

이벤트 객체와 종류

  사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 배개변수에는 이벤트 객체가 생성되며,

  이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메소드가 포함되어 있다.

  다음은 이벤트 객체를 생성하기 위한 기본형이다.

$("이벤트 대상 선택").mousemove(function(매개변수){
  매개변수(이벤트 객체), 속성;
});

  다음은 이벤트 객체의 속성과 메소드 종류를 정리한 표이다.

구분 종류 설명
마우스이벤트 clientX 마우스 포인터의 X 좌표값 반환(스크롤 이동거리 무시)
clientY 마우스 포인터의 Y 좌표값 반환(스크롤 이동거리 무시)
pageX 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X좌표값을 반환
pageY 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌표값을 반환
screenX 화면 모니터를 기준으로 마우스 포인터의 X 좌표값을 반환
screenY 화면 모니터를 기준으로 마우스 포인터의 Y 좌표값을 반환
layerX position을 적용한 요소를 기준으로 마우스 포인터의 X 좌표값을 반환
layerY position을 적용한 요소를 기준으로 마우스 포인터의 Y 좌표값을 반환
button 마우스 버튼의 종류에 따라 값을 반환(왼쪽:0, 휠:1, 오른쪽:2)
키보드 이벤트 keyCode 키보드의 아스키 코드값을 반환
altKey 이벤트 발생 시 Alt키가 눌렸으면 true를 아니면 false를 반환
ctrlKey 이벤트 발생 시 ctrl키가 눌렸으면 true를 아니면 false를 반환
shiftKey 이벤트 발생 시 shift키가 눌렸으면 true를 아니면 false를 반환
전체 이벤트 target 이벤트가 전파된 마지막 요소를 가리킨다
cancelBubble 이벤트의 전파를 차단하는 속성으로, 기본값은 false이며, true로 설정하면 전파가 차단
stopPropagation() 이벤트의 전파를 차단
preventDefault() 기본이벤트를 차단. 예를들어 <a>에 클릭 이벤트를 적용하고 사용자가 이벤트를 발생시키면 기본 이벤트가 등록되어 있어 링크주소로 이동하는데, 이런 기본이벤트를 차단할 수 있다.

 scroll()이벤트 메소드

  scroll() 메소드는 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데

  사용한다.

  기본형은 다음과 같다.

1. scroll 이벤트 등록
   $("이벤트 대상 선택").scroll(function(){자바스크립트 코드;});
   $("이벤트 대상 선택").on("scroll", function(){자바스크립트코드;});
   
2. scroll 이벤트 강제 발생
   $("이벤트 대상 선택").scroll();

  다음은 스타일을 사용하여 스크롤바를 생성한 다음 사용자가 스크롤바를 이동시킬 때마다 이벤트가 발생되도록

  만든 예제이다.

<script>
  $(window).on("scroll", function(){
    var sc_top=$(this).scrollTop();
    var sc_left=$(this).scrollLeft();

    $(".top").text(sc_top);
    $(".left").text(sc_left);
  });
</script>
<style>
  body{
    height: 10000px;
    width: 5000px;
  }
  #wrap{
    position: fixed;
    left: 10px;
    top: 10px;
  }
</style>
</head>
<body>
  <div id="wrap">
    <p>scrollTop:<span class="top">0</span>px</p>
    <p>scrollLeft:<span class="left">0</span>px</p>
  </div>
</body>

포커스 이벤트

  포커스는 마우스로 <a> 또는 <input> 태그를 클릭하거나 Tab 키를 누르면 생성된다.

  마우스 이벤트는 마우스가 없으면 사용할 수 없다. 마우스가 없다면 사용자는 키보드만 가지고 사용해야 하는데 이 때

  사용자가 키보드만으로 사이트를 이용해도 불편함이 없도록 제이쿼리가 잘 작동되어야 하는데, 이를 키보드 접근성

  이라 한다.

  키보드 접근성을 높이기 위해서는 마우스 이벤트를 등록할 때 될 수 있으면 <a> 또는 <input> 태그에 등록하고,

  키보드가 없을 경우를 고려하여 마우스 이벤트에 대응할 수 있는 키보드 이벤트까지 등록해야 한다.

 

focus() / blur() / focusin() / focusout() 이벤트 메소드

  focus() 메소드 : 대상 요소로 포커스가 이동하면 이벤트를 발생시킨다.

  blur() 메소드 : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생시킨다.

  focusin() 메소드 : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생시킨다.

  focusout() 메소드 : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생시킨다.

 

  다음은 focus()와 blur() 메소드의 기본형이다

1. focus 이벤트 등록
   $("이벤트 대상 선택").focus(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("focus", function(){자바스크립트코드;});

2. focus 이벤트 강제 발생
   $("이벤트 대상 선택").focus();
   
3. blur 이벤트 등록
   $("이벤트 대상 선택").blur(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("blur", function(){자바스크립트코드;});
   
4. blur 이벤트 강제 발생
   $("이벤트 대상 선택").blur();

  다음은 focusin()과 focusout() 메소드의 기본형이다.

1. focusin 이벤트 등록
   $("이벤트 대상 선택").focusin(funcion(){자바스크립트코드;});
   $("이벤트 대상 선택").on("focusin", function(){자바스크립트코드;});
   
2. focusin 이벤트 강제 등록
   $("이벤트 대상 선택").focusin();
   
3. focusout 이벤트 등록
   $("이벤트 대상 선택").focusout(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("focusout", function(){자바스크립트코드;});
   
4. focusout 이벤트 강제 등록
   $("이벤트 대상 선택").focusout();

  다음은 focus(), blur(), focusin(), focusout()을 이용한 예제이다.

<script>
  $(function(){
    $("#user_id_1, #user_pw_1").on("focus",
    function(){
      $(this).css({
        "background-color":"pink"
      });
    });
    $("#user_id_1, #user_pw_1").on("blur",
    function(){
      $(this).css({
        "background-color":"#fff"
      });
    });
    //포커스가 입력 요소로 이동하면 배경색을 분홍색으로 변경하고
    //다른 요소로 이동하면 다시 배경색을 흰색으로 변경.

    $("#frm_2").on("focusin",
    function(){
      $(this).css({
        "background-color":"pink"
      });
    });
    $("#frm_2").on("focusout",
    function(){
      $(this).css({
        "background-color":"#fff"
      });
    });
    //포커스가 이벤트 대상 요소에서 입력 요소로 이동하면
    //이벤트가 발생한 요소(<form id="frm_2">)의 배경색을
    //분홍색으로 변경
  });
</script>
</head>
<body>
  <h1>focus / blur</h1>
  <form action="#">
    <p>
      <label for="user_id_1">ID</label>
      <input type="text" name="user_id_1" id="user_id_1">
    </p>
    <p>
      <label for="user_pw_1">PW</label>
      <input type="password" name="user_pw_1" id="user_pw_1">
    </p>
  </form>
  <h1>focusin / focusout</h1>
  <form action="#" id="frm_2">
    <p>
      <label for="user_id_2">ID</label>
      <input type="text" name="user_id_2" id="user_id_2">
    </p>
    <p>
      <label for="user_pw_2">PW</label>
      <input type="password" name="user_pw_2" id="user_pw_2">
    </p>
  </form>
</body>

키보드로 마우스 이벤트 대응하기

  키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드 대상 요소를 사용할 수 있게

  하는 것을 말한다. 다음과 같이 마우스 이벤트가 등록되었을 때는 반드시 키보드로 작동할 수 있게 대응이벤트를

  함께 작성해야 한다.

마우스 이벤트 키보드 이벤트
mouseover focus
mouseout blur

  다음은 버튼에 마우스 포인터를 올리면 마우스 이벤트가 발생되어 '내용1'이 숨겨지는 예이다.

  이 예는 마우스가 없으면 동작하지 않는다.

  

  1. 키보드 접근성을 배려하지 않은 이벤트 예(비추천)

<button class="btn">버튼</button>
<p class="txt_1">내용1</p>
$(".btn").mouseover(function(){
  $(".txt_1").hide();
});

  2. 키보드 접근성을 배려한 이벤트 적용 예(추천)

<button class="btn">버튼</button>
<p class="txt_1">내용1</p>
$(".btn").on("mouseover focus", function(){
  $(".txt_1).hide();
});

  다음은 2개의 버튼에 마우스 이벤트를 등록하는데 하나는 키보드 접근성을 무시하고 나머지 하나는 키보드 접근성을

  고려하여 등록한 예제이다.

<script>
  $(function(){
    $("#btn1")
    .data({"text":"javascript"})
    .on({
      "mouseover":overFnc,
      "mouseout":outFnc
    });
    //[버튼1]에 마우스 포인터를 올리면 overFnc()메소드를 호출
    //반대로 [버튼1]에서 마우스 포인터를 내리면 
    //outFnc()메소드를 호출

    $("#btn2")
    .data({"text":"welcome!"})
    .on({
      "mouseover focus":overFnc,
      "mouseout blur":outFnc
    });

    function overFnc(){
      $(".txt").text($(this).data("text"));
    }
    function outFnc(){
      $(".txt").text("");
    }
  });
</script>
</head>
<body>
  <p><button id="btn1">버튼1</button></p>
  <p><button id="btn2">버튼2</button></p>
  <p class="txt"></p>
</body>

change() 이벤트 메소드

  선택한 폼 요소의 값(value)을 새 값으로 바꾼다. 그리고 포커스가 다른 요소로 이동하면 이벤트를 발생시킨다.

  기본형은 다음과 같다.

1. focus 이벤트 등록
   $("이벤트 대상 선택").change(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("change", function(){자바스크립트코드;});
   
2. focus 이벤트 강제 발생
   $("이벤트 대상 선택").change();

  다음은 선택상자에 change() 이벤트 메소드를 적용한 예제이다.

<script>
  $(function(){
    $("#rel_site").on("change", function(){
      $(".txt").text($(this).val));
    });
  });
</script>
</head>
<body>
  <select id="rel_site">
    <option value="www.google.com">구글</option>
    <option value="www.naver.com">네이버</option>
    <option value="www.daum.net">다음</option>
  </select>
  <p class="txt"></p>
</body>

키보드 이벤트

  키보드 이벤트는 사용자가 키보드로 입력을 하면 발생한다.

  예를 들어 키를 누르거나 키에서 손을 떼면 키보드 이벤트가 발생한다.

 

keydown() / keyup() / keypress() 이벤트 메소드

  keydown()과 keypress() 이벤트 메소드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나

  해당 이벤트를 강제로 발생시킨다

  두 이벤트의 차이점을 보면 keydown()은 모든키(한글 키 제외)에 대해서 이벤트를 발생시키지만 keypress()는

  기능키(F1~F12, Alt, Ctrl, Shift 등)에 대해서는 이벤트를 발생시키지 않는다.

  또한 키보드 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있다.

  그리고 이를 사용하여 단축키 기능을 만들수도 있다.

 

  keyup() 메소드는 자판의 키를 눌렀다 키에서 손을 떼면 이벤트를 발생시키거나 keyup 이벤트를 강제로 발생시킨다.

  다음은 keydown(), keyup(), keypress() 메소드의 기본형이다.

1. keydown 이벤트 등록
   $("이벤트 대상 선택").keydown(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("keydown", function(){자바스크립트코드;});
   
2. keydown 이벤트 강제 발생
   $("이벤트 대상 선택").keydown();
   
3. keyup 이벤트 등록
   $("이벤트 대상 선택").keyup(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("keyup", function(){자바스크립트코드;});
   
4. keydown 이벤트 강제 발생
   $("이벤트 대상 선택").keyup();
   
5. keypress 이벤트 등록
   $("이벤트 대상 선택").keypress(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("keypress", function(){자바스크립트코드;});
   
6. keydown 이벤트 강제 발생
   $("이벤트 대상 선택").keypress();

  다음은 HTML 문서(document)에 keydown 이벤트를 등록하는 예제이다.

<script>
  $(function(){
    $(document).on("keydown", keyEventFnc);
    fonction keyEventFnc(e){
      var direct="";

      switch(e.keyCode){
        case 37:
          direct="LEFT";
          break;
        case 38:
          direct="TOP";
          break;
        case 39:
          direct="RIGHT";
          break;
        case 40:
          direct="BOTTOM";
          break;
      }

      if(direct) $("#user_id").val(direct);
    }
  });
</script>
</head>
<body>
  <p><input type="text" name="user_id" id="user_id"></p>
</body>

 

이벤트가 발생한 요소 추적하기

 

$(this)선택자

  이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있다.

 

 

<ul id="gnb">
  <li><a href=""#">메뉴1</a></li>
  <li><a href=""#">메뉴2</a></li>
  <li><a href=""#">메뉴3</a></li>
  <li><a href=""#">메뉴4</a></li>
</ul>
$("#gnb>li>a").on("click", function(){
   $(this)
});

  위 예제에서 메뉴 3의 버튼을 클릭하면 이벤트 핸들러에 사용된 $(this)는 이벤트가 발생한 <a href="#">메뉴3</a>

  를 선택한다.

 

index() 인덱스 반환 메소드

  이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환한다.

  다음은 인덱스 반환 메소드의 기본형이다.

$("이벤트 대상 선택").on("이벤트 종류", function(){
  $("이벤트 대상 선택").index(this);
});

 

<ul id="gnb">
  <li><a href=""#">메뉴1</a></li>
  <li><a href=""#">메뉴2</a></li>
  <li><a href=""#">메뉴3</a></li>
  <li><a href=""#">메뉴4</a></li>
</ul>
$("#gnb>li>a").on("click", function(){
  var idx=$("#gnb>li>a").index(this);
});

  위 예제에서는 인덱스 2에 해당하는 메뉴 3을 변수 idx에 대입하게 된다.

 

  다음은 이벤트 핸들러에 $(this)와 index() 메소드로 click 이벤트가 발생한 요소를 추적하여 배경색을 바꾸는 예제이다.

<script>
  $(function(){
    $(".menuWrap_1 a").on("click", function(e){
      e.preventDefault();

      $(".menuWrap_1 a").css({
        "background-color":"#fff"
      });

      $(this).css({
        "background-color":"#ff0"
      });
    });
    //class 값이 "menuWrap_1"인 요소의 하위요소 <a>의 배경을 흰색으로 변경
    //그 다음 선택한 <a>요소의 배경만 노란색으로 변경

    $(".menuWrap_2 a").on("click", function(e){
      e.preventDefault();

      $(".menuWrap_2 a").css({
        "background-color":"#fff"
      });

      var idx=$(".menuWrap_2 a").index(this);

      $(".menuWrap_2 a").eq(idx).css({
        "background-color":"#0ff"
      });

      $(".idxNum").text(idx);
    });
    //class 값이 "menuWrap_2"인 요소의 하위요소 <a>의 배경을 흰색으로 변경
    //그 다음 선택한 <a>요소의 배경만 아쿠아색으로 변경하고 인덱스값(1)을 반환
  });
</script>
</head>
<body>
  <h2>$(this)</h2>
  <ul class="menuWrap_1">
    <li><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
  </ul>
  <h2>index()</h2>
  <ul class="menuWrap_2">
    <li><a href="#">메뉴4</a></li>
    <li><a href="#">메뉴5</a></li>
    <li><a href="#">메뉴6</a></li>
  </ul>
  <p class="idxNum"></p>
</body>

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery(효과 및 애니메이션 메소드)  (0) 2020.05.22
JQuery(그룹이벤트)  (0) 2020.05.22
JQuery(이벤트 등록 메소드)  (0) 2020.05.22
JQuery(객체조작)  (0) 2020.05.20
JQuery(속성 탐색 선택자)  (0) 2020.05.20

이벤트 등록 메소드란?

  이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는

  코드를 말한다.

  이벤트 메소드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행

  시킬 수 있다.

 

  이벤트 등록 메소드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메소드와 2개 이상의 이벤트를

  등록할 수 있는 그룹 이벤트 등록 메소드가 있다.

  단독 이벤트 메소드는 한 동작에 대한 이벤트를 등록할 때 사용되는 메소드이다.

  예를 들어 '요소를 클릭했을 때', '요소를 더블클릭했을 때', '요소에 마우스 포인터를 올렸을 때'등 하나의

  이벤트에만 대응하여 이벤트 핸들러 코드가 실행된다.

 

  이벤트의 기본형은 다음과 같다. 

<button id="btn">버튼</button>
$("#btn").click(function(){
  자바스크립트코드;
});

  위 예제에서 버튼($("#btn))을 클릭(.click)했을 때 경고창(스크립트코드)을 나타내라 라는 명령이 있을 경우

  버튼은 이벤트의 대상이 되고 클릭했을 때는 방문자의 특정 동작을 가리키는데, 이는 이벤트 등록 메소드가 된다.

  마지막으로 경고창을 나타내라는 것은 이벤트가 발생했을 때 실행되는 이벤트 핸들러가 된다.

 

  이러한 단독 이벤트 등록 메소드는 로딩 이벤트, 마우스 이벤트, 포커스 이벤트, 키보드 이벤트, 기타 이벤트로

  나눌 수 있다.

  다음 표는 이벤트 등록 메소드의 종류를 정리한 표이다.

 

구분 종류 설명
로딩
이벤트		 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생
ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생
error() 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생
마우스
이벤트		 click() 선택한 요소를 클릭했을 때 이벤트가 발생
dblclick() 선택한 요소를 더블클릭했을 때 이벤트가 발생
mouseout() 선택한 요소의 영역에서 마우스 포포인터 벗어났을 때 이벤트가 발생. 이때 하위 요소의 영향을 받는다.
mouseover() 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생
hover() 선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생한다.
mousedown() 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생
mouseup() 선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생
mouseenter() 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생
moseleave() 선택한 요소 범위에서 마우스 포인터가 벗어났을대 이벤트가 발생
mousemove() 선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생
scroll() 가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생
포커스
이벤트		 focus() 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스를 생성
focusin() 선택한 요소에 포커스가 생성되었을 때 이벤트가 발생
focusout() 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생
blur() 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 한다.
change() 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생. 그리고 강제로 change 이벤트를 발생시킬 때도 사용
키보드이벤트 keypress() 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 문자키를 제외한 키의 코드값을 반환
keydown() 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 키보드의 모든 키의 코드값을 반환
keyup() 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생.

 

이벤트 등록 방식

  지정한 요소에 이벤트를 등록하는 방법에는 단독 이벤트 등록 방식과 그룹 이벤트 등록 방식의 두 종류가 있다.

  예를 들어 마우스 포인터를 올렸을 때 환영 메시지를 출력하려면 단독 이벤트 등록 메소드나 그룹 이벤트 등록

  메소드를 사용하고, 마우스 포인터를 올리거나 클릭했을 때 환영 메시지를 출력하려면 그룹 이벤트 등록 메소드를

  사용한다.

 

  즉, 한가지 동작에 대한 이벤트 등록 방식에는 단독 이벤트 등록 메소드나 그룹 이벤트 등록 메소드를 사용하고,

  두 가지 이상의 동작에 대한 이벤트 등록 방식에는 그룹 이벤트 등록 메소드를 사용한다.

  

단독 이벤트 등록 메소드

  대상에 한가지 동작에 대한 이벤트만 등록할 수 있다.

  다음은 사용하기 위한 기본형이다.

$("이벤트 대상 선택").이벤트 등록 메소드(function(){
  자바스크립트코드;
});

  다음은 사용자가 버튼을 클릭하면 환영 메시지를 경고 창에 나타내는 예제이다.

<button id="btn1">버튼</button>
$(".btn1").click(function(){
  alert("welcome");
});

 

그룹 이벤트 등록 메소드

  대상에 한가지 동작 이상의 이벤트를 등록 할 수 있다.

  다음은 사용하기 위한 기본형이다. on()메소드를 사용하여 이벤트를 등록한다.

1. on()메소드 등록 방식 1
   $("이벤트 대상 선택").on("이벤트 종류1 이벤트종류2...이벤트종류n",
   function(){
     자바스크립트 코드;
   });
   
2. on()메소드 등록 방식 2
   $("이벤트 대상 선택").on({
     "이벤트종류1 이벤트종류2 ... 이벤트종류n":function(){
       자바스크립트코드
     }
   });
   
3. on()메소드 등록 방식 3
   $("이벤트 대상 선택").on(){
     "이벤트 종류1":function(){자바스크립트 코드;1},
     "이벤트 종류2":function(){자바스크립트 코드;2,
     ...
     "이벤트 종류n":function(){자바스크립트 코드;n}
   });

 

  다음은 그룹 이벤트 등록에 대한 예제이다.

  사용자가 버튼에 마우스 포인터를 올리거나 키보드를 사용하여 버튼에 포커스를 맞추면 환영 메시지가

  콘솔 패널에 출력된다.

<button id="btn1">버튼</button>

  1. on()메소드 등록방식 1

$(".btn1").on("mouseover focus", function(){
  console.log("welcome");
})

  2. on()메소드 등록방식 2

$(".btn1").on({
  "mouseover focus":function(){
    console.log("welcome");
  }
});

  3. on()메소드 등록방식 3

$(".btn1").on({
  "mouseover":function(){
    console.log("welcome");
  },
  "focus":function(){
    console.log("welcome");
  }
});

 

  다음은 단독 이벤트 등록 메소드(click())와 그룹 이벤트 등록 메소드(on())로 이벤트를 등록하는 예제이다.

<script>
  $(function(){
    $(".btn1").click(function(){
     $(".btn1").parent().next()
     .css({"color":"#f00"});
     });
     //사용자가 [버튼1]을 클릭하면 <p>내용1</p>의 글자를
     //빨간색(#f00)으로 변경한다.

    $(".btn2").on({
      "mouseover focus":function(){
        $(".btn2").parent().next()
        .css({"color":"#0f0"});
        },
        //사용자가 [버튼2]에 마우스 포인터를 올리거나
        //포커스를 이동하면 <p>내용2</p>의 글자를 초록색(#0f0)으로
        //변경한다.
      "mouseout blur":function(){
        $(".btn2").parent().next()
        .css({"color":"#000"});
        },
        //사용자가 [버튼2]에서 다른 요소로 마우스 포인터를 옮기거나
        //포커스를 이동하면 <p>내용2</p>의 글자를 검은색(#000)으로
        //변경한다.
    });
  });
</script>
</head>
<body>
  <p>
    <button class="btn1">버튼1</button>
  </p>
  <p>내용1</p>
  <p>
    <button class="btn2">버튼2</button>
  </p>
  <p>내용2</p>
</body>

강제로 이벤트 발생시키기

  '이벤트가 강제로 발생했다'는 말은 '사용자에 의해' 이벤트가 발생했음을 의미하는것이 아니라 '핸들러에 의해'

  자동으로 이벤트가 발생했음을 의미한다.

  예를 들어 버튼을 클릭할 때마다 변수의 값이 1씩 증가하는 버튼이 있다고 하면, 변수의 값을 증가시키려면

  사용자가 직접 버튼을 클릭해야 한다.

  하지만 단독 이벤트 등록 메소드를 사용하거나 trigger()메소드를 사용하면 강제로 이벤트를 발생시킬 수 있다.

  즉, 사용자가 버튼을 클릭하지 않아도 변수가 증가한다.

 

  다음은 단독 이벤트 등록 메소드와 trigger() 메소드를 사용해 강제로 이벤트를 발생시키는 메소드의 기본형과

  예제이다.

1. $("이벤트 대상").단독 이벤트 등록 메소드();
2. $("이벤트 대상").trigger("이벤트 종류");
<script>
  $(function(){
    $(".btn1").click(fuction(){
      $(".btn1").parent().next()
      .css({"color":"#f00"});
    });
    //[버튼1]에 click 이벤트가 발생하며
    //이벤트 핸들러가 실행된다.

    $(".btn2").on({
      "mouseover focus":function(){
        $(".btn2").parent().next()
        .css({"color":"#0f0"});
      }
    });
    //[버튼2]에 마우스 포인터를 올리면
    //자동으로 실행되는 이벤트 핸들러

    $(".btn1").click();
    $(".btn2").trigger("mouseover");    
    //[버튼2]에 마우스 포인터를 올리면
    //이벤트핸들러(function(){자바스크립트코드})
    //가 자동으로 실행된다.
  });
</script>
</head>
<body>
  <p>
    <button class="btn1">버튼1</button>
  </p>
  <p>내용1</p>
  <p>
    <button class="btn2">버튼2</button>
  </p>
  <p>내용2</p>
</body>

이벤트 제거 메소드

  이벤트를 제거하는 메소드로 off()가 있다.

  다음은 메소드의 기본형이다

$("이벤트 대상").off("제거할 이벤트 종류");

  다음은 off()메소드를 이용한 예제이다.

<script>
  $(function(){
    $(".btn1").click(fuction(){
      $(".btn1").parent().next()
      .css({"color":"#f00"});
    });

    $(".btn2").on({
      "mouseover focus":function(){
        $(".btn2").parent().next()
        .css({"color":"#0f0"});
      }
    });
    
    $(".btn1").off("click");
    //[버튼1]에 등록된 클릭 이벤트를 제거
    $(".btn2").off("mouseover focus");    
    //[버튼2]에 등록된 마우스오버, 포커스 이벤트를 제거
  });
</script>
</head>
<body>
  <p>
    <button class="btn1">버튼1</button>
  </p>
  <p>내용1</p>
  <p>
    <button class="btn2">버튼2</button>
  </p>
  <p>내용2</p>
</body>

로딩 이벤트 메소드

  사용자가 브라우저에서 HTML문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행한다.

  로딩 이벤트 메소드에는 ready()와 load()가 있다.

  

  ready()메소드는 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document)의 로딩이 끝나면 이벤트를

  발생시킨다. load()메소드는 외부에 연동된 소스(iframe, img, video)의 로딩이 끝나면 이벤트를 발생시킨다.

  다음은 ready()와 load() 메소드의 기본형이다.

1. $(document).ready(function(){자바스크립트코드});
2. ${document).on("ready", function(){자바스크립트코드});
3. $(window).load(function() {자바스크립트코드;});
4. $(window).on("load", function(){자바스크립트코드;});

  다음은 ready(), load() 이벤트 메소드를 사용한 예제이다.

  외부에서 불러온 이미지의 로딩이 끝나면 이미지의 높이값을 콘솔 패널에 출력한다.

 

<script>
  $(function(){
    $(document).ready(function(){
      var h1=$(".img1").height();
      console.log("ready:", h1); //ready : 0
    });
    //HTML에 전체 요소가 로딩되면 이벤트 핸들러가 실행

    $(window).load(function(){
      var h2=$(".img1").height();
      console.log("load:", h2); //load : 300
    });
    //외부 소스(이미지)가 완전히 로딩되면 이벤트 핸들러가 실행되며
    //이미지 높이값(300)이 출력된다.
  });
</script>
</head>
<body>
  <p>
    <img src="http://place-hold.it/300X300" class="img1">
  </p>
</body>

 

마우스 이벤트

  사용자가 사이트에서 마우스를 이용해서 취하는 모든 행위를 말한다.

  가령 사용자가 지정한 요소에 마우스 포인터를 올리거나 클릭하는 등의 행위를 말한다.

 

click()/dblclick() 이벤트 메소드

  click()메소드는 서낵한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬때

  사용한다. click()이벤트 메소드를 등록하는 기본형은 다음과 같다.

1. click이벤트 등록
   $("이벤트 대상 선택").click(function(){자바스크립트코드});
   $("이벤트 대상 선택").on("click", function(){자바스크립트코드});

2. click 이벤트 강제 발생
   $("이벤트 대상 선택").click();

 

  dblclick() 이벤트 메소드는 선택한 요소를 연속해서 두번 클릭했을 때 이벤트를 발생시키거나 선택한 요소에

  강제로 더블클릭 이벤트를 발생시킨다.

  기본형은 다음과 같다.

1. dblclick 이벤트 등록
   $("이벤트 대상 선택").dblclick(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("dblclick", function(){자바스크립트 코드;});
   
2. dblclick 이벤트 강제 발생
   $("이벤트 대상 선택").dblclick();

 

<a>, <form>태그에 클릭 이벤트 적용시 기본 이벤트 차단하기

  <a>요소에 click이나 dblclick을 등록하면 클릭할 때마다 <a>에 링크된 주소로 이동하는 문제가 발생한다.

  이 문제를 해결하려면 <a> 요소의 기본 이벤트를 차단해야 한다. <form>요소의 제출버튼(submit)도

  action에 등록된 주소로 이동시키는 문제가 발생한다.

  우리가 등록한 이벤트를 정상적으로 수행하려면 이러한 기본 이벤트를 차단해야 한다.

 

  다음은 <a>, <form> 태그에 이벤트를 등록하기 위해 기본 이벤트를 차단하는 기본형이다.

1. return false를 이용한 차단 방식
   $("a 또는 form").이벤트 메소드(function(){
     자바스크립트코드;
     return false;
   });

2. preventDefault()메소드를 이용한 차단 방식
   $("a 또는 form").이벤트 메소드(function(){
     e.preventDefault(); //prevent는 막다, default는 기본이벤트를 의미한다.
     자바스크립트코드;
   });

 

  다음은 <a>와 <button>에 각각 click, dblclick 이벤트를 등록하는 예제이다.

<script>
  $(function(){
    $(".btn1").on("click", function(e){
      e.preventDefault();
      //<a>요소에 링크된 페이지로 이동하는 기본 이벤트를 차단
      $(".txt1").css({"background-color":"#ff0"});
    });
    $(".btn2").on("click",function(e){
      $(".txt2").css({"background-color":"#0ff"});
    });
    $(".btn3").on("dblclick", function(){
      $(".txt3").css({"background-color":"#0f0"});
    });
  });
</script>
</head>
<body>
  <p>
    <a href="http://www.easypub.co.kr/" class="btn1">버튼1</a> 
  </p>
  <p class="txt1">내용1</p>
  <p><a href="http://www.easypub.co.kr/" class="btn2">버튼2</a></p>
  <p class="txt2">내용2</p>
  <p><button class="btn3">버튼3</button></p>
  <p class="txt3">내용3</p>
</body>

 

mouseover() / mouseout() / hover() 이벤트 메소드

  mouseover()이벤트 메소드는 선택한 요소에 마우스 포인터를 올릴 때마다 이벤트를 발생시키거나 선택한 요소에

  mouseover 이벤트를 강제로 발생시킨다.

  mouseout() 이벤트 메소드는 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생시키거나 선택한 요소에

  mouseout이벤트를 강제로 발생시킨다.

  그리고 hover() 이벤트 메소드는 선택한 요소에 마우스 포인터가 올라갈 때와 선택한 요소에서 벗어날 때 각각

  이벤트를 발생시키며, 이때 각각 다른 이벤트 핸들러를 실행 시킨다.

 

  각 이벤트 메소드의 기본형은 다음과 같다.

1. mouseover 이벤트 등록
   $("이벤트 대상 선택").mouseover(function(){자바스크립트코드});
   $("이벤트 대상 선택").on("mouseover", function(){자바스크립트코드;});

2. mouseover 이벤트 강제 발생
   $("이벤트 대상 선택").mouseover();
1. mouseout 이벤트 등록
   $("이벤트 대상 선택").mouseout(function(){자바스크립트코드});
   $("이벤트 대상 선택").on("mouseout", function(){자바스크립트코드;});
   
2. mouseout 이벤트 강제 발생
   $("이벤트 대상 선택").mouseout();
hover 이벤트 등록
  $("이벤트 대상 선택").hover(
    function(){마우스 오버 시 실행될 코드},
    function(){마우스 아웃 시 실행될 코드}
  );

  다음은 버튼 요소에 mouseover, mouseout, hover 이벤트 메소드를 적용한 예제이다.

<script>
  $(function(){
    $(".btn1").on({
      "mouseover":function(){
        $(".txt1").css({"background-color":"yellow"});
      },
      //[Mouse Over/Mouse Out] 버튼에 마우스 포인터를 올리면
      //class값이 "txt1"인 요소의 배경색을 노란색으로 변경한다.

      "mouseout":function(){
        $(".txt1".css({"background-color":"none"});
      }
      //버튼에서 마우스 포인터가 벗어나면 배경의 색을 다시 제거
    });

    $(".btn2").hover(function(){
      $(".txt2").css({"background-color":"aqua"});
    }, function(){
      $(".txt2").css({"background-color":"none"});
    });
  });
</script>
</head>
<body>
  <p>
    <button class="btn1">Mouse Over/Mouse Out</button>
  </p>
  <p class="txt1">내용1</p>
  <p>
    <button class="btn2">Hover</button>
  </p>
  <p class="txt2">내용2</p>
</body>

mouseenter() / mouseleave() 이벤트 메소드

  mouseenter() 메소드는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생 시키고,

  mouseleave() 이벤트 메소드는 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킨다.

  

  mouseover와 mouseenter의 차이점을 보면,

  mouseover는 대상 요소에 마우스 포인터가 올라가면 발생하는 이벤트이고, mouseenter는 이벤트 대상이 포함된

  범위에 마우스 포인터가 들어오면 발생하는 이벤트이다.

  mouseover는 한 대상. mouseenter는 구역 혹은 영역이라고 생각하면 된다.

 

  mouseout과 mouseleave도 역시 대상요소인지 범위인지에 따라 다른것이다.

 

  다음은 mouseenter()와 mouseleave() 메소드의 기본형이다.

1. mouseenter 이벤트 등록
   $("이벤트 대상 선택").mouseenter(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("mouseenter", function(){자바스크립트코드;});
   
2. mouseenter 이벤트 강제 발생
   $("이벤트 대상 선택").mouseenter();
1. mouseleave 이벤트 등록
   $("이벤트 대상 선택").mouseleave(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("mouseleave", function(){자바스크립트코드;});

2. mouseleave 이벤트 강제 발생
   $("이벤트 대상 선택").mouseleave();

  다음은 mouseenter와 mouseleave 메소드를 사용한 예제이다.

<script>
  $(function(){
    $("#box_1").on("mouseout", function(){
      $("#box_1").css({"background-color":"yellow"});
    });

    $("#box_2").on("mouseleave":function(){
      $("#box_2").css({"background-color":"pink"});
    });
  });
</script>
</head>
<body>
  <h1>mouseout</h1>
  <div id="box_1">
    <p><a href="#">내용1</a></p>
    <p><a href="#">내용2</a></p>
    <p><a href="#">내용3</a></p>
  </div>

  <h1>mouseleave</h1>
  <div id="box_2">
    <p><a href="#">내용4</a></p>
    <p><a href="#">내용5</a></p>
    <p><a href="#">내용6</a></p>
  </div>
</body>

mousemove() 이벤트 메소드

  다음은 mousemove()메소드의 기본형이다.

1. mousemove 이벤트 등록
   $("이벤트 대상 선택").mousemove(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("mousemove", function(){자바스크립트코드;});
   
2. mousemove 이벤트 강제 발생
   $("이벤트 대상 선택").mousemove();

  다음은 mousemove 이벤트가 발생할 때마다 마우스 포인터의 좌표값을 각각 <span>에 출력하는 예제이다.

<script>
  $(function(){
    $(document).on("mousemove", function(e){
      $(".posX").text(e.pageX);
      $(".posY").text(e.pageY);
    });
  });
</script>
</head>
<body>
  <h1>mousemove</h1>
  <p>X : <span class="posX">0</span>px</p>
  <p>Y : <span class="posY">0</span>px</p>
</body>

 

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery(그룹이벤트)  (0) 2020.05.22
JQuery(이벤트 객체)  (0) 2020.05.22
JQuery(객체조작)  (0) 2020.05.20
JQuery(속성 탐색 선택자)  (0) 2020.05.20
JQuery(위치탐색선택자)  (0) 2020.05.20

객체조작메소드

  속성 조작 메소드와 수치 조작 메소드 그리고 객체편집메소드로 나눌 수 있다.

  

  속성 조작 메소드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메소드는 요소의 너비값 또는 높이값 같은

  수치를 바꿀 때 사용한다.

  이 두 메소드는 선택한 요소의 속성을 바꾸는 메소드이므로 성격이 비슷하다고 볼 수 있다.

  

  객체편집 메소드는 말 그대로 객체를 생성하거나 삭제 또는 복제 할 때 사용한다.

 

  예를 들어 제이쿼리에 객체를 조작하거나 생성하는 메소드는 다음과 같은 기능을 가진 메소드를 말한다.

 

  1. 선택한 요소에 새 요소를 만든다. -새 요소 생성

<div></div>                 ->                   <div><p>내용</p></div>

  2. 요소를 복제하여 선택한 요소에 삽입한다. - 복제

<p>내용1</p>              ->                    <p>내용1</p> 
                                                         <p>내용1</p>

  3. 선택한 요소를 삭제한다. -삭제

<div><p>내용</p></div>              ->            <div></div>

  4. 선택한 요소의 속성을 변경 또는 추가한다. 그리고 기존의 속성을 삭제도 한다 - 속성 변환

<img src="bnt_on.gif" alt="버튼1"/>      ->     <img src="bnt_out.gif" alt="버튼1"/>

 

속성 조작 메소드

  요소의 속성을 조작할 때 사용하는 메소드이다. 다음은 속성 조작 메소드의 종류와 사용법을 정리한 표이다.

종류 사용법 설명
html()
html(“새 요소”)		 $(“요소 선택”).html();
$(“요소 선택”).html(“새 요소”);		 선택한 요소의 하위 요소를 가져온다.
선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성한다.
text()
text(“새 텍스트”)		 $(“요소 선택”).text();
$(“요소 선택”).text(“새 텍스트”);		 선택한 요소가 감싸는 모든 텍스트를 가져온다.
선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성한다.
attr(“속성명”)
attr(“속성명”,”새값”)		 $(“요소 선택”).attr(“속성명”);
$(“요소 선택”).attr(“속성명”,”새값”);		 선택한 요소의 지정한 속성(attribute)값을 가져온다.
요소를 선택하여 지정한 속성에 새 값을 적용한다.
removeAttr(“속성명”) $(“요소 선택”).removeAttr(“속성명”); 선택한 요소의 지정한 속성만 제거한다.
prop(“상태 속성명”)
prop(“상태 속성명”, 새 값)		 $(“요소 선택”).prop(“상태 속성명”);
$(“요소 선택”).prop(“상태 속성명”,”새 값”);		 선택한 요소의 상태 속성값을 가져온다.
요소를 선택하여 상태 속성에 새 값을 적용한다.
val()
var(“새 값”)		 $(“요소 선택”).val();
$(“요소 선택”).val(“새 값”);		 선택한 폼 요소의 value값을 가져온다.
폼 요소를 선택하여 value 속성에 새 값을 적용한다.
css(“속성명”)
css(“속성명”,”새값”)		 $(“요소 선택”).css(“속성명”);
$(“요소 선택”).css(“속성명”,”새 값”);		 선택한 요소의 지정한 스타일(CSS)속성 값을 가져온다.
요소를 선택하여 지정한 스타일 속성에 새 값을 적용한다.
addClass(“class 값”) $(“요소 선택”).addClass(“class 값”); 선택한 요소의 class속성에 새 값을 추가한다.
removeClass(“class 값”) $(“요소 선택”).removeClass(“class 값”); 선택한 요소의 class 속성에서 지정한 값만 제거한다.
toggleClass(“class 값”) $(“요소 선택”).toggleClass(“class 값”) 선택한 요소의 class값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가한다.
hasClass(“class 값”) $(“요소 선택”).hasClass(“class 값”) 선택한 요소의 class값에 지정한 클래스 값이 포함되어 있으면 true를, 없으면 false를 반환한다.

 

html()/text() 메소드

  html()메소드는 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때

  사용한다.

  text()메소드는 선택한 요소에 포함되어있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 텍스트를

  생성할 때 사용한다.

1. $("요소 선택").html();
2. $("요소 선택").html("새 요소");
3. $("요소 선택").text();
4. $("요소 선택").text("새 텍스트");

  1은 선택한 요소의 하위 요소를 가져와 문자열로 반환한다.

  2는 선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소를 생성한다.

  3은 선택한 요소의 텍스트만 가져온다.

  4는 선택한 요소의 하위 요소를 전부 제거하고 지정한 텍스트를 생성한다.

<script>
  $(function(){
    var result_1 = $("#sec_1").html();
      console.log(result_1);
      //id 값이 "sec_1"인 하위 요소를 문자열로 가져와
      //result_1에 저장한다.
      $("#sec_1 p").html("<a href=\"#\">Text1</a>");
       //id값이 "sec_1"인 요소의 하위 요소 중
       //<p>요소의 하위 요소를 새 요소로 바꾼다.

    var result_2 = $("#sec_2").text();
      console.log(result_2);
      //id값이 "sec_2"인 요소의 텍스트를 result_2에 저장
      $("#sec_2 h2").text("text()");
       //id값이 "sec_2"인 요소의 하위 요소 중 <h2> 요소의 하위 요소를
       //모두 제거. 그 다음 새로운 텍스트를 생성.
  });
</script>
  </head>
  <body>
    <h1>
      <strong>객체 조작 및 생성</strong>
    </h1>
    <section id="sec_1">
      <h2>
        <em>html()</em>
      </h2>
      <p>내용1</p>
    </section>
    <section id="sec_2">
      <h2>
        <em>텍스트()</em>
      </h2>
      <p>내용2</p>
    </section>
  </body>

 

attr()/removeAttr()메소드

  attr()메소드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때 또는 요소의 속성값을 불러올 때

  사용한다.

  removeAttr()메소드는 선택한 요소에서 기존의 속성을 삭제할 때 사용한다.

 

  attr()메소드의 기본형은 다음과 같다.

1. $("요소 선택").attr("속성명");
2. $("요소 선택").attr("속성명","새 값");
3. $("요소 선택").attr({"속성명1":"새 값1","속성명2":"새 값2"..."속성명n":"새 값n"});

  1은 선택한 요소의 지정한 속성값을 가져온다.

  2는 요소를 선택하여 지정한 속성값을 적용한다.

  3은 요소를 선택하여 지정한 여러개의 속성값을 적용한다.

 

  removeAttr()메소드의 기본형은 다음과 같다.

$("요소 선택").removeAttr("속성");

  선택한 요소에서 지정한 속성을 삭제한다.

 

  다음 예제는 attr()메소드와 removeattr()메소드가 어떻게 작용하는지에 대한 예제이다.

<script>
  $(function(){
    var srcVal=$("#sec_1 img").attr("src");
    console.log(srcVal);
    //id값이 "sec_1"인 요소의 하위 <img>요소를 선택하여
    //"src" 값을 srcVal에 저장한다.

    $("#sec_1 img")
    .attr({
      "width":200,
      "src":srcVal.replace("1.jpg","2.jpg"),
      "alt":"바위"
    })
    .removeAttr("border");
  });
</script>
  </head>
  <body>
    <h1>
      <strong>객체 조작 및 생성</strong>
    </h1>
    <section id="sec_1">
      <h2>이미지 속성</h2>
      <p>
        <img src="images/math_img_1.jpg" alt="가위" border="2">
      </p>
    </section>
  </body>

 

addClass()/removeClass()/toggleClass()/hasClass()메소드

  addClass()메소드는 선택한 요소에 클래스를 생성하고, removeClass()메소드는 선택한 요소에서 지정한 클래스를

  삭제한다. toggleClass()메소드는 선택한 요소에 지정한 클래스가 없으면 생성하고, 있을 경우에는 삭제한다.

  hasClass()메소드는 선택한 요소에 지정한 클래스가 있으면 true를 반환하고, 없으면 false를 반환한다.

  

  각각의 기본형은 다음과 같다.

1. $("요소 선택").addClass("class 값");
2. $("요소 선택").removeClass("class 값");
3. $("요소 선택").toggleClass("class 값");
4. $("요소 선택").hasClass("class 값");

  1은 요소를 선택하여 지정한 class값을 생성한다.

  2는 요소를 선택하여 지정한 class값을 삭제한다.

  3은 요소를 선택하여 지정한 class값이 있으면 삭제하고 없으면 생성한다.

  4는 선택한 요소에 지정한 class값이 있으면 true, 없으면 false를 반환한다.

 

<script>
  $(function(){
    $("#p1").addClass("aqua");
    $("#p2").removeClass("red");
    $("#p3").toggleClass("green");
    $("#p4").toggleClass("green");
    $("#p6").text($("#p5").hasClass("yellow"));
  });
</script>
<style>
  .aqua{background_color:#0ff;}
  .red{background_color:#f00;}
  .green{background_color:#0f0;}
  .yellow{background_color:##f0;}
</style>
  </head>
  <body>
   <p id="p1">내용1</p>
   <p id="p2" class="red">내용2</p>
   <p id="p3">내용3</p>
   <p id="p4" class = "green">내용4</p>
   <p id="p5" class = "yellow">내용5</p>
   <p id="p6"> </p>
  </body>

val()메소드

  선택한 폼 요소의 value속성값을 가져오거나 새 값을 적용할 때 사용한다.

  기본형은 다음과 같다.

1. $("요소 선택").val();
2. $("요소 선택").val("새 값");

  1은 선택한 폼 요소의  value 속성값을 가져온다.

  2는 요소를 선택하여 value 속성에 새 값을 적용한다.

 

  다음은 value() 메소드 작동 예제이다.

<script>
  $(function(){
    var result_1=$("#user_name").val();
    console.log(result_1); //용대리

    $("#user_id").val("javascript");

    var result_2=$("#user_id").prop("defaultValue");
    console.log(result_2); //hello
  });
</script>
  </head>
  <body>
  <h1>객체 조작 및 생성</h1>
  <form action="#" id="form_1">
    <p>
      <label for="user_name">이름</label>
      <input type="text" name="user_name" id="user_name" value="용대리">
    </p>
    <p>
      <label for="user_id">아이디</label>
      <input type="text" name="user_id" id="user_id" value="hello">
    </p>
  </form>
  </body>

prop()메소드

  선택한 폼 요소(선택상자, 체크박스, 라디오 버튼)의 상태 속성값을 가져오거나 새롭게 설정할 때 사용한다.

  그리고 선택한 요소의 태그명, 노드타입, 선택상자의 선택된 옵션의 인덱스 값도 알 수 있다.

1. $("요소 선택").prop("[checked | selected]");
2. $("요소 선택").prop("[checked | selected]", [true | false]);
3. $("요소 선택").prop("[tagName | nodeType | selectedIndex | defaultValue]");

  1번은 선택한 폼 요소(체크밗, 라디오버튼, 선택상자)가 체크(checked)된 상태인지, 선택(selected) 상태인지 알 수 있다.

  예를 들어 선택한 요소가 체크박스이고 체크된 상태에서 prop("checked")를 적용하였다면 true를 아니면 false를 

  반환한다.

  2번은 폼 요소를 선택하여 체크 또는 선택 상태를 바꿀 수 있다.

  3번은 선택한 요소의 태그명이나 노드타입, 선택된 옵션의 인덱스 값을 구한다.

  이때 폼 요소에 prop("defaultValue")를 사용하면 사용자가 value 속성값을 바꿔도 초기의 value 속성값을 가져온다.

<script>
  $(function(){
    var result_1=$("#chk1").prop("checked");
    console.log(result_1); //false
    //id값이 "chk1"인 요소가 체크된 상태이면 true를 반환하여
    //result_1에 저장한다.(반대의 경우에는 false)

    var result_2=$("#chk2").prop("checked");
    console.log(result_2)  //true

    var result_2=$("#chk3").prop("checked", true);
    //id 값이 "chk3"인 요소의 체크상태를 true로 바꾼다.

    var result_3=$("#se_1").prop("selectedIndex");
    console.log(result_3); //2
    //id값이 "se_1"인 요소의 옵션 중 selected 옵션의 인덱스 값을 가져온다.
  });
</script>
  </head>
  <body>
    <h1>
      <strong>객체 조작 및 생성</strong>
    </h1>
    <form action="#" id="form_1">
      <p>
        <input type="checkbox" name="chk1" id="chk1">
        <label for="chk1">chk1</label>
        <input type="checkbox" name="chk2" id="chk2" checked>
        <label for"chk2">chk2</label>
        <input type="checkbox" name="chk3" id="chk3">
        <label for="chk3">chk2</label>
      </p>
      <p>
        <select name="se_1" id="se_1">
          <option value="opt1">option1</option>
          <option value="opt2">option2</option>
          <option value="opt3" selected>option3</option>
        </select>
      </p>
    </form>
  </body>

  실행하면 체크박스가 체크되고 선택 상자의 옵션 요소 중 선택된 옵션의 인덱스값(2)이 출력된다.

  그리고 "chk3"의 체크박스가 체크된 상태로 바뀐다.

 

수치 조작 메소드

  수치 조작 메소드는 요소의 속성을 조작할 때 사용하는 메소드이다.

  다음은 수치 조작 메소드의 종류와 사용법을 정리한 표이다.

종류 사용법 설명
height() $(“요소 선택”).height();
$(“요소 선택”).height(100);		 안쪽 여백과 선을 제외한 높이값을 반환하거나 변환한다.
width() $(“요소 선택”).width();
$(“요소 선택”).width(100);		 안쪽 여백과 선을 제외한 너비값을 반환하거나 변환한다.
inneHeight() $(“요소 선택”).inneHeight();
$(“요소 선택”).innerHeight(300);		 안쪽 여백을 포함한 높이값을 반환하거나 변환한다.
innerWidth() $(“요소 선택”).innerWidth();
$(“요소 선택”).innerWidth(100);		 안쪽 여백을 포함한 너비값을 반환하거나 변환한다.
outerHeight() $(“요소 선택”).outerHeight();
$(“요소 선택”).outerHeight(100);		 선과 안쪽 여백을 포함한 높이값을 반환하거나 변환한다.
outerWidth() $(“요소 선택”).outerWidth();
$(“요소 선택”).outerWidth(100);		 선과 안쪽 여백을 포함한 너비값을 반환하거나 변환한다.
position() $(“요소 선택”).position().left;
$(“요소 선택’).position().top;		 선택한 요소의 포지션 위치값을 반환한다.
offset() $(“요소 선택”).offset().left;
$(“요소 선택”).offset().top;		 선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값을 반환한다.
scrollLeft() $(window).scrollLeft(); 브라우저의 수평 스크롤 이동 높이값을 반환한다
scrollTop() $(window).scrollTop(); 브라우저의 수직 스크롤 이동 너비값을 반환한다

 

요소의 높이/너비 메소드

  height()와 width() 메소드는 여백 및 선 두께를 제외한 순수 요소의 높이값과 너비값을 계산한다.

  innerHeight()와 innerWidth()메소드는 여백을 포함한 요소의 높이값과 너비값을 계산하고,

  outerHeight()와 outerWidth() 메소드는 여백 및 선을 포함한 요소의 높이값과 너비값을 계산한다.

 

  다음은 선택한 요소에 각 메소드를 적용하여 너비값 또는 높이값을 불러왔을때 계산되는 범위를 그림으로 나타낸

  것이다.

  이 메소드들의 기본형은 다음과 같다.

1. $(요소 선택).height(); / $(요소 선택).width();
   $(요소 선택).height(값); / $(요소 선택).width(값);
   
2. $(요소 선택).innerHeight(); / $(요소 선택).innerWidth();
   $(요소 선택).innerHeight(값); / $(요소 선택).innerWidth(값);
   
3. $(요소 선택).outerHeight(); / $(요소 선택).outerWidth();
   $(요소 선택).outerHeight(값); / $(요소 선택).outerWidth(값);

  1은 요소의 높이값과 너비값을 반환 또는 변경한다.

  2는 여백을 포함한 요소의 높이값과 너비값을 반환 또는 변경한다.

  3은 여백 및 선 두께를 포함한 요소의 높이값과 너비값을 반환 또는 변경한다.

 

  다음 예제는 요소의 높이/ 너비 메소드들이 어떻게 사용되는지 보여준다.

<script>
  $(function(){
    var w1 = $("#p1").width();
    console.log(w1);

    var w2=$("#p1").innerWidth();
    console.log(w2);

    var w3=$("#p1").outerWidth();
    console.log(w3);

    $("#p2")
    .outerWidth(100)
    .outerHeight(100);
  });
</script>
<style>
  *{
    padding : 0;
  }

  #p1, #p2{
    width: 100px;
    height: 50px;
    padding: 20px;
    border: 5px solid #000;
    background-color: #ff0;
  }
  </style>
  </head>
  <body>
    <h1>수치 조작 메소드</h1>
    <p id="p1">내용1</p>
    <p id="p2">내용2</p>
  </body>

 

요소 위치 메소드

  요소 위치 메소드에는 position() 메소드와 offset()메소드가 있다.

  position()메소드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌표값을

  반환하거나 변경할 때 사용한다. offset()메소드는 문서(document)를 기준으로 선택한 요소의 가로/세로로 떨어진

  위치의 좌표값을 반환하거나 변경할 때 사용한다.

  각 메소드의 기본형은 다음과 같다.

1. $(요소 선택).position().[left | right | top | bottom]
2. $(요소 선택).offset().[left | top]

  1은 포지션 기준이 되는 요소를 기준으로 선택한 요소의 위치 좌표값을 반환한다.

  2는 문서를 기준으로 선택한 요소의 위치 좌표값을 반환한다.

 

  다음은 선택한 요소에 위치 메소드를 적용하여 위치값을 구한 position()과 offset() 메소드의 차이를 그림으로 나타낸

  것이다.

  다음은 요소위치 메소드 사용 예제이다.

  <div id="box_wrap">의 position 속성에는 "relative"값을 적용하고 <p class="box">의 position속성에는

  "absolute"값을 적용했다.

<script>
  $(function(){
    var $txt1=$(".txt_1 span"),
        $txt2=$(".txt_2 span"),
        $box=$(".box");

    var off_t=$box.offset().top;  //100
    var pos_t=$box.poisition().top; //50

    $txt1.text(off_t);
    $txt2.text(pos_t);
  });
</script>
<style>
  *{margib:0;padding:0;}
  #box_wrap{
    width:300px;
    height:200px;
    margin:50px auto 0;
    position:relative;
    background-color:#ccc;
  }
  .box{
    width:50px;height:50px;
    position:absolute;
    left:100px;top:50px;
    background-color:#f00;
  }
  </style>
  </head>
  <body>
    <div id="box_wrap">
      <p class="box">박스</p>
    </div>
    <p class="txt_1">절대 top위치값:<span></span></p>
    <p class="txt_2">상대 top위치값:<span></span></p>
  </body>

스크롤바 위치 메소드

  scrollTop()메소드는 브라우저의 스크롤바가 수직/수평으로 이동한 위치값을 불러오거나 변경할 때 사용한다.

  다음은 scrollTop()메소드의 기본형이다.

1. $(요소 선택).scrollTop(); $(요소 선택).scrollLeft();
2. $(요소 선택).scrollTop(새 값); $(요소 선택).scrollLeft(새 값);

  1은 스크롤바가 수직 또는 수평으로 이동한 위치값을 반환한다.

  2는 입력한 수치만큼 수직 또는 수평으로 스크롤바를 이동시킨다.

 

  다음은 속성과 값에 따른 스크롤바 위치 메소드를 사용한 예제이다.

<script>
  $(function(){
    var topNum=$("h1").offset().top;
    $(window).scrollTop(topNum);

    var sct=$(window).scrollTop();
    console.log(sct);
  });
</script>
<style>
  *{margin:0;padding:0;}
  body{line-height:1;}
  #wrap{
    height:5000px;
    padding-top:2000px;
  }
  </style>
  </head>
  <body>
    <div id="wrap">
      <h1>위치 메소드</h1>
    </div>
  </body>

 

객체 편집 메소드

  선택한 요소를 복제하거나 새 요소를 생성하는 메소드와 복제하거나 새로 생성한 요소를 의도한 위치에 삽입하고

  선택한 요소를 삭제하는 기능을 살펴보자.

 

  다음은 객체편집 메소드의 종류와 사용법을 간략하게 정리한 표이다.

종류 사용법 설명
before() $(“요소 선택”).before(“새 요소”); 선택한 요소의 이전 위치에 새 요소를 추가한다.
after() $(“요소 선택”).after(“새 요소”); 선택한 요소의 다음 위치에 새 요소를 추가한다.
append() $(“요소 선택”).append(“새 요소”); 선택한 요소의 마지막 위치에 새 요소를 추가한다.
appendTo() $(“새 요소”).appendTo(“요소 선택”); 선택한 요소의 마지막 위치에 새 요소를 추가한다.
prepend() $(“요소 선택”).prepend(“새 요소”); 선택한 요소의 맨 앞 위치에 새 요소를 추가한다.
prependTo() $(“새 요소”).prependTo(“요소 선택”); 선택한 요소의 맨 앞 위치에 새 요소를 추가한다
insertBefore() $(“새 요소”).insertBefore(“요소 선택”); 선택한 요소의 이전 위치에 새 요소를 추가한다.
insertAfter() $(“새 요소”).insertAfter(“요소 선택”); 선택한 요소의 다음 위치에 새 요소를 추가한다.
clone() $(“요소 선택”).clone(true or false); 선택한 문서 객체를 복제한다. 이때 인자값이 true일 경우 하위 요소까지 모두 복제하고, false일 경우에는 선택한 요소만 복제한다.
empty() $(“요소 선택”).empty(); 선택한 요소의 하위 내용들을 모두 삭제한다.
remove() $(“요소 선택”).remove(); 선택한 요소를 삭제한다
replaceAll()/
replaceWith()		 $(“새 요소”).replace(“요소 선택”);
$(“요소 선택”).replaceWith(“새 요소”);		 선택한 요소들을 새 요소로 교체한다.
unwrap() $(“요소 선택”).unwrap(); 선택한 요소의 부모 요소를 삭제한다.
wrap() $(“요소 선택”).wrap(새 요소); 선택한 요소를 새 요소로 각각 감싼다.
wrapAll() $(“요소 선택”).wrapAll(); 선택한 요소를 새 요소로 한꺼번에 감싼다
wrapInner() $(“요소 선택”).wrapInner(새 요소); 선택한 요소의 내용을 새 요소로 각각 감싼다.

 

before()/insertBefore()/after()/insertAfter()메소드

  before()와 insertBefore()메소드는 선택한 요소의 이전 위치에 새 요소를 생성하고, after()와 insertAfter()메소드는

  선택한 요소의 다음 위치에 새 요소를 선택한다.

  각 메소드의 기본형은 다음과 같다.

1. $("요소 선택").before("새 요소");
2. $("새 요소").insertBefore("요소 선택");
3. $("요소 선택").after("새 요소");
4. $("새 요소").insertAfter("요소 선택");

  1과 3, 2와 4는 서로 사용법만 다르고 기능은 같다.

 

  다음은 before(), insertBefore(), after(), insertAfter() 메소드를 사용한 예제이다.

<script>
  $(function(){
    $("#wrap p:eq(2)").after("<p>After</p>");
    $("<p>insertAfter</p>").insertAfter("#wrap p:eq(1)");

    $("#wrap p:eq(1)").before("<p>Before</p>");
    $("<p>insertBefore</p>").insertBefore("#wrap p:eq");
  });
</script>
  </head>
  <body>
    <div id="wrap">
      <p>내용1</p>
      <p>내용2</p>
      <p>내용3</p>
    </div>
  </body>

append()/appendTo()/prepend()/prependTo()메소드

  append()메소드와 appendTo()메소드는 선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가한다.

  prepend() 메소드와 prependTo()메소드는 선택한 요소 내의 앞 위치에 새 요소를 생성하고 추가한다.

  

  각 메소드의 기본형은 다음과 같다.

1. $(요소 선택).appenc(새 요소);
   $(새 요소).appendTo(요소 선택);

2. $(요소 선택).prepend(새 요소);
   $(새 요소).prependTo(요소 선택);

  1은 선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가한다.

  2는 선택한 요소 내의 앞 위치에 새 요소를 생성하고 추가한다.

 

  다음은 appendTo()메소드와 prepend()메소드를 어떻게 사용하는지 보여주는 예제이다.

<script>
  $(function(){
    $("<li>appendTo</li>").appendTo("#listZone");
    //선택한 요소의 맨 뒤에 새 요소를 생성
    $("#listZone").prepend("<li>prepend</li>");
    //선택한 요소의 맨 앞에 새 요소를 생성
  });
</script>
  </head>
  <body>
    <ul id="listZone">
      <li>리스트</li>
    </ul>
  </body>

clone()/empty()/remove() 메소드

  clone()메소드는 선택한 요소를 복제한다.

  empty()메소드는 선택한 요소의 모든 하위 요소를 삭제하고, remove()메소드는 선택한 요소를 삭제한다.

  각 메소드의 기본형은 다음과 같다.

1. $("요소 선택").clone([true | false]);
2. $("요소 선택").empty();
3. $("요소 선택").remove();

  1은 선택한 요소를 복제한다. true면 이벤트까지 복제하고, false면 요소만 복제한다. 기본값은 false이다.

  2는 선택한 요소의 모든 하위 요소를 삭제한다.

  3은 선택한 요소를 삭제하낟.

 

  다음은 clone(), empty() 함수, remove()메소드를 이용한 예제이다.

<script>
  $(function(){
    var copyObj=$(".box1").children().clone();
    //class 값이 "box1"인 요소의 모든 자식 요소를 복제.
    //그 다음 copyObj에 참조시킨다.

    $(".box3").empty();
    //class값이 "box3"인 요소의 모든 하위 요소를 삭제.
    $(".box3").append(copyObj);
    //copyObj에 저장된 요소를 class값이 "box3"인 요소
    //맨 뒤에 추가.
  });
</script>
</head>
<body>
  <div class="box1">
    <p>내용1</p>
    <p>내용2</p>
  </div>
  <div class="box2">
    <p>내용3</p>
    <p>내용4</p>
  </div>
  <div class="box3">
    <p>내용5</p>
    <p>내용6</p>
  </div>
</body>

 

replaceAll()/replaceWith()메소드

  replaceAll()메소드와 replaceWith()메소드는 선택한 요소를 새 요소로 바꿀 때 사용한다.

  주로 선택한 모든 요소를 한꺼번에 바꿀 때 사용하며 각 메소드의 기본형은 다음과 같다.

$("새 요소").replaceAll("요소 선택");
$("요소 선택").replaceWith("새 요소");

  다음은 <h2>태그에 replaceWith()함수를 지정하고, 모든 <div>태그에는 replaceAll()메소드를 지정하는 예제이다

<script>
  $(function(){
    $("h2").replaceWith("<h3>replace method</h3>");
    $("<p>Change</p>").replaceAll("div");
    //모든 <h2>요소와 <div> 요소를 새 요소로 바꾼다.
  });
</script>
</head>
<body>
  <section class="box1">
    <h2>제목1</h2>
    <div>내용1</div>
    <div>내용2</div>
  </section>
  <section class="box2">
    <h2>제목2</h2>
    <div>내용3</div>
    <div>내용4</div>
  </section>
</body>

unwrap()/wrap()/wrapAll()/wrapInner()메소드

  unwrap()메소드는 선택한 요소의 부모 요소를 삭제한다. wrap()메소드는 선택한 요소를 각각 새 요소로 감싸고,

  wrapAll()메소드는 선택한 요소를 한꺼번에 새 요소로 감싼다. wrapInner()메소드는 선택한 요소의 모든 하위 요소를

  새 요소로 감싼다.

  각 메소드의 기본형은 다음과 같다.

1. $("요소 선택").unwrap();
2. $("요소 선택").wrap(새 요소);
3. $("요소 선택").wrapAll(새 요소);
4. $("요소 선택").wrapInner(새 요소);

  1은 선택한 요소의 부모 요소를 삭제한다.

  2는 선택한 요소를 새 요소로 각각 감싼다.

  3은 선택한 요소를 새 요소로 한꺼번에 감싼다.

  4는 선택한 요소의 모든 하위 요소를 새 요소로 감싼다.

 

  다음 예제는 위의 메소드들의 사용 예제이다.

<script>
  $(function(){
    $("strong").unwrap(); //<strong> 요소를 감싸는 부모요소를 제거
    $(".ct1").wrap("<div/>"); //class값이 "ct1"인 요소를 <div>요소로 감싼다.
    $(".ct2").wrapAll("<div/>"); //class값이 "ct2"인 요소를 <div> 요소로 감싼다.
    $("li").wrapInner("<h3/>"); //<li>요소의 모든 하위 요소를 <h3>요소로 감싼다.
  });
</script>
<style>
  div{background-color:aqua;}
</style>
</head>
<body>
  <h1 id="tit_1">
    <strong>객체 조작 및 생성</strong>
  </h1>
  <p class="ct1">내용1</p>
  <p class="ct1">내용2</p>
  <p class="ct2">내용3</p>
  <p class="ct2">내용4</p>
  <ul>
    <li>내용3</li>
    <li>내용4</li>
  </ul>
</body>

 

주요 선택자 정리하기

  자주 사용하는 선택자만 정리한 예제이다.

<script>
  $(function(){
    $(".wrap_1 p:first")
    .text("내용1");
    //<div class="wrap1">
    //  <p>내용1</p>

    $(".wrap_1 p.active")
    .removeClass("active")
    .addClass("on");
    //<p class="on">내용2</p>

    $(".wrap_1 p:eq(2)a")
    .attr("href","http://www.naver.com");
    //<p><a href="#">네이버</a></p>

    $(".wrap_1 p:eq(3) input").val("Korea");
    //<input type="text" value="Korea">

    $(".wrap_2 p:first").after("<p>After(추가1)</p>");
    $(".wrap_2 p:first").before("<p>Before(추가2)</p>");
    //<div class="wrap_2">
    //  <p>Before(추가2)</p>
    //  <p>내용5</p>
    //  <p>After(추가1)</p>

    $(".wrap_3 p")
    .unwrap()
    .wrapInner("<strong/>");
    //<div class="wrap_3">
    //  <p><strong>내용7</strong></p>
    //  <p><strong>내용8</strong></p>
    //</div>
  });
</script>
</head>
<body>
  <div class="wrap_1">
    <p>텍스트1</p>
    <p class="active">내용2</p>
    <p><a href="#">네이버</a></p>
    <p>
      <input type="text" value="Hello">
    </p>
  </div>
  <div class="wrap_2">
    <p>내용5</p>
    <p>내용6</p>
  </div>
  <div class="wrap_3">
    <div>
      <p>내용7</p>
      <p>내용8</p>
    </div>
  </div>
</body>

 

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery(이벤트 객체)  (0) 2020.05.22
JQuery(이벤트 등록 메소드)  (0) 2020.05.22
JQuery(속성 탐색 선택자)  (0) 2020.05.20
JQuery(위치탐색선택자)  (0) 2020.05.20
jquery(선택자)  (0) 2020.05.20

+ Recent posts

티스토리툴바