온 코딩

[jQuery] .trigger() , .unbind(), .show(), .hide(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .animate(), .stop(), .width(), .height 본문

복습 ARCHIVE/java script

[jQuery] .trigger() , .unbind(), .show(), .hide(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .animate(), .stop(), .width(), .height

SummerON 2021. 6. 8. 08:57

.trigger() - ()를 실행 

<!DOCTYPE html>

 

<html>

<head>

    <title>동적으로 다른 이벤트 호출</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('#btn').bind("click", function() { alert('버튼 클릭됨'); });
            $('#btn').trigger("click");  

        });

    </script>

</head>

<body>

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

</body>

</html>

.unbind() - 이벤트 해제

<!DOCTYPE html>

 

<html>

<head>

    <title>이벤트 처리기 해제</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            //[!] 버튼 클릭시 메시지 출력
            $('#btn').click(function() {  // <== $('#btn').bind("click", (function() { 
                alert('클릭됨');
            });

            //[1] unbind() 메서드로 지정된 이벤트 해제
            $('#btnUnbind').one("click", function() {
                $('#btn').unbind("click"); // 바인딩 해제
            });

        });
    </script>

</head>

<body>

    <div id="my">
	    <input type="button" id="btn" value="버튼" class="hover" />
	    <input type="button" id="btnUnbind" value="이벤트 해제" class="hover" />
    </div>

</body>

</html>

.show() / .hide()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>서서히 보이기 및 숨기기</title>

    <style type="text/css">
        #my .hover {
	        cursor:pointer;
	        background-color:Yellow;
        }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            //[1] 기본값 설정
            $(".region").show(); // region 영역 보이기
            $("#moreRegion").hide(); // more.. 숨기기 즉, "또 만나요"를 감싸는 태그 감추기

            //[2] more... 클릭시 보이기 및 숨기기
            $("span.more").click(function() {
                
                $("#moreRegion").show('slow'); // 천천히 보이기  // 3000 : 3초, 'slow', 'normal', 'fast'
                $(this).hide('fast'); // more 버튼 숨기기

            });
        });
        
        // .show() 특정요소 보이기
        // .hide() 특정요소 감추기 (제거가 아님!!! 보여지지만 않을 뿐..)
        // .show() / .hide() 에 전달할 수 있는 값..
        //                      'slow' / 'fast' / 'normal' / 사용자 지정 시간 (ms : 1/1000 초)
        //                      전달되는 값은 보여지거나, 감춰질 때 까지 걸리는 시간
    </script>

</head>

<body>

	<div class="region" style="display:none;">
		안녕하세요. 여기는 본문입니다.
		<span class="more">more...</span>
	</div>
	
	<div id="moreRegion" style="height:100px;background-color:Yellow;">
		또 만나요
	</div>

</body>

</html>

.fadeIn() / .fadeOut()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>서서히 보이기 및 숨기기</title>

    <style type="text/css">
        #my .hover {
	        cursor:pointer;
	        background-color:Yellow;
        }
        div {background-color:Silver; height:100px;}
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $("#btn").click(function() {
                $("#first").fadeIn(3000); // 서서히 나타내기
                $("#second").fadeOut(3000); // 서서히 감추기
            });

        });
        
        // fadeIn() / fadeOut() 는 특정 요소의 투명도(즉, 알파값(alpha))를 이용....
        // fadeIn() : 완전 투명 상태에서 불투명 상태로..
        // fadeOut() : 완전 불투명 상태에서 투명 상태로..
    </script>

</head>

<body>

    <input type="button" id="btn" value="페이드 효과 주기" />
	<div id="first" style="display:none;background-color:Yellow;">
	    첫번째 영역
    </div>

    <div id="second">
    	또 만나요
    </div>

</body>

</html>

.slideUp() / .slideDown()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <title>슬라이드업</title>

    <style type="text/css">

    #my .hover {
        cursor:pointer;
        background-color:Yellow;
    }

    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btn").click(function() {
                $("#first")
                .fadeIn(2000)     // 서서히 보이기
                .slideUp(4000);   // 슬라이드업 : 숨기기
            });

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="슬라이드 업" />

<div id="first" style="display:none;background-color:Yellow; height:100px;">

첫번째 영역

</div>

<div id="second">

두번째 영역

</div>

</body>

</html>


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		.menu { position:absolute; top:0px; left:0px; width:100%; height: 100%; background-color:#DDD; }
		.menu > div { padding: 2%; }
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script>
		// JavaScript 함수 선언
		function ShowSubMenu( strId ){
			var lySubMenu = $( strId );

			if( lySubMenu.first().is( ":hidden" ) ){
				$( strId ).slideDown( 300 );
			}
			else{
				$( strId ).slideUp( 300 );
			}
		}

		$( document ).ready( function() {
            // slideDown() 메소드로 보여주고 싶으면 먼저 hide 메소드를 사용하여서 보이지 않도록 설정해야 한다.
			$('.menu_2' ).hide();
		});
		
	</script>
</head>

<body>
	<div class="menu">
		<div>
			메뉴 1 <button onclick="ShowSubMenu('#sub1')">+</button>
			<div class="menu_2" id="sub1">
				<div>메뉴 1-1</div>
				<div>메뉴 1-2</div>
			</div>
		</div>
		<div>메뉴 2</div>
	</div>
</body>
</html>

.animate() / .stop()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>애니메이션 효과 멈추기</title>

    <style type="text/css">
    div 
    {
        position: absolute; background-color: #abc; left: 0px; top:50px;
        width: 60px; height: 60px; margin: 5px;
    }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            // Start animariono
            $("#go").click(function() {
                $(".block").animate({ left: '+=100px', top: '+=100px' }, 2000);
            });

            // Stop animation when button is clicked
            $("#stop").click(function() {
                $(".block").stop();
            });

            // Start animation in the opposite direction
            $("#back").click(function() {
                $(".block").animate({ left: '-=100px', top: '-=100px' }, 2000);
            });

        });
        
        // left: '+=100px' : 현재 위치에서 100픽셀 x축 방향으로 이동
        // top: '+=100px'  : 현재 위치에서 100픽셀 y축 방향으로 이동
        // 컴퓨터 그래픽에서 x축 + 방향은 왼쪽, y축 + 방향은 아래쪽
        // 컴퓨터 그래픽에서 3시 방향이 0도
        // stop() 현재 애니메이션을 중지..
    </script>

</head>

<body>

    <button id="go">Go</button>
    <button id="stop">STOP!</button>
    <button id="back">Back</button>
    <div class="block"></div>

</body>

</html>

.width() / .height()  =>크기를 구하는 메서드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>검색된 요소의 크기 구하기</title>

    <style type="text/css">
        #my { background-color:Yellow; }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $('#btnSize').dblclick(function() {
                var msg = $('#my').width() + " , " + $('#my').height();
                window.alert(msg);
            });

        });
    </script>

</head>

<body>

    <div id="my">
        <p>jQuery</p>
        <p>Ajax</p>
    </div>

    <input type="button" id="btnSize" value="위 영역의 크기 구하기" />

</body>

</html>

.outerWidth() / .outerHeight()  => (true)일 경우 마진 포함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>검색된 요소의 크기 구하기</title>

    <style type="text/css">
        #my 
        {   background-color:Yellow; 
            border:2px solid gray;
            position:absolute;
            padding:10px; z-index:0;
            margin:10px;
            top:100px;
            left:100px;
            width:200px; height:200px;
          }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $('#btnSize').mouseover(function() {

                // outerHeight : 마진을 제외한 영역의 크기
                alert("outerHeight : " + $("#my").outerHeight());

                // outerHeight(true) : 마진을 포함한 영역의 크기
                alert("outerHeight(true) : " + $("#my").outerHeight(true));

                alert("outerWidth: " + $("#my").outerWidth());

                alert("outerWidth(true): " + $("#my").outerWidth(true));

            });
        });
    </script>

</head>

<body>

    <div id="my">
        <p>jQuery</p>
        <p>Ajax</p>
    </div>

    <input type="button" id="btnSize" value="위 영역의 크기 구하기" />

</body>

</html>
저작자표시 비영리 변경금지 (새창열림)

'복습 ARCHIVE > java script' 카테고리의 다른 글

[jQuery - Ajax] 형 변환하여 사용, 배열 값 전달  (0) 2021.06.08
[jQuery - Ajax] 기본 사용법  (0) 2021.06.08
[jQuery] .eq(), .children(), .is(), .not(), .end()  (0) 2021.06.08
[jQuery] .append(), .empty(), .wrap(), insertAfter(), .before(), .colon(), .replaceWith(), .remove() , .css()  (0) 2021.06.08
[jQuery] .each(), .attr(), .val(), .substr(), .show() , .removeAttr(), .join()  (0) 2021.06.07
'복습 ARCHIVE/java script' Related Articles more
Comments