본문 바로가기
HTML

38일차//JQuery// 과제 (요소값 변경, 값 가져오기)

by aesup 2021. 3. 8.
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