출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.

Set Content - text(), html() and val()


get과 동일한 메소드를 사용한다. 

text() - 선택된 요소들을 set 또는 리턴한다. 

html() - html 마크업을 포함한 선택된 요소를 set 또는 리턴한다.

val() - 폼 필드의 값을 set 또는 리턴한다.


text(), html() and val()를 위한 콜백함수

- 콜백함수는 두 개의 파라미터를 가진다. 선택된 요소들의 리스트 중 현재 요소의 index + value 값.

 String 값을 리턴한다. 


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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text(function(i, oriText){
            return "old text : " + oriText + " new text : Hello world (index: " +i+ ")";
        });
    });
    
    $("#btn2").click(function(){
        $("#test2").html(function(i, oriText){
            return " old html : " + oriText + " new html : hello <b>world</b> (index :" + i + ")";
        });
    });
});
</script>
</head>
<body>
 
<p id="test1">This is a <b>bold</b> paragraph.</p>
<p id="test2">This is another <b>bold</b> paragraph.</p>
 
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
 
</body>
</html>
cs


Set 속성 : attr( )

jQuery attr 메소드는 속성값을 set 하거나 바꾼다.


ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#w3s").attr("href", "https://www.w3schools.com/jquery");
    });
});
</script>
</head>
<body>
 
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>
 
<button>Change href Value</button>
 
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
 
</body>
</html>
cs


저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Remove 요소  (0) 2017.08.14
jQuery - Add Elements  (0) 2017.08.13
jQuery Effects 제이쿼리 효과 - callback  (0) 2017.08.11
jQuery Effects 제이쿼리 효과 - Animate (1)  (0) 2017.08.11
jQuery Effects 제이쿼리 효과 - sliding  (0) 2017.08.10

+ Recent posts

티스토리툴바