본문 바로가기
jQuery

jQeury 기본 Syntax

by Dokon Jang 2017. 3. 21.
반응형

jQuery의 기본 Syntax는 HTML 엘리먼트(Element)를 선택하고, 동작을 하는 구조로 되어있습니다.

 

기본 Syntax : $(Selector).action();

 - $ : jQuery 정의

 - Selector : HTML 엘리먼트

 - Action : HTML 엘리먼트의 동작

 

예를 들면

(1) $("p").hide() : 모든 HTML의 <p> 엘리먼트를 숨깁니다.

(2) $(".class_name").hide() : HTML 엘리먼트가 class="class_name"인 모든 엘리먼트에 대해서 숨깁니다.

(3) $("#id_name").hide() : HTML 엘리먼트가 id="id_name"인 엘리먼트에 대해서 숨깁니다.

 
아래의 HTML 소스를 보고 이해합시다.
<html>
<head>
<script src="jquery-3.2.0.js"></script>
<script>
    $(document).ready(function(){
        // id가 button에 대한 클릭 이벤트
        $("#button").click(function(){
            // id가 div_id인 HTML 엘리먼트를 숨깁니다.
            $("#div_id").hide();
        });
    });
</script>
</head>
<body>
    <div id="div_id">Hello jQuery</div>
    <p/>
    <input type="button" id="button" value="Button"/>
</body>
</html>
 
 

 

반응형

댓글