자바스크립트[JavaScript]/제이쿼리[Jquery]
-
Jquery[제이쿼리] on(keyup),empty(),append()로 총주문금액계산하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 24. 02:04
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] on(keyup),empty(),append()로 쇼핑몰에서 상품을 선택하면 자동으로 총주문금액이 나오도록 하는부분을 배워보겠습니다. 오늘은 css부분이 조금 많네요 귀찮아서 대충대충하긴했습니다만... 오늘도 파이팅요!! 실행화면 입니다 수량을 입력하면 주문금액 부분에 계산된 값이 나오도록 할 예정이에요~ =============================== $('.i1').on('keyup',function(e){ var amount = (10000*$('.i1').val()); alert(amount); }); =============================== class i1가 keyup이벤트가 실행되면 amount변수에 clas..
-
Jquery[제이쿼리] bind(),on() 메서드 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 22. 00:53
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] bind(),on() 메서드를 배워보겠습니다. bind(),on() 둘다 이벤트[event] 처리기능을 하는 메서드입니다. 차이점은 bind() 오래된 코드라 먼훗날 사라질꺼라고 하네요. on() 새로나온 파릇파릇한 녀석이랍니다. 준비하시고! 실행하세요~ 실행하니 칙칙한 네모박스가 보이네요. 우선 bind()메서드 부터 해볼까요. =============================== $('div').bind('click ',function(){ alert("안녕하세요. 제이쿼리공장장 주니주니입니다."); }); ===============================div의 대상이 click 되면 alert()로 안에있는 내용을 출력! 그럼..
-
Jquery[제이쿼리] offset() + scrollTop()로 상단메뉴고정 하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 22. 00:50
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] offset() + scrollTop()로 상단메뉴고정을 해보겠습니다. 이렇게 준비해주세요~ 처음 실행 화면입니다. 검정색부분이 메뉴라고 생각하세요~ 마우스휠로 내리니 메뉴부분이 안보이네요 ㅠ.ㅠ =============================== $(window).scroll(function(){ var d1_offset = $('.d1').offset(); alert("offset_top: "+d1_offset.top+" offset_left: "+d1_offset.left); =============================== 브라우저창 대상으로 스크롤을 하면 class d1의 offset()메서드의 리턴값을 변수 d1_offs..
-
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..