DEVELOPE/jquery

jquery 예제로 배우기

소찾나 2017. 11. 1. 13:10

jquery 예제로 배우기

jquery 예제로 배우기



jquery 는 html DOM(DCOUMENT OBJECT MODEL: 문서개체모델)과 자바스크립트 사이의 상호작용을 


간단하게 해주는 오픈소스 자바스크립트 라이브러리이다.




jquery 는 도큐먼트 엘리먼트에 접근하기 위해 셀렉터(selector) 메커니즘을 제공한다. 도큐먼트 구조로


명료하면서 읽기 쉬운 형식으로  표현하는 css 셀렉터로 페이지의 엘이먼트를 찾을 수 있다.




1 tr:even / tr:odd


html 내에 가독성을 높이기 위해 테이블의 행단위를 짝수와 홀수로 배경색을 지정하여 보기좋게 만들여고 한다면 jquery 로 간단하게


표현 할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
 <head>
  <title> New Document </title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
 
        $('tr:even').css('backgroundColor', 'black');
        $('tr:odd').css('backgroundColor', 'yellow');                                                    
 
    });
 
  </script>
 </head>
 <body>
  <table width="100%">
<? for($i=0;$i<=9;$i++) {?>
    <tr>
        <td></td>
    </tr>
<? } ?>   
  </table>
 </body>
</html>
 
cs







3 addClass


jquery 의 addClass() 메소드를 사용하여 jquery 의 확장 객체 집합에 매개변수로 설정한  클래스를 적용하는 예를보자



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
 <head>
  <title> New Document </title>
  <style type="text/css">
    span { 
        font-size:20px; 
    }
    .big { 
        font-size:40px; 
    }
 
 
  </style>
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>           
  <script type="text/javascript">
    
    function jquery_test() {
        $('span').addClass('big');
    }                                      
    
  </script>
 </head>
 <body>
  <span>jquery 는 쉬워요</span>
 
  <p><a href="#" onclick="jquery_test();">jquery 크게</a></p>
 </body>
</html>
cs