목차
- 4개 메서드 정의
- 4개 메서드 반환
- 4개 메서드 설정
4개 메서드 정의
- text() 메서드 - 선택요소의 텍스트 내용 반환/설정
- htm() 메서드 - 선택요소의 HTML 내용 반환/설정.
- val() 메서드 - 폼양식의 필드값 반환/설정
- attr() 메서드 - 선택요소 속성값 반환/설정
4개 메서드 반환
[목차]
text() 메서드 - 텍스트 얻기
html() 메서드 - HTML 포함 텍스트 얻기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hz1").click(function(){
alert("Text: " + $("#homzzang").text());
// 결과: Text: Homzzang.com is best.
});
$("#hz2").click(function(){
alert("HTML: " + $("#homzzang").html());
// 결과: HTML: <b>Homzzang.com</b> is best.
});
});
</script>
<p id="homzzang"> <b>Homzzang.com</b> is best.</p>
<button id="hz1">Text 보기</button>
<button id="hz2">HTML 보기</button>
결과 보기
val() 메서드 - 입력값 얻기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#site").val());
// 결과: Value: Homzzang.com
});
});
</script>
<p>Name: <input type="text" id="site" value="Homzzang.com"></p>
<button>입력값 보기</button>
결과보기
attr() 메서드 - 속성값 얻기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#hz").attr("href"));
// 결과값: https://homzzang.com
});
});
</script>
<p><a href="https://homzzang.com.com" id="hz">Homzzang.com</a></p>
<button>href 속성값 보기</button>
결과보기
4개 메서드 설정
[목차]
text(), html(), val() 메서드 - 내용 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#site").text("홈짱닷컴");
});
$("#btn2").click(function(){
$("#domain").html("<b>Homzzang.com</b>");
});
$("#btn3").click(function(){
$("#manager").val("홈짱");
});
});
</script>
<p id="site">사이트.</p>
<p id="domain">도메인</p>
<p>운영자: <input type="text" id="manager" value="닉네임"></p>
<button id="btn1">Text 설정</button>
<button id="btn2">HTML 설정</button>
<button id="btn3">Value 설정</button>
결과 보기
text(), html(), val() 메서드 - 콜백함수
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#site").text(function(i, origText){
return "기존 text: " + origText + " 새 text: 홈짱닷컴 (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#domain").html(function(i, origText){
return "기존 html: " + origText + " 새 html: <b>Homzzang.com</b> (index: " + i + ")";
});
});
});
</script>
<p id="site"><b>사이트</b> 이름</p>
<p id="domain"><b>도메인</b> 주소</p>
<button id="btn1">기존/새 Text 보이기</button>
<button id="btn2">기존/새 HTML 보이기</button>
결과 보기
attr() 메서드 - 1개 속성값 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz").attr("href", "https://homzzang.com");
});
});
</script>
<p><a href="http://www.homzzang.com" id="hz">Homzzang.com</a></p>
<button>href 속성값 변경하기</button>
결과 보기
attr() 메서드 - 여러 속성값 동시 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz").attr({
"href" : "https://homzzang.com",
"title" : "웹코딩 기초 배우기"
});
});
});
</script>
<p><a href="http://www.homzzang.com" title="코딩" id="hz">홈짱닷컴</a></p>
<button>href 속성과 title 속성 동시에 바꾸기</button>
결과 보기
attr() 메서드 - 콜백함수
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz").attr("href", function(i, origValue){
return origValue + "/b/css";
});
});
});
</script>
<p><a href="https://homzzang.com" id="hz" target="_blank">홈짱닷컴 CSS 배우기</a></p>
<button>href 속성값 바꾸기</button>
결과 보기
