온 코딩

[jQuery] .click(), .filter(), .slice(),.toggle(), .hover(),.one() 본문

복습 ARCHIVE/java script

[jQuery] .click(), .filter(), .slice(),.toggle(), .hover(),.one()

SummerON 2021. 6. 7. 23:28

.click()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>bind() 중 click 이벤트는 click()메서드로 사용</title>

    <style type="text/css">
        .redColor{ color:Red }
    </style>

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

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

            // 특정 요소에 클릭 이벤트를 적용 : bind()보다 간편
            $('#mainMenu .redColor').click(function() {

                if (this.id == "dnk") {
                    location.href = "http://www.dotnetkorea.com";
                }
                else if (this.id == "va") {
                    window.open("http://www.VisualAcademy.com/", "", "");
                }

            });

        });
    </script>
</head>

<body>

    <div id="mainMenu">
        <div id="dnk" class="redColor">닷넷코리아</div>
        <div id="va" class="redColor">비주얼아카데미</div>
        <div id="ll" class="redColor">라이선스랜드</div>
    </div>

</body>

</html>

.filter()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기</title>

    <style type="text/css">
        .redBorder { border:solid 1px red; }
        .five { border-width:5px; }
    </style>

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

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

            $('img').addClass('redBorder') // 모든 이미지에 redBorder 클래스 적용
                .filter('[title*=닷넷]').addClass('five') //'닷넷'title만 뽑아서 five 클래스 적용
                .end() // 부모로 이동
                .filter('[alt$=디드]').removeClass('redBorder'); // '디드'로 끝나는 스타일 제거

        });
    </script>
</head>

 

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

</html>

.slice()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>slice() 메서드로 지정된 개체만 가져오기</title>

    <style type="text/css">
        .red { color:Red; }
    </style>

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

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

            // size() 해당 결과값(집합)의 개수
            alert("현재 웹 페이지에는 " + $('input').size() + "개의 input 태그가 있다.");
            
            // 2번째와 3번째만 스타일 적용
            $('input').slice(1,3).addClass('red'); // 1번째 인덱스에서 (3-1)번째 인덱스까지

        });
    </script>
</head>

<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>

</html>

.toggle() - 두가지 함수를 서로 번갈아가며 사용

1. 메서드로 설정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>toggle() 메서드로 토글링</title>

    <style type="text/css">
        .hidden { display:none; }
    </style>

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

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

        $("#btn").toggle(
            // .toggle(fn1, fn2); // fn1과 fn2를 서로 토글링한다...
                function() { $('#myLayer').addClass("hidden"); },
                function() { $('#myLayer').removeClass("hidden"); }
            );

        });
    </script>
</head>

 

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

</html>

2. 메서드로 설정2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle() 메서드로 토글링</title>

<style type="text/css">
.hidden {
	display: none;
}
</style>

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

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

		$("#btn").toggle(fn1, fn2);
		
		function fn1() {
			$('#myLayer').addClass("hidden");
		}
		function fn2() {
			$('#myLayer').removeClass("hidden");
		}

	});
</script>
</head>



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

</html>

3. toggleClass - addClass()+removeClass()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>toggleClass() 메서드로 CSS 클래스에 대한 토글링</title>

    <style type="text/css">
        .hidden { display:none; }
    </style>

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

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

        $('#btn').click(function() {
               //[!] hidden CSS Class에 대해서 addClass() <-> removeClass()
               $('#myLayer').toggleClass('hidden');

           })
        });
    </script>
</head>

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

.hover() 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>hover()로 마우스오버와 아웃을 동시 처리</title>

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

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

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

            $('table tr:eq(1)').hover(
	            function() { $(this).addClass('hover'); },
	            function() { $(this).removeClass('hover'); }
            );

        });
    </script>
</head>
 
<body> 

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

.one() - 딱 한번만 실행 됨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>one()메서드로 한번만 실행</title>

    <style type="text/css">
     
    </style>

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

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

            //[!] bind, click() 메서드와 달리 one() 메서드는 딱 한번만 실행되고, 이벤트가 해제됨
            $("#btn").one("click", function() { alert('한번만클릭'); });

        });
    </script>
</head>
 
<body>
  <div id="my">
   <input type="button" id="btn" value="버튼"  />
  </div>
</body>
</html>

.CSS 직접 설정하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>폰트 늘리기 및 줄이기</title>

    <style type="text/css">
        .button { background-color:Yellow; }
        .region { color:Red; }
    </style>

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

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

            $('div.button').click(function() {

                var $region = $('div.region');

                var currentSize = $region.css('fontSize');   // "16px"
				alert(currentSize);
                
                var num = parseFloat(currentSize, 10);   // "16px" => 16
                alert(num);

                var unit = currentSize.slice(-2);  // "16px" => "px"
                alert(unit);

                if (this.id == 'goBig') {
                    num *= 1.5;
                }else if (this.id == 'goSmall') {
                    num /= 1.5;
                }

                $region.css('fontSize', num + unit); // 24+"px" => "24px"

            });
        });
    </script>

</head>

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

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

</html>

browser

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>브라우저 버전</title>

    <style type="text/css">
    </style>

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

    <script type="text/javascript">
        $(document).ready(function() {
            // IE 8.0이지만, 6.0으로 나타남
            // jQuery 유틸리티 함수
            alert('현재 웹 브라우저 버전은 : ' + jQuery.browser.version + '입니다.');
        });
    </script>
</head>

<body>

</body>
</html>

.callBack - 매개변수로 함수를 전달 하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>콜백 : 매개변수로 함수를 전달</title>

    <style type="text/css">
    </style>

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

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

            $('p:eq(1)')                                            //[1] 두번째 p 태그 영역
                .css('backgroundColor', 'Yellow')                   //[2] 두번째 영역의 배경색 지정

                .click(function() {
                    var $thisPara = $(this);                       //[3] 현재 영역을 변수에 설정

                    $thisPara.next()

                        .slideDown('slow', function() {             //[4] 두번째의 다음 요소를 슬라이드 다운
                            $thisPara.slideUp('slow');              //[5] 현재 자신(두번째)를 슬라이드 업
                        });

                });

        });
    </script>

</head>

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

</html>
저작자표시 비영리 변경금지

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

[jQuery] .each(), .attr(), .val(), .substr(), .show() , .removeAttr(), .join()  (0) 2021.06.07
[jQuery] .attr(), .text(), .html(), .change()  (0) 2021.06.07
[jQuery] Selector - 홀짝, contains, sibling 등 /.tagName / .bind()  (0) 2021.06.07
[jQuery] 기본 사용법 및 함수 모음  (0) 2021.06.07
10_key_slide_converter : 키코드, 숫자맞추기, 사진슬라이드, 섭씨화씨변환기  (0) 2021.05.17
'복습 ARCHIVE/java script' Related Articles more
Comments