[jQuery] - 선택자(Selector), val(), attr(), html(), CSS 속성 제어

이번엔 jQuery에서 자주 쓰이는 선택자(Selector) 지정, 여러 가지 노드의 속성을 제어할 수 있는 val(), attr(), html()과  CSS 스타일 속성 제어 메서드에 대해 알아보겠습니다.

 

 

1. jQuery에서 자주 쓰이는 선택자(Selector)

선택자(Selector)란, 말 그대로 선택을 해 주는 요소를 의미하며, 웹 페이지의 구조, 데이터에 대한 노드(태그)에 접근하여 노드에 대한 속성값들을 제어하기 위해 선택자를 지정합니다.

 

자주 쓰이는 선택자는 아래와 같고, 선택자 지정 시 $로 시작하여 표기합니다.

1. $("태그에 대한 ID name")

2. $("태그에 대한 Class name")

3. $("특정 요소[ Attribute name = Attribute value]")     ex): $("a[href=#"]);

4. $(this)

 

여기서 this란, Javascript에서 자신이 속한 객체나 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있는  자기 참조 변수(Self-reference variable)이며 쉽게 말하면 실행되는 자기 자신을 의미합니다.

 

- this는 키워드이기에 "(쌍따옴표)로 묶지 않습니다.- 메서드(함수)이기에 매개변수로 들어가는 값들에 대해 ,(콤마)로 이어줍니다.

 

- 아래와 같이 예시 코드들을 보며 id 값으로 요소를 선택하는 것에 대해 확인해 보겠습니다.

    <input type="text" id="apple" value="홍길동">
    <input type="text" class="melon" value="이순신">
    <input type="password">

위와 같이 여러 가지 사용자에게 값을 입력 받을 수 있는 <input> 태그가 선언되어 있다고 할 때

기존 Javascript 문법을 사용하여 "apple"을 id 값으로 가지는 요소를 선택하고자 한다면

    <script>
        var apple = document.getElementById("apple")  // 기존 자바스크립트 문법 사용
    </script>

 

위와 같이 코드를 작성해 주어야 했으나 아래처럼 jQuery 선택자를 이용하여 노드를 지정할 수 있습니다.

    <script>
        var apple = $("#apple");
        console.log(apple);
    </script>

 

위와 같이 코드를 작성했다면 콘솔 창에서 확인 시, 리스트의 형태로 id 값이 "apple"인 노드가 선택됩니다.

 

 

 

2. val() 메서드

문법)

1. $("선택자").val();

2. $("선택자").val(변경할 값);

 

- 선택된 노드의 value 속성에 대한 값을 가져오는 메서드입니다.

- 아래처럼 위의 예시 코드를 동일하게 가져와 val() 메서드 사용법을 알아보겠습니다.

    <input type="text" id="apple" value="홍길동">
    <input type="text" class="melon" value="이순신">
    <input type="password">

 

    <script>
        var apple = $("#apple").val();	// id의 값이 "apple"인 요소의 value 값 확인
        console.log(apple);

        var melon = $(".melon").val();	// class의 값이 "melon"인 요소의 value 값 확인
        console.log(melon);
    </script>

 

위처럼 선택자 옆에 나란히 .으로 val() 메서드를 연결하여 해당 요소에 대한 value 값을 확인할 수 있습니다.

 

 

이번엔 $("선택자").val(변경할 값); 메서드로 특정 요소의  value의 값을 변경해 보겠습니다

       // $("선택자").val(변경값);
       
       var change_passwd = $("input[type='password']").val("변경값");
       console.log(change_passwd);

위와 같이 val() 메서드의 매개변수에 변경값을 넣고 요소의 value 값을 변경할 수 있습니다.

 

 

 

 

 

3. attr() 메서드

문법)

1. $("선택자").attr("src");     // 여기서 src는 속성명으로 예시의 값을 알아보기 쉽게 넣어준 것입니다.

2. $("선택자").attr("src", 변경값);

3. $("선택자").attr({key1 : value1, key2 : value2, ... key n : value n});

 

- attr() 메서드는 노드(태그) 내부의 속성을 변경할 수 있는 메서드입니다.

- 매개변수에 속성명만 존재하는 경우 해당 속성을 확인합니다.

- 매개변수에 속성명, 변경값까지 모두 존재하는 경우, 해당 속성의 값을 변경합니다.

- 3번은 선택된 노드의 {key : value}의 형태로 가지는 값을 모두 변경합니다.

 

해당 메서드는 아래의 예시를 보면서 다시 확인해 보겠습니다.

    <input type="text" id="test01" readonly="readonly">
    <img src="#" class="test02">
    <img src="#" alt="image" width="" height="" class="test03">

 

<script>
    var a = $("#test01").attr("id");
    console.log(a);
</script>

위의 코드는 id = test01인 노드를 지정하고 해당 노드의 id 속성값을 변수에 저장한 뒤 콘솔에 출력합니다.

 

$(".test02").attr("src", "img001/f1.jpg");    // 선택된 노드의 src 속성에 대한 속성값을 두 번째 매개변수의 값으로 변경

위의 코드는 class명으로 노드를 선택하고, src 속성에 대한 속성값을 변경하는 코드입니다.

 

    $(".test03").attr({
        src: "img001/f2.jpg",
        width: 100,
        height: 100,
        alt: "이미지 변경"
    });

위의 코드는 마찬가지로 class명으로 노드를 선택하고, {key :  value} 꼴로 선택된 노드의 모든 값을 변경하는 코드입니다. 메서드의 매개변수로 값들을 넣어주기에 ,(콤마)로 연결해 준 것을 다시 한 번 확인할 수 있습니다.

 

 

 

 

4. html() 메서드 

문법)

1. $("선택자").html();

2. $("선택자").html("변경할 텍스트");

3. $("선택자").text("<h2>변경할 텍스트</h2>");

 

- html() 메서드는 특정 노드(태그) 사이에 들어가는 데이터(텍스트)를 제어하는 메서드입니다.

- 1번은 특정 노드의 데이터(텍스트)값을 확인합니다.

- 매개변수 안에 텍스트 값을 넣어줄 경우, 선택된 노드의 텍스트 값을 변경합니다.

- 3번은 순수 문자의 형태로 텍스트를 넣어줍니다.

 

아래와 같이 예시 코드들을 보며 확인해 보겠습니다.

우선 p 태그를 이용해 속성으로 class를 지정해 줍니다.

<p class="test"></p>

 

//innerHTML과 동일한 메서드 : $("선택자").html("값 변경");

$(".test").html("값을 변경한다.");

위와 같이 특정 노드 사이에 들어가는 값을 변경할 수 있습니다.

Javascript의 innerHTML과 유사합니다.

 

$(".test").html("값을 변경한다.");

console.log($(".test").html());    // 클래스 값으로 선택된 노드에 들어간 텍스트를 확인

또한 특정 노드에 들어간 값에 대해서도 확인할 수 있습니다.

 

 

 

 

5. CSS 스타일 속성 제어

문법)

1. $("선택자").css("backgroundColor");                // 여기서 backgroundColor의 값은 예시입니다.

2. $("선택자").css("backgroundColor", "변경 값");

3. $("선택자").css({key1 : value1, key2 : value2, ... key n : value n});

 

- CSS 스타일 속성을 제어하기 위한 css() 메서드입니다.

- 매개변수로 속성명이 들어간 경우 선택 노드에 대한 스타일 속성을 확인합니다.

- {key : value} 형태의 매개변수는 선택된 노드의 CSS 속성을 변경합니다.

 

아래의 코드를 보며 속성을 제어하는 방법을 알아보겠습니다.

    <ul class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
    
    <div class="inner">inner</div>
    <div class="inner">inner</div>
    <div class="inner">inner</div>
    <div class="inner">inner</div>
    <div class="inner">inner</div>

 

    <script>
        //기존 Javascript 문법을 이용하여 li 태그에 backgroundColor 부여
        var a = document.querySelector(".box > li");

        for (var i = 0; i < a.length; i++) {
            a.style.backgroundColor = "red";
        }

    </script>

 

우선 Javascript의 코드를 보면, li 태그에 대해  백그라운드 색상을 부여하려면 위와 같은 코드가 필요했습니다.

 

    // jQuery를 적용하여 li 태그에 backgroundColor 부여
        $(".box > li").css("backgroundColor", "red");

        // CSS 속성값 확인하기
        var b = $(".box > li").css("backgroundColor");
        console.log(a);

하지만 이제 CSS 속성을 제어하는 css() 메서드를 통해 위처럼, backgroundColor의 색상을 변경하고 속성값까지 확인할 수 있습니다.

 

    // $("선택자").css({key1 : value2, key2 : value2, ... key n : value n});
        $(".inner").css({
            backgroundColor: "blue",
            width: "50px",
            height: "50px",
            display: "inline-block",
            border: "1px solid #777"
        })

 

마지막으로 3번 문법인 $("선택자").css({key1 : value1, key2 : value2, ... key n : value n});을 통해 CSS 속성값 전체를 모두 변경할 수 있습니다. 

 

 

 

 

 

jQuery에서 자주 쓰이는 선택자(Selector) 지정, 여러 가지 노드의 속성을 제어할 수 있는 val(), attr(), html()과 CSS 스타일 속성 제어 메서드에 대해  정리해 보았습니다. 다음 포스팅에서는 더 다양한 메서드에 대해 알아보겠습니다.

 

===========================================================================

개인적으로 공부하고 내용을 다시 정리하며 작성한 글입니다.

오타나 내용 상 틀린 내용이 있을 수 있으니 지적해 주시면 감사하겠습니다.

해당 주제로 추가적인 포스팅이 필요하다고 생각되면 작성한 글이 수정될 수 있는 점 참고 부탁드립니다.