제육's 휘발성 코딩
article thumbnail
Published 2022. 3. 14. 01:37
[JavaScript] - jQuery Frontend/JavaScript
반응형

jQuery

  • 크래스 플랫폼을 지원하여 모든 브라우저에서 동일하게 동작하게하는 javascript library
  • 네이티브 DOM API보다 직관적이고 편리한 API 제공
  • Event, Ajax, Animation 효과를 쉽게 사용

설치

​ 1. jquery-3.XX.X.min.js 파일 다운로드 시 웹 특정 경로에 저장

​ 2.

기본 구문

$(selector).function(); // DOM객체들을 담은 래퍼세트 반환 == document.getElementXXX()
$(document).ready(function() {
  //TODO...
});
  • Selector를 사용하여 DOM 객체를 탐색하고, 반환된 래퍼세트를 통해 함수를 수행
  • jQuery로 DOM을 탐색하기 전에, 웹 브라우저에 문서가 모두 로드되어 있어야 한다.
<body>
    <p id="p1">안녕</p>
    <button>클릭</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $("button").click(function(){
        $("#p1").css("background", "orange");
      });
    });
    </script>
</body>
  • 클릭하면 배경색을 변경하는 예제

image

<body>
    <table>
        <tr><th>팀명</th><th>이름</th><th>포지션</th></tr>
        <tr><td>두산</td><td>정정정</td><td>우익수</td></tr>
        <tr><td>삼성</td><td>강강궁</td><td>포수</td></tr>
        <tr><td>키움</td><td>김주아</td><td>1루수</td></tr>
        <tr><td>롯데</td><td>박우연</td><td>좌익수</td></tr>
    </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("tr:eq(0)").css("background","gray");
            $("td:nth-child(3n+1)").css("background", "orange");
            $("td:nth-child(3n+2)").css("background", "pink");
            $("td:nth-child(3n)").css("background", "cyan");
            $("td:contains('익수')").css("background", "green");
        });
    </script>
</body>
  • 특정 배경을 변경하는 예제

Selector

image

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $("h1#target").css("color", "orange");
        });
    });
    </script>
</head>
<body>
    <h1>JavaScript.</h1>
    <h1 id="target">jQuery.</h1>
    <h1>Servlet.</h1>
</body>
</html>
  • Element Selector를 사용하여 색상 변경

DOM 계층 구조

image

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("div > ul").css("background", "#cc66ff");
        $("ul.site1 > li").css("color", "cyan");
        $("ul.site2 li").css("color", "pink");
    });
    </script>
</head>
<body>
    <h3>jQuery DOM Hierarchy Selector</h3>
    <p>검색을 도와주는 사이트는 여러가지가 있습니다.</p>
    <div>
        <ul class="site1">
            <li>다음 : www.daum.net</li>
            <li>네이트 : www.nate.com</li>
            <div>
            <li>
                <ul>
                    <li>네이버블로그 : blog.naver.com</li>
                    <li>네이버카페 : cafe.naver.com</li>
                </ul>
            </li>
            </div>
            <li>CGV : www.cgv.co.kr</li>
        </ul>
        <ul class="site2">
            <li>다음 : www.daum.net</li>
            <li>네이트 : www.nate.com</li>
            <div>
            <li>
                <ul>
                    <li>네이버블로그 : blog.naver.com</li>
                    <li>네이버카페 : cafe.naver.com</li>
                </ul>
            </li>
            </div>
            <li>CGV : www.cgv.co.kr</li>
        </ul>
    </div>
</body>
</html>

image

Attribute Selector

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(function () {
                $("#button1").click(function () {
                    clear(); $("input[name]").css("background", "silver");
                });
                $("#button2").click(function () {
                    clear(); $("input[value='jQuery']").css("background", "silver");
                });
                $("#button3").click(function () {
                    clear(); $("#targets > input[value!='jQuery']").css("background", "silver");
                });
                $("#button4").click(function () {
          // 셀렉터 단어 포함 (시작, 띄어쓰기 구분)
                    clear(); $("input[value~='셀렉터']").css("background", "silver");
                });
                $("#button5").click(function () {
          // 셀렉터가 들어간 모두
                    clear(); $("#targets > input[value*='셀렉터']").css("background", "silver");
                });
                $("#button6").click(function () {
          // 셀렉터로 시작
                    clear(); $("input[value^='셀렉터']").css("background", "silver");
                });
                $("#button7").click(function () {
          // 셀렉터로 끝남
                    clear(); $("input[value$='셀렉터']").css("background", "silver");
                });
                $("#btn_clear").click(function () {
                    clear();
                });
            });
            function clear() {
                $("input[type='text']").css("background", "white");
            }
        });
    </script>
</head>

<body>
    <h2>jQuery Attribute Selector</h2>
    <div id="targets">
        <input type="text" name="case1" value="jQuery" /><br />
        <input type="text" name="case2" value="jQuery셀렉터" /><br />
        <input type="text" name="case3" value="jQuery셀렉터 테스트" /><br />
        <input type="text" name="case4" value="셀렉터 테스트" /><br />
        <input type="text" name="case5" value="셀렉터테스트" /><br />
        <input type="text" name="case6" value="테스트" /><br />
    </div>
    <div>
        <input type="button" id="button1" value="name속성을 가짐" />
        <input type="button" id="button2" value="'jQuery' 일치" />
        <input type="button" id="button3" value="'jQuery' 미일치" />
        <input type="button" id="button4" value="'셀렉터' 단어 포함" />
        <input type="button" id="button5" value="'셀렉터' 포함" />
        <input type="button" id="button6" value="'셀렉터'로 시작" />
        <input type="button" id="button7" value="'셀렉터'로 끝남" />
        <input type="button" id="btn_clear" value="clear" />
    </div>
</body>

</html>
  • $(selector[attr]) : attr을 속성으로 가지는 문서객체 선택
  • $(selector[attr="value"]) : attr의 속성값이 value와 같은 문서객체 선택
  • $(selector[attr~="value"]) : attr의 속성값이 공백과 함께 value를 포함하는 문서객체 선택
  • $(selector[attr^="value"]) : attr의 속성값이 value로 시작하는 문서객체 선택
  • $(selector[attr$="value"]) : attr의 속성값이 value로 끝나는 문서객체 선택
  • $(selector[attr="value"]) : attr의 속성값이 *value를 포함**하는 문서객체 선택

Filter Selector

  • :not(filter) : 주어진 선택자와 일치하지 않는 모든 요소 선택
  • :contains(str) : 텍스트 str을 포함하는 요소만 선택
  • :nth-child(n) : n번째 자식 요소를 선택 (n이 2이면 2번째 자식, n이 3n+1이면 4, 7, 10 ~)
  • :eq(n) : n번째로 일치하는 요소를 선택 (음수라면 파이썬과 같이 뒤에서부터)
  • :gt(n) : n번째 (포함X) 이후 요소를 선택
  • :lt(n) : n번째 (포함X) 이전 요소를 선택
  • :has(f) :주어진 선택자와 일치하는 하나 이상의 요소를 포함하는 요소를 선택
$("tr:eq(0)").css();
$("td:nth-child(3n)").css();

위치기반 필터선택자

image

$(document).ready(function() {
    $(#id tr:first).css("background", "black");
})

jQuery method

image

var array = [
  { name : '홍길동', link : 'http://naver.com'},
  ...
]

var outHtml = '';
$.each(array, function(index, item){
  outHtml += '<a href=""' + item.link +'">';
  outHtml += '<h2>' + item.name + '</h2>';
  outHtml += '</a>';
});
document.body.innerHTML = outHtml;
$("h2").each(function(index, item) {
  $(item).addClass("high-light-" + index);
})
  • index : 배열 인덱스, item : 반복하는 요소객체
$("h2").filter(function(index){
  return index % 3 == 0; // return 값이 true인 요소만 새로운 래퍼세트에 포함
}).css({
  background : "blank",
  color : "white"
});
  • 주오진 조건으로 걸러내는 filter 메서드
$("h2").css("background", "silver")
    .filter(":even").css("color", "white").end()
    .filter(":odd").css("color", "red");
  • end() 메서드를 호출하면 이전 래퍼세트로 돌아간다.

add(), not()

  • $("element").add("element"); : 주어진 조건을 만족하는 요소를 추가한 새로운 래퍼세트 반환
  • $("element").not("element"); : 주어진 조건에 해당하는 요소를 제거한 새로운 래퍼세트를 반환

is()

    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        // 체크박스 중 name이 checkedFalse이고 
        // 체크되어 있으면 체크를 해제함 
        $("input[type='checkBox']").each(function () { 
            if ($(this).is("[name='checkedFalse']") && $(this).is(":checked")) { 
                $(this).attr("checked", false); 
            } 
        });
    });
    </script>
    <h3><input type="checkBox" name="checkedFalse" checked="checked"/>체크박스1</h3> 
    <h3><input type="checkBox" checked="checked"/>체크박스2</h3> 
    <h3><input type="checkBox" checked="checked"/>체크박스3</h3>
  • 기존 래퍼세트가 주어진 선택자와 일치하는지 여부를 반환 (true/false)

find()

<div id="findArea"> 
        <h1>첫번째</h1> 
        <h2 class="myClass">두번째</h2> 
        <h3 class="myClass">세번째</h3> 
        <h4>네번째</h4> 
        <div><h4 class="myClass">div태그안</h4></div>
    </div>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        // findArea 하위 요소 중 
        // class가 myClass인 요소들의 배경색을 silver로 변경 
        $("#findArea").find(".myClass") .css("background", "silver"); 
    });
    </script>
  • 래퍼세트의 모든 요소들에 대하여 주어진 선택자를 만족하는 모든 자손 요소 선택
  • filter는 걸러내기 위해 사용하지만, find()는 하위 자손을 탐색하기 위해 사용

DOM 객체

image

  • jQuery는 DOM 요소의 속성이나 class, style을 제어하는 DOM 특성제어 메서드를 제공

attr()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        var srcValue = $('img').attr('src');
        alert('src1 : ' + srcValue);

        $('img').each(function (i, element) {
          var value = $(this).attr('src');
          alert('src2 : ' + value);
        });

        $('img').attr({ width: 100, height: 150 });
        alert('width와 height를 200으로 설정!!');

        $('img').removeAttr('height');
        alert('height 속성 제거!!!');

        $('img').attr('width', function (i) {
          return (i + 1) * 100;
        });
      });
    </script>
  </head>
  <body>
    <img src="../img/ice_americano.jpg" width="200" />
    <img src="../img/ice_cafelatte.jpg" width="200" />
    <img src="../img/ice_cafemocha.jpg" width="200" />
    <img src="../img/ice_vanillalatte.jpg" width="200" />
  </body>

Class 속성 제어

<body>
    <h1>안녕하세요1.</h1>
    <h2 id="col1">안녕하세요2.</h2>
    <h3 name="col2">안녕하세요3.</h3>
    <h4 class="col3">안녕하세요4.</h4>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
    .col1 { color : orange; }
    .col2 { color : magenta; }
    .col3 { color : steelblue; }
    </style>    
    <script type="text/javascript">
    $(document).ready(function() {
        $("#col1").addClass("col1");
        $("h3[name='col2']").addClass("col2");
        $(".col3").removeClass(".col3");
        $("h1").click(function() {
            $(this).toggleClass("col3");
        })
    });
    </script>
</body>
  • addClass, removeClass, toggleClass 사용 예제 - 클릭시마다 색 변경 예제

Style 속성 제어

var colors =["silver", "lime"];
$("h2").css("color", function(index) {
  return colors[index % 2];
});

HTML과 텍스트 조회

<body>
    <div id="div1">
        아이디 : <input type="text" placeholder="아이디입력.." /><br />
        <span>사용자 설정.</span><br />
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var html = $("#div1").html();
            var text = $("#div1").text();
            alert(html);
            alert(text);
            $("#div1").append(html).append(text);
        });
    </script>
</body>
  • html()과 text()는 DOM 객체 내부를 조회하는 메서드
  • html은 태그를 인식하지만 text는 태그를 인식하지 않는다. 자바스크립트의 innerHTML, textContent와 비슷

DOM 객체 추가

    <script type="text/javascript">
    $(document).ready(function() {
        $("<h2>안녕하세요</h2>")
        .css("color", "steelblue")
        .appendTo("body"); // apendTo : 바디의 맨 뒤에 붙이는 기능
        $("<a/>")
        .attr("href", "https://www.sasca37.tistory.com")
        .text("블로그")
        .appendTo("body");
    });
    </script>
  • $() 함수는 선탁자를 수행하는 기능 뿐아니라 DOM 객체를 생성하는 기능 제공

DOM 객체 삭제

<body>
    <div>
        <h2 id="h1">안녕하세요1</h2>
        <h2 id="h2">안녕하세요2</h2>
        <h2 id="h3">안녕하세요3</h2>
    </div>
    <input type="button" id="btn1" value="두번째 h2 삭제"/>
    <input type="button" id="btn2" value="div 비움"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#btn1").click(function() {
            $("#h2").remove();
        });
        $("#btn2").click(function() {
            $("div").empty();
        });
    });
    </script>
</body>
  • remove() 메서드는 래퍼세트의 모든 요소를 HTML 문서에서 삭제하고, 삭제한 내용을 반환
  • empty() 메서드는 래퍼세트의 모든 요소에 대해 하위 자식요소들을 삭제한 결과를 반환

DOM 객체 삽입

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("img").css("width", 200);

            setInterval(function () {
                $("img").first().appendTo("body");
                // $("body").append($("img").first());
            }, 2000);
        });
    </script>
  • 처음 요소를 바디의 맨뒤에 추가하는 방식으로 순서가 2초마다 바뀌는 방식으로 만들 수 있다.

jQuery Event

  • 선택된 DOM 객체의 이벤트에 지정한 핸들러를 연결하는 함수
  • bind(eventType, data, listener)
    • eventType : 핸들러를 할당할 이벤트 타입의 이름
    • data : 핸들러 함수에서 사용할 데이터, 이벤트 인스턴스에 data라는 프로퍼티로 제공, 생략시 두번째 인자는 listener
    • listener : 이벤트 발생시 수행되는 핸들러 함수

on()

  • bind() 함수와 마찬가지로 DOM 객체에 이벤트 핸들러를 연결
  • delegate(위임) 방식으로 사용할 경우 동적으로 생성한 DOM 객체에도 적용 가능 (때문에 bind 보단 on 권장)
  • on(eventType, delegate selector, function(event){});
$("h2").on("click", function() {
  $(this).html(function(index, html) {
    return html +"*"; // 누를 때마다 * 증가
  });
});

$("h2").on({
   mouseenter: function() {
     $(this).addClass("reverse");
   },
   mouseleave: function() {
     $(this).removeClass("reverse");
   }
});

off()

  • on() 과 반대로 DOM 객체의 이벤트를 제거
  • 선택된 DOM 객체의 특정 이벤트 또는 모든 이벤트를 제거할 수 있다.
$("#btn1").click(function() {
  $("h2").off("click");
});

Input Event

image

$("form").submit(function(event) {
  event.preventDefault();
})

$("#check").change(function() {
  if ($(this).is(":checked")) {
    $("#checkItem").children().prop("checked", true);
  }
  else {
    $("#checkItem").children().prop("checked", false);
  }
})
반응형
저작자표시
profile

제육's 휘발성 코딩

@sasca37

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요! 맞구독은 언제나 환영입니다^^

검색 태그

jpql
AOP
javascript
JPA
스프링
프로그래머스
자료구조
자바
이펙티브자바
자바스크립트

티스토리툴바