|
제이쿼리를 활용하여 해당객체에 접근하는 방법에 대해 알아 보겠다. 아래 예제는 간단하게 원하는 객체를 찾아서 스타일을 변경하는 예제이다.
|
Html |
|
<ul id="selected_plays"> <li>컴퓨터 <ul> <li><a href="http://shopping.naver.com/spcategory/notebook.nhn">노트북</a></li> <li>넷북</li> <li>데스크탑</li> </ul> </li> <li>의류 <ul> <li><a href="http://shopping.naver.com/category/category.nhn?cat_id=0200">남성의류</a></li> <li>여성의류</li> <li>아동복</li> <li>잡화</li> </ul> </li> <li>전자제품 <ul> <li>주방용품 <ul> <li>전자렌지</li> <li>전기밥솥</li> </ul> </li> <li><a href="http://shopping.naver.com/category/category.nhn?cat_id=0000">생활용품</a></li> <li>차량용품</li> </ul> </li> </ul> |
|
Style(CSS) |
|
.horizontal { float:left; list-style:none; margin:10px; } |
위 코드는 CSS코드이며, HTML문서 내용을 수평으로 만들어줄 코드이다.
|
Script |
|
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#selected_plays > li').addClass('horizontal'); }); </script> |
(아래 실행 모습참고)
[그림1 – 실행 보습]
|
Script |
|
$('#selected_plays li:not(.horizontal)').addClass('sub-level'); |
위 코드는 selected_plays ID를 가지고 있는 요소의 자식이며, horizontal 클래스를 가지고 있지 않은 항목(:not(.horizontal))를 찾아 해당 스타일 클래스를 적용하라는 내용이다.
