블로그 이미지
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. 6. 14:28 .Net Project/Jquery 1.3.2

15장 JQuery 토글 클래스 ( ToggleClass() )

반응형
 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() 메서드 토글링 </title>

    <style type="text/css">

       .hidden { display:none;}

    </style>

    <script src="../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

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

                    $('#myLayer').toggleClass('hidden');

                });           

               

        });

    </script>

</head>

<body>

<h3> 버튼이 클릭할때마다 보이기/숨기기</h3>

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

 

<div id="myLayer" style="background-color:Yellow;">

         안녕하세요 !!!!

</div> 

</body>

</html>





반응형

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

17장 JQuery 마우스 오버와 아웃 처리 ( Mouse Hover() )  (0) 2009.11.06
16장 JQuery 토글 ( Toggle() )  (0) 2009.11.06
14장 JQuery 슬라이스 ( Slice() )  (0) 2009.11.06
13장 JQuery 필터 활용 ( Filter() )  (0) 2009.11.06
12장 JQuery Click 이벤트 Click 메서드로 사용 (Bind)  (0) 2009.11.06
posted by Magic_kit
2009. 11. 6. 14:25 .Net Project/Jquery 1.3.2

14장 JQuery 슬라이스 ( Slice() )

반응형
 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">

        .redColor { color:Red;}

        .red { color:Red;}

    </style>

    <script src="../jquery-1[1].3.2-vsdoc2.js"
            type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

           
            //size() 해당 결과값(집합)의 개수

            alert("현재 웹 페이지에는 " +
                    $('input').size() + "개의 input 태그가 있다");

 

            //2번째와 3번째 스타일 적용
            //1번째 인덱스에서(3-1) 번째 인덱스까지
            $('input').slice(1, 3).addClass('red');

 

        });

    </script>

</head>

<body>

<h3>2번째와 3번째 버튼에만 빨간 글씨 적용</h3>

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

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

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

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

 

</body>

</html> 





반응형

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

16장 JQuery 토글 ( Toggle() )  (0) 2009.11.06
15장 JQuery 토글 클래스 ( ToggleClass() )  (0) 2009.11.06
13장 JQuery 필터 활용 ( Filter() )  (0) 2009.11.06
12장 JQuery Click 이벤트 Click 메서드로 사용 (Bind)  (0) 2009.11.06
11장 JQuery ID로 DOM 속성 가져오기 (This.id)  (0) 2009.11.06
posted by Magic_kit
2009. 11. 6. 14:20 .Net Project/Jquery 1.3.2

13장 JQuery 필터 활용 ( Filter() )

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

    <script type="text/javascript">

        $(document).ready(function () {

            $('img').addClass('redBorder')
            //닷넷 title만 뽑아서 five 클래스 적용

            .filter('[title*=DotNet]').addClass('five') 
            .end() //부모로 부터 다시 이동
            .filter('[alt*=디드]').removeClass ('redBorder');

         });

    </script>

</head>

<body>

 

<img src="../Image/11.PNG" title="DotNet" alt="DotNet" />

<img src="../Image/12.PNG" title="ASP.NeT" alt="DotNet" />

<img src="../Image/8.PNG" title="HTML" alt="임베디드" />

 

</body> 

</html>





반응형

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

15장 JQuery 토글 클래스 ( ToggleClass() )  (0) 2009.11.06
14장 JQuery 슬라이스 ( Slice() )  (0) 2009.11.06
12장 JQuery Click 이벤트 Click 메서드로 사용 (Bind)  (0) 2009.11.06
11장 JQuery ID로 DOM 속성 가져오기 (This.id)  (0) 2009.11.06
10장 JQuery 클래스 추가 (AddClass)  (0) 2009.11.06
posted by Magic_kit
2009. 11. 6. 14:16 .Net Project/Jquery 1.3.2

12장 JQuery Click 이벤트 Click 메서드로 사용 (Bind)

반응형
 Bind.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="../jquery-1[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="li" class="redColor">라이선스랜드 </div>

</div>

 

</body>

</html> 





반응형

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

14장 JQuery 슬라이스 ( Slice() )  (0) 2009.11.06
13장 JQuery 필터 활용 ( Filter() )  (0) 2009.11.06
11장 JQuery ID로 DOM 속성 가져오기 (This.id)  (0) 2009.11.06
10장 JQuery 클래스 추가 (AddClass)  (0) 2009.11.06
09장 JQuery 바인딩 (Bind)  (0) 2009.11.06
posted by Magic_kit

티스토리툴바