제이쿼리를 사용하기 위한 기본 지식

제이쿼리에 대해 자세히 설명된 부분이 있어 포스팅합니다. ^^

 

동작 방식
 $('p') : HTML 파일 내의 모든 문단 엘리먼트를 접근
 $('div') : HTML 파일 내의 모든 div 엘리먼트를 접근
 $('#A') : id=A 인 모든 HTML 엘리먼트를 접근
 $('.b') : class=b 인 모든 HTML 엘리먼트를 접근

 

엘리먼트에 CSS 적용하기
 .css { 
   font-size:11px;
   backgroudn-color:#fff;
   }
 $('div').addClass('css');
 $('div').addClass('css');

 

이벤트 처리로 텍스트 추가 또는 제거하기
<script type="text/javascript">
$(document).ready(function() {
 $('.add').click(function(){
  $('.pp').prepend('<p>추가하기를 누르면 텍스트가 추가됩니다.</p>'); // 문단을 추가할 때는 prepend() 메소드를 사용합니다.
 });
 $('.remove').click(function(){
  $('p').remove(); //문단 엘리먼트를 제거할 때는 remove() 메소드를 사용합니다.
 });
});
< /script>

 

study01.zip

 

맨위로 링크 만들기
$(document).ready(function() {
  $('<a href="#topofpage">Return to top</a>').insertAfter('p');
  $('<a id="topofpage" name="topofpage"></a>').prependTo('body');
});

Return to top 이라는 텍스트를 가진 링크를 html의 모든 문단 엘리먼트 뒤에 붙여서 사용자가 링크를 클릭하면 id가 topofpage인 엘리먼트로 이동할 수 있게 합니다.

study02.zip

 

더 읽기 숨기기 만들기
$(document).ready(function() {
  $('.message').hide();    //message 클래스를 숨깁니다.
  $('span.readmore').toggle(function(){  
    $('.message').show('slow');
    $(this).text("숨기기"); //readmore를 숨깁니다.
  },
  function(){
   $('.message').hide('slow');
   $(this).text("더읽기");
   });
});

 

study03.zip

 

텍스트에 애니메이션 효과 넣기
$(document).ready(function(){
 $('.content01').hide();
 $('.content02').hide();
 $('.content03').hide();
 
 $('.button01').click(function(){
  $('.content01').show('slow');
  $('.content02').hide();
  $('.content03').hide();
 });
 $('.button02').click(function(){
  $('.content02').show('slow');
  $('.content01').hide();
  $('.content03').hide();
 });
 $('.button03').click(function(){
  $('.content03').show('slow');
  $('.content02').hide();
  $('.content01').hide();
 });
});

 

study04.zip