[jQuery] 4.jQuery 문법

in Web on jQuery




제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고,

그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다.

제이쿼리의 기본 문법은 다음과 같습니다. 


$(선택자).동작함수();



달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다.

선택자를 이용하여 원하는 HTML 요소를 선택하고,

동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.

선택자는 css의 선택자와 같습니다. (id는 #id명 class는 .클래스명)

jQuery 함수는 oscarotero.com 를 참고하면,

자세히 나와있습니다!



이제부터 직접 실습해보면서 제이쿼리가 어떻게 쓰이는지 알아보겠습니다!

예제




  • 문장을 클릭하면 문장이 사라지는 예제




<!------------------js2.html------------------>


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> /* 구글 CDN 이용*/ </script> 
	
	<script> 
		$(function(){
		//alert() /* jquery 연동되는지 확인 */
			$('p').click(function(){ /* 클릭하면 사라지게함 */
				$(this).hide() /* 자기 자신을 클릭할 때 사라짐 */
				/*(this).hide(1000) 바로 안없어지고 1초 지난 뒤에 없어짐 */
			})
		})
	</script>
</head>
<body>
	<p>If you click on me, I will disappear.</p>
	<p>Click me away!</p>
	<p>Click me too!</p>
</body>
</html>




실행결과




  • 박스를 클릭했을 때 박스가 나타나고 사라지는 예제




/*----------------js3.css---------------*/

.p{width: 500px;
	margin: auto;
	color:#fff;
	padding:10px;}
.pannel{background: #333;}
.pannel2{background: orange;}
.pannel3{background: pink;}
.b{cursor:pointer;
	padding:10px;
	border-bottom:1px solid #fff;}
.s{display:none;}





/*----------------js3.js---------------*/

$(function(){
	$('.btn').click(function(){ // .btn을 클릭했을 때
		$('.summary').show(1000) //.summary를 보이게 함
	})
	$('.pannel').mouseleave(function(){ //.pannel에서 마우스가 떨어질 때 
		$('.summary').hide(1000) //.summary 사라지게함
	})
})
		
$(function(){
	$('.btn2').click(function(){ // .btn2를 클릭했을 때
		$('.summary2').fadeIn(1000) //.summary2를 보이게 함
	})
	$('.pannel2').mouseleave(function(){ // //.pannel2에서 마우스가 떨어질 때 
		$('.summary2').fadeOut(1000) //.summary2 사라지게함
	})
})
		
$(function(){
	$('.btn3').click(function(){ // .btn3를 클릭했을 때
		$('.summary3').slideDown(1000) //.summary3를 보이게 함
	})
	$('.pannel3').mouseleave(function(){ // //.pannel3에서 마우스가 떨어질 때 
		$('.summary3').slideUp(1000) //.summary3 사라지게함
	})
})





<!--------------------------js3.html------------------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <link rel="stylesheet" href="js3.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> /* 구글 CDN 이용*/ </script>
    <script src="js3.js"></script>
	

</head>
<body>
<div class="pannel p">
	<div class="btn b">
			Show
	</div>
	<div class="summary s">
		<p>안녕하세요! 꾸리블로그입니다</p>
		<p>함수 show와 hide 입니다.</p>
	</div>
</div>
<div class="pannel2 p">
	<div class="btn2 b">
			Show
	</div>
	<div class="summary2 s">
		<p>안녕하세요! 꾸리블로그입니다</p>
		<p>함수 FadeIn과 FadeOut 입니다.</p>
	</div>
</div>
<div class="pannel3 p">
	<div class="btn3 b">
			Show
	</div>
	<div class="summary3 s">
		<p>안녕하세요! 꾸리블로그입니다</p>
		<p>함수 slideDown과 slideUp 입니다.</p>
	</div>
</div>
</body>
</html>




실행결과




위의 예제를 이용하면 전에 [IoT_CSS] 22. 실습: itscope 의 서브메뉴에 슬라이딩 기능을 줄 수 있습니다! 


/* ------------------itscope2.css--------------- */

body{height:100%; background: url(basic_bg01.gif) 0 0 repeat;}
.wrap-bg{background: url(basic_bg02.gif) 50% 0 repeat-y;}
.wrap{position:relative; width:1230px; margin:auto; 
	background: url(header_bg01.gif) 0 0 repeat-y;
	height:914px;}
.header{width:183px; float:left;}
.nav img{display:block;}
.level2 {width:100%; display:none; }


.contents{position:relative; width:997px; margin-left:10px; 
	padding:0 0 17px 40px; float:left;
	background: url(main_bg01.gif) 0 0 no-repeat;}
.footer{position:absolute; left:0; bottom:23px;}
.imgtxt{background: url(footer_menu_bg01.gif) 0 100% no-repeat;}
.foot-nav{ height:19px; margin-bottom:9px; padding:7px 0 0 10px;
	background: url(footer_menu_bg01.gif) 0 100% no-repeat;}
.foot-nav li{padding:0 8px; float:left;}
.main-img{margin-left:-50px;}
.main-content{position:relative; width:745px; margin-top:-75px;}
.main-content article{float:left;}
#a1{margin-right:8px;}

.side-content{width:243px; height:699px; position:absolute; 
	left:793px; top:192px;}
	
#a2 {width:218px; height:348px; padding:0px;}

.side-content article{width:218px; height:147px;  
	padding:25px 0 0 25px; margin-bottom:6px; }
.notice{background: url(gridcontents_notice_bg01.jpg);}
.pr {background: url(gridcontents_pr_bg01.jpg);}
/* 말줌임표  white-space:nowrap:개행하지 않겠다. */
.side-content li{white-space:nowrap; width:200px; overflow:hidden;
	text-overflow:ellipsis;}

.lang{position:absolute; left:877px; top:17px;}
.ko{background: url(lang_bar.png) 100% 0 no-repeat;}

.lang li{float:left; margin-right:8px; padding-right:11px;}
.lang a{display:block;}
.clear{clear:both;}





/* ------------------itscope2.js--------------- */

$(function(){
	$('.level1').click(function(){
	//현재 클릭한 것만 보이고 기존 메뉴는 slideUp
    
	$('.level2').stop().slideUp(500) //stop은 반복 실행하면 그만두라는 
	//현재의 level2만 slideDown
	$(this).find('.level2').stop().slideDown(500)
	//$(this).children('.level2').slideDown()
    
    })
})



html 파일은 전과 동일합니다!


실행결과