반응형 web/jQuary16 .append() 새로운 요소를 타겟에 추가한다, $('타겟').append('새로운요소'); 2020. 5. 27. [jQuery]디지털 시계 만들기(시작/종료버튼) jQuery에서 new Date(), setInterveal()을 사용하여 간단히 현재시각을 보여주는 디지털 시계를 만들 수 있다. [html] 꾸밀 것 없이 간단히 시간을 나타낼 장소인 span태그와 시작과 종료 버튼만 마크업했다. 00: 00: 00 시작 종료 [css] css는 이쁘게 꾸미진 않았다...😌그냥..형태만..ㅎㅎ @charset "utf-8"; /*reset*/ *{margin:0; padding: 0;box-sizing: border-box;} html { overflow-x: auto;} dl,ol,ul,li {list-style: none;} a{outline:0; text-decoration:none;color:#555; cursor: pointer;} a:active, a:ho.. 2020. 5. 26. [jQuery]요소 추가하기:.appendTo() 타겟에 새로운 요소를 추가한다. $('새로운요소').appendTo('타겟'); [html] one two three four five six [css] .txtStyle{font-size:14px; line-height: 20px; margin: 10px;} [js] $(document).ready(function(){ $('*').addClass('txtStyle'); $('em+a').css('background-color','yellow').each(function(){ $(this).appendTo('.result') }); }); [결과화면] 선택자 em+a 는 첫번째 em태그와 형제인 a태그를 의미한다. 즉 two라는 문자열이 들어있는 태그이고 이 태그를 appenTo()를 사용하여 클래스r.. 2020. 5. 26. [jQuery]마우스 휠 이벤트 연결하기 jQuery에서 마우스 휠을 움직였는지 안움직였는지 확인 할 수 있다. 우선 https://github.com/jquery/jquery-mousewheel jquery/jquery-mousewheel A jQuery plugin that adds cross-browser mouse wheel support. - jquery/jquery-mousewheel github.com 에서 js파일을 다운받아야한다. [html] [css] @charset "utf-8"; /*reset*/ *{margin:0; padding: 0;} ol, ul{list-style:none;} a{outline:0;text-decoration: none;color:#555;} img{border:0;} body{font:12px/1.. 2020. 5. 26. [jQuery]동영상 태그 제어-.load(), .play(), pause() 비디오 태그 제어하는 문법 해당 동영상 참조 : $("video").get(); 동영상 불러오기 : .load(); 재생하기 : .play(); 일시 정지하기 : .pause(); [html] load play pause [js] $(document).ready(function(){ var sample = $("video").get(0); $(".load").on("click",function(){ sample.load; }); $(".play").on("click",function(){ sample.play; }); $(".pause").on("click",function(){ sample.pause; }); }); 2020. 5. 26. [jQuery]x축,y축 위치 알아내기-.offset().top과 .offset().left $("선택자").offset().left; 화면상에서 특정 요소의 x축 위치 알아내고자 할 때 사용한다. $("선택자").offset().top; 화면상에서 특정 요소의 y축 위치 알아내고자 할 때 사용한다. [html] [css] div{width: 200px; height: 200px; background-color: blue; margin: 100px;} *margin을 모두 100px 줬다. 즉 화면상의 x,y축은 100px 인 것이다. [js] y축의 위치 $(document).ready(function(){ alert($("div").offset().top); }); x축의 위치 $(document).ready(function(){ alert($("div").offset().left); });.. 2020. 5. 26. 이전 1 2 3 다음 반응형
