s17_attr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 속성 처리</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수 실행
//$(document).ready(function(){});
$(function(){//이렇게 생략해서 사용가능
//attr 메서드는 속성과 관련된 모든 기능을 수행
//하나의 속성만 제어
//$('img').attr('width',100); //넓이를 100으로 조절. 높이를 명시하지않으면 브라우저가 자동으로 조정해줌. 원래 사진은 매우 큼.
//복수의 속성을 제어
//$('img').attr('width',100).attr('height',100);
//객체 형태로 명시 (복수를 명시하고 싶을 떈 중괄호 사용. 키와 벨류의 쌍으로 명시)
$('img').attr({
width:200,
height:200
});
});
</script>
</head>
<body>
<img src="../files/Desert.jpg">
<img src="../files/Koala.jpg">
<img src="../files/Penguins.jpg">
</body>
</html>
s18_attr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 속성 처리</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//하나의 속성 제어
/* $('img').attr('width',function(index){
return (index+1)*100;
}); */
//복수의 속성 제어
/* $('img').attr('width',function(index){
return (index+1)*100;
}).attr('height',function(index){
return (index+1)*100;
}); */
//제일 권장하는 방법(객체형태로 만드는 방법)
$('img').attr({
width:function(index){
return (index+1)*100;
},
height:function(index){
return (index+1)*100;
}
});
});
</script>
</head>
<body>
<img src="../files/Desert.jpg">
<img src="../files/Koala.jpg">
<img src="../files/Penguins.jpg">
</body>
</html>
s19_attr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 속성처리</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//3초 후에 매개변수로 전달된 함수를 실행
setTimeout(function(){
let src = $('img').attr('src'); // src 속성값을 반환
alert('src');
},3000);
});
</script>
</head>
<body>
<img src="../files/Penguins.jpg">
</body>
</html>
s20_removeAttr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성제거</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//3초 후에 매개변수로 전달된 함수를 실행
setTimeout(function(){
$('h1').removeAttr('align'); //속성제거
},3000);
});
</script>
</head>
<body>
<h1 align = "center" data-index ="0">Header-0</h1>
<h1 data-index="1">Header-1</h1>
<h1 data-index="2">Header-2</h1>
</body>
</html>
3초뒤
s21_html.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html/text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//html 메서드는 태그의 내용을 제어 (HTML 태그 허용)
$('div').html('<h1>날씨가 화창한 오후</h1>');
//text 메서드는 태그의 내용을 제어(text로만 표시)
$('p').text('<h1>놀이동산의 곰인형</h1>');
//접근하는 태그의 내용을 다르게 설정하기
$('div.header').html(function(index){
return '<h2>Header-'+index+'</h2>';
});
//태그의 내용을 읽어서 내용을 새롭게 가공한 후 태그에 다시 설정
$('h1').html(function(index,html){
//index : 배열의 인덱스
//html : 태그의 내용
return '**' +html+'**';
});
});
</script>
</head>
<body>
<div></div>
<p></p>
<!-- 배열로 인식됨. 위에 index -->
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<h1>서울-0</h1>
<h1>서울-1</h1>
<h1>서울-2</h1>
</body>
</html>
s22_empty.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
setTimeout(function(){
//empty 메서드는 특정 문서 객체의 후손을 모두 제거
$('div').empty();//div는 남겨두고 div하위요소들을 제거함 (익스플로어의 요소를 보면 <div></div>로 됨)
},3000);
setTimeout(function(){
//remove 메서드는 특정 문서 객체 자체를 제거
$('div').remove();
},3000);
});
</script>
<body>
<div>
<h1>Header-0</h1>
<h1>Header-1</h1>
</div>
<p>
<span>Content-0</span>
<span>Content-1</span>
</p>
</body>
</html>
'쌍용교육(JAVA) > jquery' 카테고리의 다른 글
| 쌍용교육 -jquery수업 42일차 jQuertEvent(2) (0) | 2024.04.17 |
|---|---|
| 쌍용교육 -jquery수업 41일차 jQuertEvent(1) (0) | 2024.04.16 |
| 쌍용교육 -jquery수업 41일차 jQuerySelector(3) (0) | 2024.04.16 |
| 쌍용교육 -jquery수업 41일차 jQuerySelector(1) (0) | 2024.04.16 |
| 쌍용교육 -jquery수업 40일차 다운로드,jQuerySelector (0) | 2024.04.15 |
