jQuery/DOM&jQuery

jQuery css 선택자에 접근

샷타이거 2009. 10. 15. 16:36

jQuery에서 css 선택자 접근하기

앞선 포스트에서 $()이방법으로 선택자에 접근한다고 설명했다.괄호안은 그대상을 넣어주면된다. css파일에서 선택했을때와 차이를 비교해보자.

선택자CSSjquery
엘리먼트p$('p')
ID(아이디)#name$('#name')
class(클래스).name$('.name')
되돌아보기 :: getElementByTagName,getElementById.....
jQuery를 사용하지않을떄 그 전에는 자바스크립트에서 getElementByTagName,getElementById로 선택자에 접근했어야 했다.또클래스에 접근할 getElementByClass는 만들어 줘야했다.게다가for(var i=0; i<elementLi.length; i++)처럼 문서 전체에서 원하는것을 찾기위해 for 구문도 사용해야했다.하지만 jquery에서는 $( )으로 엘리먼트, 아이디 클래스 모두 쉽게 접근가능하다.

간단한 예제보기

$('p').addClass('nanan');
$('#happy').addClass('nanan');
$('.unhappy').addClass('nanan');

위예제는 $()로 엘리먼트p, 아이디happy, 클래스unhappy에 접근하고 addClass란 메소드드를 통해 nanan이라는 클래스를 추가하는예제이다.

또다른 jQuery의 더 좋은 점은 브라우저를 넘나들 수 있다는 점이다.

크로스 브라우징(cross browsing)

최근 css3까지 개발중인 css로 접근할때 문제점은 브라우저에 따라 지원하고 안하고 차이가 엄청나다는 점이다. 지원여부는 아래 포스팅참조

이같은 지원문제를 jquery에서는 버전 종류를 떠나 모두 가능하게 해준다.특히 문제되는 IE버전 해결에 도움이 크다.앞에서 jQuery에서는 $()로 접근한다고 설명했다. 이방법으로 IE6~7에서 지원하지 않는 것도 접근가능하게 된다.대표적으로 유사,자식선택자 등이 있겠다. CSS3를 복습할겹 예제를 보자

크로스 브라우징


인접이요


    

  • 자식
    • 

  • 나도 자식
    • 

  • 막내
    •

위의 html코드에서 인접, 자식선택자로 접근해보자

$('h1 + p').메소드();/*인접선택자*/
$('#parents > li').메소드();/*자식선택자*/

위의 예제에서 첫번째는 h1엘리먼트 다음바로오는 인접한 p엘리먼트를 선택하게될것이고, 두번째는 parents란 아이디의 자식 li를 선택할것이다.

인접,자식선택자가 떠오르지않으면 아래 포스팅 참조

요약하면 jQuery를 이용하여 접근하는 방식의 장점은 두가지이다.

  • 일반적으로 자바스크립트에서 사용했던 getElementByTagName,getElementById 없이 단순하게 $()로 쉽게 접근가능하다
  • 브라우저 버전 종류를 무시하고 css의 대부분의 선택자로 접근가능하다.

마지막으로 예제 페이지http://sianasiatiger.cafe24.com/study.html

저작자표시