본문 바로가기
jQuery/DOM&jQuery

jQuery 사용한 예제

by 샷타이거 2009. 10. 13.

간단한 jQuery 예졔 문서

간단한 jQuery 예졔 문서를 보자.그전에 먼저준비할 일은 다음과 같다

1.jQuery 다운
http://jquery.com/에서 다운받는다.버전별로 보려면 여기가보면 된다.http://docs.jquery.com/Downloading_jQuery
2.문서에 링크 시키기
헤더에 <script src="jquery-1.3.2.min.js"></script> 삽입.경로는 알아서

html예제 보기

목적은 내용에 border를 줄것이다. 먼저 코드를 보자

jQuery 예제

jQuery를 이용border를 준예제

  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타
  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타

위와 같은 코드에서 ul엘리먼트 부분에 보더를 1px줄것이다.css는 다음과 같다.

.boxing{ border:solid 1px #000;}

클래스 boxing에 보더를 주도록되어있다.하지만 html코드에 클래스가 지정되어있지않다. 이제 jquery로 클래스를 지정해주어보자

jQuery 이용하기

<script type="text/javascript"></script>에 다음을 삽입하면된다

$(document).ready(function(){
	$('ul').addClass('boxing');					   
	});

위코드는 다음과 같은 의미이다.하나하나 보자

1.$( ) :선택자 변수 광호 안에 필요한 것을 선택한다, 엘리먼트,아이디,클래스 등이되겠다. 위 예제에서는 $('ul ')으로 되어있다.이것은 엘리먼트 ul에 접근한다는 뜻이다.

2..addClass() :jquery메소드의 일종이다. 영어번역그대로 클래스를 더한다는 역할을한다.위예제에서는addClass(boxing)으로 boxing이라는 클래스를 추가가하게된다.

3. boxing이라는 클래스를 추가 했으므로 워래 html코드의 엘리먼트 ul의 클래스명이boxing이되고 css가 적용된다.

결과는 다음과 같다.

  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타

예제가 적용된 페이지는 여기에서보자 http://sianasiatiger.cafe24.com/study/J_document.html

이예제는 jQuery를 이용한 간단한 예제일 뿐이다.소스를 보면 알 수 있듯이 그저 boxing을 추가 해주었을 뿐이다. 이런방식으로 다른 여러가지 좋은 기능을 사용할 수 있게 된다.

댓글