재밌고 어려운 IT를 이해해보자~!

Jquery practice 본문

코리아IT핀테크과정

Jquery practice

언제나즐거운IT 2024. 1. 16. 10:28

jquery 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 라이브러리 : jQuery 의 .ajax() 메서드로비동기처리</title>
<style type="text/css">
	headr,div,nav,ul,li{ /* 별을 쓰면 페이지성능 개떨어진다  */
		margin :5px;
	}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
//요소를 다이랙트로 딸러안에 넣어서 사용할수있다.
/* document자체가 객체 getelementedby를 대신한다 */
	$(document).ready(function()}
		$("header").css('border',1px solid red'); /* jquery문법 헤드로 바로 css적용 */
		$("#gnb > ul > li").css('border',1px solid blue');
		$(".banner").css('border',1px solid gray');
	});
	/* 제이쿼리에서는별도의 선택자(메셔드) 없이 다이렉트로 요소를 불러낼수가있다. */
/* 	id는 #으로 호출
	class는 .으로 호출 */
	/* > 를 쓰면 자식
	그냥 띄어쓰면 하위 */
		



</script>




</head>
<body>

	<header id="header">
		<div id="logo">로고</div>
		<nav id="gnb">
			<ul>
				<li>메인</li>
				<li>회원가입</li>
				<li>고객센터</li>
			</ul>
		</nav>
	</header>
	<div id="content">
		<ul class="banner">
			<li>광고 01</li>
			<li>광고 02</li>
			<li>광고 03</li>
			<li>광고 04</li>
		</ul>
	</nav>
	





</body>
</html>

jquery 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
   #photo {
      width : 600px;
      height : 1000px;
      border : 3px solid black;
      overflow : hidden;
   }
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
   $(document).ready(function(){
      var total=$("#photo > div").length;
      var num=1;
      $(".pageNumber > span:first").text(num);
      $(".pageNumber > span:last").text(total);
      
      $(".prev").click(function(){
         num--;
         if(num<1){
            num=total;
         }
         $("#photo div:last").insertBefore("#photo div:first");
         $(".pageNumber > span:first").text(num);
      });
      $(".next").click(function(){
         num++;
         if(num>total){
            num=1;
         }
         $("#photo div:first").insertAfter("#photo div:last");
         $(".pageNumber > span:first").text(num);
      });
   });
</script>
</head>
<body>

<div id="wrapper">
   <div id="pageInfo">
      <span class="pageNumber">
         <span></span> / <span></span>
      </span>
      <button class="prev">&lt;</button>
      <button class="next">&gt;</button>
   </div>
   
   <div id="photo">
      <div><img alt="이미지 01" src="images/1.png"></div>
      <div><img alt="이미지 02" src="images/2.jpg"></div>
      <div><img alt="이미지 03" src="images/3.jpg"></div>
   </div>
</div>

</body>
</html>

jquery 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#btn").on("click",function(){
			$("#myImage").toggle();
		});
	});
</script>
</head>
<body>

<!-- 토글할 이미지 -->
<img id="myImage" src="images/1.png" alt="토글 이미지">
	<button id ="btn">토글버튼</button>
</body>
</html>

 

'코리아IT핀테크과정' 카테고리의 다른 글

서블릿 Filter, Listner, XML  (0) 2024.01.18
JSTL, Custom tag  (0) 2024.01.17
비동기(asynchronous) 처리 , ajax, jquery  (0) 2024.01.15
API 조사 [TEAM PROJECT]  (2) 2024.01.14
Image Upload [TEAM PROJECT]  (0) 2024.01.13
공유하기 링크
'코리아IT핀테크과정' Related Articles more
Comments