우선 jQuery 의 기능들 중 each , append , appendTo , html , hide , size , eq(0) 의 문법사용을 볼것이다.


jQuery는 우선 상단 jQuery 플러그인 삽입
<
SCRIPT type="text/javascript" src="../jquery/jquery-1.4.2.min.js">
</script>


이후
<script language="javascript">
$(function(){
  실행문구
});
와 같은형태로 구성된다.

1. TD 클릭하면 숨기기

   $("td").click(function(){
    $(this).hide();
   }) 

 <table border="1">
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
 </table>

위에서 셀렉트를 할 공간은 $("") 이곳인데
td 가 아닌 css에서 쓰이는 #id 나 .class 명을 적어도 똑같이 적용이 된다.
여기서 말하는 this는 클릭한 것에대한 값이 되며
jQuery 내 존재하는 hide() 펑션에 의해 숨겨지게 된다.


2.전체 p태그를 jq 배열에 담아서 $(jq[배열위치])로 해당배열 위치 찾아서 alert 함

   var jq=$("p");
   alert($(jq[1]).html());

jq 안에 p태그들을 배열로 넣어준다.
이후 jq의 [1]번째 배열의 내용을 alert 해줌.
여기서 html 은 예를들어

  <p>제품1 </p>
  <p>제품2 </p>

위와 같은경우 2번째 p 태그 안의 내용 ( 제품2 )만 출력해준다.


3.body 엘레먼트 내에 해당내용 입력함 - 맨 뒤쪽에 입력됨. 동일한 태그명(아래의 body)가 있는경우 모든 body에 삽입됨

   $("<div><p>Hello,World!</p></div>").appendTo("body");

 <BODY>
testestestsetest
 </BODY>
appendTo 태그는 선택한 body값의 끝부분에 앞에 입력된 내용을 넣어준다.


4. p태그 내의 html 들을 result 안에 넣어서 alert 시킨것임  
주의)var로 생성된 것의 경우 appendTo 가 먹지않음. append 로 할것

   var result="";
   $("p").each(function(){
    result+=$(this).html();
    alert(result);
   })
   $(result).appendTo("#result");    //1
   $("#result").append(result);       //2

  <p>제품1 </p>
  <p>제품2 </p>
 <div id="result"></div>

적용해보면 1번의경우 내용이 먹질않는다..
아무래도 var로 생성한것은 적용이 되지않는것으로 보임.
append 는 appendTo 와 반대로
값을 넣어줄 공간을 지정 후 내용을 입력하면 들어가게 된다.

each는 위와같은 형태로 사용해야 하며 result+=$(this).html(); 이 부분은
맨위에 설정된 p 태그를 this로 html() 을 내용으로 보면됨.

5.each 를 이용한 셀렉트 한것 중 몇번째 배열인지 확인하는법

   var result="";
   var i=0;
   $("p").each(function(i,find){
    result+=$(find).html()+": "+(i+1)+"번째 element\n";
   });
   alert(result);

  <p>제품1 </p>
  <p>제품2 </p>

위에서 i는 자동증가하는 숫자값이 되며
find는 this 개념으로 생각..
result 에서 실제 뿌려질때에는
제품1: 1번째 element\n
제품2: 2번째 element\n
이런 형태로 출력되게 된다.

6.현재페이지에 해당 element가 몇개 있는지 확인할때

   alert("div내에 있는 input 태그의 갯수는 "+$("div input").size()+"개 입니다.");

 <div id="list_box">
  <span>제품리스트</span>
  <p>제품1 </p>
  <p>제품2 </p>
 </div>

 <div id="button_box">
  <input type="button" id="up_click_button" value="올리기">
  <input type="button" id="down_click_button" value="내리기">
 </div>

$("div input") 은 div 내의 input 으로 생각을 하면 된다.
그 후의 .size() 를 통하여 총 몇개의 배열을 받았는지 뿌려주게 되며
결과값은
div내에 있는 input 태그의 갯수는 2개 입니다.
와 같이 뿌려지게 된다.


7.$("element").eq(위치)로 해당 element내의 eq번째 배열을 select


   $("#up_click_button").click(function(){   
    $("#write_box p").eq(0).appendTo("#list_box");
   })
   $("#down_click_button").click(function(){   
    $("#list_box p").eq(0).appendTo("#write_box");
   })

 <div id="list_box">
  <span>제품리스트</span>
  <p>제품1 </p>
  <p>제품2 </p>
 </div>

 <div id="button_box">
  <input type="button" id="up_click_button" value="올리기">
  <input type="button" id="down_click_button" value="내리기">
 </div>

 
 <div id="write_box">
  <span>장바구니</span>
 </div>

태그를 실제 적용해보면 알겠지만
append , appendTo 태그는
복사가 아닌 잘라내기 기능이라고 생각하면 된다.
위 소스는 id가 up_click_button 인걸 click 하게 되면 id가 write_box 인것 안의 p 태그의 [0]번째 배열의 내용을
id가 list_box 라는 곳에 붙여넣겠다는 소스내용이다.

위에서 적용한 샘플소스는 아래에서 열람 가능하다.

http://jaweb.anyhost.co.kr/jstudy/01.php

신고

댓글을 달아 주세요

  1. 2010.06.04 12:58 신고 BlogIcon jojigpog  댓글주소  수정/삭제  댓글쓰기

    내용이너무쉽네요 강사하셔도되겠수멜

  2. 2010.08.12 16:16 신고 gd  댓글주소  수정/삭제  댓글쓰기

    공부해보려고 시작했는데.. 너무 도움이 많이 될듯합니다. 퍼갑니다.


 
아예 기초도 모르는 상태에서 보시면 도움이 될겁니다.

책보고 응용하여 제작한게 대부분이고 몇가지는 퍼온것들도 있습니다.



1.php
http://jaweb.anyhost.co.kr/study/

2.jQuery
http://jaweb.anyhost.co.kr/jstudy/
신고

댓글을 달아 주세요

[jQuery 기본 강좌]1-1 jQuery 사용

Posted by 비회원 프로그래밍/jQuery : 2010.05.07 10:53

jQuery 는 2010년 5월 현재 1.4.2 버전까지 release 되었다.




http://jquery.com/

에서 튜토리얼과 간략한 설명을 볼 수 있다.


오늘은 jQuery를 사용할때 가장 기본적인 셋팅 방법에 대해 적어보려 한다.

준비물
:
1.jQuery.js
2.사용하고싶은 plug-in

우선  http://jquery.com/ 에 접속하여 우측의 Download 클릭


jQuery를 다운받고  사이트 상단의 plugins 탭을 통해 쓰고싶은걸 선택해서 받을 수 있다.




새로 문서를 하나 만들고 DTD를 선언
난 가장 루즈한 roose.dtd를 선호한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

이후 <head>  </head> 사이에 jQuery.js 를 넣어준다.

<SCRIPT type="text/javascript" src="jquery-1.4.2.js"></script>

그 이후 사용하고싶은 plug-in 들을 그 밑에 삽입해주면 된다.

<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

샘플 테스트를 하려면

우선

 <script language="javascript">
    $(function(){  
      alert ('Hello, jQuery!');
    });
 </script>

이 문구를 <head>  </head> 사이에 넣어주고

alert 창이 제대로 뜨면 성공!


신고

댓글을 달아 주세요

  1. 2010.07.24 10:28 신고 늘푸른83  댓글주소  수정/삭제  댓글쓰기

    퍼갑니다..^^

 «이전 1  다음»

티스토리 툴바