01_DevTIL ✍Jquery

jquery 뽀개기(1)

jquery 뽀개기(1)

jquery

basic

  • html은 위에서 아래로 순차적으로 실행된다.
  • jquery의 ready나 load메서드가 있을 경우 위에서 아래로 순차적으로 실행되지 않고 각 메서드의 특징별로 순서가 진행된다.

1. ready()

제이쿼리 ready 메서드는 DOM이 완전히 로드되었을 때 코드를 실행하도록 구현되어있다.
(리액트의 componentDidMount)

제이쿼리 3.0 이전 버전에서는, ready 메서드를 호출할 수 있는 몇 가지 방법이 있다.

  • document 엘리먼트로 호출 : $(document).ready(handler);
  • 빈 엘리먼트로 호출 : $().ready(handler);
  • 또는 특정 엘리먼트 없이 바로 호출 : $(handler);

1-1. ready와 load 이벤트의 차이점

ready 이벤트는 DOM이 로드되고 엘리먼트 접근이 안전할 때 발생한다.
(= ready는 document 객체에 한해서만 적용되는 메소드.)
반대로 load 이벤트는 DOM과 모든 어셋들이 로드된 이후에 발생한다.

  • 모든 어셋들이 로드되기까지 로딩스피너를 보여주거나 이미지 사이즈를 계산하려고 한다면 load이벤트는 적절하다.
  • 외부자원 접근(images, scripts, frames, iframes 등)과 window 객체에 대해 적용되는 메소드이며

2. 입력값을 확인하고 변경하기 (GET/SET)

input의 hidden

form태그 안에 hidden타입 input을 넣어 폼전송에 필요한 데이터를 담아 사용합니다. 혹은 보이지 않는 변수를 선언할 때 사용.

Get

$(셀렉터).함수();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<head>
<script type="text/javaScript">
    $(function () {
      // alert(document.getElementById("txt1").value);
      // var txt1 = $("#txt1").val()
      // var hdn1 = $("#hdn1").val()
      var slct1 = $("#slct1").val()
      // alert(txt1)
      // alert(hdn1)
      alert(slct1)
    })
  </script>
</head>

<body>
  <input type="text" id="txt1" value="제이쿼리를 뽀게버리겠다">
  <input type="hidden" id="hdn1 " value="">
  <select name="" id="slct1">
    <option value="select1">셀렉트1</option>
    <option value="select2" selected="selected">셀렉트2</option>
    <option value="select3">셀렉트3</option>
  </select>
</body>

Set

1
$("#txt1").val("text2")

3. 내가 원하는 태그 속성과 HTML 값을 확인하고 변경하기

속성값 변경하기

$('#div1').attr("style", "color:red;")

자식 엘리먼트 트리 갖고오기

GET: $("#node1").html()
SET(html): $("#node1").html("<h1>테스트</h1>")
SET(text): $("#node1").text("<h1>테스트</h1>") : html화 하지 않고 텍스트로만 출력된다.

1
2
3
4
5
6
7
8
9
<div id="node1">
    <table>
      <tr>
        <td>
          <h2>테이블입니다.</h2>
        </td>
      </tr>
    </table>
  </div>

4. 내가 원하는 위치에 HTML 삽입하기

before()
after()
prepend()
append()

5. 셀렉터 알아보기

$("input[name=rad]:checked").val()

input의 타입종류

  • text : 기본값. 한 줄의 텍스트 입력 칸을 만듦 (기본 너비 문자는 20)

  • password : text 속성과 같지만, 문자를 숨겨서 표시 (별표)

  • checkbox : 체크박스를 만듦

  • radio : 라디오 버튼 만듦

  • button : 누름 버튼

  • submit : 전송 버튼

  • reset : 재설정 버튼

  • file : 파일 선택 창을 만듦.

  • hidden : 사용자에게 보이지 않는 숨김 창을 만듦.

  • image : 이미지로 된 전송 버튼을 만듦 (src 속성으로 이미지 url 지정)

  • color : 색상 선택 창을 만듦.

  • date : 날짜 입력 창을 만듦 (년/월/일)

  • datetime : 날짜 시간 창을 만듦 (년/월/일/시/분/초/초의 분할) 표준시간

  • datetime-local : 날짜 시간 차응ㄹ 만듦 (년/월/일/시/분/초/초의 분할) 표준시간 없음

  • email : email 주소 창을 만듦

  • month : 달과 년 창을 만듦 (표준 시간 없음)

  • number : 숫자 입력을 위한 창을 만듦(숫자 제한을 둘 수도 있음)

    • max : 최대값 / min: 최소값 / step: 허락하는 숫자간격 / value: 기본값

  • range : 정확한 값이 중요하지 않는 숫자를 입력하는 창을 만듦 (슬라이더 장치처럼)

  • search : 검색 창을 만듦

  • tel : 전화번호 입력창을 만듦

  • time : 시간 입력 창을 만듦 (표준 시간 없음)

  • url : 주소 입력 창

  • week : 주와 년 입력 창 (표준시간 없음)

6. 내가 원하는대로 태그에 스타일을 제어해보자.

$("div:eq(0)").css("color:red;") : div:eq(0)란, div엘리먼트들 중에서 첫번째 div요소

클래스 제어하기

  • addClass("클래스명") 클래스명을 지정된 셀렉터에 추가한다.
  • removeClass("클래스명") 클래스명을 지정된 셀렉터로부터 지운다.
  • hasClass("클래스명") 클래스명이 지정된 셀렉터로부터 존재하는지 여부를 판단. (return으로 boolean값)

7. traversing 함수. 셀렉터를 시작으로 내가 추적하고자 하는 태그 알아내기.

parent() : 부모노드
find() : 자식노드중 태그명을 찾는다.
prev() : 같은 레벨에서의 직전 노드
next() : 같은 레벨에서 다음 노드 (직후)

8. jquery용 for문인 each()함수에 대해서 알아보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javaScript" src="./jquery-1.12.4.js"></script>
  <script type="text/javaScript">
    $(function () {
      $("div").each(function (index) {
        var a = $(this).find("input[type=text]").val()
        // $("div").eq(index) == $(this)
        // $(this)는 each문이나 이벤트에서 자주 사용한다.
        if (index == 1){
          return false;
        } 
        console.log(a)
      }
      )
    })
  </script>
</head>

<body>
  <div>
    <input type="text" value="첫번째값" />
  </div>
  <div>
    <input type="text" value="두번째값" />
  </div>
  <div>
    <input type="text" value="세번째값" />
  </div>
  <div>
    <input type="text" value="네번째값" />
  </div>
</body>

</html>

9. 마우스 + 키보드 이벤트 함수 사용해보고 이해하기 (1)

1. click

  • on('click')과의 차이점 : on을 사용하게되면, 추가된 요소에 더 적은 메모리를 사용하고 작업할 수 있기 때문에 .click보다 더 선호한다. (참고)

1.1 click을 사용할 때

1
2
3
$("button.alert").click(function() {
  alert(1);
});
  • 위와 같이 선택기와 일치하는 모든 단일 요소에 대해 별도의 처리기가 만들어집니다. 그 의미는
    • 일치하는 요소가 많으면 많은 동일한 처리기가 만들어 지므로 메모리 사용 공간이 증가합니다.
    • 동적으로 추가 된 항목에는 처리기가 없습니다. 즉, 위의 html에 새로 추가 된 “경고!” 핸들러를 리 바인드하지 않으면 버튼이 작동하지 않습니다. (= 동적으로 생성된 요소에는 먹히지 않는다는 말)

1.2 .on을 사용할 때

1
2
3
$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

동적으로 생성 된 요소를 포함하여 선택기와 일치하는 모든 요소에 대한 단일 처리기이다.

  1. keypress : 콜백함수에서 이벤트 객체를 받을 수 있는데, 내부에 keyCode값이 있어서 어떤 키보드를 누르는지에대한 정보를 얻을 수 있다.
  2. keyup : esc의 경우에는 keypress가 아니라 keyup에서 작동된다.

10. Ajax

html로 받는 형태로만 정리하겠음.

  • form action(url)과 url값은 같다. type(method), (post/get/put/delete/…)
  • form은 알아서 input 태그들을 전송하지만, ajax는 data 속성을 줘야한다.
  • data에는 post로 보낼때 보낼 data를 넣는다.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $.ajax({
      url: '', 
      type: '',
      dataType: '',
      // data: {},
      success: function(data){

      }
    })

json 렌더하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function () {
      $("#loadButton").on("click", function () {
        $.ajax({
          url: "https://api.github.com/users",
          type: 'GET',
          dataType: 'json',
          success: function (data) {
            $.map(data, function (data, i) {
              $('#table').append(`<tr><td>${data.login}</td><td><img src=${data.avatar_url}/></td></tr>`)
            })
          }
        })
      })

    })

11. 기타

  1. trim()
    앞뒤의 공백제거만 가능하다.
1
2
var text = $('#test').val()
$.tring(text)

  1. remove() empty()
    $("#showhide").empty(); : showhide라는 아이디값을 갖고 있는 요소의 자식요소들이 비워진다.
    $("#showhide").remove(); : showhide라는 아이디값을 갖고 있는 요소가 삭제된다.(아예)

  2. 선택한 태그의 인덱스값만 알고싶을 때

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script type="text/javaScript" src="./jquery-1.12.4.js"></script>
      <script type="text/javaScript">
        $(function () {
          $('.btn').on("click", function () {
            var index = $(".btn").index(this)

            // 각 버튼을 누르면 해당되는 index의 레이어를 출력시켜라.
            // 단, 다른 영역들은 닫혀야하고 클릭된 영역만을 보여줘야한다.
            $(".layer").hide();
            $(".layer").eq(index).show();
          })

        })
      </script>
    </head>

    <body>
      <input type="button" class="btn" value="버튼1">
      <input type="button" class="btn" value="버튼2">
      <input type="button" class="btn" value="버튼3">
      <div class="layer" style="display:none">
        레이어1입니다.
        <br/> 레이어1입니다.
        <br/> 레이어1입니다.
        <br/> 레이어1입니다.
        <br/>
      </div>
      <div class="layer" style="display:none">
        레이어2입니다.
        <br/> 레이어2입니다.
        <br/> 레이어2입니다.
        <br/> 레이어2입니다.
        <br/>
      </div>
      <div class="layer" style="display:none">
        레이어3입니다.
        <br/> 레이어3입니다.
        <br/> 레이어3입니다.
        <br/> 레이어3입니다.
        <br/>
      </div>
    </body>

    </html>
profile

author.

Joy Kim @feel5ny

웹 프론트엔드 개발자입니다. 글쓰기와 정리를 좋아합니다.