Search

'jquery'에 해당되는 글 2건

  1. 2011.05.27 [ Jquery ] Jquery , Javascript 관련 정보 모음
  2. 2011.03.23 [ Jquery ] Table 핸들링

[ Jquery ] Jquery , Javascript 관련 정보 모음

Web Dev/Javascript 2011. 5. 27. 10:24 Posted by ditus

AJAX 가 웹 기술의 대세로 떠오르면서, Javascript 언어에 대해 새로운 접근들이 시도되고
다양한 AJAX 및 자바스크립트 라이브러리들이 출시되었습니다.
많이 쓰이니까 쉽게 쓸 수 있도록 하는 방법들이 나오는 건 당연하겠죠.

Script.aculo.us, Prototype.js , MooTools , jQuery, YUI ( Yahoo UI Library ) 등등..

수 많은 Javascript 라이브러리중 최근의 대세는 jQuery – http://jquery.com/ 입니다.

Google Trends를 통해서 위의 Script 라이브러리들을 비교해보면 이렇습니다.

http://google.com/trends?q=jquery+%2C+script.aculo.us+%2C+prototype.js+%2C+yui+%2C+mootools&ctab=0&geo=all&date=all&sort=0

자바스크립트 비교
그래프만 봐도 딱 보이시죠. 이렇게 jQuery 가 인기를 끌어가는데.. Microsoft 가 강펀치를 하나 날려줍니다.
위에 E 부분에 보면.. Microsoft 가 jQuery 를 Visual Studio 에 내장하겠다고 발표한게 보이실겁니다.
이제 ASP.NET 의 AJAX 프레임워크에서 jQuery 를 기본으로 내장하고 활용하게 되었습니다. – Microsoft to ship jQuery with Visual Studio

또한 Nokia 역시, 그들이 만들고 있는 Web Kit 기반의 Web-Runtime에서 jQuery를 사용할 것이라고 발표하였습니다.
http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/

Javascript 와 jQuery 공부하기


이제 Javascript 를 이용한 AJAX개발은 모든 웹 기반 개발의 기본기술이 되었습니다. 모바일 환경에서도 사용되는건 물론이구요.
한번 Javascript, AJAX와 jQuery 를 익혀보지 않으시겠습니까 ?
공부하시는데 도움이 될만한 강의 문서들을 링크해 드립니다.

다소 좀 때늦은 포스팅이긴 하지만, 사내 메일링리스트에 보내느라 정리해둔게 있어서 늦게나마 기록차원에서 올려둡니다.


[ Jquery ] Table 핸들링

Web Dev/Javascript 2011. 3. 23. 14:18 Posted by ditus


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!--script type="text/javascript" src="temp.js"></script-->
<style type="text/css">
body,html {margin:10px; padding:0; font-family:Dotum; font-size:12px; line-height:normal; color:#333;}
table  {border:0 none; border-collapse:collapse; table-layout:fixed; border-spacing:0;}
table.basic {border-top:2px solid #FF6600;}
table.basic th, table.basic td {border:0 none; border-bottom:1px solid #FF6600; border-right:1px solid #FF6600;}
table.basic .end td {border-bottom:2px solid #993333;}
table.basic .bg1 td {background:#00FF66;}
table.basic .bg2 td {background:#FFCC66;}
table.basic .bg3 td {background:#fff;}
table.basic .over td {background:#000; color:#fff;}
table.basic th.right, table.basic td.right {border-right:0 none !important;}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $(".basic tr:odd").addClass("bg1"); //basic이라는 클래스네임을 가진 요소의 tr 요소 중 홀수번째에 bg1클래스 부여
 $(".basic tr:even").addClass("bg2"); //basic이라는 클래스네임을 가진 요소의 tr 요소 중 짝수번째에 bg2클래스 부여
 $(".basic tr:last").addClass("end"); //basic이라는 클래스네임을 가진 요소의 tr 요소중 마지막 요소에 end 클래스 부여
 $(".basic td:nth-child(3)").addClass("right"); //basic이라는 클래스네임을 가진 요소의 td 요소중 3번째 요소들에 right 클래스 부여
 $(".basic tr:even td:nth-child(4)").addClass("right"); //응용
 $(".basic th:last-child").addClass("right"); //basic이라는 클래스네임을 가진 요소의 th 요소중 마지막 요소(들)에 right 클래스 부여
 $(".basic td:last-child").addClass("right"); //basic이라는 클래스네임을 가진 요소의 td 요소중 마지막 요소(들)에 right 클래스 부여
 $(".basic tr").mouseover(function() {$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
});
</script>
</head>

<body>
<table width="100%" border="1" class="basic">
 <tr>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
  <th scope="col">테스트</th>
 </tr>
 <tr>
  <td>dddd</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td> 
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
 <tr>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
  <td>sdsdfg f fwefw efw ref</td>
 </tr>
</table>

</body>
</html>

 

티스토리툴바