Effects - Show() / Hide() 메서드 (보이기 및 숨기기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 12. 08:29 |


 

[ShowHide.htm]

<!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>보이기 및 숨기기</title>

    <style type="text/css">

        #my.hover {

            cursor:pointer;

            background-color:Yellow;

    </style>

    <script src="../js/jquery-1.3.2-vsdoc2.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() {

                // 3000 : 3초, 'slow', 'normal', 'fast'

                $("#moreRegion").show('slow'); // 천천히 보이기

                $(this).hide('fast'); // more 버튼 숨기기

            });

        });

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

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면.






--> 위의 그림에서 "more..."텍스트를 마우스로 클릭하였을 때의 화면






 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Effects - SlideUp() 메서드 (슬라이드업)  (0) 2009.11.12
Effects - FadeIn() / FadeOut() 메서드 (서서히 보이기 및 숨기기)  (0) 2009.11.12
Events - Unbind() 메서드 (이벤트 처리기 해제)  (0) 2009.11.12
Events - Trigger() 메서드 (동적으로 다른 이벤트 호출)  (0) 2009.11.12
CSS - OuterWidth() / OuterHeight() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
Posted by holland14
:

Events - Unbind() 메서드 (이벤트 처리기 해제)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 12. 08:29 |

 

[Unbind.htm]



<!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>이벤트 처리기 해제</title>

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

    <script type="text/javascript">

        $(document).ready(function () {

            //[!] 버튼 클릭시 메시지 출력

            $('#btn').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>

 



-------------------------------------------------------------------------------------

 


[실행결과]


--> 왼쪽에 있는 '버튼'을 클릭했을때의 화면





--> 오른쪽에 있는 '이벤트 해제'버튼을 먼저 클릭한 후 왼쪽의 '버튼'을 클릭하였을 때의 화면.(바인드가 해제(-> Unbind)되어서 위의 그림처럼 'click'이벤트로 발생하는 메시지박스가 출력되지 않는다.)






 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Effects - FadeIn() / FadeOut() 메서드 (서서히 보이기 및 숨기기)  (0) 2009.11.12
Effects - Show() / Hide() 메서드 (보이기 및 숨기기)  (0) 2009.11.12
Events - Trigger() 메서드 (동적으로 다른 이벤트 호출)  (0) 2009.11.12
CSS - OuterWidth() / OuterHeight() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
CSS - Width() / Height() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
Posted by holland14
:

Events - Trigger() 메서드 (동적으로 다른 이벤트 호출)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 12. 08:29 |

 

[Trigger.htm]


 

<!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>동적으로 다른 이벤트 호출</title>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] btn 클릭 이벤트 처리

            //$('#btn').click(function () { alert('버튼이 클릭'); });

 

            //[2] 페이지 로드시 버튼 클릭

            //$('#my .hover').click(function() { alert('test'); });

           

            //[3] one 메서드

            //$('#my input[type=button').one("click", function () {

                //alert('역시 버튼이 사용자에 의해서 클릭됨');

                

               

            //[4] bind메서드

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

            //[!] 페이지 로드시 사용자의 반응이 아닌 코드에 의해서 click 이벤트를 실행

            $('#btn').trigger("click"); // 실행하자마자 click 이벤트를 트리거함...           

        });

    </script>

</head>

<body>

    <div id="my">

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

    </div>

</body>

</html>



 
-------------------------------------------------------------------------------------

 


[실행결과]


--> 아래그림은 위의 [Trigger.htm]소스코드에서 "[4]주석과, [!]주석"에 해당하는 결과임.([4]주석에서 "click"이벤트가 "Bind() 메서드"로 '바인딩'되어서, [!]주석아래의 코드부분에서 실행하자마자 "click 이벤트"를 Trigger한다. 즉, 페이지 로드시 사용자의 반응이 아닌 코드에 의해서 click 이벤트가 실행된다. )

 

 

 


 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Effects - Show() / Hide() 메서드 (보이기 및 숨기기)  (0) 2009.11.12
Events - Unbind() 메서드 (이벤트 처리기 해제)  (0) 2009.11.12
CSS - OuterWidth() / OuterHeight() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
CSS - Width() / Height() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
Manipulation - Remove() 메서드 (검색된 요소를 완전 제거)  (0) 2009.11.11
Posted by holland14
:

CSS - OuterWidth() / OuterHeight() 메서드 (검색된 요소의 크기 구하기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 12:02 |

 

[OuterWidthAndHeight.htm]

<!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>검색된 요소의 크기 구하기</title>

    <style type="text/css">

        #my {

            background-color:Yellow; border:2px solid gray; position:absolute;

            padding:10px; z-index:0; margin:10px;

            top:50px; left:50px;

            width:200px; height:200px;

    </style>

    <script src="../js/jquery-1.3.2-vsdoc2.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>

 



-------------------------------------------------------------------------------------

 


[실행결과]


--> 첫 화면. outerHeight() : 마진을 제외한 영역의 크기. (기본영역크기: 200px + (padding(10px) * 2) + (border(2px) * 2) = 224)
 





--> 위의 그림에서 '확인'버튼을 눌렀을 때의 화면. outerHeight(true) : 마진을 포함한 영역의 크기  (기본영역크기: 200px + (padding(10px) * 2) + (border(2px) * 2) + (margin(10px) * 2) = 244)




--> 위의 그림에서 '확인'버튼을 눌렀을 때의 화면.




--> 위의 그림에서 '확인'버튼을 눌렀을 때의 화면.



 

 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Events - Unbind() 메서드 (이벤트 처리기 해제)  (0) 2009.11.12
Events - Trigger() 메서드 (동적으로 다른 이벤트 호출)  (0) 2009.11.12
CSS - Width() / Height() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
Manipulation - Remove() 메서드 (검색된 요소를 완전 제거)  (0) 2009.11.11
Manipulation - ReplaceWith() 메서드 (검색된 요소를 변경하기)  (0) 2009.11.11
Posted by holland14
:

CSS - Width() / Height() 메서드 (검색된 요소의 크기 구하기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 11:54 |

 

[WidthHeight.htm]

<!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>검색된 요소의 크기 구하기</title>

    <style type="text/css">

        #my { background-color:Yellow; }

    </style>

    <script src="../js/jquery-1.3.2-vsdoc2.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>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 처음 실행할 때 웹 브라우저의 크기를 일정크기로 조절하고 '위 영역의 크기 구하기'버튼을 마우스로 클릭하면, 아래그림과 같이 '메시지박스'에 노란색영역의 "<div>태그의 사이즈"가 출력된다.





--> 이번에는 웹 브라우저의 크기를 다르게 맞추고(-> 늘리고) '위 영역의 크기 구하기'버튼을 마우스로 클릭하면, 아래그림과 같이 '메시지박스'에 노란색영역의 "<div>태그의 사이즈"가 위의 그림과 다르게 출력된다.






 

 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Events - Trigger() 메서드 (동적으로 다른 이벤트 호출)  (0) 2009.11.12
CSS - OuterWidth() / OuterHeight() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
Manipulation - Remove() 메서드 (검색된 요소를 완전 제거)  (0) 2009.11.11
Manipulation - ReplaceWith() 메서드 (검색된 요소를 변경하기)  (0) 2009.11.11
Manipulation - Clone() 메서드 (검색된 요소를 복사하기)  (0) 2009.11.11
Posted by holland14
:

Manipulation - Remove() 메서드 (검색된 요소를 완전 제거)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 11:35 |

 

[Remove.htm]

 

<!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>검색된 요소를 완전 제거</title>

    <style type="text/css">

        div { background-color:Yellow; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] 내용 지우기

            $('#btnEmpty').click(function() {

                $('div').empty();

                $('div').append("<b>hi</b>"); // div에 추가 기능(div 요소가 남아있다.)

            });

 

            //[2] 요소 없애기

            $('#btnRemove').click(function() {

                $('div').remove();

                $('div').append("<b>hi</b>"); // div 요소가 없다.

            });

        });

    </script>

</head>

<body>

    <div>

        <p>jQuery</p>

        <p>Ajax</p>

    </div>

    <input type="button" id="btnEmpty" value="위 영역 삭제" />

    <input type="button" id="btnRemove" value="위 영역 삭제" />   

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면.





--> 위의 그림에서 왼쪽 버튼을 누른 후의 화면.(Empty() 메서드로 "div영역"을 삭제해도 "div 요소"가 남아있으므로 아래그림과 같이 "div영역"에 '텍스트'가 출력된다.) 




--> 오른쪽버튼을 눌렀을 때의 화면.(Remove() 메서드로 "div영역"을 삭제하면 "div요소"도 함께 삭제되어서 아래그림과 같이 "div영역"이 사라진다.)






 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

CSS - OuterWidth() / OuterHeight() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
CSS - Width() / Height() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
Manipulation - ReplaceWith() 메서드 (검색된 요소를 변경하기)  (0) 2009.11.11
Manipulation - Clone() 메서드 (검색된 요소를 복사하기)  (0) 2009.11.11
Manipulation - Wrap()메서드 (검색된 요소를 특정 태그로 감싸기)  (0) 2009.11.11
Posted by holland14
:

Manipulation - ReplaceWith() 메서드 (검색된 요소를 변경하기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 10:50 |

 

[ReplaceWith.htm]


<!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>검색된 요소를 변경하기</title>

    <style type="text/css">

        button { display:block; margin:3px; color:red; width:200px; }

        div { color:red; border:2px solid blue; width:200px;

                margin:3px; text-align:center; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function () {

            // 모든 버튼 요소 클릭시

            $("button").click(function() {

                // 나자신(버튼)을 <div> 태그로 변경하자.

                $(this).replaceWith("<div>" + $(this).text() + "</div>");

            });

        });

    </script>

</head>

<body>

    <button>First</button>

    <button>Second</button>

    <button>Third</button>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면.
 





--> 첫 번째 버튼을 클릭하면 아래그림과 같이 해당 버튼이 "<div> 태그"로 변경된다.




--> 두 번째 버튼을 클릭하였을 때의 화면.(해당버튼이 "<div> 태그"로 변경되었다.)


 

 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

CSS - Width() / Height() 메서드 (검색된 요소의 크기 구하기)  (0) 2009.11.11
Manipulation - Remove() 메서드 (검색된 요소를 완전 제거)  (0) 2009.11.11
Manipulation - Clone() 메서드 (검색된 요소를 복사하기)  (0) 2009.11.11
Manipulation - Wrap()메서드 (검색된 요소를 특정 태그로 감싸기)  (0) 2009.11.11
Manipulation - 특정 용어에 대해서 번호 붙이기  (0) 2009.11.11
Posted by holland14
:

Manipulation - Clone() 메서드 (검색된 요소를 복사하기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 10:50 |

 

[Clone.htm]



<!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>검색된 요소를 복사하기</title>

    <style type="text/css">

        #menu { background-color:Blue; color:White; }

        #submenu { background-color:Silver; }

        #content { height:100px; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[!] 상단 메뉴를 복사(Clone)해서 하단 메뉴에 추가(Append)

            $('#menu').clone().insertBefore('#submenu');

            $('#menu').clone().prependTo('#submenu');

            // 원래 하단 메뉴가 있는 위치

            $('#menu').clone().appendTo('#submenu');           

            $('#menu').clone().insertAfter('#submenu');

        });

    </script>

</head>

<body>

    <div id="menu">

    HOME About

    </div>

    <div id="content">

    상단 메뉴를 아래 하단메뉴에 복사

    </div>

    <div id="submenu">

    여기는 하단메뉴 들어오는 곳

    </div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

 

 

 


 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Manipulation - Remove() 메서드 (검색된 요소를 완전 제거)  (0) 2009.11.11
Manipulation - ReplaceWith() 메서드 (검색된 요소를 변경하기)  (0) 2009.11.11
Manipulation - Wrap()메서드 (검색된 요소를 특정 태그로 감싸기)  (0) 2009.11.11
Manipulation - 특정 용어에 대해서 번호 붙이기  (0) 2009.11.11
Manipulation - DOM 요소의 앞/뒤에 요소 추가  (0) 2009.11.11
Posted by holland14
:

Manipulation - Wrap()메서드 (검색된 요소를 특정 태그로 감싸기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 10:33 |

 

[Wrap.htm]

 

<!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>검색된 요소를 특정 태그로 감싸기(Wrap)</title>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] <h3>...</h3>을 <u>태그로 묶자

            $('h3').wrap("<u></u>");

 

            //[2] 모든 A 태그를 <li>으로 묶자.

            //[a] 첫번째 링크앞에 동적으로 <ol> 태그 삽입

            $('<ol type="1" id="community"></ol>').insertBefore('a:eq(0)');

            //[b] 모든 링크를 <li>로 감싸고 이를 <ol> 태그에 추가

            $('a').each(function() {

                $(this).appendTo('#community').wrap('<li></li>');

            });

        });

    </script>

</head>

<body>

    <h3>.NET 기술 관련 커뮤니티</h3>

    <a href="http://www.asp.net/">ASP.NET</a>

    <a href="http://www.silverlight.net/">Silverlight</a>

    <a href="http://www.windowsclient.net/">WPF</a>

    <a href="http://www.dotnetkorea.com/">.NET All(?)</a>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 여기서는 '파이어폭스' 브라우저에서 출력되지 않는 결과가 발생해서, "Internet Explorer"를 기본 브라우저로 설정후 '브라우저에서 보기'로 실행하였다.

 

 


 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Manipulation - ReplaceWith() 메서드 (검색된 요소를 변경하기)  (0) 2009.11.11
Manipulation - Clone() 메서드 (검색된 요소를 복사하기)  (0) 2009.11.11
Manipulation - 특정 용어에 대해서 번호 붙이기  (0) 2009.11.11
Manipulation - DOM 요소의 앞/뒤에 요소 추가  (0) 2009.11.11
Manipulation - Append() 메서드 (DOM 요소 생성 후 원하는 요소에 추가)  (0) 2009.11.11
Posted by holland14
:

Manipulation - 특정 용어에 대해서 번호 붙이기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 10:09 |

 

[Append.htm]



<!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>특정 용어에 대해서 번호 붙이기</title>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] term CSS 클래스에 배경색 적용

            $('.term')

                .not(":odd").css("backgroundColor", "Yellow")

                .end()

                .filter(":odd").css("background-color", "LightBlue");

 

            //[2] 각각의 주석/용어 뒤에 번호 붙이기

            $('.term').each(function(i) { $(this).append("<sup>" + (i + 1) + "</sup>"); });

        });

    </script>

</head>

<body>

<h3>jQuery is a new kind of JavaScript Library.</h3>

<div>

<span class="term">jQuery</span> is a fast and concise <span class="term">JavaScript</span> Library

that simplifies <span class="term">HTML</span> document traversing,

event handling, animating, and <span class="term">Ajax</span> interactions

for rapid web development.

jQuery is designed to change the way that you write JavaScript.

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]


 

 


 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Manipulation - Clone() 메서드 (검색된 요소를 복사하기)  (0) 2009.11.11
Manipulation - Wrap()메서드 (검색된 요소를 특정 태그로 감싸기)  (0) 2009.11.11
Manipulation - DOM 요소의 앞/뒤에 요소 추가  (0) 2009.11.11
Manipulation - Append() 메서드 (DOM 요소 생성 후 원하는 요소에 추가)  (0) 2009.11.11
Traversing - 방금 실행한 집합 이전으로 되돌리기  (0) 2009.11.10
Posted by holland14
:

티스토리툴바