전체 글
-
Jquery[제이쿼리] offset() 메서드 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 17. 01:13
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] offset 메서드를 배워보겠습니다. 준비화면 입니다위화면처럼 준비해주세요~ 실행 화면입니당~~ 오늘은 간단하니까 금방끝날꺼에요~ =============================== $('div').click(function(){ var divoffset = $(this).offset(); alert("offset_top: "+divoffset.top+" offset_left: "+divoffset.left); }); =============================== div가 click되면 $(this).offset()
-
Jquery[제이쿼리] scrollTop,scrollLeft 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 17. 01:10
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] scrollTop,scrollLeft 배워보겠습니다. 위화면처럼 준비해주세요~ 실행 화면입니다. 오늘은 브라우저창의 막대기들 잘봐주세요~ =============================== $(window).click(function(){ $(window).scrollTop(2100).scrollLeft(2000); alert("scrollTop :"+ $(window).scrollTop()+"px"+" scrollLeft :"+$(window).scrollLeft()+"px"); }); =============================== window창을 클릭하면 alert 사용하여 window창의 scrollTop()의값과 scro..
-
Jquery[제이쿼리] 이벤트[event]메서드 scroll 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 17. 01:06
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] 이벤트[event]메서드 scroll 배워보겠습니다. 위화면처럼 준비해주세요~ 기본틀의 시작화면입니다. =============================== $('.div1').scroll(function(){ $('p').css( "display", "inline" ).fadeOut(2000); }); =============================== class이름이 div1가 scroll 마우스휠로 위아래로 움직일 경우 태그의 css에 display를 inline으로 바꿔라 그리고 fadeOut(2000) 천천히 사라지게해라 입니다. display이는 위에보면 none로 안보이게 해둔상태입니다. 그상태에서 마우스휠로 움직이게되면 ..
-
Jquery[제이쿼리] fadeIn,fadeOut,fadeTo,fadeToggle 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 17. 01:02
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] fadeIn,fadeOut,fadeTo,fadeToggle 메서드를 배워보겠습니다. 위화면처럼 셋팅해주세요~ 실행화면입니다. 이제 시작해볼까요. =============================== $('.b1_h').click(function(){$('.div1').fadeOut();}); =============================== class이름이 b1_h가 click하면 class이름이 div1가 fadeOut() 하라입니다. ※fadeOut()는 선택된 요소를 불투명하게 만들어 서서히 사라지게하는 효과입니다. 일반적으로는 fadeOut(속도,호출할함수) 사용합니다. ※속도는 1000의 값이 1초의 값이므로 몇초만에 사라지..
-
Jquery[제이쿼리] height,width 배우기[브라우저,html]자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 14. 23:14
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] height,width를 사용하여 윈도우창의 height,width값 문서의 height,width값을 구해보도록하겠습니다. 위화면처럼 셋팅해주세요~ 실행화면입니다. 이제 시작해볼까요. =============================== var window_h =$(window).height(); var window_w =$(window).width(); alert("window_height ="+window_h+" window_width ="+window_w); =============================== window창의 height 값을 가지고와 window_h변수에 담아라 window창의 width 값을 가지고와 wind..
-
Jquery[제이쿼리] 이벤트[event]메서드 change 배우기2자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 14. 22:54
안녕하세요~ 주니주니 입니다. 오늘은 어제에 이어 제이쿼리[jquery] 이벤트[event]메서드 change로 선택한select의option의 값을 기준으로 append를 사용하여 select의option을 추가해보겠습니다. 위화면처럼 셋팅해주세요~ 오늘은 두개의 select로 해보겠습니다. 기본틀 ! 실행해서 확인해주세요~ =============================== var ko=['비빔밥','불고기']; var ja=['초밥','소바']; =============================== 우선 '음식 종류 대분류' select의 option을 선택하면 '음식 종류 소분류'select에 option을 추가할 내용을 배열변수담아 저장하였습니다. =====================..
-
Jquery[제이쿼리] 이벤트[event]메서드 change 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 14. 22:52
안녕하세요~ 주니주니 입니다.오늘은 제이쿼리[jquery] 이벤트[event]메서드 change로 선택한select의option의 값을 기준으로 다른 select가 보이도록 해보겠습니다. 위화면처럼 셋팅해주세요~ 실행 화면입니다.~ =============================== $('.s1').hide(); $('.s2').hide(); $('.s0').change(function(){ alert($(this).val()); =============================== 먼저 class이름이 s1,s2 는 페이지가 실행하면 숨기도록 했습니다. 그리고 class이름이 s0가 change 변경되면 alert으로 change로 변경된값을 경고창이 뜨도록 하였습니다. 실행을하면 소분류 se..
-
Jquery[제이쿼리] append+click+val로 select_option추가하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 12. 23:34
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] append+click+val로 select_option추가 해보겠습니다. 위화면처럼 셋팅해주세요~오늘은 간단하게 준비해봤습니다. 실행 모습입니다. 아직 기능이 없답니다. =============================== $('.b1').click(function(){ var Text_val = $('.t1').val(); alert(Text_val); =============================== class이름이 b1 버튼이 click되면 Text_val이라는 변수에 class이름이 t1즉 텍스트박스의 value의값이 Text_val에 저장하라 입니다. 실행해서 텍스트 박스에 값을넣고 실행을 하면 경고창으로 확인할수있습니다...