간단한 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을 추가 해주었을 뿐이다. 이런방식으로 다른 여러가지 좋은 기능을 사용할 수 있게 된다.
댓글