[jQuery] 제이쿼리 선택자 사용예시들

[jQuery] 제이쿼리 선택자 사용예시들

 제이쿼리에서 제공하는 아주 멋있는 선택자의 사용예시들을 한 번 살펴보도록 하겠습니다.

선택자

 제이쿼리에서는 선택자를 사용해서 동적으로 스타일을 변경하여 적용할 수 있습니다. 즉 HTML태그에 있는 문서객체모델(html,body,head) 기능과 속성 등을 활용할 수 있습니다. 문서객체에서 모든 태그는 객체라고 부르게됩니다. 태그(기능,속성) 입니다.

 위에서 빨간 네모를 제거하고 사용하게되면 스크립트가 먼저호출 된 뒤에 body가 호출되어 h1생성되기 때문에 제대로된 객체를 선택할 수 없습니다. 그렇기 때문에 $(function(){})으로 감싸서 코드를 작성합니다. 또는 $(document).ready(function(){}); 이런 방식으로 사용을 해주어야합니다.

 사용하는 방식은 $("css선택자").css("스탈속성명","값")이런 식으로 사용을 하게됩니다. 위와 같이 사용해주면 h1의 색상 값이 빨간 색으로 변경됩니다. 이 방법은 직접선택자를 사용한 방식이며 #사용시 뒤에는 아이디가나오며 ".클래스명" 이런식으로 콤마뒤에는 클래스명을 입력하시면 됩니다. 또는 $("item1, item2, item3...") 이런식의 그룹 선택자도 존재합니다.

 다음으로는 인접관계 선택자가있습니다. 부모요소 선택자 $().parent() 등 여러가지 인접관계 선택자가 있습니다. 표를 올리는 것은 생략하도록하고 제가 공부하는 교재 Doit 제이쿼리 입문의 171페이지를 참고하시기 바라겠습니다.

 다음은 직접선택자 중 전체선택자입니다. 즉 html 전체 태그를 선택하게됩니다. 우측에 결과를 보시면 모두 파란색의 1px 솔리드 테두리가 적용된 것을 알 수 있습니다.

 다음 아이디 선택자입니다. 별 다른게없지만 특이한 것은 설정한 뒤에 다시 콤마를 써서 css매서드를 연속사용하여 2개의 속성을 지정하였습니다. 이 것을 체이닝 기법이라고 합니다.

그 다음은 클래스 선택자입니다. 클래스를 선택한 것 말고는 별 다를게 없으니 추가 설명은 생략합니다.

 다음 글에 이어서 추가적인 사용예시를 설명해 보이도록 하겠습니다. 글 읽어주셔서 감사합니다. 추가내용도 많으니 참고해주시기 바랍니다.

[jQuery] 제이쿼리 기본개념, 사용환경만들기