본문 바로가기
수업내용

[Day43][Jquery] transition / fadeIn / fadeOut / slideUp / slideDown / toggleClass / length / siblings / parent / children / find

clapdev 2019. 10. 28. 17:49

Ⅰ. transition

 

-- transition : 속성을 서서히 변화시키는 속성. hover와 주로 쓰인다.

--  IE버전 10 이상부터 사용이 가능하다.

 

-- Folder(chap06)에 Html File(03accordion) 생성

 

chap06 03accordion.html head

<style type="text/css">

div#container {
	width: 80%;
	margin: 0 auto;
	padding: 20px;
}

button.accordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 50%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 3s;            
}

button.accordion:hover {
	background-color: #aaa;
	width: 100%;
}

div.panel {
	padding: 0 18px;
	background-color: white;
	overflow: hidden;
}
</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
  $(document).ready(function() {

	  $("div.panel").css('display','none');

	  $("button.accordion").click(function(){
      
		  var $target = $(event.target).next();
       
		  var targetDisplayProperty = $target.css('display');

	  	  if(targetDisplayProperty == 'none') { 
	  		 $target.css({'display':''});
	      }
	  	  else { 
	  		 $target.css({'display':'none'});
	      }
	  });	  

  });
</script>

 

chap06 03accordion.html body

<div id="container">
    
<button class="accordion">Java</button>
<div class="panel">
    <p>자바는 자바로 기술된 프로그램 개발 및 실행을 할 수 있는 소프트웨어 모임의 총칭이다. 자바 프로그램은 운영체제나 하드웨어에 의존하지 않는 바이트 코드인 추상적인 코드로 구현된다.</p>
</div>
    
<button class="accordion">Oracle DataBase</button>
<div class="panel">
    <p>오라클 데이터베이스는 미국 오라클사의 관계형 데이터베이스 관리 시스템의 이름이다. 현재 유닉스 환경에서 가장 널리 사용되는 RDBMS이다. 검색이나 업데이트용 언어로는 국제표준화기구의 표준 구조화 조회 언어와 PL/SQL을 지원한다.</p>
</div>
    
<button class="accordion">HTML</button>
<div class="panel">
    <p>HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지를 위한 마크업 언어다.</p>
</div>

<button class="accordion">CSS</button>
<div class="panel">
    <p>CSS는 Casting Style Sheets의 약자로 html 요소들이 각종 디자인, 레이아웃 등 사용자에게 어떻게 보여지는지 정의하는 스타일 시트 언어입니다.</p>
</div>

<button class="accordion">JavaScript</button>
<div class="panel">
    <p>자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌습니다.</p>
</div>
    
<button class="accordion">jQuery</button>
<div class="panel">
    <p>jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.</p>
</div>
    
</div>

 

-- 선택자.next() : 이벤트가 발생되어진 곳의 바로 다음 태그(요소)를 선택자로 잡는 것
-- 선택자.prev() : 이벤트가 발생되어진 곳의 바로 이전 태그(요소)를 선택자로 잡는 것

 

 

chap06 04accordion.html head

<style type="text/css">

div#container {
	width: 80%;
	margin: 0 auto;
	padding: 20px;
}

button.accordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 50%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 3s;      
}

button.accordion:hover {
	background-color: #aaa;
	width: 100%;
}

div.panel {
	padding: 0 18px;
	background-color: white;
	overflow: hidden;
}
</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
  $(document).ready(function() {

	  $("div.panel").css('display','none');

	  $("button.accordion").click(function(){
		  var $target = $(event.target).next(); // div.panel 을 가리키는 것임.
        		  
		  var targetDisplayProperty = $target.css('display');

	  	  if(targetDisplayProperty == 'none') { 
	  	
	  		 $(".panel").css('display','none');
	  		 
	  		 $target.css({'display':''});
	      }
	  	  else { 
	  		 $target.css({'display':'none'});
	      }
	  });	  
  });
</script>

 

chap06 04accordion.html body

<div id="container">
    
	<button class="accordion">Java</button>
	<div class="panel">
    	<p>자바는 자바로 기술된 프로그램 개발 및 실행을 할 수 있는 소프트웨어 모임의 총칭이다. 자바 프로그램은 운영체제나 하드웨어에 의존하지 않는 바이트 코드인 추상적인 코드로 구현된다.</p>
    </div>
    
    <button class="accordion">Oracle DataBase</button>
	<div class="panel">
    	<p>오라클 데이터베이스는 미국 오라클사의 관계형 데이터베이스 관리 시스템의 이름이다. 현재 유닉스 환경에서 가장 널리 사용되는 RDBMS이다. 검색이나 업데이트용 언어로는 국제표준화기구의 표준 구조화 조회 언어와 PL/SQL을 지원한다.</p>
    </div>
    
    <button class="accordion">HTML</button>
	<div class="panel">
    	<p>HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지를 위한 마크업 언어다.</p>
    </div>

    <button class="accordion">CSS</button>
    <div class="panel">
    	<p>CSS는 Casting Style Sheets의 약자로 html 요소들이 각종 디자인, 레이아웃 등 사용자에게 어떻게 보여지는지 정의하는 스타일 시트 언어입니다.</p>
    </div>

    <button class="accordion">JavaScript</button>
    <div class="panel">
    	<p>자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌습니다.</p>
    </div>
    
    <button class="accordion">jQuery</button>
    <div class="panel">
    	<p>jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.</p>
    </div>
    
    </div>

 

Ⅱ. fadeIn / fadeOut

 

chap12 fadeInFadeOut

$(document).on("click", "li.moreProphile", 
function(){
    var $target = $(event.target);
      for(var i=0; i<personArr.length; i++) {
        if( $target.is(".no"+i+"") ) {
        $(".moreno"+i+"").fadeIn(3000);
        break;
      }
    }
});

 

-- 선택자.fadeIn(3000); : 선택자에 해당되는 내용물을 숫자(단위는 밀리초) 밀리초 동안 천천히 나타내라는 말이다.
-- 3000 은 3초

   → 3000 대신에 'slow'   를 쓰면  600 과 같다. 0.6초 이다.

   → 3000 대신에 'normal' 를 쓰면  400 과 같다. 0.4초 이다.

   → 3000 대신에 'fast'   를 쓰면  200 과 같다. 0.2초 이다.

 

chap12 fadeInFadeOut

$(document).on("click", "li.hideProphile", 
function(){
var $target = $(event.target);
    for(var i=0; i<personArr.length; i++) {
      if( $target.is(".hideno"+i+"") ) {
      $(".moreno"+i+"").fadeOut(3000);
      break;
    }
  }
});

 

-- 선택자.fadeOut(3000); : 선택자에 해당되는 내용물을 숫자(단위는 밀리초) 밀리초 동안 천천히 사라져라는 말이다.

 

Ⅲ. slideUp / slideDown

 

chap12 slideUpslideDown

$(document).on("click", "li.moreProphile", 
function(){
var $target = $(event.target);
  for(var i=0; i<personArr.length; i++) {
    if( $target.is(".no"+i+"") ) {
    $(".moreno"+i+"").slideDown(3000);
    break;
    }
  }
});

 

-- 선택자.slideDown(3000); : 선택자에 해당되는 내용물을 숫자(단위는 밀리초) 밀리초 동안 아래로 나타내라는 말이다.

 

chap12 slideUpslideDown

$(document).on("click", "li.hideProphile", 
function(){
var $target = $(event.target);
  for(var i=0; i<personArr.length; i++) {
    if( $target.is(".hideno"+i+"") ) {
      $(".moreno"+i+"").slideUp(3000);
      break;
    }
  }
});

 

-- 선택자.slideUp(3000); : 선택자에 해당되는 내용물을 숫자(단위는 밀리초) 밀리초 동안 위로 사라져라는 말이다.

 

-- Folder(chap10)와 Html File(toggleClassCheckBoxParentSiblingsPrevNext) 생성

 

Ⅳ. toggleClass

 

chap10 toggleClassCheckBoxParentSiblingsPrevNext

$("#firstDiv .buttons>label").click(function(){
	$(this).toggleClass("changeCSSname");
});

 

 

-- 선택자.toggleClass("클래스명1"); : 선택자에 "클래스명1" 이 이미 적용되어 있으면 선택자에 "클래스명1" 을 제거하고, 만약에 선택자에 "클래스명1" 이 적용되어 있지 않으면 선택자에 "클래스명1" 을 추가해주는 것.

체크 전체선택 / 전체해제

 

chap10 toggleClassCheckBoxParentSiblingsPrevNext

$("input:checkbox[id=checkall]").click(function(){
	var bool = $(this).prop("checked");
	$("input:checkbox[name=person]").prop("checked", bool);
});

 

체크 전체선택 / 전체해제 중 하나를 다시 선택했을 때 전체선택 / 전체해제도 같이 바뀌어야 한다.

 

chap10 toggleClassCheckBoxParentSiblingsPrevNext

$("input:checkbox[name=person]").click(function(){

  $("input:checkbox[name=person]").each(function(){
  	var bool = $(this).prop("checked");
    if(!bool) {
      $("input:checkbox[id=checkall]").prop("checked", false);
      return false;
    }
  });
});

 

문제 ▷▷ 전체선택이 풀렸을 때 다시 하나씩 다 체크하면 전체선택에 체크가 되어야 한다.

 

chap10 toggleClassCheckBoxParentSiblingsPrevNext

$("input:checkbox[name=person]").click(function(){
	var flag = false;		
	$("input:checkbox[name=person]").each(function(){
		var bool = $(this).prop("checked");
		if(!bool) {
			$("input:checkbox[id=checkall]").prop("checked", false);
			flag = true;
			return false;
		}
	});		
	if (!flag) {
		$("input:checkbox[id=checkall]").prop("checked", true);
	}			
});

 

체크박스 여러 개 중 라디오처럼 단일 선택

 

chap10 toggleClassCheckBoxParentSiblingsPrevNext

$("input:checkbox[name=person2]").click(function(){
	$("input:checkbox[name=person2]").prop("checked", false);
	$(this).prop("checked", true);
});

 

Ⅴ. length

 

length : checkbox(또는 radio)의 개수(길이)

 

chap10 toggleClassCheckBoxParentSiblingsPrevNext

$("div#checkboxCnt").css("display","none");
		
$("button#btnOK").click(function(){
	$("div#checkboxCnt").css("display","");
			
	// == 체크박스의 개수 == //
	var length = $("input:checkbox[name=person]").length;
	$("span#cnt").text(length);
			
	// == 체크박스의 체크 유무 == //
	var checkYNmsg = "체크가 된 것이 하나도 없습니다."
	if($("input:checkbox[name=person]").is(":checked")){
		checkYNmsg = "적어도 1개 이상 체크되었습니다.";
	}
	$("span#checkyn").text(checkYNmsg);
		
	// == 체크박스의 체크된 개수(for문 이용) == //
	var checkCnt = 0;
	for(var i=0; i<length; i++){
		if($("input:checkbox[id=person"+i+"]").is(":checked")){
			checkCnt++;
		}
	}
	$("span#checkCnt").text(checkCnt);
			
	// == 체크박스의 체크된 개수(checked 속성 이용) == //
	checkCnt = $("input:checkbox[name=person]:checked").length;
	$("span#checkCnt2").text(checkCnt);
			
	// == 체크박스에서 체크된 value값(for문이용) == //
	var checkedVal = "";
	for(var i=0; i<length; i++){
		if($("input:checkbox[id=person"+i+"]").is(":checked")){
			checkedVal += $("input:checkbox[id=person"+i+"]").val()+",";
		}
	}
	$("span#checkValue").text(checkedVal.substring(0, checkedVal.length-1));
			
			
	// == 체크박스에서 체크된 value값(checked 속성 이용) == //
	var checkedVal2 = $("input:checkbox[name=person]:checked").val();
			
	$("#checkValue2").text(checkedVal2);
			
	var checkValArr = new Array();
			
	for(var i=0; i<length; i++){
		if(($("input:checkbox[id=person"+i+"]").is(":checked"))) {
			checkValArr.push($("input:checkbox[id=person"+i+"]").val());
		}
	}
				
	var html = "<ul>";
			
	if(checkValArr.length > 0) {
		for(var i=0; i<checkValArr.length; i++){
			html += "<li>"+checkValArr[i]+"</li>";
		}
	}
	else {
		html += "<li>체크박스에 선택된 데이터가 없습니다.</li>";
	}
			
	html += "</ul>";
			
	$("#checkValue3").html(html);	
});

 

 

Ⅵ. siblings / parent

 

-- 선택자.siblings() : 선택자의 형제요소(형제태그) 중 선택자(자기자신)를 제외한 나머지 모든 형제요소(형제태그)를 가리키는 것이다.

-- 선택자.parent() : 선택자의 부모요소(부모태그)를 가리키는 것이다.
-- 선택자.parent().parent : 선택자의 부모요소의 부모요소(부모태그의 부모태그)를 가리키는 것이다.

 

chap10 toggleClassCheckBoxParentSiblingsPrevNext

$("input:checkbox[name=person2]").click(function(){
	$(this).parent().siblings().css('opacity','0.5');
	$(this).parent().css('opacity','1.0');
});

 

 

문제 ▷▷ 체크박스를 클릭하면 이름(ex. 한석규)는 파란색, 입니다는 초록색으로 바뀌도록 하세요.

 

chap10 toggleClassCheckBoxParentSiblingsPrevNext

.blueColor {color: blue;}
.greenColor {color: green;}



$("input:checkbox[name=person2]").click(function(){
	$("span.buttons>label").removeClass("blueColor greenColor");
			
	$(this).prev().addClass("blueColor");
	$(this).next().addClass("greenColor");
});

 

 

Ⅶ. children

chap10 childrenFind head

<style type="text/css">

	#container {
		width: 80%;
		margin: 0 auto;
		border: solid 2px gray;
		padding: 10px;	
	}
</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("div#container").children().css({'border':'solid 1px red','margin':'20px'});
		
		$("div#container2").find(".child").css({'border':'solid 1px blue','margin':'20px'});
	});
</script>

 

chap10 childrenFind body

<h1>children()</h1>
	<div id="container">
		<h2>h2</h2>
		<div id="mydiv">div 태그
			<ul id="ul1">ul 태그
				<li>li태그 야구</li>
				<li>li태그 축구</li>
				<li>li태그 농구</li>
			</ul>
			
			<ul id="ul2">ul 태그2
				<li>li태그 콜라</li>
				<li>li태그 커피</li>
				<li>li태그 사이다</li>
			</ul>
		</div>
	</div>
	
	<h1>children()</h1>
	<div id="container2">
		<h2 class="child">h2</h2>
		<div class="child">div 태그
			<ul class="child">ul 태그
				<li class="child">li태그 야구</li>
				<li class="child">li태그 축구</li>
				<li class="child">li태그 농구</li>
			</ul>
			
			<ul class="child">ul 태그2
				<li class="child">li태그 콜라</li>
				<li class="child">li태그 커피</li>
				<li class="child">li태그 사이다</li>
			</ul>
		</div>
	</div>

 

 

 

-- 선택자.children() : 선택자의 자식(손자는 아님)태그(자식요소)만을 가리키는 것이다.

-- 선택자1.find(선택자2) : 선택자1 안에 있는 선택자2를 가리키는 것이다.

'수업내용' 카테고리의 다른 글

[Day49][JSP] HashMap을 사용하여 전체 회원 목록 조회 / 상세 회원 목록 조회 / JSTL  (0) 2019.11.05
[Day47][JSP] filter / exception / 회원가입(JSP, Oracle)  (0) 2019.11.01
[Day41][Jquery] 자바스크립트와 제이쿼리 / bind / val / hide / show / each / is(":checked") / unbind / Math.random() / mouseover / mouseout  (0) 2019.10.23
[Day40][Javascript] join / 팝업창 / 우편번호 검색  (0) 2019.10.22
[Day39][Javascript] 정규 표현식 / 배열 / split  (0) 2019.10.21

'수업내용' Related Articles

티스토리툴바