728x90
반응형
1. Selector 이용하여 이미지 바꾸기(body)
<body>
<h2>1. 이미지들의 크기를 모두 200px * 200px 으로 설정하자.</h2>
<button onclick="resizeImg();">클릭</button>
<h2>2. 이미지들 중 id가 'selid'인 태그를 찾아, 숨기자</h2>
<button onclick="idSelector();">클릭</button>
<h2>3. 이미지들 중 class가 'selclass'인 태그를 찾아, 투명도 50%를 적용하자</h2>
<button onclick="classSelector();">클릭</button>
<h2>4. 이미지들 중 속성값으로 탐색하여 slideUp 기능을 적용하자.</h2>
<p>title 속성값 중 , '02'를 포함하는 img 태그를 찾아서 적용</p>
<p>slideUp은 2000ms로 적용</p>
<button onclick="propSelector();">클릭</button>
<h2>5. 이미지 바꾸기</h2>
<p>td의 자식요소인 img만 선택해서 바꾸자</p>
<button onclick="changeImg();">클릭</button>
<table>
<tr>
<td><img alt="img01" src="resources/image/img01.jpg" title="img01" id="selid"></td>
<td><img alt="img02" src="resources/image/img02.jpg" title="img02"></td>
<td><img alt="img03" src="resources/image/img03.jpg" title="img03" class="selclass"></td>
<td><img alt="img04" src="resources/image/img04.jpg" title="img04" class="selclass"></td>
</tr>
<tr>
<td><img alt="img05" src="resources/image/img05.jpg" title="img05" id="selid"></td>
<td><span><img alt="img06" src="resources/image/img06.png" title="img06"></span></td>
<td><span><img alt="img07" src="resources/image/img07.png" title="img07" class="selclass"></span></td>
<td><img alt="img08" src="resources/image/img08.png" title="img08" class="selclass"></td>
</tr>
</table>
</body>
2. script
1) 이름 중 특정 부분으로 검색하고 싶을 때는 *=를 사용할 수 있다.
예) $("img[title*=02]").slideUp(2000);
2) .slideUp(n); : n 밀리세컨즈(miliseconds) 동안 사진이 슬라이드 되도록 한다.
3) .attr(); : html 문서의 속성을 변경한다.
| ※ 잠깐 알아가기 ※ .prop()과 .attr()모두 속성을 찾거나 변경할때 사용하지만 차이점이 있다. .prop() : javascript 의 속성(문서 내 변경X) .attr() : html의 속성으로 (문서 내 변경됨) 따라서 문서가 변경되는 .attr의 경우 사용할때 주의해야 한다. |
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
function resizeImg(){
$("img").css({"width":"200px", "height":"200px"});
}
function idSelector(){
//$("tr #selid").hide();
$("#selid").css("display","none");
}
function classSelector(){
$(".selclass").css("opacity","50%");
}
function propSelector(){
//$("img[title='img02']").slideUp({"default":"2000"});
$("img[title*=02]").slideUp(2000);
}
function changeImg(){
$("td > img").attr("src","resources/image/arrowleft.png");
}
</script>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]DOM_필터링메소드 (0) | 2020.07.31 |
|---|---|
| [JQ]selector_03 (0) | 2020.07.31 |
| [JQ]selector_01 (0) | 2020.07.31 |
| [JQ]기본작성법 (0) | 2020.07.31 |
| [JQ]jQuery다운받기 (0) | 2020.07.30 |
