본문 바로가기
공부일지

231017 (jQuery)

CD가참둥그렇다 2023. 10. 17. 12:29

jQuery 설치

1. jQuery 사이트에서 다운로드를 클릭한다.

2. 압축되지 않은 jQuery 슬림빌드의 링크를 저장한다.

3.html 파일에서 script 내부에 src로 저장한 링크를 넣는다.

 

 

jQuery

  • 자바스크립트 라이브러리
  • 다양한 브라우저에 사용하는 API를 쉽게 사용할 수 있다.

jQuery 기본 형태

  • $(셀렉터).이벤트(동작함수)
  • 이벤트는 하나의 셀렉터에 나열하여 사용할 수 있다.
$(document).ready(function () {

})

예시 1.

  • #은 아이디, .은 클래스, 그냥은 태그
  • $().html = innerHTML과 같은 형태로 사용된다.
  • $().css = style에 넣을 값을 지정할 수 있다.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>윈도우 닫기</title>
	<script src="https://code.jquery.com/jquery-3.7.1.slim.js">
	</script>
</head>
<body>
	<h1>클래스가 없다.</h1><h1 class="cls">클래스가 있다.</h1>
	<h2>클래스가 없다.</h2><h2 class="cls">클래스가 있다.</h2>
	<p id="one"></p>	<p>태그만 있는 녀석</p><p>태그만 있는 녀석</p>
	<button id="idSel">아이디</button>
	<button id="classSell">클래스</button>
	<button id="tagSell">태그</button>
</body>
<script>
	$("#idSel").click(function(){
		$("#one").html("안녕 새로운 문자가 생겼어.");
	});
	$("#classSell").click(function(){
		$(".cls").css("background","red");
	});
	$("#tagSell").click(function(){
		$("p").css("color","blue");
	});
</script>
</html>

 

 

예시 2.

  • “*” 모든 요소 선택하는 것
  • console.log(this); var id = $(this).attr("id"); console.log(id);
    • p태그의 요소를 콘솔에 출력, 태그의 id만을 var id에 저장, id를 출력
  • hide, show를 이용해 내용을 숨기거나 보여줄 수 있다.
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>윈도우 닫기</title>
	<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
</head>

<body>
	<h1>H1 태그</h1>
	<p>태그만 있는 녀석, 그리고 첫번째 p</p>
	<p class="cls">클래스 가 있는 녀석</p>
	<p id="demo">아이디가 있는 녀석</p>
	<button id="none">다 없애라!!</button>
	<button id="show">p.cls 없애라!!</button>
	<button id="first">첫번째</button>
	<p>List 1:</p>
	<ul>
		<li>Coffee</li>
		<li>Milk</li>
		<li>Tea</li>
	</ul>
	<p>List 2:</p>
	<ul>
		<li>Coffee</li>
		<li>Milk</li>
		<li>Tea</li>
	</ul>
	<button id="first_ul">ul의 첫번째 li</button>
	<button id="all_ul">전체 ul의 첫번째 li</button>
</body>
<script>
	$("#none").click(function () {
		console.log($("*"));
		$("*").hide();
		turnBack();
	});

	function turnBack() {
		setTimeout(function () {
			$("*").show();
		}, 3000);
	}

	$("#show").click(function () {
		$("p.cls").hide();
		turnBack();
	});
	$("#first").click(function () {
		$("p:first").css("color", "red");
		turnBack();
	});
	$("p").click(function () {
		console.log(this);
		var id = $(this).attr("id");
		console.log(id);
	});
	$("#first_ul").click(function () {
		$("ul li:first").hide();
		turnBack();
	});
	$("#all_ul").click(function () {
		$("ul li:first-child").hide();
		turnBack();
	});
</script>

</html>

 

 

예시 3.

  • 태그 내부에 있는 속성은[]대괄호 사이에 작성할 수 있다.
  • 표의 홀수 짝수는 0부터 시작하는 값으로 계산해야 한다.
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>윈도우 닫기</title>
	<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
</head>

<body>
	<h1>H1 태그</h1>
	<p>태그만 있는 녀석, 그리고 첫번째 p</p>
	<p class="cls">클래스 가 있는 녀석</p>
	<p id="demo">아이디가 있는 녀석</p>
	<button id="none">다 없애라!!</button>
	<button id="show">p.cls 없애라!!</button>
	<button id="first">첫번째</button>
	<p>List 1:</p>
	<ul>
		<li>Coffee</li>
		<li>Milk</li>
		<li>Tea</li>
	</ul>
	<p>List 2:</p>
	<ul>
		<li>Coffee</li>
		<li>Milk</li>
		<li>Tea</li>
	</ul>
	<button id="first_ul">ul의 첫번째 li</button>
	<button id="all_ul">전체 ul의 첫번째 li</button>
</body>
<script>
	$("#none").click(function () {
		console.log($("*"));
		$("*").hide();
		turnBack();
	});

	function turnBack() {
		setTimeout(function () {
			$("*").show();
		}, 3000);
	}

	$("#show").click(function () {
		$("p.cls").hide();
		turnBack();
	});
	$("#first").click(function () {
		$("p:first").css("color", "red");
		turnBack();
	});
	$("p").click(function () {
		console.log(this);
		var id = $(this).attr("id");
		console.log(id);
	});
	$("#first_ul").click(function () {
		$("ul li:first").hide();
		turnBack();
	});
	$("#all_ul").click(function () {
		$("ul li:first-child").hide();
		turnBack();
	});
</script>

</html>

 

 

예시 4.

  • hover(들어올 때, 나갈 때) : 2가지 동작을 나열하면 들어올 때, 나갈 때 동작으로 설정할 수 있다.
  • mouse명령어로 enter, leave, down, up이 있고, hover를 따로 사용할 수 있다.
<html>
   <head>
<meta charset="UTF-8">
      <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
      <style>
         div{
            width:200px;
            height:200px;
            margin-right: 7px;   
            text-align: center;            
         }
         #mousezone{
            background-color: #59b1f6;
            float: left;
         }   

         #overzone{
            background-color: #ffb5b4;
            float: left;
         }      
      </style>
   </head>
   <body>
      <p>클릭 하면 글자 색생이 바뀌어요~!</p>
      <p>클릭 하면 글자 색생이 바뀌어요~!</p>
      <p>클릭 하면 글자 색생이 바뀌어요~!</p>
      <p>클릭 하면 글자 색생이 바뀌어요~!</p>
      <div id="mousezone">마우스 존</div>
      <div id="overzone">H 오버 존</div>
      아이디: <input type="text" name="userid">
      <br>
      비밀번호: <input type="password" name="userpass">
   </body>
   <script>
      $("p").click(function(){
         $(this).css("color","red");
      });
      $("p").dblclick(function(){
         $(this).css("color","blue");
      });
      $("#mousezone").mouseenter(function(){
         $(this).text("마우스가 들어 왔구나!!");
         $(this).css("background-color","red");
      });
      $("#mousezone").mouseleave(function(){
         $(this).text("마우스가 나갔구나!!");
         $(this).css("background-color","yellow");
      });
      $("#mousezone").mousedown(function(){
         $(this).text("마우스 가 눌린 상태!!");
         $(this).css("background-color","black");
         $(this).css("color","white");
      });
      
      $("#mousezone").mouseup(function(){
         $(this).text("마우스 뗀 상태!!");
         $(this).css("background-color","yellow");
         $(this).css("color","black");
      });  
      $("#overzone").hover(function(){
         $(this).text("마우스가 들어 왔구나!!");
         $(this).css("background-color","red");
      },function(){
         $(this).text("마우스가 나갔구나!!");
         $(this).css("background-color","yellow");      
      });
      
      $("input").focus(function(){
         $(this).css("background-color", "#cccccc");
      });
      $("input").blur(function(){
         $(this).css("background-color", "#ffffff");
      });
   </script>
</html>

 

 

예시 5.

  • 여러가지 스크립트를 사용한 예시
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		div#ex1 {
			width: 300px;
			height: 200px;
			background-color: #59b1f6;
		}
		div#ex2 {
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="ex1">
		아이디: <input type="text" name="userid">
		<br>
		비밀번호: <input type="password" name="userpass">
		<button>로그인</button>
		<div id="ex2">
			<p></p>
		</div>
	</div>
</body>
<script>
	$("div").hover(function () {
		$("p").text("로그인 해 주세요");
	}, function () {
		$("p").text("");
	});
	$("input").focus(function () {
		$(this).css("background-color", "#cccccc");
	});
	$("input").blur(function () {
		$(this).css("background-color", "#ffffff");
	});
</script>

</html>

 

 

예시 6.

  • toggle : display 속성을 block과 none을 반복하게 해주는 명령어
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		div {
			width: 100px;
			background-color: green;
			text-align: center;
			padding: 10px 0 10px 0;
		}
	</style>
</head>

<body>
	<div>메뉴1</div>
	<ul>
		<li>LIST 01</li>
		<li>LIST 02</li>
		<li>LIST 03</li>
		<li>LIST 04</li>
		<li>LIST 05</li>
	</ul>
	<button id="toggle">토글버튼</button>
	<button id="onOff">OFF</button>
	<p>LIST 01</p>
	<p>LIST 02</p>
	<p>LIST 03</p>
	<p>LIST 04</p>
	<p>LIST 05</p>

	<!--<input id="onf" type="button" value="OFF"/>-->

</body>
<script>
	$(document).ready(function () {
		$("#onf").click(function () {
			var value = $(this).attr("value");
			console.log(value);
			$(this).attr("value", "ON")
		});

		$("ul").hide();

		$("div").hover(function () {
			$("ul").show(1000);
		}, function () {
			$("ul").hide(1000);
		});
		
		$("#onOff").click(function(){
			view=$("p").css("display");
			console.log(view);
			if(view=="none"){
				$("#onOff").text("OFF");
				$("p").css("display","block");
			} else {
				$("#onOff").text("ON");
				$("p").css("display","none");
			}
		});

		$("#toggle").click(function(){
			$("p").toggle();
		});

	});
</script>

</html>

'공부일지' 카테고리의 다른 글

231018 (jQuery)  (1) 2023.10.18
231017 (Java)  (0) 2023.10.17
231012 (HTML)  (0) 2023.10.12
231011 (Java)  (1) 2023.10.11
231011 (HTML)  (0) 2023.10.11

'공부일지' Related Articles

티스토리툴바