본문 바로가기
jQuery

[jQuery] jQuery 문법

사악미소 2013. 2. 22. 15:02
반응형

■ jQuery 문법


 14-1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">

        // jQuery를 이용해 테두리를 지정
        $(function() {

            $('p:last').css('border', '1px solid black');
        });
   
        // 기본 자바스크립트를 이용해 테두리를 지정
        window.onload = function() {

            var ps = document.getElementsByTagName('p');
            ps[ps.length - 2].style.border = '2px solid black';
        }
    </script>
</head>
<body>
    <p>Hello</p>
    <p>and</p>
    <p>Goodbye</p>
</body>
</html>
 출력결과




01. 선택자(Selector)

 -. 선택자는 jQuery 객체 생성을 하거나 하위의 탐색 메서드에서 사용

 -. 선택자를 통해 객체를 생성하거나 메서드를 사용하게 되면 선택된 엘리먼트들은 jQuery 객체의 배열에 저장되어 jQuery 객체로 반환된다.

    반환된 jQuery 객체는 내부 엘리먼트를 활용한 객체 지원 메서드에서 활용된다.

 -. 선택자를 사용할 때는 가능한 범위를 좁혀서 HTML 문서 내부 구조를 최대한 덜 탐색하게 하는 것이 성능에 좋다.



01) 기본 CSS 선택자

 -. DOM API부분 중 document.querySelector( ), querySelectorAll( ) 메서드와 같은 기본 CSS 선택자와 필터 등을 이용할 수 있다.

     (jQuery만의 고유한 선택자도 지원)

선택자

설                  명

 *

  -. 모든 엘리먼트를 선택한다.

 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를 선택한다.



02) 위치기반 선택자(필터)

 -. 선택자를 이용해 위치를 정해주게 되면 손쉽게 위치를 기반으로 하여 선택할 수 있을 뿐 아니라 모든 엘리먼트를 검색하지 않아도 된다.

    (페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관도니 관계를 기반으로 엘리먼트를 선택해야 한다.)

선택자

설                  명

 :first

  -. 페이지에서 처음으로 일치하는 엘리먼트이다.
 -. li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
 :last

 -. 페이지에서 마지막으로 일치하는엘리먼트이다.

 -. li a:list는 아이템의 마지막 링크를 반환한다.

 :fist-child

 -. 첫 번째 자식 엘리먼트이다.

 -. li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.

 :last-child

 -. 마지막 자식 엘리먼트이다.

 -. li:last-child는 각 리스트의 마지막 아이템을 반환한다.

 :only-child

 -. 형제가 없는 모든 엘리먼트를 반환한다.
 :ntn-child(n)

 -. n번째 자식 엘리먼트이다.

 -. li:nth-child(2)는 각 리스트의 두 번쨰 리스트 아이템을 반환한다.

 :ntn-child(even | odd)

 -. 짝수(even) 또는 홀수(odd) 자식 엘리먼트이다.

 -. li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.
 :ntn-child(Xn + Y)

 -. 전달된 공식에 따른 n번째 자식 엘리먼트이다.

 -. Y는 0인 경우 생략 가능하다.

 -. li:nth-child(3n)은 3의 배수 번쨰 아이템을 반환한다.

 -. li:nth-child(5n + 1)은 5의 배수 + 1번째 아이템을 반환한다.

 :even / :odd

 -. 페이지 전체의 짝수 / 홀수 번째 아이템을 반환한다.
 :eq(n) -. n번쨰로 일치하는 엘리먼트를 반환한다.

 :gt(n)

 -. n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트를 반환한다.

 :lt(n)

 -. n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트를 반환한다.



03) 정의 필터 선택자

 -. CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 할 경우 사용한다.

선택자

설                  명

 :animated

  -. 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.

 :button

 -. 모든 버튼을 선택한다.

     <input [type = submit]>, <input [type = reset]>, <input [type = button]>, <button>

 :checkbox

 -. 확인란 엘리먼트만 선택한다.

     <input [type = checkbox]>
 :checked

 -. 선택된 확인란이나 라디오 버튼만을 선택한다.(CSS에서 지원)

 :contains(foo)

 -. 텍스트 foo를 포함하는 엘리먼트만 선택한다.
 :disabled  -. 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
 :enabled

 -. 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.
 :file

 -. 모든 엘리먼트를 선택한다.

     <input [type = file]>
 :header

 -. 헤더 엘리먼트만 선택한다.

     (예를 들어 <h1>부터 </h6>까지의 엘리먼트를 선택한다.
 :hidden -. 감춰진 엘리먼트만 선택한다.
 :image

 -. 폼 이미지를 선택한다.

     <input [type = image]>

 :input

 -. 폼 엘리먼트만 선택한다.
     <input>, <select>, <textarea>, <button>

 :not(selector)

 -. selector가 아닌 것을 선택한다.

 -. 괄호 안의 조건이 아닌 것을 선택한다.

 :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]>
 :visible

 -. 보이는(visible) 엘리먼트만 선택한다.



02. 속성관련 메서드

01) .addClass( )

 -. 엘리먼트의 class 속성에 인자로 받은 CSS클래스를 추가한다.

 14-2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
        p {
            margin: 8px;
            font-size:16px;
        }
        .selected {
            color:blue;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p>Hello</p>
    <p>and</p>
    <p>Goodbye</p>
    <script>
        // 마지막 <p> 엘리먼트에 selected 클래스 추가
        $("p:last").addClass("selected");
    </script>
</body>
</html>

 출력결과


02) .removeClass( )

 -. 엘리먼트의 class 속성에서 지정한 CSS 클래스를 제거한다.

 14-3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
        p { margin : 4px; font-size : 16px; font-weight : bolder; }
        .box { border : 1px solid black; }
        .blue { color : blue; }
        .under { text-decoration : underline; }
        .highlight { background : yellow; }
    </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class = "blue under highlight box">Hello</p>
  <p class = "blue under">and</p>
  <p class = "blue under box">then</p>
  <p class = "blue under highlight">Goodbye</p>
    <script>
        // 짝수 번째를 제외한

        // 홀수 <p> 엘리먼트로부터 border, under 클래스 삭제
        // 순서는 0부터 시작한다.
        $("p:even").removeClass("blue under");
    </script>

</body>
</html>
 출력결과



03) .hasClass( )

 -. class 속성 중 해당하는 CSS 클래스가 있는지 없는지를 true false로 반환한다.

 14-4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
    p {
        margin : 8px;
        font-size : 16px;
    }
    .selected {
        color : red;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p>1번</p>
    <p class = "selected">2번</p>
    <p>3번</p>

    <div id="result1">첫째(p:first) p 엘리먼트는 selected class가 있는가? : </div>
    <div id="result2">마지막(p:last) p 엘리먼트는 selected class가 있는가? : </div>
    <div id="result3">모든(p) p 엘리먼트 중 selected class가 있는 게 있는가? : </div>

    <script>
        // append( ) 메서드는 내부의 가장 뒤에 내용을 추가한다.
        $("div#result1").append($("p:first").hasClass("selected").toString());
        $("div#result2").append($("p:last").hasClass("selected").toString());
        $("div#result3").append($("p").hasClass("selected").toString());
    </script>
</body>
</html>
 출력결과




04) .toggleClass( )
 -. class 속성값 중 인자로 주어지는 크랠스 이름을 추가했다가 삭제하기를 번갈아(toggle) 한다.

 14-5.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
    p {
        margin : 4px;
        font-size : 16px;
        font-weight : bolder;
        cursor : ponter;
    }
    .blue {
        color : blue;
    }

    .highlight {
        background : yellow;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p class = "blue">Click to toggle</p>
    <p class = "blue highlight">highlight</p>
    <p class = "blue">on these</p>
    <p class = "blue">paragraphs</p>

    <script>
        // 모든 <p> 엘리먼트에 클릭 이벤트 설정
        $("p").click(function() {
            // 이벤트가 발생한 엘리먼트에 highlight 클래스를 토글한다.
            $(this).toggleClass("highlight");
        });
    </script>
</body>
</html>

 출력결과



05) .attr( )

 -. 엘리먼트 속성(Attribute) 정보를 설정하거나 반환한다.

 -. 선택자에 의해 선택된 요소들 중에서 제일 처음 요소의 속성값을 가지고 오는 함수입니다.

    (만일 모든 요소들의 속성값을 개별적으로 알고 싶다면, jQuery의 .each()함수나 .map() 함수를 사용해야 한다.

 -. 속성값을 가져오지 못하면 undefinded를 반환합니다. 그리고, 속성값을 가져올 때 .attr() 함수를 사용하면 두가지 장점이 있다.

 ① 편리함(Convenience)

   : jQuery의 객체들을 바로 사용할 수 있고, 다른 jQuery 메소들과 같이 엮어서 사용할 수 있다.

 ② 브라우저별 일관성 유지(Cross-browser consistency)

   : 어떤 속성명은 브라우저별로 다르게 사용되는 경우도 있다.

     더욱이 같은 브라우저임에도 버젼별로 차이가 있기도 합니다.(IE 이놈~) .attr() 함수는 그런 불일치를 축소시켜 준다.

 14-6.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
    em {
        color: blue;
        font-weight;
        bold;
    }

    div {
        color: red;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p>뭐 이것저것 <em title="huge, gigantic">큰거</em> 공룡말야</p>

    em 태그의 title 내용은...
    <div></div>

    <script>
        var title = $("em").attr("title");
        $("div").text(title);
    </script>

</body>
</html>
 출력결과



06) .removeAttr( )

 -. 엘리먼트에 인자로 받은 값과 같은 이름을 갖는 속성 항목을 제거한다.

  14-7-1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <button>Enable</button>
<input type = "text" disabled = "disabled" value = "can't edit this" />
    <script>
        $("button").click(function () {

            $(this).next().removeAttr("disabled")
            .focus()
            .val("editable now");
        });
    </script>
</body>
</html>
 출력결과


 14-7-2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <button>Enable</button>
<input type = "text" title = "hello "/>
<div id = "log"></div>
    <script>
    (function() {

        var inputTitle = $("input").attr("title");
        $("button").click(function() {

            var input = $(this).next();
           
            if ( input.attr("title") == inputTitle ) {

                input.removeAttr("title");
            }
           
            else {

                input.attr("title", inputTitle);
            }

            $("#log").html( "&#60;input&#62; 엘리먼트 title 속성의 값은 " + input.attr("title") + "입니다. ");
        });
    })();
    </script>
</body>
</html>

 출력결과



07) .html( )

 -. 엘리먼트의 innerHTML 내용을 설정하거나 반환한다.

 14-8.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <button>Enable</button>
<input type = "text" title = "hello "/>
<div id = "log"></div>
    <script>
    (function() {

        var inputTitle = $("input").attr("title");
        $("button").click(function() {

            var input = $(this).next();
           
            if ( input.attr("title") == inputTitle ) {

                input.removeAttr("title");
            }
           
            else {

                input.attr("title", inputTitle);
            }

            $("#log").html( "&#60;input&#62; 엘리먼트 title 속성의 값은 " + input.attr("title") + "입니다. ");
        });
    })();
    </script>
</body>
</html>
 출력결과



08) .prop( )

 -. 엘리먼트 객체의 속성(Property) 정보에 직접 접근하여 값을 설정하거나 반환합니다.

 14-9.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
        p { margin : 20px 0 0 }
        b { color : blue; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <input id = "check1" type = "checkbox" checked = "checked">
    <label for = "check1">Check me</label>
    <p></p>
    <script>
        $("input").change(function() {

            var $input = $(this);
            $("p").html(".attr('checked') : <b>" + $input.attr('checked') + "</b><br>"
                + ".prop('checked') : <b>" + $input.prop('checked') + "</b><br>"
                + ".is(':checked') : <b>" + $input.is(':checked') ) + "</b>";
        }).change();
    </script>
</body>
</html>
 출력결과



09) .remobeProp( )

 -. 엘리먼트 객체의 속성 정보를 제거한다.

 14-10-1.html (removeProp( )를 주석처리한 경우)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
        img { padding : 10px; }
        div { color : red; font-size : 24px; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p></p>
<script>
    var $para = $("p");
    $para.prop("luggageCode", 1234);
    $para.append("The secret luggage code is : ", String($para.prop("luggageCode")), ". ");
    // $para.removeProp("luggageCode");
    $para.append("Now the secret luggage code is : ", String($para.prop("luggageCode")), ". ");
</script>
</body>
</html>

 출력결과

 14-10-2.html (removeProp( )를 주석을 해제한 경우)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
        img { padding : 10px; }
        div { color : red; font-size : 24px; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p></p>
<script>
    var $para = $("p");
    $para.prop("luggageCode", 1234);
    $para.append("The secret luggage code is : ", String($para.prop("luggageCode")), ". ");
    $para.removeProp("luggageCode");
    $para.append("Now the secret luggage code is : ", String($para.prop("luggageCode")), ". ");
</script>
</body>
</html>
 출력결과



10) .vall( )

 -. 폼 엘리먼트로부터 value 값을 설정하거나 반환한다.

 14-11.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style>
        img { color : red; margin : 4px; }
        div { color : blue; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <p></p>
    <select id="single">
        <option>Single1</option>
        <option>Single2</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple1</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>
<script>
    function displayVals() {

        var singleValues = $("#single").val();
        var multipleValues = $("#multiple").val() || [];
        $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " + multipleValues.join(", "));
    }
    $("select").change(displayVals);
    displayVals();
</script>
</body>
</html>

 출력결과




반응형
저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] jQuery를 사용한 객체 확장  (0) 2013.09.10
[jQuery] jQuery를 사용한 배열 관리  (0) 2013.09.10
[jQuery] jQuery 라이브러리 사용하기  (0) 2013.02.22
[jQuery] CDN(Content Delivery Network) 호스트  (0) 2013.02.22
[jQuery] jQuery란?  (0) 2013.02.22

'jQuery' Related Articles

티스토리툴바