728x90
이미지 사이즈 조정
.attr( )
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<!-- 1.이미지 크기 조정 문제 -->
<!-- id 명 "q30"요소에 크기가 큰 이미지를 배치하고 그 페이지가 로드되면
이미지 크기를 폭 500px, 높이 300px로 사이즈를 지정하십시오. -->
<body>
<div id = "q30">
<img alt="" src="https://mblogthumb-phinf.pstatic.net/MjAyMDAzMTdfMTg0/MDAxNTg0MzczNzk4MDM0.lNCO4hHE7Ed06h2RFO6TQbBb1UJc9AXV80hB2KWcuzcg.rKhNyjjChHCWdSWwlzcBsBQevbvmv_dAf8zEOzZgzA8g.JPEG.se___ovo/%EB%85%B8%ED%8A%B8%EB%B6%81%EB%B0%B0%EA%B2%BD%ED%99%94%EB%A9%B422.jpg?type=w800">
</div>
<script type="text/javascript">
$(document).ready(function () {
$('img').attr('width','500px','height','300px');
});
</script>element 취득 수 알아보기
.index( )
<!--
2. 요소의 수 취득
class 명 eee의 ul 요소의 목록의 수를 취득 해,
id 명 q31 요소 li 태그의 수는 n 개로 표시하라
-->
<!--
3. q31 목록을 클릭하면 지금 클릭된 요소가 몇 번째인지를 id 명 q31 요소를 클릭 하면
n 번째로 표시되도록 한다 -->
<ul class = "eee">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
</ul>
<p id="q31"></p>
<script type="text/javascript">
let list1 = $("li").length;
//2 리스트의 갯수
$("#q31").text(list1);
//3 리스트 요소의 순서(몇번째)
$("li").click(function() {
let i = $(this).index();
alert(i);
});
</script>
요소 위치 이동
.offset( )
<!--
4. id 명 q32 요소 클릭하면 윈도우에서 왼쪽 위치를 가져 요소를 + 500px 오른쪽으로
이동하라. -->
<div id="q32_box">
<div id="q32"></div>
</div>
<script type="text/javascript">
$(function() {
$("#q32_box").click(function() {
$( '#q32' ).offset( { left: 500 } );
});
});
</script>요소값 가져오기
<!--
5. class 명 .q34의 ul 요소 목록의 텍스트를 순서대로 class 명 p 요소의 q34에 ","를
추가하여 앞 부분에 출력하라. -->
<h4>주인공</h4>
<ul class="q34">
<li>홍길동</li>
<li>일지매</li>
<li>임꺽정</li>
<li>정수동</li>
</ul>
<p class="q34">주인공들의 모임</p>
<script type="text/javascript">
$(document).ready(function () {
let list1 = $("ul.q34").text();
/* alert(list1); */
$("p.q34").prepend( list1 + "<br>");
});
</script>
li변경하기
<!--
6.
id 명 q35의 ul 요소의 목록들의 맨 앞에 1부터 카운트 번호 및 문자열 ","를 추가하라.
-->
<ul id="q35">
<li>커피</li>
<li>홍차</li>
<li>우유</li>
<li>쥬스</li>
<li>소다</li>
</ul>
<script type="text/javascript">
let list2 = $("#q35").html();
$("#q35").html("<ol>"+list2 +"</ol>");
</script>728x90
'HTML' 카테고리의 다른 글
| 38일차//JQuery/radio, prop 사용시 체크박스 체크된다 (0) | 2021.03.08 |
|---|---|
| 38일차//JQuery// button클릭시(태그 추가) 🧨text 추가방법 3가지(스크립트, 제이쿼리) (0) | 2021.03.08 |
| jquery 자주 쓰는 함수 최종정리( .addClass / .css / .text / .html / .append / .prepend (0) | 2021.03.08 |
| 37일차//JQuery// 속성추가 .attr ( ); (0) | 2021.03.05 |
| 37일차//JQuery// .append( ) .prepend( ) (0) | 2021.03.05 |
