jQuery 정리 02

21 Feb 2019

Reading time ~7 minutes

jQuery 정리 02 - selector, event, CSS methods, DOM 사용, 반복함수

selector

기능을 적용할 태그를 찾을 때 사용하는 것
- jQuery Object가 접근하게 될 tag를 지정
값 설정, 값 얻기, 디자인 변경, 효과 등의 일을 하기 위해 selector를 사용

// 형식
$("selector").jQuery함수(값, ... );
// $ - jQuery Object
// selector - 기능을 적용받을 tag 지정
// jQuery함수 - 제공하는 기능

id selector

$("#id명")

class selector : .class명

$(".class명")

tag selector
- single - 단일 종류 태그 : tag명
- multiple - 여러 종류 태그 : tag명1,tag명2,…

$("tag명")
$("tag명1,tag명2")

sub selector
- 특정 태그의 자식 태그만 적용 : 부모태그명 > 자식태그명

$("부모태그명 > 자식태그명")

가장 처음 등장하는 태그만 지정하는 selector : 태그명:first

$("태그명:first")

가장 마지막에 등장하는 태그만 지정하는 selector : 태그명:last

$("태그명:last")

짝수번째에 등장하는 태그만 지정하는 selector : 태그명:even

$("태그명:even")

홀수번째에 등장하는 태그만 지정하는 selector : 태그명:odd

$("태그명:odd")

특정태그에 인덱스를 비교하는 selector : 태그명:eq(인덱스)

$("태그명:eq(인덱스)")

attribute selector
- 속성이 같은지 비교 : 태그명[속성명=”값”]
  - 태그명은 생략가능

$("[속성명='값']")

CSS 메소드

jQuery에선 함수와 method란 용어를 같이 사용
CSS의 값을 얻는 일을 하는 css()함수
- 매개변수가 두개면 selector에서 선택된 태그에 새 CSS 속성을 적용

$("selector").css("속성명"); // 속성에 대한 값을 반환
$("selector").css("속성명", "값"); // 속성에 대한 값을 설정

selector 사용 예

<body>
<strong>selector 사용</strong>
<div id="a">id가 a인 div</div>
<p class="b">처음 p</p>
<p>두번째 p</p>
<div class="b">
     <p>div 안에 p <span>div &gt; p &gt; span</span></p>
</div>
<span>span</span>
<p>세번째 p</p>
<ol>
     <li>사과</li>
     <li>배</li>
     <li>포도</li>
     <li>딸기</li>
</ol>
<ul>
     <li>서울</li>
     <li>경기</li>
     <li>충청</li>
     <li>경상</li>
     <li>전라</li>
     <li>제주</li>
</ul>
<a href="#void" target="a">링크1</a><br/>
<a href="#void" target="b">링크2</a><br/>
<a href="#void" target="c">링크3</a><br/>
<input type="text" name="name" value="이름" id="name">
</body>

id selector

$(function() { // 가장 권장(document.ready와 같음)
     // $(document).ready(function() {
     // $(window).load(function() {

     // id selector : #id명
     $("#a").css("background-color","#FF0000");
});

class selector

// class selector : .class명
$(".b").css("background-color", "#00FF00");

tag selector(single)

// tag selector(single)
$("div").css("background-color", "#0000FF");

tag selector(multiple)

// tag selector(multiple)
$("div, span, a").css("background-color","#44E16E");

sub selector

// sub selector : 부모태그명 > 자식태그명
$("div > p > span").css("background-color", "#E3BE71");

가장 처음 태그만

// 가장 처음 태그만 : 태그명:first
$("li:first").css("background-color", "#AE71E3");

가장 마지막 태그만

// 가장 마지막 태그만 : 태그명:last
$("li:last").css("background-color","#E3717C");

홀수번째 태그만

// 홀수번째 태그만 : 태그명:odd
$("li:odd").css("background-color", "#B68580");

짝수번째 태그만

// 짝수번째 태그만 : 태그명:even
$("li:even").css("background-color", "#AC80B6");

특정 인덱스 번째

// 특정 인덱스 번째 태그 : 태그명:eq(인덱스)
$("li:eq(2)").css("background-color", "#67D4D0");

attribute selector
- id, class도 속성 셀렉터로 찾을 수 있으나 속도가 느림

// attribute selector : [속성명='값']
$("[type='text']").css("background-color","#D46784");

$("a[target='b']").css("background-color","#D46784");

특정 태그의 클래스를 식별할 때

// div의 class가 b인 태그에만 적용
$("div.b").css("background-color", "#FFFF00");

Event Handling

JavaScript에서 제공하는 모든 이벤트를 처리할 수 있다.

// selector - 이벤트를 발생시킬 대상
$("selector").이벤트함수(function() {
    // 이벤트가 발생되었을 때 실행될 코드
});

jQuery를 쓰면 기존 JS 이벤트 처리보다 코드를 단순화 시킬 수 있다.

<input type="button" value="클릭" id="btn"/>

// jQuery
$(function() {
    $("#btn").click(function() {
        alert("클릭");
    });
});

// JS
window.onload = function() {
    document.getElementById("btn").addEventListener("click", fnClick);

    funtion fnClick() {
        alert("클릭");
    }
}

이벤트 처리 예

<body>
<strong>이벤트 발생과 처리</strong><br/><br/>
<input type="button" value="클릭" id="btn"><br/><br/>
<input type="text" value="커서가 들어올 때"  id="f_in"><br/><br/>
<input type="text" value="커서가 나갈 때"  id="f_out"><br/><br/>
<input type="text" value="키가 눌릴 때"  id="keydown"><br/><br/>
<input type="text" value="키가 올라올 때"  id="keyup"><br/><br/>
<select id="chg">
     <option>DBMS Oracle</option>
     <option>Java SE</option>
     <option>HTML</option>
     <option>CSS</option>
     <option>JavaScript</option>
     <option>jQuery</option>
</select><br/><br/>
<strong>포인터가 들어왔을 때</strong><br/>
<img src="../common/images/img.png" id="m_in"  width="100"><br/><br/>
<strong>포인터가 나갔을 때</strong><br/>
<img src="../common/images/img.png" id="m_out"  width="100"><br/><br/>
<strong>포인터가 움직일 때</strong><br/>
<img src="../common/images/img.png" id="m_move"   width="100"><br/><br/>
</body>

// 버튼이 눌렸을 때
$("#btn").click(function() {
     alert("버튼을 클릭하셨습니다.");
});

// 커서에 들어왔을 때
$("#f_in").focusin(function() {
     alert("커서가 들어왔습니다.");
});

// 커서가 나갔을 때
$("#f_out").focusout(function() {
     alert("커서가 나갔습니다..");
});

// 키가 눌릴 때
$("#keydown").keydown(function() {
     // 어떤 키든 눌렸을 때
     alert("키가 눌렸을 때");
});

// 이벤트 발생 함수는 매개변수를 정의하면 event객체가 값으로 들어온다.
// 특정 키가 눌렸을 때
$("#keydown").keydown(function(event) {
     // alert(window.event.which) // JS
     alert("특정 키가 눌림." + event.which);

     if (event.which == 13) {
          alert("엔터키입니다.");
     }
});

// 키가 올라올 때
$("#keyup").keyup(function() {
     alert("키가 올라올 때");
});

$("#chg").change(function() {
     alert("다른 옵션이 선택될 때");
})

$("#m_in").mouseenter(function() { // mouseover도 동일한 일을 한다
     alert("마우스 포인터가 들어왔을 때");
});

$("#m_out").mouseout(function() {
     alert("마우스 포인터가 나갔을 때");
});

$("#m_move").mousemove(function() {
     alert("마우스가 움직였을 때");
});

<strong>포인터가 움직일 때</strong><br/>
<img src="../common/images/img.png" id="m_move"   width="100"><br/><br/>
<div id="output"></div>

$("#m_move").mousemove(function(evt) {
     // event객체로부터 pageX, pageY로 마우스 커서의 좌표를 알 수 있다.
     $("#output").html("마우스 포인터 X좌표 :  "+evt.pageX+"/"+" Y좌표 : "+evt.pageY);
});

CSS 관련 methods

특정 대상의 style 속성값 얻기

var val = $("selector").css("속성명");

특정 대상의 CSS 속성을 설정

$("selector").css("속성명", "속성값");

선택자에 CSS class 속성을 부여
- 동일 속성이 존재하면 설정이 되지 않을 수 있다.

<style type="text/css">
.class명 { 속성:값; 속성:값; ... }
</style>

$("selector").addClass("class명"); // 여러개의 CSS 속성을 한번에 부여가능

CSS class 속성 삭제

$("selector").removeClass("class명");

CSS 관련 methods 사용 예

<style type="text/css">
     .class1 {
          border:5px solid #333;
          text-decoration: none;
          font-weight: normal;
          font-size: 10px;
          color: #0000FF;
     }
     .class2 {
          border:2px solid #333;
          text-decoration: underline;
          font-weight: bold;
          font-size: 20px;
     }
</style>

<body>
<div>
     <input type="button" value="style 속성 얻기"  class="btn" id="getAttr">
     <input type="button" value="style 속성 하나 설정"  class="btn" id="setCss">
     <input type="button" value="class 속성 추가"  class="btn" id="addClass">
     <input type="button" value="class 속성 삭제"  class="btn" id="removeClass">
     <input type="button" value="class 속성 삭제 후 추가"  class="btn" id="chain">
</div>
<div id="a" style="width:500px; height:50px;  background-color:#dfdfdf;">속성 얻는 div</div>
<div id="b">속성 설정하는 div</div>
<div id="c" class="class2>CSS class 속성을 추가하는 div</div>
<div id="d" class="class2">CSS class 속성을 삭제하는 div</div>
<div id="e" class="class2">CSS class 속성을 삭제 후 추가하는 div</div>
</body>

$("#getAttr").click(function() {
     var width = $("#a").css("width"); // CSS 속성 값 얻기
     var height = $("#a").css("height");
     var bg = $("#a").css("background-color");
     alert("div#a의 넓이 : "+width+"/ 높이 : "+height+"/  바닥색 : "+bg);
});

$("#setCss").click(function() {
     $("#b").css("color","#FF0000"); // CSS 속성 설정
});

$("#removeClass").click(function() {
     $("#d").removeClass("class2"); // CSS class 속성 삭제
});

$("#addClass").click(function() { 
     // 기존 class 속성이 설정되어 있으면 변경되지 않을 수 있다.
     $("#c").addClass("class1");
});

$("#chain").click(function() {
     /* $("#c").removeClass("class2");
     $("#c").addClass("class1"); */

     // jQuery는 메소드 체인을 지원
     $("#c").removeClass("class2").addClass("class1"); 
}); 

DOM(Document Object Model) 사용

화면 일부분을 변경할 때 DOM을 사용
HTML 태그가 반영되는 경우, html메소드 사용
- 인수 없는 메소드를 호출하면 해당 선택자가 갖는 html 내용을 가져온다.

$("selector").html(값); // 값에 태그가 들어가면 태그가 HTML형태로 나옴
$("selector").html();

HTML 태그가 반영되지 않게되는 경우, text메소드 사용
- 태그가 그대로 나온다.
- 인수 없는 메소드를 호출하면 해당 선택자가 갖는 html 내용 중 문자열만 가져온다.

$("selector").text(값); // 태그가 실행이 안되고 그대로 나옴(코드블럭처럼)
$("selector").text();

DOM 사용 예

<body>
<div id="inputFrm">
     <label>이름</label>
     <input type="text" class="inputBox" name="name">
     <input type="button" value="입력" class="btn">
</div>
<div id="html"></div>
<div id="text"></div>
</body>

$(function() {
     
     $(".btn").click(function() {
          // HTML Form Control의 값을 얻을 때에는  .val()을 사용
          var name = $("[name='name']").val();

          // ECMA2015 template literals
          var output = `<marquee  scrollamount="10">${name}</marquee>`; 

          $("#html").html(output);
          $("#text").text(output);
     });
});

<select id="sel">
     <option value="none">--선택--</option>
     <option value="html">html 얻기</option>
     <option value="text">text 얻기</option>
</select>
<div id="output"></div>

$("#sel").change(function() {
     // this : 이벤트를 발생시킨 HTML Form Control 객체  자신
     // #sel 이란 id대신 this를 사용가능,
     // this는 나(jQuery Object)랑 가장 가까이 있는 객체
     var selValue = $(this).val();
     
     if (selValue != "none") {
          if (selValue == "html") {
              // html()로 얻으면 태그 자체가 모두  얻어진다.
              $("#output").html("html로 얻기 :  "+$("#html").html());   
          } else {
              // text()로 얻으면 태그 자체가 얻어지지  않고 문자열만 얻어진다.
              $("#output").html("text로 얻기 :  "+$("#html").text());   
          }
     }
});

ECMA2015 - template literals, strings(backtick)

ie에선 지원 안함..
template literals
- 내장된 표현식을 허용하는 문자열 리터럴

`string text`

`string text line 1
string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

반복 함수

jQuery Object에서 지원, $.each()

$.each(반복시킬대상, function(인덱스를 저장할 변수, 값을 저장할 변수) {
    // 인덱스를 저장할 변수를 이용, 인덱스로 사용
    // 값을 저장할 변수에 배열 해당 인덱스의 값이 담긴다.
}); 

var arr = [값, ... ];

$.each(arr, function(i, elt) {
    // i - 0,1,2,3,...
    // elt- 값1,값2, ... 
});

$(function() {
    var arr = ['오','예','금','요','일'];
          
    $.each(arr, function(i, elt) {
        alert((i+1)+"번째 값 : "+elt);
        // index와 값이 alert창으로 5번 뜬다.
    });
}

반복 함수 사용 예

<body>
<input type="button" value="배열사용" id="arr"  class="inputBox">
<input type="button" value="JSONArray 사용" id="jsonArr"  class="inputBox">
<div id="output"></div>
</body>

$(function() {
     var nameArr = ["김정윤", "박영민", "노진경",  "김희철"];
     $("#arr").click(function() {
          var output = "<ul>";
     
          $.each(nameArr, function(idx, name) {
              output += "<li>("+idx+") "+name+"</li>";
          });
          
          output+="</ul>";
          
          $("#output").html(output);
     });
});

// JSONArry 이용해서 반복함수 사용해보기
$("#jsonArr").click(function() {
     var data = "[ { 'name':'김정윤', 'img':'img.png', 'age':  31, 'spec':'디잘잘', 'job':'개발자' },"
           + "{ 'name':'정택성', 'img':'img1_1.png', 'age': 27,  'spec':'춤잘잘', 'job':'개발자' },"
           + "{ 'name':'이재찬', 'img':'img2.jpg', 'age': 28,  'spec':'잠잘잘', 'job':'개발자' }]";
     
     var json_arr = eval("("+data+")");
     var output = "<table  border='1'><tr><th>번호</th><th>이름</th><th  width='150'>이미지</th></tr>";
     $.each(json_arr, function(idx, json_obj) {
           output+="<tr><td>"+(idx+1)+"</td><td>"+json_obj.name
                + "</td><td style='position:relative;  height:150px;'>"
                + "<img style='position:absolute; top:0px;  left:0px; width:150px; height:150px;'  src='../common/images/"+json_obj.img+"'>"
                + "<div style='position:absolute; top:120px;  left:20px; color:#FFFFFF; font-weight:bold;'>"
                +  json_obj.age+"세/"+json_obj.spec+"/"+json_obj.job+"/"+"<div></td></tr>";
     });
     
     output += "</table>";
     $("#output").html(output);
});

jQuery