jquery : 셀렉터

JAVASCRIPT 2010. 12. 6. 14:51 Posted by Dayis

a - 모든 링크(<a>) 엘리먼트와 일치하는 셀렉터
#specialID - specialID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터
.specialClass - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 셀렉터.
a#specialID.specialClass - 아이디가 specialID이고 specialClass 를 클래스로 가지는 링크와 일치하는 셀렉터
p a.specialClass - <p> 엘리먼트 내에 선언되고 specialClass를 클래스로 가지는 모든 링크와 일치하는 셀렉터
p > a   - <p> 엘리먼트의 바로 아래 자식 링크 셀렉터
a[href^http://] - href의 값이 정확히 http://로 시작하는 모든 링크 셀렉터
input[type=text] - type이 text인 모든 input 엘리먼트와 일치

셀렉터                   설명

*                         모든 엘리먼트와 일치
E                        태그명이 E인 모든 엘리먼트와 일치  
E F                     E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F                    E의 바로 아래 자식이면서 태그명이  F인 엘리먼트와 일치
E+F                    E의 형제 엘리먼트로 다으멩 나오는 엘리먼트 F와 일치
E~F                    E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F)             태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C                    클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함
E#I                     아이디가 I인 엘리먼트 E와 일치. E의 생력은 *#I와 동일함.
E[A]                    어트리뷰트  A를 가지는 모든 엘리먼트 E와 일치.
E[A=V]                값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]               값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]               값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]               값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

DOM에서 위치를 기반으로 엘리먼트를 선택한다.

셀렉터            설명

:first                페이지에서 처음으로 일치하는 엘리먼트.  li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
:last                페이지에서 마지막으로 일치하는 엘리먼트 li a:last는 리스트 아이템의 마지막 링크를 반환한다.
:first-child        첫번째 자식 엘리먼트.  li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.
:last-child        마지막 자식 엘리먼트.  li:last-child는 각 리스트의 마지막 아이템을 반환한다.
:only-child       형제가 없는 모든 엘리먼트를 반환한다.
:ntn-child(n)     n번째 자식 엘리먼트. li:ntn-child(2)는 각 리스트의 두번재 리스트 아이템을 반환한다.
:ntn-child(even|odd)    짝수 또는 홀수 자식 엘리먼트 li:ntn-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.
:ntn-child(Xn+Y)        전달된 공식에 따른 n번째 자식 엘리먼트 Y는 0인 경우 생략 가능하다. 
       li:ntn-child(3n)은 3의 배수 번재 아이템을 반환한다.
       li:ntn-child(5n+1)은 5의 배수 +1 번째 아이템을 반환한다.

:even / :odd            페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수 번째 아이템을 반환한다.
:eq(n)              n번째로 일치하는 엘리먼트.
:gt(n)               n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.
:lt(n)                n번재 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

jQuery 정의 필터 셀렉터. 대상 엘리먼트를 식벽해내는 데 강력한 기능을 준다.

셀렉터            설명

:animated        현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.
:button            모든 버튼을 선택한다.(input[type=submit], input[type=rest], input[type=button], button)
:checkbox        체크 박스 엘리먼트만 선택한다    (input[type=checkbox])
:checked        선택된 체크박스나 라디오 박스만 선택한다
:contains(foo)       텍스트foo를 포함하는 엘리먼트만 선택한다.
:disabled        인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
:enabled        인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.
:file                모든 파일 엘리먼트를 선택한다.    (input[type=file])
:header           헤더 엘리먼트만 선택한다. 예를 들어<h1>부터<h6>까지의 엘리먼트를 선택한다.
:hidden        감춰진 엘리먼트만 선택한다.
:image        폼 이미지를 선택한다 (input[type=image])
:input        폼 엘리먼트만 선택한다.(input, select, textarea,button)
:not(filter)        필터의 값을 반대로 변경한다.
:parent            빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
:password        패스워르 엘리먼트만 선택한다. (input[type=password])
:radio            라디오 버튼 엘리먼트만 선택한다. (input[type=radio])
:reset            리셋 버튼을 선택한다. (input[type=reset])이나    button[type=reset]
:selected        선택된 엘리먼트만 선택한다.
:submit            전송 버튼을 선택한다. (button[type=submit] 이나 input[type=submit])
:text        텍스트 엘리먼트만 선택한다. (input[type=text])
:visable        보이는(visable) 엘리먼트만 선택한다.

출처 :: http://ssongka.egloos.com/2408082

저작자표시 비영리 변경금지

'JAVASCRIPT' 카테고리의 다른 글

jQuery.ajax()를 이용한 페이지 실행  (0) 2010.12.21
JQuery select box  (0) 2010.12.20
jquery 오류  (0) 2010.12.09
jquery : 속도, 페이드인, 애니메이션  (0) 2010.12.06
전각/반각 구분하여 문자열 계산  (0) 2010.10.05

jquery : 속도, 페이드인, 애니메이션

JAVASCRIPT 2010. 12. 6. 10:49 Posted by Dayis
<!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>  
    <link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />  
    <style type="text/css">  
        .DivCss  
        {  
            position: relative; /*해당 요소가 relative or absolute 로 설정(기본값:static)되어야 animate가 동작 */ 
            background-color: #FFFFCC; border: thin dotted #000000; padding: 2px; margin: 0px; width: 200px;  
        }  
    </style>  
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>  
    <script language="javascript" type="text/javascript">  
        $(document).ready(function () {  
            $('p:eq(1)').hide();  
            $('span.more').click(function () {  
                //효과 속도   
                //slow: 0.6초 안에, normal: 0.4초 안에, fast: 0.2초안에 효과가 완성.  
                //또는 미리초로 지정 할 수 있음. ex) show(700)  
                //$('p:eq(1)').show(1000);  
 
                //페이드인, 페이드아웃  
                //속도는 효과속도와 같음  
                //$('p:eq(1)').fadeIn(1000);  
 
                //애니메이션  
                $('p:eq(1)')  
                    .animate({ left: 650 }, 'slow')     //왼쪽에서 650 띄우기  
                    .animate({ height: 200 }, 'slow')   //높이 200으로 키우기  
                    .fadeTo('1000', 0.5)                //fade 1초안에 50%로 변환  
                    .slideUp('slow')                        //slow 속도로 위로 접기  
                    .slideDown('slow')          //slow 속도로 펼치기  
                    .fadeTo('slow', 1.0, function () {      ////fade 1초안에 100%로 변환 후 backgroundColor 변환  
                        $(this).css('backgroundColor', '#EBFABE');  
                    });  
 
                $(this).hide();  
            });  
        });  
      
        $(document).ready(function () {  
            $('input.button').click(function () {  
                var $speech = $('div.speech');  
                var currentSize = $speech.css('fontSize');  
                var num = parseFloat(currentSize, 10);  
                var unit = currentSize.slice(-2);  
 
                if (this.id == 'btn1') {  
                    num *= 1.4;  
                } else if (this.id == 'btn2') {  
                    num /= 1.4;  
                }  
                $speech.css('fontSize', num + unit);  
            });  
        });  
    </script>  
</head>  
<body>  
    <input id="btn1" type="button" class="button" value="글자키우기" />  
    <input id="btn2" type="button" class="button" value="글자줄이기" />  
    <div class="speech">  
        <p>Visual C#은 Microsoft에서 구현한 C# 언어입니다. Visual Studio에서는 모든 기능을 갖춘 코드 편집기, 컴파일러, 프로젝트 템플릿, 디자이너  
        <span class="more">...</span></p>  
        <p class="DivCss"> C#("시 샵"으로 발음)은 .NET Framework에서 실행되는 다양한 응용 프로그램을 만들기 위해 디자인된 프로그래밍 언어입니다. C#은 간결하고, 강력하며, 형식이 안전한 개체 지향적인 언어입니다. C#은 여러 가지 혁신적인 기술을 통해 C 스타일 언어의 표현성과 우아함을 그대로 유지하면서 신속한 응용 프로그램 개발을 지원합니다. </p>  
    </div>  
</body>  
</html> 
저작자표시 비영리 변경금지

'JAVASCRIPT' 카테고리의 다른 글

jQuery.ajax()를 이용한 페이지 실행  (0) 2010.12.21
JQuery select box  (0) 2010.12.20
jquery 오류  (0) 2010.12.09
jquery : 셀렉터  (0) 2010.12.06
전각/반각 구분하여 문자열 계산  (0) 2010.10.05

구글맵 API Key 생성 URL

ASP 2010. 12. 1. 16:53 Posted by Dayis
http://code.google.com/intl/ko/apis/loader/signup.html
저작자표시 비영리 변경금지

'ASP' 카테고리의 다른 글

ASP 파라메터 컨트롤 함수  (0) 2012.01.09
jquery 파일 업로드  (0) 2010.12.10
구글맵  (0) 2010.12.09
ASP 배열을 자바스크립트 배열로 변경  (0) 2010.12.01
전각/반각 구분하여 문자열 계산  (0) 2010.10.05
 

티스토리툴바