[jQuery] attr(), html()와 text(), append()와 prepend()

attr() 함수

  • attr(‘속성’,’값’) : 선택한 요소의 속성을 생성,수정 하는 동작
  • css와 차이점
    • attr사용 : border color, border style적용안됨.
    • css사용 : border color, border style 적용됨.
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
39
40
41
42
43
$(function(){
$('img').attr('width', '200')
//1. 선택한 요소의 속성을 생성,수정 하는 동작 => attr('속성','값')
let src = $('img').attr('src');
alert("이미지파일 속성 : "+src);
//출력값
//여러 이미지 태그중 첫번재 이미지태그명만 확인가능

//2. 이미지태그 파일의 경로를 변경(그림변경)
//$('img').attr('src', '3.jpg')
//출력값 : 모든 이미지태그의 링크가 4.jpg로 변경됨

//3. 이미지태그의 테두리지정 : border를 크기10로 지정
//$('img').attr('border', '10')

//3. 이미지별로 테두리 5,10,15지정
//내코드 : 배열이용
let border = ['5', '10', '15']
$('img').attr('border', function(idx){
return border[idx];
})

//강사님코드 : 연산이용
let border = ['5', '10', '15']
$('img').attr('border',function(index){
return (index+1)*5;
})

//4. 여러 속성적용
//4-1. attr사용(border color, border style적용안됨)
$('img').css({
border : '5px solid red',
width : '300',
height : '150'
})

//4-2. css사용(border color, border style 적용됨)
$('img').attr({
border : '5px dotted blue',
width : '300',
height : '150'
})
})




html()함수와 text()함수

  • 글자읽기는 text()와 html() 동일한 결과값 출력함.

html() : 선택한 요소의 값을 리턴하거나 속성을 변경함.

  • 해당하는 가장 첫 요소의 값만 리턴.
  • 태그요소를 해당 태그가 적용되어 출력.

text() : 선택한 요소의 텍스트값을 리턴하거나 텍스트값을 변경함.

  • 해당하는 모든 요소의 텍스트값을 리턴.
  • 태그요소를 있는 문자 그대로 출력.
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
39
40
41
<head>
<!-- 제이쿼리 라이브러리연결 -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2> head - 0</h2>
<h2> head - 1</h2>
<h2> head - 2</h2>

<script type="text/javascript">
$(function(){
//1. html() 사용해서 h2 태그의 정보를 출력
let h = $('h2').html();
alert("html()값 : "+h);
//출력값
//html()값 : head - 0

//2. text() 사용해서 h2 태그의 정보를 출력
let t = $('h2').text();
alert("text()값 : "+t)
//출력값
//text()값 : head - 0 head - 1 head - 2

//3.text() 사용해서 div태그에 값을 변경
$('div').text('안녕');
$('div').text('<h3>텍스트함수 사용</h3>');

//4.html() 사용해서 div태그에 값을 변경
$('div').html('안녕');
$('div').html('<h3>텍스트함수 사용</h3>');

//5.h1태그를 a태그의 링크로 변경
//5-1.내코드
//$('h1').html("<a href='Test5.jsp'><h1>Test5.jsp</h1></a>");

//5-2.강사님코드 : 제목을 읽어와서 저장 -> 태그요소로 입력
let addr = $('h1').text()
$('h1').html("<a href="+addr+"><h1>Test5.jsp</h1></a>")
})
</script>
</body>




append()와 prepend()함수

태그선택자에 append()와 prepend()함수 적용

See the Pen oNxNZGG by sowon-dev (@gracehopperdev) on CodePen.

배열에 append()와 prepend()함수 적용

  • 활용도가 높다.

html테이블에 arr을 담아보자.

  • 배열의 값을 각각 접근해서 테이블행에 추가 => each(function(){})
  • 테이블태그에 배열의 값을 추가 => append()
  • $( ??? ).each(function(){}) => 선택자로 전달이 모호한 경우에는 인자로 전달한다= $.each(arr, function(idx, item){}
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
39
40
41
42
<head>
<!-- 제이쿼리 라이브러리연결 -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
//5-1. 배열생성
let arr =[
{name:"유저1", region:"부산"},
{name:"유저2", region:"수원"},
{name:"유저3", region:"서울"},
];

//5-2. 테이블에 추가
//$( ??? ).each(function(){}) => 선택자로 전달이 모호한 경우에는 인자로 전달한다= $.each(arr, function(idx, item){}
$.each(arr, function(idx, item){
//alert("index : "+idx+" item : "+item)
$('table').append('<tr><td>'+item.name+'</td><td>'+item.region+'</td></tr>')
});

//5-3. div태그의 배열의 값에 하나씩 저장
//div태그는 배열이 아니기때문에 바로 접근이 가능해서 each를 쓸 필요가 없다
$('div').html(function(idx){
let item = arr[idx];
return item.name +" "+ item.region;
});

});
</script>
</head>

<body>
<div> 내용 </div>
<div> 내용 </div>
<div> 내용 </div>

<hr>

<table border="1">
<tr>
<td>이름</td><td>지역</td>
</tr>
</table>
</body>

Comments