css()메서드를 사용하여 폰트 늘리기 및 줄이기

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


[Css.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">

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

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

                // 본문 영역을 변수에 담기

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

               

                // GET : 본문 영역의 폰트 사이즈 가져오기

                var currentSize = $region.css('fontSize'); // 16px

               

                // px 문자열을 제외한 16만 가져오기

                var num = parseFloat(currentSize, 10); // 16px -> 16

               

                // px : 단위를 가져오기

                var unit = currentSize.slice(-2); // 16px -> px : 오른쪽에서 2자 가져옴

               

                // 늘리기/줄이기

                if (this.id == 'goBig') {

                    num *= 1.5;

                }

                else if (this.id == 'goSmall') {

                    num /= 1.5;

                }

               

                // SET : 새롭게 설정된 픽셀값을 레이어 재 설정 : css()

                $region.css('fontSize', num + unit); // ?? + px

            });

        });

    </script>   

</head>

<body>

    <div id="btn">

        <div class="button" id="goBig">늘리기</div>

        <div class="button" id="goSmall">줄이기</div>

    </div>

    <div class="region">

    안녕하세요. 여기는 본문입니다.

    </div>

</body>

</html>

 




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




[실행결과]

--> 첫 화면.




--> '늘리기'텍스트를 마우스로 클릭했을때의 화면.




--> '줄이기'텍스트를 마우스로 클릭했을때의 화면






저작자표시

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

콜백(CallBack) : 매개변수로 함수를 전달  (0) 2009.11.09
브라우저 버전 나타내기  (0) 2009.11.09
one()메서드로 한번만 실행  (0) 2009.11.06
hover()로 마우스오버와 아웃을 동시 처리  (0) 2009.11.06
toggleClass() 메서드로 CSS 클래스에 대한 토글링  (0) 2009.11.06
Posted by holland14
:

one()메서드로 한번만 실행

.NET프로그래밍/jQuery 1.3.2 2009. 11. 6. 13:26 |


[One.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>one()메서드로 한번만 실행</title>

    <style type="text/css">   

    </style>

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

    <script type="text/javascript">

        $(document).ready(function () {

            //[!] bind(), click() 메서드와 달리 one() 메서드는 딱 한번만 실행되고, 이벤트가 해제됨.

            $("#my .hover").one("click", function () { alert('한번만 클릭'); });

        });

    </script>

</head>

<body>

 

<div id="my">

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

</div>

 

</body>

</html>

 




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




[실행결과]

--> 아래그림에서 '버튼'을  처음에 한번 클릭하면 아래그림과 같이 '메시지박스'가 출력되지만, 메시지박스의 '확인'버튼을 눌러서 메시지박스를 닫은 후 다시 '버튼'을 클릭해보면...





--> 더 이상 메시지박스가 출력되지 않는다.



저작자표시

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

브라우저 버전 나타내기  (0) 2009.11.09
css()메서드를 사용하여 폰트 늘리기 및 줄이기  (0) 2009.11.09
hover()로 마우스오버와 아웃을 동시 처리  (0) 2009.11.06
toggleClass() 메서드로 CSS 클래스에 대한 토글링  (0) 2009.11.06
toggle() 메서드로 토글링  (0) 2009.11.06
Posted by holland14
:

hover()로 마우스오버와 아웃을 동시 처리

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


[Hover.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>hover()로 마우스오버와 아웃을 동시 처리</title>

    <style type="text/css">

        .hover { cursor:hand; background-color:Yellow; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            $('table tr:gt(0)').hover(

                function() { $(this).addClass('hover'); },

                function() { $(this).removeClass('hover'); }

            );

        });

    </script>

</head>

<body>

    <table border="1">

        <tr>

            <td>제목</td>

        </tr>

        <tr>

            <td>ASP.NET</td>

        </tr>

        <tr>

            <td>ASP.NET</td>

        </tr>

    </table>

</body>

</html>

 




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




[실행결과]

--> 아래그림에서 테이블의 맨 위에 있는 첫 번째 행("제목"으로 텍스트가 쓰여져 있는 행)을 '마우스커서'로 올리면 아무런 반응이 없지만, 그아래있는 2개의 행에 각각 마우스커서를 올려보면 아래 그림과 같이 배경색이 노란색으로 변하고, 다시 마우스커서를 다른 곳으로 옮기면 노란색에서 원래의 무(흰)색으로 돌아온다. 





저작자표시

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

css()메서드를 사용하여 폰트 늘리기 및 줄이기  (0) 2009.11.09
one()메서드로 한번만 실행  (0) 2009.11.06
toggleClass() 메서드로 CSS 클래스에 대한 토글링  (0) 2009.11.06
toggle() 메서드로 토글링  (0) 2009.11.06
slice() 메서드로 지정된 개체만 가져오기  (0) 2009.11.06
Posted by holland14
:

toggleClass() 메서드로 CSS 클래스에 대한 토글링

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


[ToggleClass.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>toggleClass() 메서드로 CSS 클래스에 대한 토글링</title>

    <style type="text/css">

        .hidden { display:none; }

    </style>

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

 

 

<!--

toggle() 메서드는 CSS외에 다른 추가적인 기능도 가능하지만,

toggleClass() 메서드는 CSS 클래스에 대한 토글링만 가능하다.

-->

 




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




[실행결과]

--> 실행결과는 바로 앞에서 했던 "toggle() 메서드로 토글링"에서 실행한 결과와 동일하다.











저작자표시

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

one()메서드로 한번만 실행  (0) 2009.11.06
hover()로 마우스오버와 아웃을 동시 처리  (0) 2009.11.06
toggle() 메서드로 토글링  (0) 2009.11.06
slice() 메서드로 지정된 개체만 가져오기  (0) 2009.11.06
filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기  (0) 2009.11.06
Posted by holland14
:

toggle() 메서드로 토글링

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


[Toggle.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>toggle() 메서드로 토글링</title>

    <style type="text/css">

        .hidden { display:none; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function () {

            // .toggle(fn1, fn2); // fn1과 fn2를 서로 토글링한다...

            $("#btn").toggle(

                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>

 




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




[실행결과]

--> '버튼'을 누르기 전 화면.('버튼'아래에 있는 레이어에 노란색배경으로 '안녕'이라는 텍스트가 쓰여져 있다.)




--> '버튼'을 누른후 화면('버튼'아래에 있던 노란색배경으로 '안녕'이라는 텍스트가 쓰여져 있던 레이어 부분이 사라졌다.). 다시 '버튼'을 클릭하면 사라졌던 레이어부분이 다시 출력된다. '버튼'을 누를 때마다 교대로 레이어부분이 나타났다가 사라졌다가 한다.(= 토글링)





저작자표시

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

hover()로 마우스오버와 아웃을 동시 처리  (0) 2009.11.06
toggleClass() 메서드로 CSS 클래스에 대한 토글링  (0) 2009.11.06
slice() 메서드로 지정된 개체만 가져오기  (0) 2009.11.06
filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기  (0) 2009.11.06
특정 요소에 클릭 이벤트를 적용  (0) 2009.11.06
Posted by holland14
:

slice() 메서드로 지정된 개체만 가져오기

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


[Slice.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>slice() 메서드로 지정된 개체만 가져오기</title>

    <style type="text/css">

        .red { color:Red; }

    </style>

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

<input type="button" value="버튼" />

<input type="button" value="버튼" />

<input type="button" value="버튼" />

 

</body>

</html>

 

 


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




[실행결과]





--> 위의 그림의 '메시지 박스'에 있는 '확인'버튼 클릭 후 화면.




저작자표시

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

toggleClass() 메서드로 CSS 클래스에 대한 토글링  (0) 2009.11.06
toggle() 메서드로 토글링  (0) 2009.11.06
filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기  (0) 2009.11.06
특정 요소에 클릭 이벤트를 적용  (0) 2009.11.06
This.id로 DOM 요소의 id 속성 가져오기  (0) 2009.11.06
Posted by holland14
:

filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기

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


[Filter.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>filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기</title>

    <style type="text/css">

        .redBorder { border:solid 1px red; }

        .five { border-width:5px; }

    </style>

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

 

 

<!--

파이어폭스에서는 이미지(image)가 깨질경우 브라우저에 이미지가 출력이 안되므로, '이미지'가 깨지면 이미지를 대신할 '대체텍스트'를 넣어주는게

기본(기본값)이다.

-->

 




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




[실행결과]







저작자표시

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

toggle() 메서드로 토글링  (0) 2009.11.06
slice() 메서드로 지정된 개체만 가져오기  (0) 2009.11.06
특정 요소에 클릭 이벤트를 적용  (0) 2009.11.06
This.id로 DOM 요소의 id 속성 가져오기  (0) 2009.11.06
AddClass / RemoveClass(스타일 추가 / 제거)  (0) 2009.11.06
Posted by holland14
:

특정 요소에 클릭 이벤트를 적용

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


[Click.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>bind() 중 click 이벤트는 click()메서드로 사용</title>

    <style type="text/css">

        .redColor { color:Red; }

    </style>

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

 




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




[실행결과]

--> 첫 화면




--> 위의 그림에서 '닷넷코리아'텍스트를 클릭하면 해당사이트로 이동함.




--> 맨 위의 그림에서 '비주얼아카데미'텍스트를 클릭하면 또 하나의 '인터넷 창'이 열리면서 해당사이트로 이동함.




저작자표시

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

slice() 메서드로 지정된 개체만 가져오기  (0) 2009.11.06
filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기  (0) 2009.11.06
This.id로 DOM 요소의 id 속성 가져오기  (0) 2009.11.06
AddClass / RemoveClass(스타일 추가 / 제거)  (0) 2009.11.06
bind() 메서드로 동적으로 이벤트 부여  (0) 2009.11.06
Posted by holland14
:

This.id로 DOM 요소의 id 속성 가져오기

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


 

    This

  1. 이벤트 핸들러에서의 this는 DOM을 가리킴

    2.  

    $(this)

  2. 현재 이벤트가 적용된 개체(DOM)을 jQuery 개체로 반환

    3.  

    This.id

  3. DOM 개체 중 클릭된 요소를 알고자 할 때에는 id 속성 사용





[ThisId.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>This.id로 DOM 요소의 id 속성 가져오기</title>

    <style type="text/css">

        .redColor { color:Red; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] 닷넷코리아 레이어 클릭시 CSS 클래스 해제

            $('#dnk').bind('click', function() {

                //[a] 해제

                $('#mainMenu .redColor').removeClass('redColor'); // 3개의 요소의 CSS 클래스 해제

                //[b] #dnk만 다시 적용

                $(this).addClass('redColor'); // 현재 나만 다시 적용

            });

 

            //[2] mainMenu의 모든 항목에 대해서 click 이벤트 적용

            $('#mainMenu .redColor').bind("click", function() {

                //[!] this.id로 분기

                if (this.id == "va") {

                    alert("비주얼 아카데미 클릭");

                }

                else if (this.id == "ll") {

                    alert($(this).text()); // #ll 안에 들어있는 텍스트

                }

            });

        });

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

 




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




[실행결과]








--> "닷넷코리아"텍스트 클릭시...




저작자표시

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

filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기  (0) 2009.11.06
특정 요소에 클릭 이벤트를 적용  (0) 2009.11.06
AddClass / RemoveClass(스타일 추가 / 제거)  (0) 2009.11.06
bind() 메서드로 동적으로 이벤트 부여  (0) 2009.11.06
DOM 요소 가져오기  (0) 2009.11.06
Posted by holland14
:

AddClass / RemoveClass(스타일 추가 / 제거)

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


[AddClassRemoveClass.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>addClass() : 스타일 추가</title>

    <style type="text/css">

        .yellow { background-color:Yellow; border:1px solid red; }

    </style>

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

    <script type="text/javascript">

        //[!] 마우스 오버시 yellow 스타일 적용, 아웃시 yellow 스타일 해제

        $(document).ready(function() {

            $('#btnClick')

                    .bind('mouseover', function() { $('#btnClick').addClass('yellow'); })

                    .bind('mouseout', function() { $(this).removeClass('yellow'); });

        });

    </script>

</head>

<body>

 

<div id="btnClick">

    마우스를 올려보세요~

</div>

 

</body>

</html>

 




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




[실행결과]

--> 마우스 오버(mouseover)시...




--> 마우스 아웃(mouseout)시...




저작자표시

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

특정 요소에 클릭 이벤트를 적용  (0) 2009.11.06
This.id로 DOM 요소의 id 속성 가져오기  (0) 2009.11.06
bind() 메서드로 동적으로 이벤트 부여  (0) 2009.11.06
DOM 요소 가져오기  (0) 2009.11.06
메서드 체인 사용하기  (0) 2009.11.05
Posted by holland14
:

티스토리툴바