반응형
요소의 조작과 관련된 JQuery의 메서드에 대해 정리해보았다. 목차는 다음과 같다.
내용을 표로 간결히 확인할 수 있도록 하였기에 더 자세한 내용은 각 단락별로 첨부된 링크를 통해 확인할 수 있다.
각 메서드별 경계가 모호하다고 느껴질때는 특정 메서드들의 차이점을 검색하여 이해할 수 있다.
1. getter & setter
1) getter
2) setter
2. 요소(컨텐츠)의 추가
3. 요소(컨텐츠)의 복사 및 삭제
1) 복사
2) 삭제
1. getter & setter
1) getter
아래의 보기를 통해 표를 이해할 수 있다.
<script>
$(function(){
var msg=$("#name").메서드();
alert(msg);
});
</script>
<body>
<div id="name">
<span>안녕하세요</span>
</div>
</body>
| 메서드 | 내용 |
| html() | 선택요소 하위의 태그와 문자열을 전부 가져옴 ex) <span>안녕하세요</span> |
| text() | 선택요소 하위의 문자열만 가져옴 ex) 안녕하세요 |
| val() | input등의 value속성의 값을 가져옴 |
| attr(인자:속성명) | 선택요소, 지정된 속성의 값을 string으로 가져옴 |
| prop(인자:속성명) | 선택요소, 지정된 프로포티의 값을 가져옴 (boolean, date, function 등) |
2) setter
| 메서드 | 내용 |
| html(인자) | 선택요소에 인자를 값으로 설정 |
| text(인자) | 선택요소에 인자를 문자값으로 설정 |
| val(인자) | 선택요소 value속성에 인자를 속성값으로 설정 |
| attr("속성", "값") | 선택요소에 지정한 속성과 그 값을 설정 |
| prop("속성", "값") | 선택요소에 지정한 속성과 그 값을 설정 |
http://www.tcpschool.com/jquery/jq_elementSelection_access
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
2. 요소(컨텐츠)의 추가
$("선택자").메서드(인자)
| 메서드 | 내용 |
| append() | 선택요소의 마지막에 인자를 추가 |
| appendTo() | 인자로 들어온 요소의 마지막에 선택요소를 추가 |
| prepend() | 선택요소의 처음에 인자를 추가 |
| prependTo() | 인자로 들어온 요소의 처음에 선택요소를 추가 |
| before() | 선택요소의 바로 앞에 인자를 추가 |
| insertBefore() | 인자로 들어온 요소의 바로 앞에 선택요소를 추가 |
| after() | 선택요소의 바로 뒤에 인자를 추가 |
| insertAfter() | 인자로 들어온 요소의 바로 뒤에 선택요소를 추가 |
| wrap() | 선택자를 포함하는 새로운 요소(=인자)를 추가 ex) $(".content").wrap("<div class='wrap'></div>") => 인자의 내용이 .content의 부모요소가 됨 |
| wrapAll() | 선택자 모두를 포함하는 새로운 요소(=인자)를 추가 |
| wrapInner() | 선택자에 포함되는 요소(=인자)를 추가 |
http://www.tcpschool.com/jquery/jq_elementManupulating_insert
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
3. 요소(컨텐츠)의 복사 및 삭제
1) 복사
| 메서드 | 내용 |
| clone() | 선택한 요소를 복사함 ( 요소를 추가하는 메서드를 활용하여 복사한 요소를 어딘가에 추가할 수 있다. ) |
<!-- 인자에 선택요소의 복사 내용을 추가 -->
$("선택자").clone().appendTo(인자)
2) 삭제
| 메서드 | 내용 |
| replaceAll() | 인자를 선택요소로 대체 |
| replaceWith() | 선택요소를 인자로 대체 |
| remove() | 선택요소를 DOM트리에서 삭제 (인자를 활용하여 선택할 요소를 더 구체적으로 정의 가능) |
| detach() | 선택요소를 DOM트리에서 삭제 ( 해당 메서드는 삭제된 요소를 반환한다. 이를 활용하여 재추가가 가능하다. ) |
| empty() | 선택요소의 자식요소를 모두 삭제 |
| unwrap() | 선택요소의 부모요소를 모두 삭제 |
http://www.tcpschool.com/jquery/jq_elementManupulating_cloneDelete
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
반응형
'JavaScript > JQuery' 카테고리의 다른 글
| [tooltip] JQuery-ui.js, 요소 tooltip 생성부터 커스텀까지 (4) | 2023.12.07 |
|---|---|
| AJAX로 json데이터 넘겨받기 (0) | 2022.08.04 |
| 타임슬라이더 구현 (0) | 2022.06.24 |
| aJax와 Json (0) | 2022.02.23 |
| jQuery의 사용(연결방법 포함) (0) | 2022.02.22 |
