전체 글
-
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'
-
Jquery[제이쿼리] 이벤트[event]메서드 mouseover,click 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 7. 22:51
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 이벤트[event]메서드 mouseover,click을 배워보겠습니다. 위화면처럼 셋팅해주세요~ 짠 실행 화면입니다. 이제 여기까지는 쉽죠? =============================== $('h1').mouseover(function(){ =============================== 'h1'태그의 대상으로 mouseover
-
Jquery[제이쿼리] 앞부분 추가[prepend] 뒤부분 추가[append] 하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 6. 16:36
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 태그의 앞부분 추가[prepend] 뒤부분 추가[append]를 해보도록 하겠습니다. 위화면처럼 셋팅해주세요~ 실행을 하면 태그는 아무내용이 없기때문에 아무것도 안나올꺼에요. 이번에는 append()를 사용하여 'body'의 뒤부분에 내용을 넣어줄꺼에요. 짠~ 뒤부분에 내용이 추가된모습을 확인할수있답니다. 그럼 이번에는 앞부분에다가 내용을 추가해볼까요? prepend()를 사용하여 앞부분에 추가해보겠습니다. 이렇게 앞부분에 추가된 모습을 확인할수있답니다. 이번에는 테이블[table]의 'td'의 대상으로 뒤부분에 내용을 추가 해볼꺼에요. 여기서 a라는 배열 변수에 2가지 값을 미리 넣어서 준비를 합니다. 왜 2가지 값을 준비할까요? 'td'가..
-
Jquery[제이쿼리] HTML/TEXT 변경하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 5. 23:42
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 HTML/TEXT를 변경해 보도록 하겠습니다. 위화면처럼 셋팅해주세요~ 실행을 하면 3개는 안보일꺼에요~ 아무내용이 없기떄문이랍니다. h라는 변수에 태그의 첫번째 값을 담아주고 alert();함수를 이용하여 값을 확인! t라는 변수에 모든태그의 값을 담아주고 alert();함수를 이용하여 값을 확인! h변수의 값입니다. t변수의 값입니다. 자 이번에는 비어있는태그에 값을 넣어보도록 하겠습니다. 첫번째로는text()를 사용하여 태그에 'html Method'라는 글자를 입력해보겠습니다. 실행화면입니다. html Method 라는 글자가 그대로 찍혀있네요 이번에는 html()을 이용하여 똑같이 'html Method'라는 글자를 입력해보겠습니다...