[jQuery][Selectors] Basic

jQuery[selector] Basic

요약설명

• * : 모든 엘리먼트를 컨텍트 한다.
• .class : 해당 클래스명을 가진 엘리먼트를 컨텍트 한다.
• element : 엘리먼트 요소를 컨텍트 한다.
• #id : 아이디값을 가진 엘리먼트 요소를 컨택트 한다.
• selector1, selectorN... : 2개이상의 엘리먼트 요소를 컨택트 한다.

심화설명

* 요소 / 사용법 $('*').css('color','red');

$("*") 이렇게 사용하며, 모든 엘리먼트가 컨택트 됩니다.

  <script>

    $("*").css('color','red');

  </script>

예제1.

결과.

.class 요소 / 사용법 $(".class").css("color","red");

$(".class")이렇게 사용하며, 해당 class를 가진 엘리먼트가 컨택트 됩니다.

<script>

    $(".ABC").css('color','red');

</script>

ABC클래스를 가진 모든 엘리먼트를 선택합니다.

예제2.

결과

element 요소 / 사용법 $("ul li p").css("color","red");

$("element")이렇게 사용하며 css와 동일한 방식으로 선택자를 선택하여 사용합니다.

<script>

    $("ul li p").css('color','red');

</script>

ul 안의 li 안의 모든 p 를 가르키는 상황입니다.

예제3.

결과

#id 요소 / 사용법 $("#id").css("color","red");

$("id")이런식으로 사용하며 id 값을 가진 엘리먼트를 컨택트합니다.

<script>

    $("#wow").css('color','red');

 </script>

wow라는 id값을 갖고있는 엘리먼트를 컨택트합니다.

예제4.

결과

다중 선택자 요소  / 사용법 $("요쇼", "요소")

" , " 콤마를 사용함으로써 여러개의 엘리먼트를 선택하여 사용합니다.

<script>

    $("#wow, .ABC").css('color','red');

</script>

id값이 wow인 엘리먼트와 클래스명이 ABC인 엘리먼트 태그요소들을 선택합니다.

예제5.

결과