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

11장 JQuery ID로 DOM 속성 가져오기 (This.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="../jquery-1[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');

 

                 //[b] #dn만 다시 적용
                 $(this).addClass('redColor'); // 현재 나만 적용

             });

 

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

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

             //[!] this.id 로 qqnsrl

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

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

              }

             else if (this.id == li) {

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

             }

         });

     });

 

     </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' 카테고리의 다른 글

13장 JQuery 필터 활용 ( Filter() )  (0) 2009.11.06
12장 JQuery Click 이벤트 Click 메서드로 사용 (Bind)  (0) 2009.11.06
10장 JQuery 클래스 추가 (AddClass)  (0) 2009.11.06
09장 JQuery 바인딩 (Bind)  (0) 2009.11.06
08장 DOM 요소 가져오기 (DOM)  (0) 2009.11.06
posted by Magic_kit
2009. 11. 6. 14:08 .Net Project/Jquery 1.3.2

10장 JQuery 클래스 추가 (AddClass)

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

        .redColor { color : Red; border:1px sholid yellow;}

        .blueColor { color : Blue;}

   

    </style>   

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

    <script type="text/javascript">

        $(document).ready(function () {

 
            $('#btnClick').bind('mouseover', function () 
            {

             $('#btnClick').addClass('redColor'); })

              .bind('mouseout', function () { $('#btnClick').removeClass
                   ('redColor'); });

            });

     </script>

</head>

<body>

 

<div id="btnClick">

        클릭하세요 !!!
</div> 

</body>

</html> 


반응형

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

12장 JQuery Click 이벤트 Click 메서드로 사용 (Bind)  (0) 2009.11.06
11장 JQuery ID로 DOM 속성 가져오기 (This.id)  (0) 2009.11.06
09장 JQuery 바인딩 (Bind)  (0) 2009.11.06
08장 DOM 요소 가져오기 (DOM)  (0) 2009.11.06
07장 JQuery메서드 체인 (Method Chane)  (0) 2009.11.05
posted by Magic_kit
2009. 11. 6. 14:04 .Net Project/Jquery 1.3.2

09장 JQuery 바인딩 (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() 메서드 이벤트 부여 </title>     

    <style type="text/css">

        .redColor { color : Red;}

        .blueColor { color : Blue;}

   

    </style>

   

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

    <script type="text/javascript">

        $(document).ready(function () {

            $('#btnClick').bind("click", function () { alert('클릭');  });

            $('#btnOver').bind("mouseover", function () {
                          alert('마우스 올림'); });

               document.getElementById
                         ('btnClick').style.backgroundColor='red';

        });   

    </script>

</head>

<body> 

<div id="btnClick">

        클릭하세요
</div>

 

<div id="btnOver" >

        마우스 올려주세요
</div> 

</body>

</html>





반응형

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

11장 JQuery ID로 DOM 속성 가져오기 (This.id)  (0) 2009.11.06
10장 JQuery 클래스 추가 (AddClass)  (0) 2009.11.06
08장 DOM 요소 가져오기 (DOM)  (0) 2009.11.06
07장 JQuery메서드 체인 (Method Chane)  (0) 2009.11.05
06장 JQuery특정 단어 검색 (Contains)  (0) 2009.11.05
posted by Magic_kit
2009. 11. 6. 14:01 .Net Project/Jquery 1.3.2

08장 DOM 요소 가져오기 (DOM)

반응형
DOM.htm 
 일반적으로 사용하여 DOM 요소 가져오는 방법 1)

<!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>DOM 요소 가져오기 </title>

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

    <script type="text/javascript">

        $().ready( 

            function () {

                alert("로드됨");

                dnk id를 가지는 태그의 이름
                var tagName = $('#dnk').get.tagName;

                alert(tagName); //A 출력

            }

        ); 

   

    </script>

</head>

<body>

    <a href="http://www.dotnetkorea.com" id="dnk">닷넷코리아</a>

 

</body>

</html> 


 위의 내용 제외하고 다른 방식으로 사용 가능 하다

[2]두번째 방법
  $(document).ready(
        function () {
            alert("로드됨");

[3]세번째 방법
 $(
         function(){
            alert("로드됨")
         }       
      );





반응형

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

10장 JQuery 클래스 추가 (AddClass)  (0) 2009.11.06
09장 JQuery 바인딩 (Bind)  (0) 2009.11.06
07장 JQuery메서드 체인 (Method Chane)  (0) 2009.11.05
06장 JQuery특정 단어 검색 (Contains)  (0) 2009.11.05
05장 JQuery 짝수테이블 배경색 변경 (EvenOdd)  (0) 2009.11.05
posted by Magic_kit

티스토리툴바