티스토리 뷰

Frontend/jQuery

[생활코딩][웹브라우저JS]- jQuery 속성(attr) 제어 API, jQuery 조회 범위 제한

blueprint-12 2022. 2. 5. 23:21

jQuery : 속성제어 API

  • Element의 API에 해당하는 기능(큰 범주로는 DOM의 기능)을 jQuery에서는 어떻게 구사하는가를 알아보자. 
  • JQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다. 또한, removeAttribute에 대응되는 메소드로는 remove Attr이 있다. 
<body>
    <a id="target" href="http://opentutorials.org">opentutorials</a>
    <!--제이쿼리 CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      const t = $("#target"); //$("css선택자");
      //getAttribute('속성명');
      console.log(t.attr("http"));
      //setAttribute('속성명', '속성값')
      t.attr("title", "opentutorials.org");
      //removeAttribute('속성명')
      t.removeAttr("title");
    </script>
  </body>

->주석 처리해놓은 부분은 DOM객체의 메소드 를 적어놓은 것이며 아래의 코드는 같은 기능을 하는 jQuery객체의 메소드를 적용한 것이다. 

  • 속성제어 API에서도 DOM(Element객체의 속성API)처럼 attribute방식과 property 방식으로 기술하는 차이가 있다.
  • DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분한다. 속성은 attr, 프로퍼티는 prop 메소드를 사용한다. 차이가 있다면 jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다. 라이브러리를 사용하는 의의라고 할 수 있겠다.
<body>
    <a id="t1" href="./demo.html">opentutorials</a>
    <input id="t2" type="checkbox" checked="checked" /><br />

    <label for="checkbox">Check here!</label>
    <!-- checked 가 없다면 빈상태로 화면에 출력됨 checked는 HTML 속성이다. -->
    <input id="체크박스" type="checkbox" checked="checked" />

    <div id="s1">example1</div>
    <div id="s2">example1</div>
    <!--제이쿼리 CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      //속성방식 attr, 프로퍼티방식 prop
      const t1 = $("#t1");
      console.log(t1.attr("href")); // ./demo.html
      console.log(t1.prop("href")); // http://127.0.0.1:5500/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9/jQuery/jQuery%EA%B0%9D%EC%B2%B4/demo.html

      const t2 = $("#t2");
      console.log(t2.attr("checked")); //checked
      console.log(t2.prop("checked")); //true

      //jQeury를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하든 올바른 것으로 교정된다.
      //아래는 className을 사용하든 class를 사용하든 똑같이 class명을 추가하는 기능을 구사
      $("#s1").prop("className", "important");
      $("#s2").prop("class", "current");

      //Display the checked attr and prop of a checkbox as it changes.
      //체크박스에 checked 인 상태라면 true 아니라면 false가 콘솔에 표시됨
      $("#체크박스")
        .change(function () {
          const $체크박스 = $(this);
          console.log($("#체크박스").prop("checked"));
        })
        .change();
    </script>
  </body>
  •  prop방식으로 DOM에서 코드를 짠다면 변수명.className ="important"; 이런식으로 적어줘야 한다. 하지만 제이쿼리의 prop를 설정할 때 class(DOM에서는 attr방식에만 허용)를 사용해도 className 을 작성한 것처럼 자체교정을 한다. 

jQuery 조회 범위 제한 

Element 객체에서 getElementBy* 메소드를 실행하면 조회의 범위가 그 객체의 하위 엘리먼트로 제한되는 것을 배웠습니다. jQuery 에서는 같은 작업을 어떻게 실행하는 지 알아봅시다. 

 

▶selector context

가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것이다. 그 제한된 범위를 jQuery에서 selector context라고 한다. 

<body>
    <ul>
      <li class="marked">html</li>
      <li>css</li>
      <li id="active">
        JS
        <ul>
          <li>JS core</li>
          <li class="marked">DOM</li>
          <li class="marked">BOM</li>
        </ul>
      </li>
    </ul>
    <!--제이쿼리 CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      //2번째 인자가 selector context
      $(".marked", "#active").css("background-color", "red");
      //css셀렉터로만 범위 좁히기 가능 
      $("#active .marked").css("color", "blue");
      //.find() 사용하기
      $("#active").find(".marked").css("font-weight", "800");
    </script>
  </body>
  •  1번째 방법: selector context 활용
    • $(".marked", "#active").css("background-color", "red"); -> 두번째 인자가 selector context 즉, marked클래스를 가진 것들을 꾸미는 데 아이디가 active인 곳의 하위 marked만 해당하여 css효과를 적용한다는 뜻
  • 2번째 방법: css selector 활용
    • $("#active .marked").css("color", "blue"); -> jQuery 함수 내부에 css selector로만 범위 좁혀서 위 코드와 같은 결과를 만들 수도 있다. 

▶.find()

find는 jQuery 객체 내에서 엘리먼트를 조회하는 기능을 제공한다. 

위에서 본 예시들과 같은 효과를 낸다. (3번째 방법: find()활용)

 

find를 쓰는 이유는 체인을 끊지 않고 작업의 대상을 변경하고 싶을 때 사용

$('#active').css('color','blue').find('.marked').css( "background-color", "red" );
  • 위와 같은 코드를 실행하면 아이디가 active인 엘리먼트(하위 요소 포함 전부)의 폰트 색상을 blue로 바꾸고 동시에 하위에 있는 클래스명이 marked인 엘리먼트의 배경색을 red로 바꿀 수 있다. 
  • 유의점: find를 너무 복잡하게 사용하면 코드를 유지보수하기 어렵게 된다. 

 

'Frontend > jQuery' 카테고리의 다른 글

[생활코딩][웹브라우저JS] - jQuery 이벤트 관련 API  (0) 2022.02.16
[생활코딩][웹브라우저JS]- jQuery의 node 제어 API  (0) 2022.02.08
[생활코딩][웹브라우저JS]- jQuery 객체, jQuery API  (0) 2022.02.01
[생활코딩][웹브라우저JS]- 제어 대상을 찾기(feat. DOM, jQuery)  (0) 2022.01.28
[생활코딩] 라이브러리와 프레임워크 (jQuery)  (0) 2021.12.26
댓글