Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-12 08:23


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

jQuery DOM 제어 : JavaScript

written by Seok Kyun. Choi. 최석균


본 포스트는 jQuery 를 깊이있게 다루지 않았다.
jQuery 공식 사이트에 자세히 설명되있어 간단한 몇 부분만 골라 샘플과 함께 설명하도록 하겠다.

<html>
  <head>
    <script type="text/javascript">
      jQuery(function() {

        // ① form_one 접근
        var form = jQuery("#form_one");

        // ② form_one 폼의 ele 접근하여 값 one 을 출력함.
        alert(jQuery("#ele",form).val());

        // ③ form_one 폼의 ele 접근하여 value 값을 Syaku blog 변경함.
        jQuery("#ele",form).val("Syaku blog");

        // ④ form_one 폼의 ele 접근하여 id 속성 값 ele 를 출력함.
        alert(jQuery("#ele",form).attr("id"));

        // ⑤ form_one 폼의 ele 접근하여 id 속성 값 choi 로 변경함.
        jQuery("#ele",form).attr("id","choi");

        // ⓐ div 엘리먼트 접근
        var div = jQuery("div");

        // ⓑ innerHtml 를 이용하여 소스 출력
        alert(div.html());

        // ⓒ innerHtml 를 이용하여 소스 변경
        div.html("정말 쉽죠?");

        // ⓓ 스타일시트 속성 변경
        div.css("border","3px solid #000");

        // ⓔ 체크박스 전체선택
        jQuery("#form_two #chk").click(function() {
          // form_two 폼의 ele 속성에 checkbox 엘리먼트에 접근하여 모두 반복시킴.
          jQuery("#form_two input[@name='ele']:checkbox").each(function (i) {
            (this.checked == true) ? this.checked = false : this.checked = true;
          });
        });

      });
    </script>
  </head>
  <body>
    <form id="form_one">
      텍시트 박스 : <input type="text" id="ele" value="one" /> <br />
    </form>
    <div>강력한 jQuery</div>
    <form id="form_two">
      <input type="button" id="chk" value="전체선택" />
      1번 체크박스 : <input type="checkbox" name="ele" value="1" /> <br />
      2번 체크박스 : <input type="checkbox" name="ele" value="2" /> <br />
      3번 체크박스 : <input type="checkbox" name="ele" value="3" /> <br />
      4번 체크박스 : <input type="checkbox" name="ele" value="4" /> <br />
    </form>
  </body>
</html>

posted syaku blog


① id 속성에 접근하기 위해 # 을 사용해야 하며, 엘리먼트는 태그소스 그대로 사용하면 된다. (ⓐ 참조)
② value 속성 값을 얻기 위해 val() 사용한다. val("내용") 할 경우 값을 변경 및 삽입한다.
④ 접근자 속성을 제어하기 위해 attr("속성명") 사용한다. attr("속성명","속성값") 할 경우 속성 값을 변경 및 삽입한다.
ⓓ 스타일시트 속성을 변경하기 위해 css("별칭","값") 사용한다.
ⓔ 난이도가 있는 작업이다. 접근할 때 뛰어쓰기를 구분하여 자식의 속성이나 엘리먼트에 접근할 수 있다.

// form_two 폼의 chk 속성에 접근하여 click 액션이 이루어 질 경우 함수가 실행된다.
jQuery("#form_two #chk").click(function() {



1. 접근법에 대한 이해

DOM 특성상 모든 접근 순서는 위에서 아래이다. 다음 소스를 참조한다.

<div>
  <p>안녕하세요. 최석균입니다.</p>
  <h1>블로그</h1>
  <div id="good">
     <span>하하하</span>
  </div>
</div>

p 엘리먼트에 접근하기 위한 순서는 다음과 같다. div > p
span 엘리먼트에 접근하기 위한 순서는 다음과 같다. div > div > span

jQuery 이용하면 다음과 같다.

jQuery("div p"); // p 엘리먼트 접근

jQuery("div div span") // span 엘리먼트 접근
혹은
jQuery("#good span"); // id 속성을 이용한 span 엘리먼트 접근

접근자 별칭은 스타일시트 형식과 같다.
id 는 # 별칭을 사용하고 class 는 . 닷 별칭을 사용한다.

여러 개의 엘리먼트에 접근하려면? , 콤마를 사용한다.
jQuery("div div span, #good span");
그럼 배열로 리턴받게 되며 jQuery().each() 를 이용하여 반복적으로 제어할 수 있다.

내용 담고있는 득정한 객체에 접근하려면 jQuery("접근자","객체"); 하면 된다. 아래의 소스를 참조한다.

<div>
  <div id="good">
     <p>안녕하세요. 최석균입니다.</p>
     <h1>블로그</h1>
     <span>하하하</span>
  </div>
</div>

-- good id 속성에 접근 후 그 자식에 접근하기

var good = jQuery("#good");
var child_p = jQuery("p",good);
var child_h1 = jQuery("h1",good);
var child_span = jQuery("span",good);

위와 같이 접근하려는 특정 엘리먼트가 있을 경우
객체로 담고 객체를 이용해 자식 엘리먼트에 접근하는 것이 더 효율적이다.

그럼 상위 즉, 자식이 부모를 접근하기 위한 방법은 무엇일까?
DOM 개념을 이해한다면 jQuery 도움말(Traversing 도움말)을 참조하면 제어할 수 있을 것이다.
자바스크립트와 유사한 parent 를 설명하도록 하겠다.

<div>
  <h1>블로그</h1>
  <div id="good">
     <p>안녕하세요. 최석균입니다.</p>
     <span>하하하</span>
  </div>
</div>

span 엘리먼트에 접근 후 부모 div 엘리먼트에 접근하기.
var target = jQuery("#good span");
target.parent().css("border","3px solid #000");


** jQuery 참조 도움말

jQuery Core : http://docs.jquery.com/Core
Selectors : http://docs.jquery.com/Selectors
Attributes : http://docs.jquery.com/Attributes
Traversing : http://docs.jquery.com/Traversing
CSS : http://docs.jquery.com/CSS

http://syaku.tistory.com

댓글 남기기
◀ PREV 1···91011121314 NEXT ▶