작성일 : 11-11-29 16:33
|
[JQuery] (JQuery Source) CSS 적용
|
 |
|
글쓴이 :
조형래
 조회 : 4,539
|
<style type="text/css">
.bg { background-color:Yellow; }
.sil { background-color:Silver; }
.red { color:Red; }
.green { color:Green; }
.silver { color:Silver; }
.redColor { background-color:Red; }
.blueColor { background-color:Blue; }
</style>
<script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
//$(document).ready( //[1] 첫번째 방법 : 추천
//$().ready( //[2] 두번째 방법
$( //[3] 세번째 방법
$(document).ready(function () { // 페이지가 준비되었을 때
$('#hw').addClass("bg"); // hw라는 id속성을 가지는 레이어를 가져와 그것에 bg CSS 클래스 적용
$('#hw').click(function () { alert('안녕'); $(this).addClass("sil"); });
//[1] li > u 에 대해서 배경색을 Yellow로 설정, li 자식 요소 중 u 태그인것만 선별
$('li > u').addClass('bg');
//[2] id 속성이 myFavorites인 것의 자식 요소중 li 에 CSS 클래스 적용
$("#myFavorites > li").addClass("horizontal");
//[3] id 속성에 대해서 직접 접근
jQuery('#jquery').click(function () { alert('jQuery'); });
//[4] class 속성이 sil인 개체에 접근
$('.sil').click(function () { alert('실버라이트'); });
//[1] dotnet이라는 단어가 들어가는 링크에 배경을 red로 설정
$("a[href*='dotnet']").addClass("red"); // ~가 들어가는
//[2] aspx로 끝나는 링크의 배경 green으로 설정
$('a[href$="aspx"]').addClass("green"); // ~로 끝나는
//[3] mailto:로 시작하는 링크의 배경을 silver로 설정
jQuery("a[href^='mailto:']").addClass('silver');
//[1] 홀수번째 배경색으로 red로 하고싶다?
$('tr:odd').addClass('redColor');
//[2] tr 태그 중 짝수번째 배경색을 blue로 하고자한다면?
$('table tr:even').addClass('blueColor');
});
</script>
<div id="hw">안녕하세요. jQuery!!!</div>
<ul id="myFavorites">
<li><u>C#</u></li>
<li>ASP.NET</li>
<li class="sil">Silverlight</li>
<li id="jquery">j<u>Q</u>uery</li>
</ul>
<a href="http://www.dotnetkorea.com/">닷넷코리아</a>
<a href="http://www.VisualAcademy.com/Default.aspx">비주얼아카데미</a>
<a href="mailto:redplus@hawaso.com">이메일</a>
<table>
<tr><td>Windows Server(0번째 : 짝수)</td></tr>
<tr><td>SQL Server</td></tr>
<tr><td>Visual Studio</td></tr>
<tr><td>DotNetNuke Portal</td></tr>
</table>
|
|
964
