JQuery
-
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에 저장하라 입니다. 실행해서 텍스트 박스에 값을넣고 실행을 하면 경고창으로 확인할수있습니다...
-
Jquery[제이쿼리] CSS+CLICK+ANIMATE로 글자/이미지 크기수정하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 12. 00:01
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] CSS+CLICK+ANIMATE로 글자/이미지 크기수정을 해보겠습니다. 그럼 하기전에 셋팅을해볼까요~ 이번에는 버튼을 만들어 봤습니당. 이렇게 나온답니다. 자 출발해볼까요~ =============================== $('.but1').click(function(){ var font_size = $('label').css('font-size'); $('label').css('font-size',parseInt(font_size)+2); }); =============================== class이름이 but1인 '글자야 커저랏!'
-
Jquery[제이쿼리] show(),hide(),toggle() 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 11. 22:37
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery] show(),hide(),toggle() 배워보도록하겠습니다. 위화면처럼 셋팅해주세요~ 오늘은 준비가 조금 많네요 ㅎㅎ 실행 화면입니다. ㅎㅎ =============================== $('.img_show').click(function(){ $('img').show(); =============================== class 'img_show' 가 click 마우스로 클릭되면 태그를 show 보이도록 하라입니다. =============================== $('.img_hide').click(function(){ $('img').hide(); =============================== ..
-
Jquery[제이쿼리] 이미지[img] 슬라이드 만들기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 11. 22:31
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 이미지[img] 슬라이드를 만들어 보겠습니다. 슬라이드를 만드는방법은 여러방법이 있지만 전 아주 간단하게 만들어볼까해요. 그럼 잘따라오세요~ 이미지 경로 잘지정해주세요~ 뭐 여기까지는 처음부터 보신분들은 척하면척~ 이시겠죠? ㅎㅎ =============================== $('img').css('width',250); =============================== 사진 크기가 너무커서 'img'대상으로 크기를 수정해봤습니다. =============================== setInterval(function(){ =============================== setInterval
-
Jquery[제이쿼리] 이벤트[event]메서드 keyup 글자수 제한기능자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 9. 23:05
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 이벤트[event]메서드 keyup을 사용하여 쇼핑몰 후기의 글자수 제한 기능을 만들어 볼라고 해요. 위화면처럼 셋팅해주세요~ 실행 화면입니다. ㅎㅎ =============================== $('textarea').keyup =============================== 'textarea'
-
Jquery[제이쿼리] 이벤트[event]메서드 mouseover,mouseout이미지변경자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 8. 23:01
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 이벤트[event]메서드 mouseover,mouseout으로 이미지변경을 해보겠습니다. 위화면처럼 셋팅해주세요~ jpg파일들은 'Js_2_img'라는 폴더를 만들어 따로 관리하였습니다. 자 이제 실행을 해보겠습니다. 실행 화면입니다. ㅎㅎ 여기까는 참쉽죠? =============================== $('img').mouseover(function(){ =============================== 'img'