Languages/Java Script

[Js] jQuery 속성 제어 API | jQuery 조회 범위 제한 | javascript

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

이번 포스팅은 jQuery를 속성 제어 API와 다음 강좌인 jQuery 조회 범위 제한 내용을 모두 담고 있습니다.

jQuery 속성 제어 API

속성제어

jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다. 또한 removeAttribute에 대응되는 메소드로는 removeAttr이 있다.

<!DOCTYPE html>
<html>
<head>
	<title> jQuery 속성의 제어</title>
</head>
<body>

<a id="target" href="http://opentutorials.org">opentutorials</a>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script>
    var t = $('#target');
    console.log(t.attr('href')); //http://opentutorials.org
    t.attr('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
    t.removeAttr('title'); // title 속성을 제거한다.
</script>
</body>
</html>

attribute와 property

DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분한다. 속성은 attr, 프로퍼티는 prop 메소드를 사용한다.

<!DOCTYPE html>
<html>
<head>
	<title> jQuery 속성의 제어</title>
</head>
<body>

<a id="t1" href="./demo.html">opentutorials</a>

<input id="t2" type="checkbox" checked="checked" />

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 crossorigin="anonymous"></script>

<script>
// 현재 문서의 URL이 아래와 같다고 했을 때
// http://localhost/jQuery_attribute_api/demo2.html
	var t1 = $('#t1');
	console.log(t1.attr('href')); // ./demo.html 
	console.log(t1.prop('href')); // file:///C:/Users/User/Desktop/javascript/demo.html
 
	var t2 = $('#t2');
	console.log(t2.attr('checked')); // checked
	console.log(t2.prop('checked')); // true
</script>


</body>
</html>

위 코드의 결과를 콘솔창에서 확인해보면 다음과 같다.

jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다.

이런 것이 라이브러리를 사용하는 의의라고 할수 있겠다.

<!DOCTYPE html>
<html>
<head>
	<title> jQuery 속성의 제어</title>
</head>
<body>

<div id="t1">opentutorials</div>
<div id="t2">opentutorials</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 crossorigin="anonymous"></script>
<script>
$('#t1').prop('className', 'test1'); 
$('#t2').prop('class', 'test2');  
</script>


</body>
</html>

결과를 확인해보면, jQuery내부에서 알아서 교정을 하였기 때문에 두 값 모두 정상적으로 적용된 것을 확인할 수가 있다.

(참고로 : attr -> 속성방식, prop -> 프로퍼티 방식임)

jQuery 조회 범위 제한

selector context

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

<!DOCTYPE html>
<html>
<head>
	<title> jQuery 조회 범위 제한</title>
</head>
<body>

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked">DOM</li>
            <li class="marked">BOM</li>
        </ul>
    </li>
</ul>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 crossorigin="anonymous"></script>
<script>
    $( ".marked", "#active").css( "background-color", "red" );
</script>
</body>
</html>

여기에서 .marked는 효과를 주고자 하는 엘리먼트를 지정하고, 두번째 인자로 #active 즉 selector context가 오는데, 이는 첫번째 인자를 제어하려고 하는 엘리먼트 이다.

실행결과는 아래와 같이 코드가 적용된다.

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked" style="background-color: red;">DOM</li>
            <li class="marked" style="background-color: red;">BOM</li>
        </ul>
    </li>
</ul>

조금더 간단하게 표현하고자 한다면, 선택자를 아래처럼 작성해도 결과가 같다.

$( "#active .marked").css( "background-color", "red" );

.find()

find는 jQuery 객체 내에서 엘리먼트를 조회하는 기능을 제공한다. 아래의 코드는 위의 예제와 효과가 같다.

$( "#active").find('.marked').css( "background-color", "red" );

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

기본 예제를 아래와 같이 변경해보자.

$('#active').css('color','red').find('.marked').css('background-color','yellow')

실행결과는 아래와 같다.

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active" style="color: red;">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked" style="background-color: yellow;">DOM</li>
            <li class="marked" style="background-color: yellow;">BOM</li>
        </ul>
    </li>
</ul>

전체코드는 아래와 같다.

<!DOCTYPE html>
<html>
<head>
	<title> jQuery 조회 범위 제한</title>
</head>
<body>

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked">DOM</li>
            <li class="marked">BOM</li>
        </ul>
    </li>
</ul>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 crossorigin="anonymous"></script>
<script>
    //$( ".marked", "#active").css( "background-color", "red" );
    $('#active').css('color','red').find('.marked').css('background-color','yellow')
</script>
</body>
</html>

즉 li.item-li 엘리먼트에 해당하는 모든 엘리먼트의 전경색을 빨간색으로 변경한 후에 li 엘리먼트만을 조회해서 배경색을 노란색으로 지정하고 있다.

find를 너무 복잡하게 사용하면 코드를 유지보수하기 어렵게 된다.

더 많은 예제는 jQuery의 메뉴얼을 참고하자. .find()

.find() | jQuery API Documentation

Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element. Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the desc

api.jquery.com

'Languages > Java Script' 카테고리의 다른 글

[Js] 노드 종류 API \| 노드 변경 API \| jQuery 노드 변경 API (0)	2021.02.10
[Js] Node 객체 \| Node 관계 API (0)	2021.02.10
[Js] 식별자 API \| 조회 API \| 속성 API (0)	2021.02.10
[Js] Element 객체 \| Node \| 식별자 \| 조회 \| 엘리먼트 (0)	2021.02.08

Contents

새소식

인기 검색어