bind() 메서드로 동적으로 이벤트 부여

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


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

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

    <script type="text/javascript">

        $(document).ready(

            function() {

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

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

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

                });                   

                $('#btnClick').bind("mouseout", function() {

                    $('#btnClick').get(0).style.backgroundColor = '';

                });

            });

    </script>

</head>

<body>

 

<div id="btnClick">

    클릭하세요!!!

</div>

 

</body>

</html>

 




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




[실행결과]


--> '클릭하세요!!!'텍스트에 마우스 오버(mouseover)시...




--> '클릭하세요!!!'텍스트에서 마우스 아웃(mouseout)시...




--> '클릭하세요!!!'텍스트에 마우스 클릭(click)시...




















저작자표시

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

This.id로 DOM 요소의 id 속성 가져오기  (0) 2009.11.06
AddClass / RemoveClass(스타일 추가 / 제거)  (0) 2009.11.06
DOM 요소 가져오기  (0) 2009.11.06
메서드 체인 사용하기  (0) 2009.11.05
'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기  (0) 2009.11.05
Posted by holland14
:

DOM 요소 가져오기

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


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

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

    <script type="text/javascript">

        //[!] jQuery의 엔트리 포인트

        //$(document).ready(  //[1] 첫번째 방법 : 추천

        //$().ready(          //[2] 두번째 방법

        $(                    //[3] 세번째 방법

            function() {

                alert("로드됨");

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

                alert(tagName); // A

            }

        );

    </script>

</head>

<body>

 

 

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

 

 

</body>

</html>

 



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




[실행결과]











--> 바로 위의 그림에서 링크가 걸린 '닷넷코리아'텍스트 클릭 후 해당사이트로 이동한 화면.




저작자표시

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

AddClass / RemoveClass(스타일 추가 / 제거)  (0) 2009.11.06
bind() 메서드로 동적으로 이벤트 부여  (0) 2009.11.06
메서드 체인 사용하기  (0) 2009.11.05
'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기  (0) 2009.11.05
사용자 정의 선택기('선택기 필터(기본 필터)'를 사용해서...) - 테이블의 짝수번째 배경색 변경하기  (0) 2009.11.05
Posted by holland14
:

메서드 체인 사용하기

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


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

        .redColor { color:Red; }

        .blueColor { color:Blue; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            $('td:contains("RedPlus")') // td 중 "RedPlus" 포함하는 셀 찾음

            .siblings() // 형제 노드에게

            .addClass("redColor") // 전경색을 Red -> 레드플러스 : Red

            .parent() // 부모로 이동

            .find('td:eq(0)') // 0번째 셀을 찾아서

            .addClass('blueColor'); // RedPlus : Blue

        });

    </script>

</head>

<body>

    <table>

        <tr>

            <td>NickName</td><td>이름</td><td>비고</td>

        </tr>

        <tr>

            <td>RedPlus</td><td>레드플러스</td><td>닷넷</td>

        </tr>

        <tr>

            <td>Hawaso</td><td>하와소</td><td>강의</td>

        </tr>       

    </table>

</body>

</html>

 




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




[실행결과]








저작자표시

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

bind() 메서드로 동적으로 이벤트 부여  (0) 2009.11.06
DOM 요소 가져오기  (0) 2009.11.06
'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기  (0) 2009.11.05
사용자 정의 선택기('선택기 필터(기본 필터)'를 사용해서...) - 테이블의 짝수번째 배경색 변경하기  (0) 2009.11.05
정규표현식 실렉터(Selector)  (0) 2009.11.05
Posted by holland14
:

'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기

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


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

        .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] td 태그내의 텍스트가 RedPlus를 포함하는 요소를 검색 후 배경색을 Red

            $("td:contains('RedPlus')").addClass("redColor");

        });   

    </script>

</head>

<body>

 

    <table>

        <tr>

            <td>RedPlus.NET</td>

        </tr>

        <tr>

            <td>DotNetKorea</td>

        </tr>

        <tr>

            <td>Hawaso</td>

        </tr>

    </table>

 

</body>

</html>

 




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




[실행결과]





저작자표시

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

DOM 요소 가져오기  (0) 2009.11.06
메서드 체인 사용하기  (0) 2009.11.05
사용자 정의 선택기('선택기 필터(기본 필터)'를 사용해서...) - 테이블의 짝수번째 배경색 변경하기  (0) 2009.11.05
정규표현식 실렉터(Selector)  (0) 2009.11.05
Selector - 선택자(선택기)  (0) 2009.11.05
Posted by holland14
:

사용자 정의 선택기('선택기 필터(기본 필터)'를 사용해서...) - 테이블의 짝수번째 배경색 변경하기

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

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

        .greenColor { background-color:Green; }

        .yellowColor { 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] 홀수번째 배경색을 green으로 하고 싶다?

            $('tr:odd').addClass('greenColor');

 

            //[2] tr 태그 중 짝수번째 배경색을 Yellow로 하고자한다면?

            $('table tr:even').addClass('yellowColor');

        });

    </script>

</head>

<body>

    <table>

        <tr>

            <td>Windows Server(0번째 : 짝수)</td>

        </tr>

        <tr>

            <td>SQL Server</td>

        </tr>

        <tr>

            <td>Visual Studio</td>

        </tr>

        <tr>

            <td>DotNetNuke Portal</td>

        </tr>

    </table>

</body>

</html>

 




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




[실행결과]







저작자표시

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

메서드 체인 사용하기  (0) 2009.11.05
'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기  (0) 2009.11.05
정규표현식 실렉터(Selector)  (0) 2009.11.05
Selector - 선택자(선택기)  (0) 2009.11.05
Hello World jQuery  (0) 2009.11.05
Posted by holland14
:

정규표현식 실렉터(Selector)

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

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

        .red { color:Red; }

        .green { color:Green; }

        .silver { color:Silver; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(

 

            function() {

                //[1] dotnet이라는 단어가 둘어가는 링크에 배경을 red로 설정

                $("a[href*='dotnet']").addClass("red"); // ~가 들어가는

 

                //[2] aspx로 끝나는 링크의 배경을 green으로 설정

                $('a[href$="aspx"]').addClass("green"); // ~로 끝나는

 

                //[3] mailto:로 시작하는 링크의 배경을 silver로 설정

                jQuery("a[href^='mailto:']").addClass('silver');

            }

        );

    </script>

</head>

<body>

 

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

    <a href="http://www.VisualAcademy.com/Default.aspx">비주얼아카데미</a>

    <a href="mailto:redplus@hawaso.com">이메일</a>

 

</body>

</html>

 




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



[실행결과]





저작자표시

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

'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기  (0) 2009.11.05
사용자 정의 선택기('선택기 필터(기본 필터)'를 사용해서...) - 테이블의 짝수번째 배경색 변경하기  (0) 2009.11.05
Selector - 선택자(선택기)  (0) 2009.11.05
Hello World jQuery  (0) 2009.11.05
jQuery 소개  (0) 2009.11.05
Posted by holland14
:

Selector - 선택자(선택기)

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


[Selector.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>Selector : 선택자/선택기/실렉터/셀렉터</title>

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

    <style type="text/css">

        .bg { background-color:Yellow; }

        .horizontal { float:left; list-style:none; margin:10px; }

    </style>

    <script type="text/javascript">

        $(document).ready(

 

            function() {

 

                //[1] li > u 에 대해서 배경색을 Yellow로 설정

                $('li > u').addClass('bg'); // li 자식 요소 중 u 태그인것만 선별

 

                //[2] id 속성이 myFavorites인 것의 자식 요소중 li에 CSS 클래스 적용

                $("#myFavorites > li").addClass("horizontal");

 

                //[3] id 속성에 대해서 직접 접근

                jQuery('#jquery').click(function() { alert('jQuery'); });

               

                //[4] class 속성이 sil인 개체에 접근

                $('.sil').click(function() { alert('실버라이트'); });

            }

 

        );

    </script>

</head>

<body>

 

<h3>관심사항</h3>

<ul id="myFavorites">

    <li><u>C#</u></li>

    <li>ASP.NET</li>

    <li class="sil">Silverlight</li>

    <li id="jquery">j<u>Q</u>uery</li>

</ul>

 

</body>

</html>

 

 

 

 

 

 

<!-- 참고사항 : 

쩜(.)클래스 / 샵(#)아이디

-->





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




[실행결과]







저작자표시

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

'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기  (0) 2009.11.05
사용자 정의 선택기('선택기 필터(기본 필터)'를 사용해서...) - 테이블의 짝수번째 배경색 변경하기  (0) 2009.11.05
정규표현식 실렉터(Selector)  (0) 2009.11.05
Hello World jQuery  (0) 2009.11.05
jQuery 소개  (0) 2009.11.05
Posted by holland14
:

Hello World jQuery

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



[HelloWorld.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>Hello World jQuery!!!</title>

    <style type="text/css">

        .bg { background-color:Yellow; }

        .sil { background-color:Silver; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() { // 페이지가 준비되었을 때

            $('#hw').addClass("bg"); // hw라는 id속성을 가지는 레이어를 가져와 그것에 bg CSS 클래스 적용

            $('#hw').click(function() { alert('안녕'); $(this).addClass("sil"); });

        });

    </script>   

</head>

<body>

 

<div style="background-color:Yellow;" onclick="alert('안녕');">

안녕하세요. jQuery!!!

</div>

 

<div class="bg">

안녕하세요. jQuery!!!

</div>

 

<div id="hw">

안녕하세요. jQuery!!!

</div>

 

</body>

</html>

 



=========================================================




[실행결과]






저작자표시

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

'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기  (0) 2009.11.05
사용자 정의 선택기('선택기 필터(기본 필터)'를 사용해서...) - 테이블의 짝수번째 배경색 변경하기  (0) 2009.11.05
정규표현식 실렉터(Selector)  (0) 2009.11.05
Selector - 선택자(선택기)  (0) 2009.11.05
jQuery 소개  (0) 2009.11.05
Posted by holland14
:

jQuery 소개

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

 

  1. jQuery 소개

    2.  

    - 가장 많이 사용되며 잘 만들어진 오픈소스 자바스크립트 라이브러리

    - CSS에서 사용되는 선택기/선택자(Selector) 개념으로 DOM의 멤버에 접근 가능

    - Visual Studio 사용시 인텔리센스(Intellisense)의 도움을 받을 수 있어, 배우기 쉽고, Visual Studio 2010에 기본으로 포함됨.

    - 플러그인 개념을 도입해서 기본 기능에서 쉽게 확장 기능으로 업그레이드 가능

     

    - 참고 사이트

    http://jquery.com/  --> jQuery 공식 사이트

    http://jqueryui.com/

     

    * 설치

    - 웹 사이트에 주로 /js/ 폴더에 최신 버전을 다운로드.

    - ~vsdoc2.js 식의 파일이 Visual Studio 인텔리센스 지원.

     

    * 사용도구

    - 메모장

    - 기존 사용 에디터

    - Visual Studio 2008 SP1 이상 버전 추천

     

     

     

    배포할 때는 min버전으로 용량 줄여서 배포하고,

    개발할 때는 document버전 사용해서 인텔리센스 기능 사용함.

     

     

     

     

    * jQuery의 장점 : <body>태그에서 CSS코드와 JavaScript코드 부분을 걷어내서 <body>태그 내에서 깔끔하게 코드를 작성하고, 거기에 더해서 동적으로 자바스크립트코드를 추가할 수도 있다.

     

     

     

    - $() 팩터리 함수(메서드, 생성자)

     

    - $()로 CSS의 선택기와 모든 DOM요소 접근

        --> $("선택기").XXX메서드();

     

    - 자바스크립트 익명 메서드(람다식) 호출

        --> $(document).ready(function() { ... });

     

    - 익명(Anonymous)함수/무명함수

        --> function() {}

     

    - $()와 jQuery()는 동일한 코드다.

        --> 둘 중 하나 사용 가능

     

     

     

     

    * jQuery의 특징

     

    - 막강한 CSS 선택기

    - 닷넷 진영이 아니라 공통 소스 진영(닷넷, 자바 상관없이 사용 가능)

    - 크로스 브라우저 지원(인터넷익스플로러, 파이어폭스 등)

    - 메서드 체인 제공(C#처럼...)

    - Ajax 지원

    - 풍부한 플러그 인 지원

     

     

     

    * jQuery의 기본 : 선택기(Selector)

     

    - 대상 DOM 요소를 식별하기 위한 방법

    - $(selector) 혹은 jQuery(selector) 구문 사용

    - selector는 매치되는 개체 집합을 반환

    - 기본 CSS 선택기를 그대로 사용 가능

        - CSS에 익숙하다면 jQuery 파란띠로 승급!

        - #login

        - .codeBox

        - p  a

    - 다양한 선택기 필터의 지원

     

     

     

     

저작자표시

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

'선택기 필터 - contains필터'를 사용해서 특정 텍스트 검색하기  (0) 2009.11.05
사용자 정의 선택기('선택기 필터(기본 필터)'를 사용해서...) - 테이블의 짝수번째 배경색 변경하기  (0) 2009.11.05
정규표현식 실렉터(Selector)  (0) 2009.11.05
Selector - 선택자(선택기)  (0) 2009.11.05
Hello World jQuery  (0) 2009.11.05
Posted by holland14
:

DotNetBlogEngine (블로그 오픈소스)

2009. 11. 4. 10:45

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

티스토리툴바