블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

 «  » 2025.1
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

Category

Recent Post

Recent Comment

Archive

2009. 11. 11. 12:05 .Net Project/Jquery 1.3.2

46장 JQueryCSS 검색된 요소 구하기 (OuterWidthAndHeight)

반응형
 

 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:10px solid gray;

               position:absolute;

               margin:5px;

               left:10px;

               padding:10px;

               width:100px;

               height:100px;

               top:50px;                       

             }

    </style>

    <script src="../../jquery-1[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("outerHeight : " + $("#my").outerWidth(true));

            });

        });

    </script>

</head>

<body>

    <div id="my">

        <p>Jquery</p>

        <p>SilverLight</p>

    </div>

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

</body>

</html> 

WebJQuery.rar




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

49장 JQueryEvent 동적으로 다른 이벤트 호출 (Unbind)  (0) 2009.11.12
48장 JQueryEvent 동적으로 다른 이벤트 호출 (Trigger)  (0) 2009.11.12
45장 JQueryCSS 검색된 요소 구하기 (WidthHeight)  (0) 2009.11.11
44장 JQueryManipulation 검색된 요소 완전제거 (Remove)  (0) 2009.11.11
43장 JQueryManipulation 검색된 요소 변경하기 (ReplaceWith)  (0) 2009.11.11
posted by Magic_kit
2009. 11. 11. 11:59 .Net Project/Jquery 1.3.2

45장 JQueryCSS 검색된 요소 구하기 (WidthHeight)

반응형
 



 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="../../jquery-1[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>SilverLight</p>

    </div>

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

</body>

</html> 

WebJQuery.rar




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

48장 JQueryEvent 동적으로 다른 이벤트 호출 (Trigger)  (0) 2009.11.12
46장 JQueryCSS 검색된 요소 구하기 (OuterWidthAndHeight)  (0) 2009.11.11
44장 JQueryManipulation 검색된 요소 완전제거 (Remove)  (0) 2009.11.11
43장 JQueryManipulation 검색된 요소 변경하기 (ReplaceWith)  (0) 2009.11.11
42장 JQueryManipulation 검색된 요소 복사 (Clone)  (0) 2009.11.11
posted by Magic_kit
2009. 11. 11. 11:29 .Net Project/Jquery 1.3.2

44장 JQueryManipulation 검색된 요소 완전제거 (Remove)

반응형
 



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

        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="../../jquery-1[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>");

            });

 

            //[2] 요소 없애기

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

                $('div').remove();

                $('div').append("<b>hi</b>");

            });

        });

       

    </script>

</head>

<body>

    <h3>jQuery UI provides abstractions</h3>

    <div>

        <p>JQuery</p>

        <p>Silverlight</p>

    </div>

   

    <input type="button" id="btnEmpty" value="위 영역 삭제(레이블만)" />

    <input type="button" id="btnRemove" value="위 영역 완전 제거" />   

   

</body>

</html> 

WebJQuery.rar

반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

46장 JQueryCSS 검색된 요소 구하기 (OuterWidthAndHeight)  (0) 2009.11.11
45장 JQueryCSS 검색된 요소 구하기 (WidthHeight)  (0) 2009.11.11
43장 JQueryManipulation 검색된 요소 변경하기 (ReplaceWith)  (0) 2009.11.11
42장 JQueryManipulation 검색된 요소 복사 (Clone)  (0) 2009.11.11
41장 JQueryManipulation 검색 요소 특정 태그로 감싸기 (Wrap)  (0) 2009.11.11
posted by Magic_kit
2009. 11. 11. 11:16 .Net Project/Jquery 1.3.2

43장 JQueryManipulation 검색된 요소 변경하기 (ReplaceWith)

반응형
 


ReplaceWith 
 

<!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="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //모든 버튼 요소 클릭시 
            $('button').click(function () {

                //나 자신을 태그로 변경하자  <dib>변경시 완전 제거 

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

            }); 

        });       

    </script>

</head>

<body>

    <h3>jQuery UI provides abstractions</h3>

 

    <button>First</button>

    <button>Second</button>

    <button>Third</button>

   

</body>

</html> 

WebJQuery.rar

반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

45장 JQueryCSS 검색된 요소 구하기 (WidthHeight)  (0) 2009.11.11
44장 JQueryManipulation 검색된 요소 완전제거 (Remove)  (0) 2009.11.11
42장 JQueryManipulation 검색된 요소 복사 (Clone)  (0) 2009.11.11
41장 JQueryManipulation 검색 요소 특정 태그로 감싸기 (Wrap)  (0) 2009.11.11
40장 JQueryManipulation 특정 용어 번호 추가 (Append)  (0) 2009.11.11
posted by Magic_kit

티스토리툴바