Learn/KH정보교육원

[KH정보교육원 당산] jQuery - 실습 2

Dahoon06 2021. 6. 2. 18:23
728x90
반응형

 

jQuery - click 이벤트

<script type="text/javascript">
        $(document).ready(function() {
			$('#mainMenu .redColor').click(function(){
				
				if(this.id == "naver"){
					location.href="http://www.naver.com";
				}
				else if(this.id == "google"){
					window.open("http://www.google.com");
				} else {
					location.href="http://www.daum.net";
				}
			});

        });
    </script>

 

 

CSS

더보기

<style type="text/css">

        .redColor{ color:Red }

</style>

 

 

HTML

<body>

    <div id="mainMenu">
        <div id="naver" class="redColor">네이버</div>
        <div id="google" class="redColor">구글</div>
        <div id="daum" class="redColor">다음</div>
    </div>

</body>

각각의 단어를 클릭하면 해당 페이지로 이동

 

id값이 mainMenu 인 태그 안에 클래스명이 redColor인 태그를 찾아서 클릭 이벤트를 부여한다.

 

이때 클릭된 태그의 id값에 따라 경로 이동!!

 

** window.open();   ->  현재 페이지에서 이동하는것이 아니고 새로운 창을 띄운다.

 

 

 

 

jQuery - 조건에 맞는 요소 가져오기 (filter())

<script type="text/javascript">
        $(document).ready(function() {
        	//filter('요소 선택') 걸러내는 함수 => 종료 end()
			//1.모든 이미지에 redBorder 스타일 적용
			//2.title = 닷넷 인 요소만 five적용
			//3.alt="~~va"로 끝나는 요소의 스타일 제거
			$('img').addClass('redBorder').filter('[title*="닷넷"]').addClass('five')
			.end() // filter를 한번 사용할때는 안써도 되지만 2개이상 사용할 경우 하나 끝날때마다 끊어줘야한다.
			.filter('[alt$="va"]').removeClass('redBorder');

        });
</script>

 

 

CSS

더보기

<style type="text/css">

        .redBorder { border:solid 1px red; }

        .five { border-width:5px; }

</style>

 

HTML

<body>
	 <img src="" title="닷넷" alt=".net" />
	 <img src="" title="자바" alt="java" />
	 <img src="" title="임베디드" alt="embeded" />
 </body>

 

filter()함수를 하나만 사용할 경우에는 end()를 사용할 필요가 없지만

filter()를 2개 이상 사용하게 되면 하나가 끝날때마다 end()로 끊어줘야한다!!!

 

 

 

 

jQuery - 지정된 개체 가져오기 (slice())

<script type="text/javascript">
        $(document).ready(function() {
			//slice(시작인덱스, 직전인덱스)
			//size() 선택된 요소의 개수
			//alert("현재 웹문서에는" + $('input').size() + "개의 input태그가 있습니다.");
			$('input').slice(1,3).addClass('red');
        });
</script>

 

자바의 substring과 같은 기능!!

 

 

CSS

더보기

<style type="text/css">

        .red { color:Red; }

 </style>

 

 

HTML

<body>
	
	<h1>2번째와 3번째 버튼에만 빨간 글씨 적용</h1>
	
	<input type="button" value="버튼" /> <!-- 0번 -->
	<input type="button" value="버튼" /> <!-- 1번 -->
	<input type="button" value="버튼" /> <!-- 2번 -->
	<input type="button" value="버튼" /> <!-- 3번 -->

</body>

 

 

 

 

 

jQuery - toggle(). // toggleClass()

<script type="text/javascript">
        $(document).ready(function() {
				//2가지 일을 반복하는 함수
				//toggle(함수,함수)
				//첫번째 방법
			/**
				$('#btn').toggle(
				function(){
					$('#myLayer').addClass('hidden');
				},
				function(){
					$('#myLayer').removeClass('hidden');
				});
			**/
			/**	
				//두번째 방법 (함수 처리)
				$('#btn').toggle(f1,f2);
				
				function f1(){
					$('#myLayer').addClass('hidden');
				};
				function f2(){
					$('#myLayer').removeClass('hidden');
				};
			**/	
				//세번째 방법
				$('#btn').click(function(){
					//toggleClass('스타일클래스') => addClass() / removeClass()
					$('#myLayer').toggleClass('hidden');
				});
        	
        });
</script>

 

CSS

더보기

<style type="text/css">

        .hidden { display:none; }

</style>

 

HTML

<body>
    <h1>버튼을 클릭할 때마다 레이어 보이기/숨기기</h1>
    <input id="btn" type="button" value="버튼" />
    <div id="myLayer" style="background-color:Yellow;">
        안녕
    </div>
</body>

버튼을 클릭하면 "안녕"이 사라질것이다.

다시 버튼을 누르면 안녕 글씨 출력!!

 

이때 사용하는 함수가 toggle => 한번에 2가지 함수를 사용한다.

toggle(함수,함수)

주석된 첫번째를 보면 toggle안에 2개의 함수가 선언되어있다.

css를 주거나 css를 제거하는 방식으로

 

toggleClass('스타일클래스') =>  같은 스타일을 사용하는 경우 첫번째나 두번째 처럼 사용하지 않고 한번에 선언함으로써 코드의 중복을 줄인다.

 

 

 

jQuery - hover()

 <script type="text/javascript">
        $(document).ready(function() {
			//hover(함수,함수) 는 mouseover <=> mouseout 기능을 번갈아가며 실행
			$('table tr').slice(1).hover(over,out);
			function over(){
				$(this).addClass('hover');
			}
			function out(){
				$(this).removeClass('hover');
			}
		 });
</script>

 

CSS

더보기

<style type="text/css">

        .hover { cursor:hand; background-color:Yellow; }

</style>

 

 

HTML

<table border="1">
    <tr><td>제목</td></tr> 	<!-- 0번 -->
    <tr><td>ASP.NET</td></tr>	<!-- 1번 -->
    <tr><td>ASP.NET</td></tr>	<!-- 2번 -->
</table>

 

 

 

 

출력화면

 

 

 

인덱스 번호가 1번자리부터 이벤트 부여

 

마우스 커서를 올렸을때 css적용 마우스를 떼면 css제거

 

아래쪽 ASP.NET에도 마찬가지로 똑같이 적용된다.

 

 

 

jQuery - 한번만 실행 : one()

<script type="text/javascript">
        $(document).ready(function() {
        	//특정 요소한테 한번만 이벤트 부여
        	//bind() / click() 함수는 이벤트를 해체하기 전까지는 계속 유지된다.
        	//one("이벤트명", 함수) 는 처음 한번만 이벤트가 가능하다.
        	
        	$("#btn").one("click",eventOne);
        	
        	function eventOne(){
        		alert("한번만 뜬다.");
        	}
	 });
</script>

 

HTML

<body>
  <div id="my">
   <input type="button" id="btn" value="버튼"  />
  </div>
</body>

 

 

버튼을 클릭하면 최초 한번을 경고창이 뜨게된다.

 

하지만 다시 누르게되면 아무런 이벤트가 발생하지 않는다. 

 

 

 

jQuery - 글자크기 조절

<script type="text/javascript">
	$(document).ready(function() {
		//css요소의 현재 스타일 속성들을 반환
		//css("스타일속성명") 해당 속성값을 반환
		//css("스타일속성명",속성값) 해당 요소에 스타일 속성을 설정
		//div태그 안에 있는 button클래스 이므로 띄어쓰기 X
		$('div.button').click(function(){
			//jQuery에서 요서의 내부 속성들을 변경 시키기 위해 변수를 선언할 경우에는
			//var $변수명 과 같이 선언해야 한다.($변수명 <- jqery용 변수!!! 일반 var 변수 <-- 자바스크립트용 변수)
			var $region = $('div.region');
			//폰트 사이즈값을 저장 받을 변수
			var currentSize = $region.css('fontSize');
			
			var num = parseFloat(currentSize,10); //기존의 16px에서 16으로 변경(px을 없앤것)
			//parseFloat // slice 함수는 자바스크립트 함수(제이쿼리 함수가 아님)
			var unit = currentSize.slice(-2); // 뒤의 px을 분리해 저장 시킨 변수
			
			if(this.id == "goBig"){
				//글자크기 늘리기
				num = num * 1.5;
			} else {
				//글자크기 줄이기
				num = num / 1.5;
			}
			
			$region.css('fontSize',num+unit) // 기존의 num에는 정수만 저장되어있고 단위가 없으니까 단위를 저장한 unit을 더해줌
		});
	});
</script>

 

 

CSS

더보기

<style type="text/css">

.button {

background-color: Yellow;

}

 

.region {

color: Red;

}

</style>

 

HTML

<body>
	<div id="btn">
		<div class="button" id="goBig">늘리기</div>
		<div class="button" id="goSmall">줄이기</div>
	</div>
	<br>

	<div class="region">안녕하세요. 여기는 본문입니다.</div>
</body>

기본 사이지(16)
무한대로 커지는것은 아니지만 클릭시 계속 커진다(한계치까지)
마찬가지로 최소값까지 작아진다.

 

** 자바스크립트용 변수와 제이쿼리 변수 선언이 다르다.

자바스크립트 : var 변수명 

제이쿼리 : var $변수명

 

 

 

 

jQuery - callBack()

<script type="text/javascript">
	$(document).ready(function() {
		//CallBack : 이벤트가 발생한 후, 자동 호출되는 개념
		$('p:eq(1)').css("backgroundColor","Yellow").click(function(){
			//alert("클릭");
			
			var $thisPara = $(this); // p태그 두번째가 저장(제이쿼리 객체로써)
			$thisPara.next() // 바로 다음 형제 : display:none인 태그
			.slideDown('slow',function(){
				$thisPara.slideUp('slow');
			});
		});
	});
</script>

 

HTML

<body>
	<p>첫번째</p>
	<p>두번째</p>
	<p style="display: none;">세번째</p>
	<p>네번째</p>
</body>

 

기본 출력화면

두번째를 클릭하게되면

세번째 글이 나오면서 두번째 글은 지워지게 된다.

 

728x90
반응형

'Learn > KH정보교육원' 카테고리의 다른 글

[KH 정보교육원 당산] jQuery - 실습4  (0) 2021.06.07
[KH 정보교육원 당산] 60일차(jQuery - 실습3)  (0) 2021.06.07
[KH정보교육원 당산] 57일차 ( jQuery - 실습 1)  (0) 2021.06.02
[KH정보교육원 당산] 55일차(MVC예제 : 게시판 완성)  (0) 2021.05.31
[KH정보교육원 당산] 53일차 ( model2 - MVC 예제: 게시판 리스트 /글 등록 )  (0) 2021.05.26

'Learn/KH정보교육원'의 다른글

  • 현재글[KH정보교육원 당산] jQuery - 실습 2

관련글

티스토리툴바