이전
목록
다음
j

jQuery Attribute - 요소의 속성 관련 메서드에 대하여

jinmuk
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-07-14 (일) 19:13:03 · 5424

HTML 문서의 속성 제어하기

이번 시간에는 jQuery를 이용하여, 개체 속성을 제어하는 방법에 대해 알아 보도록 하겠습니다.


HTML 요소에서 이름을 제외한 나머지 요소는 모두 속성이 될 수 있습니다.

즉 <img src="”img/new.gif” alt=”새글” /> 이라는 요소가 있다면 src, alt는 모두 요소가 되며, 정의되지 않은 값을 사용자 임의로 넣어 사용 가능합니다. (사용자 정의 속성은 특별한 오류를 나타내지는 않으나, 간혹 브라우저 특성으로 인해 발생되는 오류가 있으니, 꼭 필요한 곳에만 사용을 하시기 바랍니다.)


.attr()

attr_001.jpg

 

어디서 많이 본 형태 아닌가요? 맞습니다. 스타일 관련 강좌에서 나왔던 css() 메서드와 이름만 다르지 똑같이 생겼습니다. 

동작하는 모습도 클래스에서 속성으로만 변경되었지 동일합니다.


요소의 속성값을 가져오기 위해서는 .attr(attributeName)을 사용하며, 속성값을 설정하기 위해서는 .attr(attributeName, value)를 사용하면 됩니다. 다시 한번 밥 아저씨의 명언이 생각 납니다.

<img src=”img/new.gif” alt=”새글” />
var imgSrc = $(“img”).attr(“src”); //img 요소의 src 속성을 가져옵니다.
$(“img”).attr(“src”, “img/old.gif”); //img 요소의 src 속성을 “img/old.gif”로 변경합니다.


속성값을 성정 할 경우 해당 속성이 존재하면 기존 속성에 덮어쓰기를 하며, 속성이 존재 하지 않을 경우에는 새로운 속성을 할당 하게 됩니다.


Callback 메서드를 통한 속성값 제어는 이미 css() 메서드에서 자세히 설명 했던 부분이므로 넘어 가도록 하겠습니다.


일반적인 자바스크립트를 통해서도 속성에 접근이 가능합니다만, 브라우저마다 지원하는 방식이 다르기 때문에 속성값을 사용할 경우에는 jQuery의 attr() 메서드를 사용하시는 것이 정신 건강에 매우 좋습니다.




.removeAttr()

attr_002.jpg

 

attr() 메서드를 통해 속성값을 추가 했으니, 이제 삭제를 시키는 방법에 대해 알아 보도록 하겠습니다. 

attr(“attributeName”, ””); 와 같은 방법으로 해당 속성값을 삭제(?) 할 수도 있습니다만, FireBug와 같은 툴을 사용해 확인을 해 보면 값만 빈 값으로 변경이 된걸 확인 할 수 있습니다. (당연하다고요 ? 죄송합니다… 혹시나 해서….)


removeAttr() 메서드를 사용시 해당 속성에 대한 이름과 값이 모두 제거되며, 역시나, 자바스크립를 통한 속성값 삭제 보다는 해당 메서드를 사용하길 추천 드립니다.




.val()

attr_003.jpg

 

선택된 요소의 값을 가져옵니다. jQuery 에서 셀렉터 다음으로 가장 많이 사용되는 메서드가 아닌가 싶습니다.

Input, select 등의 요소에서 value에 해당하는 값을 가져오거나 설정하며, 자바스크립트의 document.getElementById(“txtName”).value; 와 동일한 역할을 합니다.


<input type=”text” name=”txtName” id=”txtName” />
var name = $(“#txtName”).val(); //입력된 값 가져오기
$(“#txtName”).val(“val를 이용한 새로운 값 입력”); //값 입력하기


Callback 함수의 경우 역시 앞서 설명한 부분과 동작이 완전 동일하여, 자세한 설명을 생략합니다.




.text() / .html()

선택된 개체의 text 또는 html을 가져오거나 사용자가 지정하는 값으로 설정하는 역할을 하는 메서드 입니다.

attr_004.jpg

attr_005.jpg  

 

두 개의 메서드 역시 앞서 설명 드린 부분과 사용방법이 크게 다르지 않습니다. 파라미터 인자의 유무에 따라 값을 설정 하거나, 해당 값을 가져오거나.....


사용 방법에 대해 설명 보다는 text 와 html에 대한 차이점에 대한 예제를 끝으로 이번 강좌를 마칠까 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var text = $("div").text();
            var html = $("div").html();
            alert(text);
            alert(html);
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    text 그리고 html??? 차이(1)
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    text 그리고 html??? 차이(2)
    </div>
</body>
</html>


attr_006.jpg

[$("div").text()]


attr_007.jpg

[$("div").html()]


두 메서드의 차이점이 보이시나요?

text()의 경우 html을 제외한 순수 text만 가져오는 반면에 html()의 경우는 text를 포함한 모든 html의 내용까지 가져 오는걸 확인 할 수 있습니다.

#개발자팁 #개발자 #팁자료실 #jquery
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
15-12-13 조회 2,526
15-12-13 조회 2,937
15-12-11 조회 2,600
15-12-11 조회 2,563
15-12-11 조회 2,564
15-12-10 조회 2,522
15-12-10 조회 2,583
15-12-10 조회 2,557
15-12-03 조회 3,198
15-12-03 조회 2,716
15-11-25 조회 2,795
15-11-09 조회 3,145
15-11-04 조회 2,964
15-06-09 조회 4,086
15-05-06 조회 5,084
15-03-28 조회 4,566
14-12-05 조회 4,993
14-10-25 조회 5,049
14-10-13 조회 4,266
14-10-03 조회 6,204
14-09-19 조회 4,959
14-09-18 조회 4,046
14-09-13 조회 4,605
14-09-03 조회 5,595
14-08-26 조회 4,204
14-08-26 조회 4,001
14-08-26 조회 3,976
14-08-11 조회 6,457
14-08-06 조회 4,123
14-08-06 조회 3,719
14-08-06 조회 3,925
14-08-01 조회 6,293
14-08-01 조회 3,841
14-07-30 조회 4,435
14-06-28 조회 5,159
14-06-28 조회 4,433
14-05-11 조회 4,583
14-05-09 조회 4,942
14-05-09 조회 7,704
14-04-30 조회 4,311
14-04-27 조회 4,190
14-04-25 조회 4,893
14-04-21 조회 3,873
14-04-21 조회 4,998
14-04-10 조회 4,598
14-04-01 조회 6,152
14-03-03 조회 3,530
14-02-25 조회 5,914
14-02-14 조회 5,193
14-02-13 조회 4,947
14-01-03 조회 4,438
13-12-06 조회 3,764
13-11-22 조회 5,521
13-11-18 조회 4,024
13-10-02 조회 4,443
13-10-02 조회 3,692
13-10-02 조회 3,956
13-10-02 조회 3,814
13-10-02 조회 4,179
13-09-16 조회 8,027
13-09-16 조회 5,393
13-08-18 조회 5,412
13-07-11 조회 4,056
13-07-10 조회 4,688
13-07-09 조회 4,727
13-07-09 조회 4,984
13-07-04 조회 4,484
13-07-04 조회 4,118
13-07-04 조회 4,237
13-07-01 조회 4,720
13-07-01 조회 4,550
13-07-01 조회 6,803
13-06-23 조회 4,374
13-06-05 조회 3,624
13-05-29 조회 4,866
13-05-10 조회 4,273
13-04-05 조회 4,888
13-04-05 조회 6,577
13-04-05 조회 1.1만
13-04-05 조회 7,170
13-04-05 조회 6,561
13-03-31 조회 5,831
13-03-31 조회 4,158
13-03-28 조회 4,519
13-03-28 조회 6,714
13-03-28 조회 9,195
13-03-28 조회 4,329
13-03-24 조회 3,946
13-03-21 조회 4,619
13-03-21 조회 1.8만
13-03-14 조회 3,929
13-03-10 조회 4,744
13-03-10 조회 4,500
13-03-10 조회 4,200
13-03-08 조회 5,256
13-03-08 조회 4,365
13-03-03 조회 5,019
13-03-03 조회 7,466
13-03-03 조회 4,215
13-03-03 조회 1.1만
글쓰기