JongDDA의 한걸음 한걸음씩
[JavaScript & Jquery] 객체 조작 메소드 본문
728x90
객체 조작 메소드
객체를 생성, 복제, 삭제, 변경할 수 있는 객체 조작 메소드에 대해 알아보겠다. 객체 조작 메소드는 속성 조작 메소드와 수치 조작 메소드 그리고 객체 편집 메소드로 구분할 수 있다.
속성 조작 메소드
요소의 속성을 바꿀 때 사용하는 메소드를 통틀어 속성 조작 메소드라 한다.
html()
html() 메소드는 선택한 요소에 포함되는 하위 요소를 불러오거나 하위 요소를 새 요소로 바꿀 때 사용한다.
text()
text() 메소드는 선택한 요소 내에 텍스트를 불러오거나 텍스트를 바꿀 때 사용한다.
css()
css() 메소드는 선택한 요소에 지정한 스타일 속성값을 읽거나 변경할 때, 또는 새로운 스타일을 적용할 때 사용한다.
attr() / removeAttr()
attr() 메소드는 요소에 새 속성을 추가하거나 기존의 속성을 변경할 때, 그리고 요소의 속성값을 읽어들일 때 사용한다. removeAttr() 메소드는 기존의 속성을 삭제할 때 사용한다.
addClass() / removeClass() / hadClass()
addClass() 는 클래스 속성을 추가할 때, removeClass() 는 클래스를 삭제할 때, hasClass() 는 클래스 속성값 여부를 확인할 때 사용한다.
예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체 조작 메소드</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</script>
<style>
.hidden{
display: none;
}
</style>
</head>
<body>
<h1 class="title">제목입니다</h1>
<h2 class="sub-title">보조 제목입니다.</h2>
<p>2020년 프로그래머들에게 가장 사랑받는 언어 순위는?!</p>
<ol>
<li>자바스크립트</li>
<li>C 언어</li>
<li>자바</li>
<li>파이썬</li>
<li>타입스크립트</li>
<li>GO 언어</li>
</ol>
<p id="conclusion">지금 자신이 사용하고 있는 것을 사랑하자!</p>
<button>동의합니다</button>
<script src="03_script.js"></script>
</body>
</html>$(document).ready(function(){
// html(코드) : 선택한 요소의 HTML을 가져온다! 또는 편집한다.
const conc = $("#conclusion").html()
$("#conclusion").html(`<span>고민하지 말자! </span>${conc}!!`) // concclusion 아이디를 편집하였다.
// text(텍스트) : 선택한 요소의 문자열 내용을 가져오거나 편집한다.
// alert($("h1").text())
$("h1").text("이제는 제목이 바뀌었지~!")
// css("스타일속성명", "스타일속성값") : 스타일속성 변경!
// css("스타일 속성명") : 스타일 속성값 보기!
// 메소드 호출 이후에 메소드가 추가 호출될 수 있는 특성 : 체이닝!
// $("h2").css("color","red")
$("h2").css("background-color","blue").css("color","white")
console.log( $("h2").css("background-color"))
// attr() : 요소에 속성 추가하거나 속성 보기
// removeAttr() : 요소에서 속성 제거하기
$($("p")[0]).attr("class", "pl")
console.log($($("p")[0]).attr("class"))
$($("p")[0]).removeAttr("class") // 그 속성 없애!
console.log( $($("p")[0]).removeAttr("class") )
// addClass("클래스명") : 클래스 추가해!
// removeClass("클래스명") : 특정 클래스 삭제해!
// hasClass("클래스명") : 해당 클래스 있으면 true, 없으면 false
$("button").on("click",function(){
if($("ol").hasClass("hidden")){
$("ol").removeClass("hidden")
}else{
$("ol").addClass("hidden")
}
})
})
728x90
반응형
'개발 > 프론트엔드' 카테고리의 다른 글
| [JavaScript & Jquery] 효과 메소드 (애니메이션 효과) (0) | 2021.04.06 |
|---|---|
| [JavaScript & Jquery] 그룹 이벤트 등록 메소드 (0) | 2021.04.05 |
| [JavaScript & Jquery] 토글 클레스(toggleClass) (0) | 2021.04.04 |
| [JavaScript & Jquery] 선택자 (0) | 2021.04.04 |
| [Jquery] 제이쿼리란, 제이쿼리 연동하기 (0) | 2021.04.01 |
'개발/프론트엔드' Related Articles
more
Comments