본문 바로가기

강좌/jQuery

제이쿼리(jQuery) - 선택기(Selector)로 자식요소 선택


selector를 이용해서 스타일을 바꿔보자.

우선 아래예제를 보자


위의 예제를 브라우저로 보면 아래와 같은 결과가 나온다.


jQuery로 코딩된 부분을 설명하자면 li태그 에 있는 u태그의 배경색을 노란색으로 바꾸는 예제이다.JAVA항목에 <u>태그로 감싸져 있고 jQuery에서 Q가 감싸져 있다 그래서 이들의 바탕색은 노란색이다.


다른 예를 보자


위의 예제는 myfavorites라는 id속성에 스타일을 적용하는것이다.

<ul id="myfavorites">가 코딩이 되어 있다. jquery에서 이 아이디 안에 있는 li에다가 스타일을 적용하는것이다.

적용될 스타일은 float:left;list-style:none;margin:10px;을 주었다.

결과는 아래와 같다.

id, class속성만 이해하면 어렵지 않는것 같다.


그럼 조금 더 나아가서 정규식을 살펴보자.

아래 소스는 a href로 해서 3개의 항목을 만들었다.


jquery부분의 소스를 보자. 따로 설명 안해도 주석이 있으니까 이해 할 수 있다. 정규식 패턴을 잘 기억하자.