html()
- 태그를 포함한 내용 가져오기
- 첫번째 거만 가져옴
(모든 태그 대상으로 할 때 반복문으로 가져옴)
$('태그').each(function(i, k){- str+=$('태그').eq(i).html()+"\n";
- str += $(k).html()+"\n"
- str += $(this).html()+"\n"
})
- innerHTML
text()
- 태그를 뺀 전체 내용만 가져오기
- 전체
- innerText
each문
더보기
더보기
더보기
* jQuery 일반 메서드
$(' ').each(function(index, item){ })
// index :배열의 인덱스 또는 객체의 키를 의미
// item : 해당 인덱스나 키가 가진 값을 의미* jQuery 유틸리티 메서드
$.each() arr에 저장된 key : value값을 item.key = value
$.each($('태그'), function (index, item) {})
// $.each() 메서드의 첫번째 매개변수로 위에서 선언한 배열은 전달
$.each(arr, function (index, item) {})<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
span{
background: gray;
}
</style>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
function proc1() {
// body안의 모든 내용 가져오기 - 태그 포함
// body태그 검색
// alert($('body').html());
// body안의 모든 내용 가져오기 - 태그 제외
// body태그 검색
alert($('body').text());
}
function proc2() {
// p태그 첫번째만 검색
// alert($('p').html());
let str = "";
let out = "";
// 모든 p태그를 대상으로 할때는 반복문을 사용한다
// i : index k : p[0], p[1], p[2]
// $('p').each(function(i, k){
$.each($('p'), function(i,k){
// str+=$('p').eq(i).html()+"\n";
// 가져오기 html태그 포함 (<span>)
// str += $(k).html()+"\n";
// out += $(this).html() + "<br>";
// 가져오기 html태그 포함X
str += $(k).text()+"\n";
out += $(this).text() + "<br>";
})
// result2
$('#result2').html(out);
// $('#result2').text(out);
alert(str);
// 모든 p태그 대상으로 문자만 가져옴
// alert($('p').text());
}
</script>
</head>
<body>
<div class="box">
<h3>html() : 태그를 포함한 내용 가져오기 - 첫번째 거만 가져옴 - innerHTML<br>
text() : 태그를 뺀 전체 내용만 가져오기 - 전체 - innerText <br></h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1">
<p><span>다람쥐</span>가 챗바퀴에 올라타</p>
<p><span>청설모</span>가 챗바퀴에 올라타</p>
<p><span>햄스터</span>가 챗바퀴에 올라타</p>
</div>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result2">
</div>
</div>
</body>
</html>'웹프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 메서드 (0) | 2024.05.20 |
|---|---|
| [jQuery] 필터 (+ prop('속성'), attr(), tagName) (0) | 2024.05.17 |
| [jQuery] 선택자 (0) | 2024.05.17 |
| [jQuery] js와 차이 (0) | 2024.05.16 |
| [jQuery] OT (0) | 2024.05.14 |
