[jQuery] jQuery 함수 - attr, val, data 등

attr()
- 엘리먼트의 속성 값을 가져오거나 변경할 수 있는 함수

• 하나의 인자를 주면 해당 속성 값만을 조회하고, 두 개를 주면 해당 속성 값을 변경한다.

<script>
	// "testName"을 가져옴
	$("#testDiv").attr("name");
    
	// name 속성 "testName"을 "attrName"으로 변경
	$("#testDiv").attr("name", "attrName");
</script>

<div id="testDiv" name="testName">TestContent</div>

 

prop()
- 엘리먼트의 속성 값을 가져오거나 변경한다는 점에서 attr()과 유사하지만,
아무 속성 값이 아니라 true와 false 값만 가지는 속성 값을 관리한다.

<script>
	//true를 가져옴
 	$("#testDiv").prop("hidden");
    
 	//readonly 속성 "true"를 "false"로 변경
 	$("testDiv").prop("readonly", "false");
</script>

<div id="testDiv" hidden="true" readonly="true">TestContent</div>

 

addClass()
- 클래스가 없는 엘리먼트에 class 속성을 추가한다.

<script>
	// class 속성 "testClass"를 추가한다.
	$("#testDiv").addClass("testClass");
</script>

<div id="testDiv">TestContent</div>

 

 

removeClass()
- 클래스가 있는 엘리먼트의 class 속성을 삭제한다.

<script>
	// class 속성 "testClass"를 삭제한다.
	$("#testDiv").removeClass("testClass");
</script>

<div id="testDiv" class="testClass">TestContent</div>

 

val()
- 엘리먼트가 가지고 있는 value 속성(값)을 관리한다.

• 인자를 넣지 않으면 value를 가져오고 인자를 넣어주면 value를 인자 값으로 변경한다.

<script>
	// value 속성 "testValue1"을 가져온다.
	$("#testDiv").val();
    
	// value 속성 "testValue1"을 "testValue2"로 변경한다.
	$("#testDiv).val("testValue2");
</script>

<div id="testDiv" value="testValue1">testContent</div>

 

toggleClass()
- 엘리먼트가 인자로 넣은 class를 가지고 있다면 제거하고 가지고 있지 않다면 생성한다.

<script>
	// 클래스 "testClass"를 추가한다.
	$("#testDiv").toggleClass("testClass");
    
	// 위에서 생성한 클래스 "testClass"를 삭제한다.
	$("#testDiv").toggleClass("testClass");
</script>

<div id="testDiv">TestContent</div>

 

height() / width()
- height()는 엘리먼트의 높이를, width()는 엘리먼트의 너비를 가져온다.

• 각각 인자를 넣어주면 높이와 너비를 인자 값으로 설정한다.

<script>
	// 해당 엘리먼트의 높이를 가져옴
	$("testDiv").height();
    
	// 해당 엘리먼트의 높이를 500으로 설정함
	$("testDiv").height(500);
    
	// 해당 엘리먼트의 너비를 가져옴
	$("testDiv").width();
    
	// 해당 엘리먼트의 너비를 500으로 설정함
	$("testDiv").width(500);
</script>

<div id="testDiv">testContent</div>

 

css()
- 엘리먼트의 스타일 속성을 가져오거나 변경한다.

• 인자를 하나만 입력하면 해당 속성을 가져오고 두 개를 입력하면 속성을 변경한다.

<script>
	// 엘리먼트의 color 속성 "red"를 가져온다.
	$("#testDiv").css("color");
    
	// 엘리먼트의 color 속성 "red"를 "blue"로 변경한다.
	$("#testDiv").css("color", "blue");
</script>

<div id="testDiv" style="color:red">TestTitle</div>

 

⬇️ css 여러 개를 변경할 때

$(".regist-study-room-box").css({
	"margin":"20px auto",
	"width":"90%",
	"height": "90%",
	"border": "1px solid #fff",
	"background": "#fff",
	"border-radius": "10px",
	"padding":"16px"
});

 

text() / html()
- text()는 태그를 제외한 text만을 가져오고,
- html()은 html 태그를 포함한 text를 가져온다.

<script>
	// "TestContent"를 가져온다.
	$("#testDiv").text();
    
	// "<br>TestContent</br>"을 가져온다.
	$("#testDiv").html();
</script>

<div id="testDiv">
	<br>TestContent</br>
</div>

 

data()
- 엘리먼트에 data를 저장하고 이를 불러올 수 있도록 해준다.

• data - key 형태로 사용하면 key로 불러오거나 조작하면 된다.

<script>
	// data-name 속성의 값 "테스트"를 가져온다.
	$("#testDiv").data("name");
    
	// data-userId 속성의 값 "Aeco"를 가져온다.
	$("#testDiv").data("userId");
    
	// data-userId 속성의 값 "Aeco"를 코딩으로 변경한다.
	$("#testDiv").data("userId", "코딩");
</script>

<div id="testDiv" data-name="테스트" data-userId="Aeco">TestContent</div>