[ jQuery ] Attributes (속성)

Attr

1) attr(attributeName)

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

e.g.

// a 라는 id를 가진 요소의 title 속성을 b 라는 id를 가진 요소에 작성된다.
$(function(){
	let title = $("#a").attr("title");
	$("#b").text(title);
});

// *주의
// jQuery의 src attribute에 대한 attr 함수를 이용하여 같은 경로의 사진을 업데이트하려고 할 때,
// 크롬의 경우는 src 속성이 같으면 이미지를 새로 불러오지 않는다.
// 이런 경우 다음과 같은 방법을 사용
$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());

// IE6 또는 7에서 속성을 추가, 제거할 경우 prop(), removeProp() 메소드 사용
jQuery("input[type='text']").prop("disabled", true);

2) attr(attributeName, value)

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

e.g.

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

3) attr(attributeName, fn)

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

e.g.

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

4) attr(map)

해당 요소에 여러 속성을 변경한다.

e.g.

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

removeAttr(attributeName)

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

e.g.

// test 라는 id를 가진 요소의 disabled 속성을 제거한다.
$(function(){
	$("#test").removeAttr("disabled");
});

// img 태그의 src 속성 제거 시 주의 사항
$('#img').removeAttr("src");    // Firefox, IE7-9, Safari
$("#img").attr("src", "");      // Chrome

---

 

Class

1) addClass(ClassName)

addClass( function(index, currentClass) )

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

• 매개변수
• className : (String) 클래스 명을 포함하는 문자열, 여러 클래스 명을 추가할 때는 공백으로 구분한다.
• 반환 값 : 확장 집합

e.g.

// test 라는 id를 가진 요소에 a 라는 class를 추가한다.
$("#test").addClass("a");

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

2) removeClass( [ className ] )

removeClass( function(index, class) )

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

• 매개변수
• className : (String) 클래스 명을 포함하는 문자열, 다수의 클래스 명을 제거하는 경우 공백으로 구분한다.
• 반환 값 : 확장의 집합

e.g.

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

3) toggleClass(className)

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

• 매개변수
• className : (String) 토글 대상 클래스명을 포함하는 문자열
• 반환 값 : 확장 집합

e.g.

$("#test").toggleClass("")

4) toggleClass(class, switch)

지정 CSS 클래스를 switch 가 true 일 경우 추가하고, false 일 경우 삭제

e.g.

// test 라는 id를 가진 요소에 $(this).attr("id") = "test" 값이 true 일 경우 a 라는 class를 추가
$("#test").toggleClass("a", $(this).attr("id") = "test");

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

function에서 반환한 문자열의 이름을 가진 class를 click 할 경우 추가또는 제거한다.

e.g.

$("#test").toggleClass(function(){
	return "a"
});

---

 

HTML

1) html()

최초의 요소로부터 HTML 을 문자열로서 취득한다. 이는 XML을 대상으로는 동작하지 않지만, XHTML 대상으로는 동작한다.

e.g.

// 첫 번째 p 태그안의 HTML을 반환받는다.
let str = $("p:first").html();
//--==>> 결과 : <b>제이쿼리<b> 라이브러리
		:
<p><b>제이쿼리</b> 라이브러리</p>

2) html(val)

모든 요소에 인수로 건네준 HTML을 set 한다. 이는 XML을 대상으로는 동작하지 않지만, XHTML 대상으로는 동작한다.

e.g.

// a 라는 id를 가진 요소(div 태그 등)에 html을 넣는다.
$("a").html("<span>제이쿼리 <b>라이브러리</b></span>");

---

 

Text

1) text()

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

e.g.

// 첫 번째 p 태그안의 문자열을 리턴 받는다. (html은 제외된다.)
let str = $("p:first").text(); 
//--==>> 결과 : 제이쿼리 라이브러리
		:
<p><b>제이쿼리</b> 라이브러리</p>

2) text(val)

지정한 요소에 텍스트 노드를 set 한다.

e.g.

// 첫 번째 p 태그 안의 문자열을 넣는다. (html을 넣는다고 해도 텍스트화 된다.)
$("p:first").text("<b>제이쿼리</b> 라이브러리");
		:
<p></p>
//--==>> p 태그 안에 [<b>제이쿼리</b> 라이브러리] 가 표시된다. ([제이쿼리]는 진하게 표시되지 않고 <b> </b> 태그가 그대로 보인다.)

---

 

Value

1) val()

모든 요소가 가진 value 속성의 값을 반환한다.

e.g.

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

2) val(val)

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

e.g.

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