<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function imgSize(){
/* var imgs=document.getElementsByTagName('img');
for(var i=0;i<imgs.length;i++){
imgs[i].style.width='200px';
imgs[i].style.height='200px';
} */ // js방식
$('img').css({'width':'200px','height':'200px'}); //Jquery 방식
}
function idSelector(){
var imgs=document.querySelectorAll('#selId');
for(var i=0;i<imgs.length;i++){
imgs[i].style.display='none';
} // js 방식 모든id속성에적용
//$('#selId').hide(); 최초의 id에만 적용
}
function classSelector(){
/* var selClass=document.querySelectorAll('.selClass');
for(var i=0;i<selClass.length;i++){
selClass[i].style.opacity='0.5';
} */ //js방식
$('.selClass').css('opacity','0.5'); // Jquery방식
}
function includeSelector(){
//$('img[id]').css('opacity','0.2'); //img태그의 id속성이 있는것만 적용
//$('img[class]').css('opacity','0.2'); //img태그의 class속성이 있는것만 적용
//$('img[title=img02]').css('opacity','0.2'); // title속성값이 img02 인 것에 스타일적용
//$('img[title*=img02]').css('opacity','0.2'); // tile 속성값으로 img02라는 단어가 포함된것 찾음
//$('img[title$=img002]').css('opacity','0.2'); //지정된 문자열로 끝나는 모든 요소를 선택한다.
//$('img[title^=image02]').css('opacity','0.2'); //지정된 문자열로 시작하는 모든 요소를 선택한다.
//$('img[title!=img04]').css('opacity','0.2'); //지정된 문자열과 같지 않은 모든 요소를 선택한다.
}
// 속성(attribute)과 프로퍼티(property)의 차이점
// 속성이란 html 요소가 추가적인 정보를 가지고 있는 이름과 값의 한 쌍을 말한다.
// 프로퍼티란 속성을 객체화 했을 때 html DOM 트리 내부에서의 값을 말한다.
// <input type="checkbox" name="chk" checked="checked"/>
// 위의 <input> 태그 요소는 checked 라는 속성을 가지고 있으며 속성 값은 "checked" 이며 만약에 해당 체크 박스가 선택되었을 때 checked 속성의
// 프로퍼티는 "true" 이다.
// 속성과 프로퍼티 설정
// .attr() : 선택된 요소 집합의 첫 번째 요소로 지정된 속성 값을 리턴하거나 선택된 요소의 지정된 속성을 전달받은 값으로 설정한다.
// .removeAttr() : 지정된 속성을 제거한다.
// .prop() : 선택된 요소 집합의 첫 번째 요소로 지정된 프로퍼티 값을 리턴하거나 선택된 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.
// .removeProp() : 지정된 프로퍼티를 제거한다.
function changeImg(){
console.log($('td img').attr('src')) // 속성값<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function imgSize(){
/* var imgs=document.getElementsByTagName('img');
for(var i=0;i<imgs.length;i++){
imgs[i].style.width='200px';
imgs[i].style.height='200px';
} */ // js방식
$('img').css({'width':'200px','height':'200px'}); //Jquery 방식
}
function idSelector(){
var imgs=document.querySelectorAll('#selId');
for(var i=0;i<imgs.length;i++){
imgs[i].style.display='none';
} // js 방식 모든id속성에적용
//$('#selId').hide(); 최초의 id에만 적용
}
function classSelector(){
/* var selClass=document.querySelectorAll('.selClass');
for(var i=0;i<selClass.length;i++){
selClass[i].style.opacity='0.5';
} */ //js방식
$('.selClass').css('opacity','0.5'); // Jquery방식
}
function includeSelector(){
//$('img[id]').css('opacity','0.2'); //img태그의 id속성이 있는것만 적용
//$('img[class]').css('opacity','0.2'); //img태그의 class속성이 있는것만 적용
//$('img[title=img02]').css('opacity','0.2'); // title속성값이 img02 인 것에 스타일적용
//$('img[title*=img02]').css('opacity','0.2'); // tile 속성값으로 img02라는 단어가 포함된것 찾음
//$('img[title$=img002]').css('opacity','0.2'); //지정된 문자열로 끝나는 모든 요소를 선택한다.
//$('img[title^=image02]').css('opacity','0.2'); //지정된 문자열로 시작하는 모든 요소를 선택한다.
//$('img[title!=img04]').css('opacity','0.2'); //지정된 문자열과 같지 않은 모든 요소를 선택한다.
}
// 속성과 프로퍼티 설정
// .attr() : 인자가 하나일 경우 , 선택된 요소 집합의 첫 번째 요소로 지정된 속성 값을 리턴.
// 인자가 두개 일 경우 , 속성을 둘째인자값으로 설정한다.
// .removeAttr() : 지정된 속성을 제거한다.
// .prop() : 선택된 요소 집합의 첫 번째 요소로 지정된 프로퍼티 값을 리턴하거나 선택된 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.
// .removeProp() : 지정된 프로퍼티를 제거한다.
function changeImg(){
console.log($('td img').attr('src')) //속성값을 얻어온다 결과로 ./images/img01.jpg 을 뿌려준다.
console.log($('td img').attr('src',"./images/img05.jpg")) // 속성값을 변경한다.
console.log($('td > span > img').removeAttr('src'));//속성 제거
}
</script>
</head>
<body>
<h2>이미지 크기를 모두 200px * 200px로 설정하기</h2>
<button type="button" onclick="imgSize()">클릭!!</button>
<h2>이미지 중에서 id 속성이 selId인 이미지 숨기기</h2>
<button type="button" onclick="idSelector()">클릭!!</button>
<h2>이미지 중에서 class 속성이 selClass인 이미지 투명도 변경하기</h2>
<button type="button" onclick="classSelector()">클릭!!</button>
<h2>이미지 중에서 title 속성값에 '02'가 포함된 이미지 투명도 변경하기</h2>
<button type="button" onclick="includeSelector()">클릭!!</button>
<h2>이미지 바꾸기</h2>
<button type="button" onclick="changeImg()">클릭!!</button>
<table>
<tr>
<td><img id="selId" title="img01" src="./images/img01.jpg"/></td>
<td><img title="image02 img02" src="./images/img02.jpg"/></td>
<td><img class="selClass" title="img023" src="./images/img03.jpg"/></td>
<td><img class="selClass" title="img04+" src="./images/img04.jpg"/></td>
</tr>
<tr>
<td><img id="selId" title="img01" src="./images/img01.jpg"/></td>
<td><span><img title="img02 img002" src="./images/img02.jpg"/></span></td>
<td><img class="selClass" title="img023" src="./images/img03.jpg"/></td>
<td><img class="selClass" title="img04-img04" src="./images/img04.jpg"/></td>
</tr>
</table>
</body>
</html>
