[제이쿼리] jQuery 속성조작 메서드

 

 

제이쿼리(jQuery) 속성 조작 메서드

---

안녕하세요? 장장스입니다.

제이쿼리 객체조작 메서드를 포스팅하려고 합니다. 객체 조작 메서드는 객체를 생성하거나 조작, 복제할 수  있습니다. 이번 포스팅은 그 중 하나인 속성 조작 메서드를 포스팅하겠습니다.

 

 

속성조작 메서드

---

속성 조작 메서드는 말그대로 속성 조작 메서드는 요소의 속성을 바꿀 때 사용합니다. 수치를 바꿀 땐 수치 조작 메서드, 객체를 생성하거나 삭제 또는 복제할 때 사용하는 객체 조작 메서드가 있습니다.

 

 

 

html( ) /text( ) 메서드

---

종류	설명
$("요소 선택").html();	선택한 요소의 하위 요소를 가져와 문자열로 반환합니다.
$("요소 선택").html("새 요소");	선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소를 생성합니다.
$("요소 선택").text();	선택한 요소의 텍스트만 가져옵니다.
$("요소 선택").text("새 텍스트");	선택한 요소의 하위 요소를 전부 제거하고 지정한 텍스트를 생성합니다.

▼javascript

	$(function(){
		var result_1 = $("#sec_1").html( );
		console.log(result_1);
		$("#sec_1 p").html("<a href=\"#\">Text1</a>");

		var result_2 = $("#sec_2").text( );
		console.log(result_2);    
		$("#sec_2 h2").text("text()");
	});

▼html

<h1><strong>객체 조작 및 생성</strong></h1>
	<section id="sec_1">
		<h2><em>html()</em></h2>
		<p>내용1</p>
	</section>
	<section id="sec_2">
		<h2><em>텍스트()</em></h2>
		<p>내용2</p>
	</section>

 

 

attr()/removeAttr() 메서드

---

종류	설명
$("요소 선택").attr("속성명");	선택한 요소의 지정한 속성값을 가져옵니다.
$("요소 선택").attr("속성명", "새 값");	요소를 선택하여 지정한 속성값을 적용합니다.
$("요소 선택").attr({"속성명1": "새 값1",     "속성명2": "새 값2",    ...     "속성명n": "새 값n"});	요소를 선택하여 지정한 여러 개의 속성 값을 적용합니다.
$("요소 선택").removeAttr("속성");	선택한 요소에서 지정한 속성을 삭제합니다.

▼javascript

    $(function(){
        var srcVal = $("#sec_1 img").attr("src");
        console.log(srcVal);
        
        $("#sec_1 img").attr({
            "width":200,
            "src":srcVal.replace("pic_1.jpg","pic_2.jpg"),
            "alt":"사진2"
        }).removeAttr("border");
    });

▼html

  <h1>
        <strong>객체 조작 및 생성</strong>
  </h1>
  <section id="sec_1">
    <h2>이미지 속성</h2>
    <p>
    	<img src="images/pic_1.jpg" alt="사진1" border="2">
    </p>
  </section>

 

addClass()/removeClass()/toggleClass()/hasClass() 메서드

---

종류	설명
$("요소 선택").addClass("class 값");	요소를 선택하여 지정한 class 값을 생성합니다.
$("요소 선택").removeClass("class 값");	요소를 선택하여 지정한 class값을 삭제합니다.
$("요소 선택").toggleClass("class 값");	요소를 선택하여 지정한 class값이 있으면 삭제하고, 없으면 생성 합니다.
$("요소 선택").hasClass("class 값");	선택한 요소에 지정한 class 값이 있으면 true, 없으면 false를 반환합니다.

▼javascript

 $(function(){
        $("#p1").addClass("aqua");
        $("#p2").removeClass("red");
        $("#p3").toggleClass("green");
        $("#p4").toggleClass("green");
        $("#p6").text($("#p5").hasClass("yellow"));       
    });

▼html 

   <p id="p1">내용1</p>
   <p id="p2" class="red">내용2</p>
   <p id="p3">내용3</p>
   <p id="p4" class="green">내용4</p>
   <p id="p5" class="yellow">내용5</p>
   <p id="p6"></p>

 

val() 메서드

---

선택한 폼 요소의 value 속성값을 가져오거나 새 값을 적용할 때 사용합니다.

종류	설명
$("요소 선택").val();	선택한 폼 요소의 value 속성값을 가져옵니다.
$("요소 선택").val("새 값");	요소를 선택하여 value 속성에 새 값을 적용합니다.

▼javascript

    $(function(){
        var result_1 = $("#user_name").val();
        console.log(result_1);
        $("#user_id").val("javascript");
        var result_2 = $("#user_id").prop("defaultValue");
        console.log(result_2);
    });

▼html

<h1>객체 조작 및 생성</h1>
   <form action="#" id="form_1">
    <p>
        <label for="user_name">이름</label>
        <input type="text" name="user_name" id="user_name" value="용대리">
    </p>
    <p>
        <label for="user_id">아이디</label>
        <input type="text" name="user_id" id="user_id" value="hello">
    </p>
   </form>

 

prop() 메서드

---

prop() 메서드는 선택한 폼 요소(선택 상자, 체크 박스, 라디 버튼)의 상태 속성값을 가져오거나 새롭게 설정할 때 사용합니다. 그리고 선택한 요소의 태그명, 노드 타입, 선택 상자의 선택된 옵션의 인덱스 값도 알 수 있습니다

종류	설명
$("요소 선택") .prop("[checked | selected]");	선택한 폼 요소가 체크된(checked)상태인지, 선택된(selected) 상태인지 알 수 있습니다. 예를 들어 선택한 요소가 체크 박스(checkbox)이고 체크된 상태에서 prop("checked")를 적용하였다면 true를 아니면 false를 반환합니다.
$("요소 선택") .prop("[checked | selected]",[true|false]);	폼 요소(체크 박스, 라디오 버튼, 선택 상자)를 선택하여 체크 또는 선택 상태를 바꿀 수 있습니다.
$("요소 선택") .prop("[tagName | nodeType | selectedIndex | defaultValue]");	선택한 요소의 태그명이나 노드 타입, 선택된 옵션의 인덱스값을 구합니다. 이때 폼 요소에 prpo("defaultValue")를 사용하면 사용자가 value 속성값을 바꿔도 초기의 value 속성값을 가져옵니다.

 

Post

---

• [제이쿼리] jQuery 속성조작 메서드
• [제이쿼리] jQuery 수치조작 메서드
• [제이쿼리] jQuery 객체편집 메서드

References

---

• 생활코딩: 선택자
• w3schools
• TCP school

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)