2020-08-05JavaScript6 minutes read (About 839 words) 0 visits

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

attr() 함수

attr(‘속성’,’값’) : 선택한 요소의 속성을 생성,수정 하는 동작
css와 차이점
- attr사용 : border color, border style적용안됨.
- css사용 : border color, border style 적용됨.

$(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() : 선택한 요소의 텍스트값을 리턴하거나 텍스트값을 변경함.

해당하는 모든 요소의 텍스트값을 리턴.
태그요소를 있는 문자 그대로 출력.

<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){}

<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>