jquery6 제이쿼리 버리기 - Bye jQuery 장점도 많고 알아두면 매우 편리한 jQuery. 나에게 코딩의 즐거움을 선사했고 너무나도 유용하게 잘 썼던 제이쿼리. 그러나 그간 브라우저들도 많이 좋아져서 제이쿼리가 아니어도 충분히 어렵지 않게 많은 것들을 구현할 수 있게 되었고, 제이쿼리 기반으로 뭔가를 뚝딱 만들어 나눌 때 이용자의 환경에도 꼭 제이쿼리가 설치되어 있어야 한다는 전제가 있는 것도 좀 불편하고, 설치되어 있는 제이쿼리 마저도 버전에 따라 문제가 발생할 수도 있고, 제이쿼리가 워낙 제공하는 기능이 많다보니 처리 속도 면에서는 조금 느린 듯 하고, 이제 브라우저는 최저 IE11 까지만 지원을 고려하면 될 것도 같고, 그래서, 이런저런 이유로인해 최근엔 제이쿼리를 가급적 안쓸려고 하고 있네요. 또한, 개인적으로는 개발속도나 소스가 조금 길.. 2020. 9. 17. 스크롤 바닥치면 뭔가 하기 제목 그대로... 편의상 jquey를 썼으나 일반 js 로 하기에도 높이 값들 가져오는 명령만 다를뿐 큰 차이는 없음 (초보시라면 위 이미지 출처 사이트에 추가 설명이 잘 되어 있으니 한번 보시는 것을 추천) var noMore = false; $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var innerHeight = $(window).height(); var scrollHeight = $(document).height(); if (scrollTop + innerHeight >= scrollHeight) { //스크롤이 바닥치면 뭐할지 여기에 정의 시작 if (!noMore) { $("body").append(""); } n.. 2020. 8. 7. 비밀번호 보이기 감추기 요즘 웹/모바일 사이트 비밀번호 입력창에 종종 보이는 그것 원리는 단순, input 의 type 을 password 와 text 로 교차시키기 소스와 예제는 아래 참고 https://jsfiddle.net/alikong/mshf9nv4/ 2020. 8. 6. jQuery - selectors / 선택자 목록 제이쿼리의 가장 큰 장점이 쉽고 다양한 선택자라고 해도 과언이 아닐 듯 그래서 이 선택자들만 잘 파악하고 있어도 코드가 짧아지고 진행이 순조로울 수 있겠다 근데 원래 이렇게 많았니!!!??? 있는지도 몰랐던 넘들고 보이고.. (새로운 추가된 애들인가.., 쿨럭) 암튼, 여기 적어놓고 필요할 때 참고 하겠음 (자주 쓰는넘들은 하이라이트했음) All Selector (“*”) Selects all elements. :animated Selector Select all elements that are in the progress of an animation at the time the selector is run. Attribute Contains Prefix Selector [name|=”value”] Se.. 2020. 8. 6. ajax 처리 후 로딩중 감추는 타이밍 $.ajax({ cache: ..., type: "POST", url: "...", data: {...}, success: function (data) { ... }, error: function() { ... }, complete: hideLoading }); (jQuery를 쓴다고 치고.. )보통 위처럼 ajax 호출을 하게 되는데... (물론 .done() 이나 .fail() 로 연계해서 쓸 수도 있고..) 아무튼, 일반적으로 ajax 호출 직전에 로딩중을 보여주고... success 와 error 에 로딩중 감춤을 넣어서 써왔으나, 이번에 ajax로 파일 다운로드 하는걸 하다보니 서버에서 파일이 아직 안왔는데 로딩이 빨리 사라지더이다 그래서 고민하다 complete: 에 hideLoading (=.. 2020. 8. 2. jQuery - delegate 내 취미코딩 실력과 흥미를 한껏 끌어올리는데 큰 공헌을 한 jQuery... 덕분에 온클릭이던 뭐던 제이쿼리로 쉽게 먹이고 쓸 수 있다는건 모두 다 아는 사실... 그러던 중 이미 이벤트 핸들러를 적용한 이후에 생성된 개체들에는 아무 반응이 없어 당황했을 때 delegate 방식을 만나게 되었다. 아래는 예시: (Result 탭을 눌러보자) https://jsfiddle.net/alikong/sf0pjmqz/ 추가 설명: #main 에 li 가 동적으로 버튼을 통해 추가되는 상황에서, 아래와 같이 #main li 에 온클릭을 먹이면 기존에 있던 li 에만 적용된다. $("#main li").on("click", function() { alert(this.innerText); }); 하지만 아래처럼 li .. 2020. 8. 2. 이전 1 다음
