본문 바로가기

jquery11

[jquery] 부드럽게 화면 상단으로 이동하는 버튼 만들기 코딩/제이쿼리 2024. 9. 2. 웹페이지에서 흔히 볼 수 있는 화면 상단 이동 버튼.본문 내용이 길어 스크롤바가 길 때, 최상단으로 한번에 이동할 수 있어서 매우 편리한 기능.거의 모든 사이트나 앱에서 필수적으로 들어가는 버튼이다.보통은 그냥TOP이렇게 쓸 수도 있지만..이대로 쓰면 갑자기 뿅~ 하고 최상단으로 이동해 버리게 된다. 보기 좋지 않음..그래서 보통은 부드럽게 스크롤이 이동하도록 스크립트를 겸해서 쓴다. jquery$(".btn_top").on('click', function(){ $('body, html').animate({ scrollTop: 0 }, 300 ); return false;});이렇게 하면 스르륵 스크롤 되면서 최상단으로 이동 함. 근데 여기서 한 단계 더 나아가스크롤이 최상단일때는 btn_to..
document.ready(), window.onload() 차이점 코딩 2020. 2. 3. $(document).ready(function(){ // 외부 리소스 및 이미지와 상관 없이 DOM 데이터만 로드가 완료되면 바로 실행. // 가장 먼저 실행됨 }); window.onload = function() { // 페이지 안의 외부 리소스, 이미지까지 로딩이 끝난 후에 실행됨 } ★onload 함수는 동일한 페이지 안에서 하나만 존재해야 하는데 만약 외부 라이브러리에서 onload가 이미 선언 되어 있으면 찾아서 하나로 합치는 것이 어려움. 또한 한 페이지 내에서 onload가 2번 쓰이면 앞에 것은 무시되고 뒤에 함수만 동작함.
[jquery] DOM에 나중에 추가된 항목 접근(이벤트) 코딩/제이쿼리 2017. 2. 6. document가 모두 다 load 되고 난 후, jquery로 인해 DOM에 추가된 요소들은 보통 접근할 수 없다.그것에 접근하기 위해서는 이벤트를 다르게 줘야 하는데삭제 $('.survey_list').on('click', '.btn_del', function() {$(this).parent().remove(); //여기서 this는 .btn_del 이 됨.}) '.btn_del'이 DOM에 새로 추가된 엘리먼트라고 한다면, 그 부모를 이벤트 대상으로 선택하고.on(event, 추가된 elment, function() { }) 로 작성을 하면 된다. 또는 ajax 호출 후에 추가해야하는 이벤트의 경우 아래 방법을 사용하면 잘됨. $(window).bind("load", function() { // i..
클립보드복사 스크립트 (모든 브라우저) 코딩/제이쿼리 2016. 11. 8. clipboard 복사 스크립트. flash를 사용하지 않고 스크립트로만 함. 크롬, 파이어폭스, ie10 테스트 완료 방법은.. input박스를 안보이게 하나 만들고, 그 안에 value값을 집어넣어서 select되게 한후 복사하는 방법. 주의할 점은 input박스를 hidden처리하면 안된다. display:none도 하면 안되고 opacity를 0으로 하거나 position을 absolute로 해서 가려지게 해야함. HTML CODE ns1.euntori.com 211.000.000.000 ns2.euntori.com 211.111.111.111 jQuery CODE $('.clipboardBtn').on('click', function(e) { // a의 텍스트값을 가져옴 var text = $(..
[제이쿼리] Monthpicker 코딩/제이쿼리 2016. 2. 11. Datepicker는 다들 많이 써서 잘 알고있겠지만 가끔 Monthpicker를 써야 할 때가 있다. 월만 선택해서 그 달의 매출량을 표시해야 할 때 유용하다. 괜찮은 Monthpicker를 찾음. Bootstrap datepicker를 변형한 Monthpicker https://github.com/wenzhixin/bootstrap-monthpicker 중국어로 되어있으므로 js파일을 열어서 수정해줘야함.var months = [ '1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월' ]; 이부분은 환경에 맞게 변형시킬 때 쓰는 코드.//실제 보여지는 날짜 정의 $('#month_text').val(new Date().getFullYear() ..
[제이쿼리] 현재 스크롤값 가져오기(scroll) 코딩/제이쿼리 2016. 2. 5. 코딩을 하다가 현재 스크롤 값을 가져오려고 스크립트를 짰는데 실시간이 아닌, 처음에 로딩했을때의 스크롤 값만 가져오고 변화가 없었다. (아래 코드를 사용함) $(document).scrollTop(); 그래서 찾고 찾다가, 실시간으로 가져오려면 .scroll() 함수가 필요하단 것을 알았다. $(window).scroll(function () { var scrollValue = $(document).scrollTop(); console.log(scrollValue); }); 이렇게하면, 실시간으로 현재 스크롤값이 log에 찍힘.

Designed by 티스토리

© Kakao Corp.

티스토리툴바