Chapter 06. 속성 다루기. Lesson 01. 속성 소개. Lesson 02. 핵심 내용

WEB/JQUERY-CONCEPT 2017. 11. 10. 17:34 |

Chapter 06. 속성 다루기. 


Lesson 01. 속성 소개

일반 속성 : 일반 태그의 id와 class 그리고 <a> 태그에 링크 정보를 담는 href와 <img> 태그의 이미지 정보를 담는 src 등

사용자 속성 : 사용자가 필요에 의해서 만들어 사용하는 속성


Lesson 02. 핵심 내용심 내용

- 핵심 01: 속성값 구하기

- 핵심 02: 속성값 설정하기


- 핵심 01: 속성값 구하기

사용법

$대상.attr("속성이름")

$대상.data("data-속성이름")


예제 01. 다음 문서에서 <img> 태그의 src 속성값과 <a> 태그의 href 속성값을 출력해 주세요

1
2
3
4
5
6
7
<body>
    <div class="header">
        <img src="wdn_logo.png" >
        <br>
        <a href="http://www.webdongne.com">웹동네</a>
    </div>
</body>
cs

풀이: 소스
1
2
3
4
5
6
7
8
9
<script>
$(document).ready(function() 
{
    // img 태그의 src 속성 값 출력
    console.log("src = " + $(".header img").attr("src"));
    // a 태그의 href 속성 값 출력
    console.log("href = " + $(".header a").attr("href"));
})
</script>
cs

실행결과
src = wdn_logo.png
href = http://www.webdongne.com


예제 02. 다음 문서에서 패널(.panel)에 설정된 사용자 속성을 모두 화면에 출력해 주세요.

1
2
3
4
5
6
7
8
9
10
11
<body>
    <div class="panel" data-name="웹동네" data-tel="010-1234-5678" data-img="./wdn_logo.png" temp-data="test1">
        <p class="name">
        웹동네
        </p>
        <p class="tel">
        010-1234-5678
        </p>
        <img src="wdn_logo.png" />
    </div>
</body>
cs

풀이: 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() 
{
    var $panel = $("div.panel");
 
    // data-로 시작하는 속성은 data()메서드를 사용하면 좀더 효율적입니다.
    // data()메서드 활용 전체 정보 출력
    console.log("1. data() = ", $panel.data());
    // data() 메서드 활용 data-name 정보 출력
    console.log("2. data(name) = " + $panel.data("name"));
    // attr() 메서드 활용 data-name 정보 출력
    console.log("3. attr(data-name) = " + $panel.attr("data-name"));
    // data() 메서드 활용 temp-data 정보 출력
    console.log("4. data(temp-data) = " + $panel.data("temp-data")); // data-로 시작하지 않는 속성을 data() 메서드를 이용하면 안된다. 결과값은 undefined
    // attr() 메서드 활용 temp-data 메서드 정보 출력
    console.log("5. attr(temp-data) = " + $panel.attr("temp-data"));
})
cs


실행결과
1. data() = Object { img : "./wdn_logo.png", tel : "010-1234-5678", name: "웹동네" }
2. data(name) = 웹동네
3. attr(data-name) = 웹동네
4. data(temp-data) = undefined
5. attr(temp-data) = test1


- 핵심 02: 속성값 설정하기

사용법 : 
$대상.attr("속성이름","값")
$대상.data("data-속성이름","값")

예제 03. 다음 문서에서 이미지를 누를 때마다 이미지를 ch1.png <-> ch2.png로 번갈아가며 변경되게 만들어 주세요

1
2
3
<body>
    <img src="ch2.png" id="target">
</body>
cs


풀이: 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
$(document).ready(function() 
{
    // #target 찾기
    var $img = $("#target");
    // sw 변수 생성
    var sw = true;
    // #target에 클릭 이벤트 등록
    $img.click(function() 
    {
    // sw 값을 true<-->false로 변경
    sw = !sw;
    // sw가 true 일때는 #target의 src 속성 값을 ch2.png로
    // false 일때는 #target의 src 속성 값을 ch3.png로 변경
    if (sw == true)
    $img.attr("src", "ch1.png");
    else
    $img.attr("src", "ch2.png");
    });
})
</script>
cs



예제 04. 이번 예제는 예제 01을 확장한 경우입니다. 
다음 문서에서 각 이미지를 누를 때마다 이미지를 ch1.png <-> ch2.png로 번갈아가며 변경되게 만들어 주세요



풀이 01: attr() 메서드를 이용한 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div class="panel1">
        <p>
        테스트1
        </p>
        <img src="ch1.png" class="target">
    </div>
 
    <div class="panel2">
        <p>
        테스트2
        </p>
        <img src="ch1.png" class="target">
    </div>
 
    <div class="panel3">
        <p>
        테스트3
        </p>
        <img src="ch1.png" class="target">
    </div>
</body>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
$(document).ready(function() 
{
    // 타깃 목록 구하기
    var $targetList = $(".target"); // 타깃(.target)은 계속해서 사용할 것이기 때문에 시작 시 찾아서 변수에 저장해 둡니다.
    // 타깃의 이미지 상태 정보 설정 (풀이 02에서는 없어짐)
    var swInfo = [true,true,true] // 타깃의 이미지 상태 정보를 담은 배열 변수를 만듭니다.
    // 클릭 이벤트 등록
    $targetList.click(function() // 타깃에 click 이벤트를 등록해 줍니다.
    {
    var $target = $(this);
    // 클릭한 대상의 인덱스 값 구하기 (풀이 02에서는 없어짐)
    var index = $targetList.index($target); // 상태 정보 배열에서 클릭한 이미지의 정보를 구하기 위해 index() 메서드를 활용해 클릭한 이미지의 인덱스 값을 구합니다.
    // 이미지 상태 정보 변경
    swInfo[index]=!swInfo[index]; // 클릭한 이미지의 상태를 변경합니다 (풀이 02에서는 추가됨)
    // 상태 값에 따른 이미지 변경
    if (swInfo[index] == true) // 이미지 상태에 따라 이미지를 변경해 줍니다.
        $target.attr("src", "ch2.png");
    else
        $target.attr("src", "ch1.png");
    });
})
cs



풀이 02: data() 메서드를 이용한 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div class="panel1">
        <p>
        테스트1
        </p>
        <img src="ch1.png" class="target" data-sw="true"> // data-sw="true"를 추가시켜준다
    </div>
 
    <div class="panel2">
        <p>
        테스트2
        </p>
        <img src="ch1.png" class="target" data-sw="true">
    </div>
 
    <div class="panel3">
        <p>
        테스트3
        </p>
        <img src="ch1.png" class="target" data-sw="true">
    </div>
</body>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
$(document).ready(function() 
{
    // 타겟 목록 구하기
    var $targetList = $(".target");
    // 클릭 이벤트 등록
    $targetList.click(function() 
    {
    var $target = $(this);
    // 이미지 상태 정보 변경
    var sw = !$target.data("sw");
    $target.data("sw", sw);
    // sw가 true 일때는 #target의 src 속성 값을 ch2.png로
    // false 일때는 #target의 src 속성 값을 ch3.png로 변경
    // 상태 값에 따른 이미지 변경
        if (sw == true)
        $target.attr("src", "ch2.png");
        else
        $target.attr("src", "ch1.png");
        });
})
</script>
 
cs




* 풀이 01의 경우 이미지 상태 정보를 swInfo라는 배열로 통합해 관리했으나,
이때의 단점은 해당 이미지의 이미지 상태 정보를 가져오기 위해 인덱스 값을 구해서 접근해야 하는 번거로움 생깁니다.

풀이 02처럼 data() 메서드를 이용하면 상태 정보를 노드 자체에 만들어 사용하기 때문에 아주 쉽게 접근해서 사용할수 있습니다.


저작자표시 비영리 동일조건

'WEB > JQUERY-CONCEPT' 카테고리의 다른 글

Chapter 08. 위치/크기 관련 기능 다루기. Lesson 01. 요소의 위치 및 크기 관련 기능  (0) 2017.11.13
Chapter 07. 이벤트 다루기. Lesson 02. 핵심 내용  (0) 2017.11.12
Chapter 05. 스타일 다루기. Lesson 02. 핵심내용  (0) 2017.11.10
Chapter 05. 스타일 다루기. Lesson 01. 스타일 소개  (0) 2017.11.10
Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 03. 노드 삭제  (0) 2017.11.10
Posted by 너래쟁이
:

티스토리툴바