[jQuery 기본 강좌]1-2 기본적인 함수의 사용

Posted by 비회원 프로그래밍/jQuery : 2010.06.04 09:38


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

'프로그래밍 > jQuery' 카테고리의 다른 글

jquery 이용 다중 체크박스 한번에 체크되게, 체크 해지되게 하는 소스  (0) 2010.07.06
jquery jplot 을 이용한 그래프 손쉽게 만들기!  (0) 2010.06.28
[jQuery 기본 강좌]1-2 기본적인 함수의 사용  (4) 2010.06.04
[jQuery 기본 강좌]1-1 jQuery 사용  (1) 2010.05.07
jquery - input file '찾아보기' 버튼을 이미지로 바꾸기  (0) 2010.03.09
Jquery 1.4 버전에 추가된 새 기능 15개  (0) 2010.02.04
태그 : append, appendTo, each, eq(0), hide, HTML, JQuery, jQuery 기본 강좌, jQuery 기본 공부, jQuery 문법, size
TRACKBACK 73   COMMENT 4

댓글을 달아 주세요

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

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

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

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

jquery select,checkbox 중복체크

Posted by 비회원 프로그래밍/jQuery : 2010.01.25 17:42
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  
<? include "../Anyjquery/jquery_inc.php"; ?>
<script language="javascript">
$(function(){
$("input[name='check_fruit']:checkbox").click(function(){
checkedlist="";
$("#select_fruit>option").removeAttr("selected");
$("input[name='check_fruit']:checkbox:checked").each(function(){
$("#select_fruit>option[value='"+$(this).val()+"']").attr("selected","selected");
checkedlist+=$(this).val()+", ";
//checkedlist+=$(this).parent().prev().text()+", ";
})
$("#multi_fruit").val(checkedlist);
});

$("#select_fruit").change(function(){
checkedlist="";
$("input:checkbox").removeAttr("checked");
$("#select_fruit option:selected").each(function(){
$("input:checkbox[value='"+$(this).val()+"']").attr("checked","checked");
checkedlist+=$(this).val()+", ";
})
$("#multi_fruit").val(checkedlist);
});
//select_list
//check_list
$("#select_list").hide();

$("#check_button").click(function(){
$("#select_list").hide("slow");
$("#check_list").show("slow");
});

$("#select_button").click(function(){
$("#check_list").hide("slow");
$("#select_list").show("slow");
});
});
</script>
 </HEAD>

 <BODY>
<table>
<tr>
<td>
<div id="check_list">
글쓴이 <input type="checkbox" name="check_fruit" value="글쓴이">
제목 <input type="checkbox" name="check_fruit" value="제목">
내용 <input type="checkbox" name="check_fruit" value="내용">
</div>
<br>
<div id="select_list">
<select id="select_fruit" multiple size="3">
<option value="글쓴이">글쓴이</option>
<option value="제목">제목</option>
<option value="내용">내용</option>
</select>
</div>
<br>
<div>
<input type="text" id="multi_fruit">
</div>
<br>
<div id="result">
<input type="button" id="check_button" value="checkbox 형태로 바꾸기">
<input type="button" id="select_button" value="select 형태로 바꾸기">
</div>
</td>
</tr>
</table>
  
 </BODY>
</HTML>

'프로그래밍 > jQuery' 카테고리의 다른 글

jquery ui 적용사례  (2) 2010.01.30
jquery 로그인창  (0) 2010.01.30
jquery select,checkbox 중복체크  (0) 2010.01.25
jquery 유효성검사  (0) 2010.01.25
jquery 테이블 색변경  (0) 2010.01.25
jquery function 생성  (0) 2010.01.22
태그 : Click, CSS, each, hide, removeAttr, SHOW, val
TRACKBACK 0   COMMENT 0

댓글을 달아 주세요

jquery 기본 엘리먼트 속성제어방법

Posted by 비회원 프로그래밍/jQuery : 2010.01.22 11:39
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> jquery 공부1 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<style>
div{
border:1px solid; 
border-color:#D8D8D8;
font-family: "돋움","tahoma";  
font-size: 9pt;
color:#696969;
margin:10px;
width:200px;
text-align:center;
}
span{
font-size: 15px;
font-family: "돋움","tahoma","bold";  
}
</style>
<? include "../Anyjquery/jquery_inc.php"; ?>
<script language="javascript">
//alert(jQuery.browser.version); 브라우저 버전출력
$(function(){
//.click
//클릭후의 펑션을 넣는것임. 아래 내용은 클릭하면 숨기기
$("td").click(function(){
$(this).hide();
})
//전체 p태그를 jq 배열에 담아서 $(jq[배열위치])로 해당배열 위치 찾아서 alert 함
/*
var jq=$("p");
alert($(jq[1]).html());
*/

//.appendTo
//body 엘레먼트 내에 해당내용 입력함 - 맨 뒤쪽에 입력됨. 동일한 태그명(아래의 body)가 있는경우 모든 body에 삽입됨
/*
$("<div><p>Hello,World!</p></div>").appendTo("body");
*/
//.each=반복문
//p태그 내의 html 들을 result 안에 넣어서 alert 시킨것임 
//주의)var로 생성된 것의 경우 appendTo 가 먹지않음. append 로 할것
var result="";
$("p").each(function(){
result+=$(this).html();
//alert(result);
})
$("#result").append(result);

//each(function(i,result){
//each 내에서 몇번째 element 인지 검색할때 사용.
//ex) each(function(몇번째배열인지,그에 해당하는 값을 넣는곳){}
/*
var result="";
var i=0;
$("p").each(function(i,find){
result+=$(find).html()+": "+(i+1)+"번째 element\n";
});
alert(result);
*/

//.size
//현재페이지에 해당 element가 몇개 있는지 확인할때는 
/*
alert("div내에 있는 input 태그의 갯수는 "+$("div input").size()+"개 입니다.");
*/

//.eq
//$("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");
})

});
</script>
 </HEAD>

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

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

<div id="result"></div>
 </BODY>
</HTML>

'프로그래밍 > jQuery' 카테고리의 다른 글

jquery select,checkbox 중복체크  (0) 2010.01.25
jquery 유효성검사  (0) 2010.01.25
jquery 테이블 색변경  (0) 2010.01.25
jquery function 생성  (0) 2010.01.22
jquery 이용한 이미지 변환  (0) 2010.01.22
jquery 기본 엘리먼트 속성제어방법  (0) 2010.01.22
태그 : append, appendTo, each, EQ, hide, HTML
TRACKBACK 0   COMMENT 0

댓글을 달아 주세요

 «이전 1  다음»