멍개블로그

작동영상.... 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 < !DOCTYPE   HTML > < html > < head > < meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" > < title ></ title >     < style >         #tab-menu  {             list-style :  none ;          }         #tab-menu li  {             width : 96px ;             height : 44px ;             background-position-y : 0 ;             text-indent :  -1000px ;             overflow :  hidden ;             display :  inline-block ;             float : left ;          }         #tab-menu li :hover  {       

1 2 3   $( document ).ready( function  () {             alert ( '페이지 준비가 완료 되었습니다' ); }; cs 문서준비가 완료되면 실행을 시키는 이벤트이다. 앞으로 이러한 이벤트를 많이 보게 된다고한다. 하하하 저 위의 코드에서  document는  선택자 ready는  액션 코드를 실행하는 함수인 alert가  파라미터 가 된다. 선택자를 이용하여 열 엘리먼트를 선택할 수 있다. $('tr'); $('p'); $('div'); $('h1'); $('input'); 위 명령어를 실행하면 아무선 일이 일어나지 않게 된다. 그냥 위의 엘리먼트를 선택만 한다.  이렇게 선택자를 이용하여 선택을 해주면 특정 부분만 바꿔줄수 있다. 저런 엘리먼트 뿐만 아니라, 클래스나 테이블도 선택을 할 수 있다. $('.data'); 이렇게 클래스를 선택할 수 있다. 앞에 .을 붙인것은 클래스라는 의미이다. 이렇게 클래스명만 있으면 data라는 클래스를 가진 모든 테이블도 선택이 된다. 그래서 좀더 명시적으로 $('table.data'); 이런식으로 특정 테이블의 data클래스를 선택을 하게 된다.

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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 < !DOCTYPE > < html > < head >     < script   src = " http://code.jquery.com/jquery-latest.js " ></ script >     < title >Jquery 세상에 오신것을 환영 합니다.</ title >     < script   type = "text/javascript" ></ script >       < script >         $( document ).ready( function  () {              alert ( '홈페이지에 방문해주셔서 감사합니다' );         });   </ script >     </ head > < body >     < input   type = "button"   id = "hideButton"   value = "숨기기"   / >     < input   type = "button"   id = "showButton"   value = "나타나기"   / >     < input   type = "button"   id = &qu

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 < ! DOCTYPE > < html > < head >      < script src = "http://code.jquery.com/jquery-latest.js" > < / script >      < title > Jquery 세상에 오신것을 환영 합니다. < / title >      < script type = "text/javascript" > < / script >        < script >         $( document ).ready( function  () {              alert ( '홈페이지에 방문해주셔서 감사합니다' );         });      < / script >     < / head > < body >      < input type = "button"  id = "hideButton"  value = "숨기기"   / >          < script >     $( '#hideButton' ).click( function  () {         $( '#hideButton' ).hide();     });      < / script > < / body > < / html >   Colored by Color Scripter cs 웹 페이지를

jQeury에서 each()를 이용하여 배열을 관리할 수 있다. 1 2 3   $.each(object,  function (index, item){ });   $(Select).each(object,  function (index, item){ }); cs 이렇게 두가지의 형태를 가지고 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $( document ).ready( function (){             var  array  =  [             { name  :  'Hanbit' , link: 'http://hanb.co.kr' },             { name  :  'Naver' , link: 'http://Naver.com' },             { name  :  'Daum' , link: 'http://Daum.net' },             { name  :  'Paran' , link: 'http://Paran.com' },            ];                                               $.each(array,  function (index, item){                var  output = '' ;                             output + =   '<a href ="'   +  item.link  +   '">' ;              output + =   '