더보기
jQuery의 content 영역 관련 메소드에 대해 알아보자
라이브러리 연결 해 준 뒤에 진행!
Content 영역 (innerHTML, innerText) 관련 메소드
*html("문구") 메소드: innerHTML 속성과 관련된 메소드
✔️ 선택된 요소의 content영역 (시작태그와 종료태그 사이)을 리턴해 주거나 또는 변경해 주는 메소드
👉🏻$("선택자").html(): 선택된 요소의 content 영역의 값을 반환해 줌(자바로 따지면 getter 역할)
👉🏻 $("선택자").html("문구"): 선택된 요소의 content 영역의 값을 해당 문구로 변경해 줌 (자바로 따지면 setter 역할)
<h1 id="test1">
<a>네이버로</a>
</h1>
<h1 id="test2">
</h1>
<script>
$(function() {
// 순수 자바스크립트 방식
// var tmp = document.getElementById("test1").innerHTML;
// console.log(tmp);
// jQuery 방식
var tmp = $("#test1").html();
console.log(tmp); // "<a>네이버로</a>" => html 태그까지 문자열로써 가지고 와짐
// 순수 자바스크립트 방식
// document.getElementById("test2").innerHTML = tmp;
// jQuery 방식
$("#test2").html(tmp); // a 태그가 해석이 돼서 출력
$("#test2").children().attr("href","http://www.naver.com");
// 위에서 만든 태그에 href 속성 추가 (attr 메소드 이용)
});
</script>
<!-- div[class=class1]{test1}*3 + Enter -->
<div class="class1">test1</div>
<div class="class1">test1</div>
<div class="class1">test1</div>
<script>
$(function() {
// html() 메소드든 text() 메소드든 간에 매개변수로 "함수" 제시 가능
// 매개변수로 문자열 제시 시: 해당 문자열의 내용이 그대로 innerHTML 속성에 대입
// $(".class1").html("<h1>ㅋㅋㅋㅋㅋ</h1>");
// 매개변수로 함수를 제시 시: 해당 함수의 리턴값을 일부러 문자열로 지정
/*
$(".class1").html(function() {
return "<h1>ㅋㅋㅋㅋㅋ</h1>";
});
*/
// 매개변수로 함수를 제시하되 각 다른 내용으로 출력하고 싶을 때는?
// 선택된 요소들에 순차적으로 접근할 때마다 실행되게끔 매개변수로 함수 제시
// 이때, 함수 실행 시 리턴된 값이 매번 바뀌게끔 지정
/*
var count = 0;
$(".class1").html(function() {
return "<h1>" + count++ + "</h1>"; // 매번 변하는 값을 리턴(마치 반복문처럼)
});
*/
// => 함수의 매개변수로 함수를 제시하는 것: 콜백함수
// 함수 실행 후의 반환된 결과를 매개변수로 반영
// 해당 function이 호출될 때마다
// 첫 번째 매개변수로는 순차적으로 접근하는 요소의 인덱스 수가,
// 두 번째 매개변수로는 순차적으로 접근하는 요소의 content 영역값이 전달
// => 알게 모르게 두 개의 매개변수가 전달
$(".class1").html(function(index, html) {
return "<h1>인덱스: " + index + ", content 내용: " + html + "</h1>";
});
// 이렇게 반복문처럼 활용도 가능함!
});
</script>
* text("문구") 메소드: innerText 속성과 관련된 메소드
✔️ 선택된 요소의 content 영역의 테스트만 리턴해 주거나 변경해 주는 메소드
👉🏻 $("선택자").text(): 선택된 요소의 content 영역을 반환해 줌 (자바로 따지면 getter 역할)
👉🏻 $("선택자").text("문자"): 선택된 요소의 content 내용을 전달값으로 변경해 줌 (자바로 따지면 setter 역할)
<순수 자바스크립트와 jQuery 방식 차이 확인하기>
<h1 id="test3">
<a>구글로</a>
</h1>
<h1 id="test4">
</h1>
<script>
$(function() {
// 순수 자바스크립트 방식
// var tmp = document.getElementById("test3").innerText;
// console.log(tmp);
// => 순수하게 텍스트로만 끌고 와짐
// jQuery 방식
var tmp = $("#test3").text();
console.log(tmp); // "구글로"
// 순수 자바스크립트 방식
document.getElementById("test4").innerText = "<a>" + tmp + "</a>";
// jQuery 방식
$("#test4").text("<a>" + tmp + "</a>"); // 문자열에 태그가 포함되더라도 태그로 해석이 안 됨
});
</script>
*내부적으로 반복을 function() 형태로 돌려 주는 방법
<!-- div[class=class2]{test2}*3 + Enter -->
<div class="class2">test2</div>
<div class="class2">test2</div>
<div class="class2">test2</div>
<script>
$(function() {
// $(".class2").text("<h1>ㅎㅎㅎㅎㅎ</h1>");
/*
$(function() {
$(".class2").text("<h1>ㅎㅎㅎㅎㅎ</h1>");
});
*/
/*
var count = 0;
$(".class2").text(function() {
return "<h1>" + count++ + "</h1>";
});
*/
$(".class2").text(function(index, text) {
return "<h1>인덱스: " + index + ", 내용: " + text + "<h1>";
});
});
</script>