jQuery에 해당하는 글들 10 Articles matched 목록이 없습니다. [jQuery] 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event) jQuery 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event)최근들어 스마트폰의 등장과 함께 반응형 웹이 인기다. 작은 화면의 기기에 PC에서 보여주던 내용들을 전부 담아서 보여주려고하니 여간 까다로운게 아니다. 이번에는 쇼핑몰에서 보이는 UI인데 유명한 쇼핑몰들의 UI를 살펴보면 거의다 비슷비슷 하다.그중 내가 구현 하고 싶었던 UI는 상세페이지에서 어떤 메뉴가 있을 때 스크롤 시 그 메뉴가 화면 상단에 따라오는 UI이다. 소스 (Source) $(window).scroll(function() { let wrap_el = $('#ebric_mobile_wrap'); // 전체 wrap 요소 let tab_top = $('.info-type-select.. [jQuery] ajax beforeSend에서 중단 시키는 방법 (stop $.ajax on beforeSend) jQuery(제이쿼리) $.ajax 함수에서 beforeSend 시점에 중단하는 방법 jQuery(제이쿼리)에서 $.ajax 쓰다보면 beforeSend 시점에서 함수를 중단하고 싶은 경우가 생긴다. ( 예를 들어 beforeSend에서 검증을 한다든지 설정 시 비어있는 값이 있는경우에는 alert를 띄우고 중단시키고 싶은,, ) 이 때 beforeSend에서 return false를 하면 beforeSend함수 자체는 중단이 되고 그 안에서 해당 라인 다음 로직은 수행되지 않겠지만 정작 ajax로 해당 url의 컨트롤러, 서블릿의 반환이 성공적으로 이루어졌을 때 수행되는 success 영역을 막진 못할것이다. 이런 상황에서 success로 넘어가지 않고 beforeSend에서 중단하고 싶은 경우 다음과.. [jQuery] keyup, keydown, keypress 차이 jQuery Key Event 오늘은 간단한 포스팅이에요 개발을 하다가 문득 궁금해서 검색해본 내용을 정리하려고 합니다 jquery에서는 브라우저를 통해서 사용자의 수많은 행동을 처리할 수 있는데요 그 많은 이벤트 중에 이번에 다룰 이벤트는 키보드(키입력)에 관련된 이벤트입니다 Keypress, Keydown, Keyup 먼저 간단하게 표로 정리하고 시작! 이벤트종류 실행시점 비고 keypress 사용자가 키를 눌렀을 때 키를 누르고 있을 때 계속 실행 keydown 사용자가 키를 눌렀을 때 키를 누르고 있을 때 단 한번만 실행 keyup 사용자가 키에서 손을 땠을 때 테이블 내용으로도 충분히 이해될 정도로 간단한 개념이에요! up과 down에 차이는 이름에서 느낌이 왔는데 press와 down은 어떤 .. [jQuery] event.preventDefault(), event.stopPropagation() HTML 사용자 이벤트 전달 원리 우리가 매일 사용하는 인터넷 즉, 웹에서는 사용자들이 가장 많이 발생시키는 이벤트 중 하나는 바로 클릭! 사용자가 클릭을 하는 순간 HTML상의 요소들은 클릭을 당한(?) 요소부터 그 요소의 부모님들(?) 부모 요소까지 모두 같이 반응을 하게 되는데요 ( 참고로 이러한 현상을 버블업[Bubble Up] 이라고 해요 ) 이런 현상을 이벤트가 전파, 확산 된다고 하는건데요 영어로는 propagation이라고 합니다 예를들어 다음과 같은 HTML 코드가 있을 때 12345 Test cs a태그를 클릭하게 되면 그 상위 요소인 li 그리고 ul 까지 그 이벤트가 전파된다는 것입니다~ event.stopPropagation() 그러면 제목에서 언급했던 event.stopPropa.. [jQuery] Ajax Rendering jquery 플러그인으로 ajax를 사용하여 rendering을 할 때 유용한 방법을 정리하려고 한다 페이징을 할 때 페이징 마다 ajax함수를 호출해서 랜더링을 하는 방법도 있지만 목록 전부를 불러와서 페이징 시 DB접근 없이 랜더링 하는 방법이다 전역 변수에 랜더링할 목록 데이터 저장 우선 jquery 전역변수를 선언하고 ajax함수를 따로 만들어서 랜더링할 목록 데이터를 저장한다 ( 이게 최선은 아닐 수 있지만 일단 할 수 있는 방법을 정리해놓으려고 한다 ) 이렇게 저장 해놓으면 나머지 활용하는 방법은 입맛대로 사용하면 된다 123456789101112131415161718192021222324var $data = ""; // 목록데이터를 저장할 전역변수 // ajax 함수 전달인자var param.. [jQuery] Uncaught TypeError: Cannot read property jQuery와 ajax함수를 통해서 페이지를 구성하던 중에 에러가 발생했다. Uncaught TypeError: Cannot read property 'value' of undefined 도무지 왜 발생하는지 이해가 안됬다. 페이지도 잘 올라오고 로직 상에 문제가 없었다. ( 예를들면 JS가 HTML보다 위에 있다던지.. ) 해당 에러가 발생하는 경우가 많지만 나의 경우를 정리하려고 한다. 에러 원인 나의 상황은 ajax함수를 통해서 결과물을 받았다. 그 결과물의 List를 얻어서 List의 속성을 사용했다. 그런데 속성에서 위의 에러가 발생했다. 크롬 개발자 모드를 켜서 보니 source창에서 속성 이름에 빨간 줄이 그어져 있었다. 열심히 구글링을 해본 결과 문제는 저 구문 앞에 $memberList[.. [jQuery] jQuery? jQuery란 - 2006년 초에 개발된 자바스크립트 라이브러리- DOM에 query를 날려서 필요한 노드를 찾아낸 다음, 거기에 어떤 작업을 수행한다는 컨셉으로 개발됨 - 특징1) Css1~3 및 기본적인 xPath 지원하여 HTML DOM객체 참조를 쉽게 할 수 있다.2) 모든 브라우저에서 사용 가능하다.(IE, FF, 사파리, 크롭 모두 작동)3) 플러그인 방식으로 확장을 지원한다. (많은 플러그인들이 존재하고 필요한 플러그인들만 다운받아서 사용 가능)4) prototype 등과 같이 다른 JavaScript 라이브러리와 함께 사용 가능하다. core란 - jQuery의 핵심이 되는 것을 의미한다. (jQuery 사용 시 많이 사용) - $() 형식으로 되어 있다.- jQuery 표현 방식이 두가지.. [jQuery] $와 $생략의 차이 가장 기초적인 내용으로 $를 붙인것은 jQuery 객체라는 것이다. 이는 다시말해서 jQuery 함수를 이용할 수 있는 객체라는것을 의미한다. 이와 같은 내용으로 함수앞에 $를 붙이는 것은 jQuery 함수라는것을 의미하고 이는 jQuery 객체가 사용할 수 있는 함수라는 뜻이다. $를 생략한 객체는 기본적인 javascript 객체이다. 1 2
