개발자의 길/jQuery

jQuery getter/setter

모쿠 2017. 4. 10. 15:22

<jQuery 데이터 get, set>


* 대부분의 jQuery 함수들은 매개변수의 개수에 따라서 getter와 setter로 사용 가능

 - html(): HTML 요소 내부의 html 코드를 리턴

 - html('문자열'): HTML 요소 내부에 html 코드를 씀(setter)

 - text(): HTML 요소 내부의 텍스트(문자열)을 리턴

 - text('문자열'): HTML 요소 내부에 텍스트(문자열)을 씀

 - attr('attr 이름'): 속성(attribute)의 값을 리턴

 - attr('attr 이름', 'attr 값'): 속성(attr)의 값을 설정

 - css('css 프로퍼티 이름'): CSS 프로퍼티 값을 리턴

 - css('css 프로퍼티 이름', 'value'): CSS 프로퍼티에 값을 설정

 - val(): input 상자에 입력된 값을 리턴

 - val('값'): input 상자에 값을 씀


<05_getset.html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- jQuery CDN 포함: 라이브러리 포함 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
 
<script type="text/javascript">
$(document).ready(function() {
    
    $('#btn1').click(function() {
        var msg = $('p').html(); //innerHTML에 해당
        $('#output').html(msg);
    });
    $('#btn2').click(function() {
        var msg = $('p').text(); // textContent 
        $('#output').html(msg);
    });
    
});
</script>
 
</head>
<body>
 
<h1>jQuery getter/setter</h1>
 
<p>우리는 <b>jQuery</b>를 공부하고 있습니다...</p>
<button type="button" id="btn1">HTML</button>
<button type="button" id="btn2">Text</button>
 
<div id="output">
</div>
 
</body>
</html>
cs



<출력화면>



저작자표시 비영리