jquery 예제로 배우기

티스토리 뷰

DEVELOPE/jquery

jquery 예제로 배우기

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

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

jquery 예제로 배우기

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

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

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

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

1 tr:even / tr:odd

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

표현 할 수 있다.

<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>
 

Colored by Color Scripter

jquery 예제로 배우기

3 addClass

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

<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>