WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing

WEB/JQuery 2012. 9. 13. 01:12

① JQuery 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>JQuery 3(동적 생성과 traversing)</title>

        <link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />

        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

        <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

        <script type="text/javascript">

        // $ >> jQuery 객체

        // 버튼을 찾아서 click이벤트를 걸고 클릭시 alert("클릭"); 되도록

        $(function(){

               $(":button[value=실행]").click(function(){

                       // 모든 div에 이미지를 추가

                       $("div").append("<img src='teayeon2.jpg' width='50'/>")

                              .find(':odd').width(100).click(function(){

                                      $(this).toggle(2000);

                              }).end().animate({height:"+=20", width:"-=100"},1000);

                       // end(): 끝내고 처음 선택자로 돌아간다.

                       // json 방식 : {name:value, name1:value1}

               });

               var no=1;

               $("div.target").dblclick(function(){

                       $(this).prepend(no++);

               });

               $("div").css("border","solid thin blue")

                       .css("background-color", "#D0D0D0"); // background-color = backgroundColor

        });

        </script>

</head>

<body>

        <input type="button" value="실행" />

        <div class="target">디아이브이1</div>

        <div class="target">디아이브이2</div>

        <div class="target">디아이브이3</div>

        <div class="target">디아이브이4</div>

        <div class="target">디아이브이5</div>

</body>

</html>


② 실행화면

JQuery 3(동적 생성과 traversing)

디아이브이1
디아이브이2
디아이브이3
디아이브이4
디아이브이5


저작자표시

'WEB > JQuery' 카테고리의 다른 글

WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog  (0) 2012.09.14
WEB 5일차 첫번째) JQuery복습  (0) 2012.09.14
WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제  (0) 2012.09.13
WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제

WEB/JQuery 2012. 9. 13. 01:11

① JQuery소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>Insert title here</title>

        <link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />

        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

        <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

        <script type="text/javascript">

               $(function(){

                       // body가 로딩이 끝나고 난 뒤 실행된다.

                       // alert("정말??/");

                       $("#all").click(function(){

                              // this>> all의 function안에 다시 all을 써야하는 경우 대체할 수 있다.

                              // if($(this).attr("checked")=="checked")

                              var boo = false;

                              if($(this).is(":checked")){

                                      // $("input[name=cb]").attr("checked","checked");

                                      //$("input[name=cb]").attr("checked",false);

                                      boo = true;

                              } $("input[name=cb]").attr("checked",boo);

                       });

               });

               // Jquery를 사용하지 않고 구현하기

               function chk(all){

                       var cb = document.getElementsByName("cb"); // 배열

                       var boo = false;

                       if(all.checked) boo = true;

                       for(var i=0; i<cb.length; i++){

                              cb[i].checked=boo;

                       }

                      

               }

        </script>

</head>

<body>

        <input type="checkbox" value="all" id="all" checked="checked" onclick="chk(this);"/> 전체  <br />

        <input type="checkbox" value="1" name="cb"/> 1번  <br />

        <input type="checkbox" value="2" name="cb"/> 2번  <br />

        <input type="checkbox" value="3" name="cb"/> 3번  <br />

        <input type="checkbox" value="4" name="cb"/> 4번  <br />

        <input type="checkbox" value="5" name="cb"/> 5번  <br />

        <input type="checkbox" value="6" name="cb"/> 6번  <br />

        <input type="checkbox" value="7" name="cb"/> 7번  <br />

        <input type="checkbox" value="8" name="cb"/> 8번  <br />

        <input type="checkbox" value="9" name="cb"/> 9번  <br />

        <input type="checkbox" value="10" name="cb"/> 10번  <br />

</body>

</html>


② 실행화면

Insert title here 전체
1번
2번
3번
4번
5번
6번
7번
8번
9번
10번


저작자표시

'WEB > JQuery' 카테고리의 다른 글

WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog  (0) 2012.09.14
WEB 5일차 첫번째) JQuery복습  (0) 2012.09.14
WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing  (0) 2012.09.13
WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기

WEB/JQuery 2012. 9. 13. 01:07

① JQuery 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>JQuery 1</title>

        <link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />

        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

        <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

        <script type="text/javascript">

               function execute() {

                       // Jquery에서는 메소드이름이 $

                       // $("#target").toggle(3000); // id가 target선택 ,hide() 숨기기, toggle() = hide()+show()

                       // $("img.ttt").toggle(1000); // img태그중 class가 ttt인 것 선택

                       // $("img:first").fadeOut(1000); // img태그중 첫번째 것

                       // $("img:last").fadeOut(1000); // img태그중 마지막 것, 이펙트와 관련된 것들은 동시실행

                       // $("img:even").toggle(1000); // img중 홀수번째를 toggle : index가 0부터 시작(0은 짝수)

                       // $("div img").attr("src","teayeon.jpg"); // div의 img태그에 있는 사진 바꾸기, 속성세팅

                       // document.getElementById("horse").src="teayeon.jpg";

                       // alert($("div img").attr("src")); // 속성값 가져오기

                       // class가 ttt가 아닌것 선택

                       // $("img:not(.ttt)").slideToggle(1000);

               }

        </script>

</head>

<body>

        <input type="button" value="쇼!!!" onclick="execute();" />

        <div id="target" style="border-style: solid;">

               <img src="teayeon2.jpg" alt="태연" width="200" />

               <img src="teayeon2.jpg" alt="태연" width="200" />

        </div>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>

        <img src="teayeon2.jpg" alt="태연" width="80" />

        <img src="teayeon2.jpg" alt="태연" width="80" />

        <img src="teayeon2.jpg" alt="태연" width="80" />

       

</body>

</html>


② 실행화면

JQuery 1

태연 태연
태연 태연 태연 태연 태연 태연 태연 태연 태연


저작자표시

'WEB > JQuery' 카테고리의 다른 글

WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog  (0) 2012.09.14
WEB 5일차 첫번째) JQuery복습  (0) 2012.09.14
WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing  (0) 2012.09.13
WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제  (0) 2012.09.13
블로그 이미지

모데스티

,

공지사항

태그목록

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바