[JQuery] 웹요소 제어

1. $text()

 

실행 분류	형식
취득	$("div").text();
생성, 변경	$("div").text("텍스트 생성 및 변경");
콜백 함수	$("div").text(function(index, t){      // index는 각 div 요소의 index 0,1,2      // t는 각 div 요소의 텍스트 "내용1","내용2","내용3"      return 텍스트 // 각 div 요소의 텍스트를 생성, 변경할 수 있다.  });  ................  <div>내용1</div>  <div>내용2</div>   <div>내용3</div>

 

 

ex)

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	$(document).ready(function(){
		var str = $("#m1").text();
		console.log(str);
		
		$("#m1").text("제이쿼리");
		console.log($("#m1").text());
		
		$("#m2 > div").text(function(index, text){
			return "div 요소의 텍스트는 "+text+", index = "+index;
		});
	});
</script>

<div id="m1">jQuery</div>
<div id="m2">
	<div>html</div>
	<div>css</div>
	<div>javascript</div>
</div>

결과

2. $html()

 

실행 분류	형식
취득	$("div").html();
생성, 변경	$("div").html("<b>텍스트 생성 및 변경</b>");
콜백 함수	$("div").html(function(index, h){      // index는 각 div 요소의 index 0,1,2      // h는 각 div 요소의 자식 em 요소      return html // 각 div 요소의 자식 html를 생성 및 변경한다.  });  ................  <div><em>내용1</em></div>  <div><em>내용2</em></div>   <div><em>내용3</em></div>

 

ex)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	$(document).ready(function(){
		var str = $("#m1").html();
		console.log(str);

		var str2 = $("#m1").text();
		console.log(str2);
		
		$("#m1").html("<b>dancePKT</b>");
		
		$("#m2 > div").html(function(){
			return "<b>"+$(this).text()+"</b>";
		});
	});
</script>

<div id="m1"><b>jQuery</b></div>
<div id="m2">
	<div><em>html</em></div>
	<div><em>css</em></div>
	<div><em>javascript</em></div>
</div>

결과