jQuery API: Attribute, CSS

http://jquery.com

목차

Attribute
CSS

Attributes

DOM의 속성 제어

● Attr

attr(attributeName) : 해당 속성 이름의 값을 return 한다. 매치되는 첫번째 것만 가져옴

?

1 2 3 4 5 6 7 8 9 10

$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());          // IE6 또는 7에서 속성을 추가, 제거 할 경우 prop() , removeProp() 메소드 사용        jQuery("input[type='text']").prop("disabled", true);   // 주의 : jQuery의 src 어트리뷰트에 대한 attr 함수를 이용하여 동일한 경로의 // 사진을 업데이트 하려고 할 때, 크롬의 경우에는 src 속성이 같으면 이미지를 // 새로 불러오지 않는 다. 이런 경우 다음과 같은 방법을 사용 한다.          $("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());

 

attr(attributeName, value) : 해당 요소의 속성(attributeName)의 값을 변경시킨다.

?

1 2 3 4

// a라는 id를 가진 요소의 src경로를 img/test.gif로 변경한다.  $(function(){      $("#a").attr("src", "img/test.gif");  });

 

attr(attributeName, fn) : 해당 요소의 속성(attributeName)의 값을 function으로 변경 한다.

?

1 2 3 4 5 6

// a라는 id를 가진 요소의 src경로를 img/ + 해당속성의 title + .gif 경로로 변경시킨다. $(function(){     $("#a").attr("src", function(){       return "img" + this.title + ".gif";     }); });

 

attr(map) : 해당 요소에 여러 속성을 변경한다.

?

1 2 3 4 5 6 7 8

// a라는 id를 가진 요소의 src경로를 img/test.gif로 title과 alt는 test로 변경한다.  $(function(){      $("#a").attr({          src : "img/test.gif",          title : "test",          alt : "test"      });  });

 

removeAttr(attributeName) : 해당 요소의 속성(attributeName)을 제거한다.

?

1 2 3 4 5 6 7 8

// a라는 id를 가진 요소의 disabled 속성을 제거한다.  $(function(){     $("#a").removeAttr("disabled");  });    // img 태그의 src 속성 제거 시 주의 사항   $('#img').removeAttr("src");  // Firefox, IE7-9, and Safari.   $("#img").attr("src", "");  // Chrome

 

prop(propertyName[, value])

 : prop()은 attr()과 매우 흡사한 메서드지만 사용방식에 따라 결과값이 다를 수 있다.

※ 주의 : attribute와 property는 다른 개념이니 반드시 구분할 것

 요소에 적용할 수 있는 속성 중 disabled="disabled", 혹은 readonly="readonly" 등과 같은 속성을 대상으로 할 때

attr('disabled')은 해당 속성이 있을 경우엔 "disabled", 없을 경우엔 undefined를 리턴하지만 prop('disabled')의 경우엔 true/false를

리턴한다. 

 또 다른 예로 <input>태그가 갖는 값인 value는 상황에 따라 attribute가 될 수도, property가 될 수도 있는데 만약 HTML 코드 상 value를 직접 적어넣었다면 해당 값은 attribute value로 존재하지만 jQuery의 val()이나 javascript의 value를 통해 값이 바뀌면해당 값은 property value로 존재한다. (이 때 attribute value는 사라지지 않지만 화면상 값은 바뀐다.) 뿐만 아니라 브라우저에서 input 폼에 직접 값을 적어넣어도 이 값은 attribute가 아니라 property로 존재한다. 때문에 $('input').attr('value')는 undefined이지만 prop('value')로 가져올 수 있다. 

property와 attribute의 차이 ^[각주:1]

removeProp(propertyName) : removeAttr()과 같음.

● Class

addClass(className), addClass( function(index, currentClass) )

 : 매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가한다.

 : className : (String)클래스명을 포함하는 문자열, 여러 클래스명을 추가할 때는 공백으로 구분한다. 

 : return 확장집합 

?

1 2 3 4 5 6 7

// a 라는 id를 가진 요소에 boxTF라는 class를 추가한다.  $("#a").addClass("boxTF");   // b 라는 id를 가진 요소에 boxTA라는 class를 추가한다.  $("#b").addClass(function() {     return "boxTA";  });

 

removeClass( [ className ]), removeClass( function(index, class))

 : 매개변수로 전달된 하나 이상되는 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거한다. 

 : className : (String)클래스명을 포함하는 문자열, 다수의 클래스명을 제거하는 경우 공백으로 구분한다. 

 : return 확장집합 

?

1 2	// a 라는 id를 가진 요소에 boxTF라는 class를 제거한다. $("#a").removeClass("boxTF");

 

 

toggleClass(className)

 : 매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다. 

 : className : (String)토글 대상 클래스명을 포함하는 문자열 

 : return 확장집합 

?

1 2	// a 라는 id를 가진 요소에 boxTF라는 class를 홀수번째는 추가를 짝수번째는 제거한다. $("#a").toggleClass("boxTF");

 

toggleClass(class, switch)

 : 지정 CSS 클래스를 switch가 true이면 추가하고 false(이)라면 삭제

?

1 2 3

// a 라는 id를 가진 요소에 $(this).attr("id") == "a" 값이 true일 경우            boxTF라는 class를 홀수번째는 추가를 짝수번째는 제거한다. $("#a").toggleClass("boxTF", $(this).attr("id") == "a");

 

toggleClass(function(index, class), [switch])  

 : function에서 리턴한 문자열의 이름을 가진 class를 click 할 경우 홀수번째는 추가를 짝수번째는 제거한다.

?

1 2 3 4

// a 라는 id를 가진 요소에 boxTF라는 class를 홀수번째는 추가를 짝수번째는 제거한다. $("#a").toggleClass(function() {    return "boxTF"; });

 

● HTML

html() : 최초의 요소로부터 HTML(을)를 문자열로서 취득한다. 이것은XML(을)를 대상에는 동작하지 않지만 XHTML은 유효

?

1 2 3 4

// 첫번째 p 태그안의 HTML을 리턴 받는다. var str = $("p:first").html(); -> 결과 : <b>자바</b> 프레임워크   : <p><b>자바</b> 프레임워크</p>

 

html(val) : 모든 요소에 인수로 건네준 HTML(을)를 세트 한다. 마찬가지로 XML에는 동작하지 않지만 XHTML은 유효

?

1 2	// a 라는 id를 가진 요소(div 태그등)에 html을 넣는다.  $("#a").html("<span>자바 <b>프레임워크</b></span>");

 

● Text

text() : 지정한 요소가 가지는 텍스트 노드를 결합해 돌려준다.

?

1 2 3 4

// 첫번째 p 태그안의 문자열을 리턴 받는다.(html은 제외된다.) var str = $("p:first").text(); -> 결과 : 자바 프레임워크   : <p><b>자바</b> 프레임워크</p>

 

text(val) : 지정한 요소에 텍스트 노드를 세트 한다.

?

1 2 3 4 5

// 첫번째 p 태그안의 문자열을 넣는다.(html을 넣는다 해도 텍스트화 된다..) $("p:first").text("<b>자바</b> 프레임워크");   : <p></p>     -> p 태그안에 『<b>자바</b> 프레임워크』가 표시된다                           (자바 진하게표시되지 않고 <b> </b>태그가 보인다.)

 

● Value

val() : 모든 요소가 가진 value속성의 값을 돌려준다.

?

1 2 3 4 5 6 7

// select 객체에서 선택된 value 속성의 값이 리턴  var str = $("#single").val();   :  <select id="single">      <option value="a">a</option>      <option value="b">b</option>  </select>

 

val(val) : 모든 요소에 value속성에 값을 설정한다. select를 selects 하거나 radio 등의 값을 설정하는 일도 가능.

?

1 2 3 4

// a라는 id를 가진 객체의 value 속성에 값을 설정 한다.(text 객체에 값을 설정)  $("#a").val("자바");   :   <input type="text" id="a" />

 

 

CSS

● CSS  

css(name)

 : 매치된 원소에서 주어진 스타일 속성이 발견되면 그 값을 반환

 : Return String    

?

1	var color = $(this).css("background-color");

 

css(properties)

 : 매치되어진 모든 원소에 주어진 키와 값으로 이루어진 속성들의 배열의 스타일을 적용하고 객체를 반환

 : Return jQuery 객체

?

1	$(this).css({ "background-color":"yellow", "font-weight":"bolder" });

 

 

css(name, value)

 : 하나의 속성과 값을 받아 매치되어진 모든 원소에 적용

 : Return jQuery 객체

?

1 2 3 4 5

$(this).css("color","red");   $("div.expandable").css("width", function(){      return $(this).width() + 20 + "px"; });

 

● Positioning

offset()

 : 최초의 요소의, 현시점에서의 표시 위치로부터의 offset을 취득

 : Return Object{top,left} 

?

1 2 3

var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );

 

position() : top, left(을)를 친요소로부터의 오프셋으로 취득

?

1 2	position().top position().left

 

scrollTop() : 현재의 스크롤 최상 위치를 취득

scrollTop(val) : 스크롤 상 위치를 지정

scrollLeft() : 현재의 스크롤상의 왼쪽 위치를 취득

scrollLeft(val) : 스크롤 왼쪽 위치를 지정

● Height and Width

height() : 최초의 요소의 높이를 픽셀로 리턴

height(val) : 모든 요소의 높이를 설정

width() : 최초의 요소의 가로폭을 픽셀로 리턴

width(val) : 모든 요소의 가로폭을 설정

innerHeight() : 최초의 요소의 내부 높이(border 제외한 padding)를 취득

innerWidth() : 최초의 요소의 내부 가로폭(border는 제외한 padding)를 취득

outerHeight([options]) : 최초의 요소의 외부 높이(border, padding(을)를 포함)(을)를 취득

outerWidth([options]) : 최초의 요소의 외부 가로폭(border, padding(을)를 포함)(을)를 취득

● 참고

- .height(), .width() : margin, border, padding 제외한 수치. 순수 element 영역

     IE 에서 만약 element 가 꽉채워지지 않았다면 height() 값은 세팅된 수치와 다를 수 있다.

     width() 는 IE 에서도 세팅된 수치와 동일.

     Chrome 에선 width() 나 height() 모두 elelment 과 꽉채워지건 아니건 세팅된 수치와 동일.

- .innerHeight(), .innerWidth() : margin, border 제외한 수치. element 와 padding 포함 영역.

     height() 에 padding-top + padding-bottom 를 더한 값.

     width() 에 padding-left + padding-right 를 더한 값.

     IE 에서 만약 element 가 꽉채워지지 않았다면 height() 값은 세팅된 수치와 다를 수 있다. width() 는 IE 에서도 세팅된 수치와 동일

- .outerHeight(), .outerWidth() : margin 제외한 수치. element, padding, border 포함 영역

     innerHeight() 에 border-top 의 두께 + border-bottom 의 두께를 더한 값.

     innerWidth() 에 border-left 의 두께 + border-right 의 두께를 더한 값.

     IE 에서 만약 element 가 꽉채워지지 않았다면 height() 값은 세팅된 수치와 다를 수 있다. width() 는 IE 에서도 세팅된 수치와 동일

- .outerHeight(true), .outerWidth(true) : element, padding, border, margin 포함 영역

     outerHeight() 에 margin-top + margin-bottom 을 더한 값.

     outerWidth() 에 margin-left + margin-right 을 더한 값.

     IE 에서 만약 element 가 꽉채워지지 않았다면 height() 값은 세팅된 수치와 다를 수 있다. width() 는 IE 에서도 세팅된 수치와 동일

     Chrome 에선 outerHeight(true) 값 없음.

- .offset().top, .offset().left

     절대좌표 (body 기준 상대좌표)

- .position().top, .position().left

     부모 element 기준 상대좌표

- .scrollLeft(), .scrollTop()

     element 의 스크롤 좌표

1. 대부분 "attribute는 element의 소유, property는 object의 소유개념"이란 출처를 알 수 없는 내용이다. [본문으로]