본문 바로가기

JQuery31

jQuery - 구브라우저 호환 플러그인 / jquery migrate 안녕하세요. 고코더 입니다. IE8 버전 이하에서 호환되는 jQuert 버전은 1.8 이하라고 배웠습니다. 하지만 기능 부족하고 최적화가 덜된 구버전 jQuery로 개발하는 것도 매우 어려운 일입니다. 그래서 jQuery에서는 최신 버전에서 구버전 브라우저의 호환성을 위해 플러그인을 배포하고 있습니다. 바로 jquery migrate입니다. jquery migrate 아래 소스처럼 jQuery와 함께 참조를 하여 사용이 가능합니다. 그럼 자동으로 1.9 버전부터 제거된 기능들을 이용할 수 있고 구버전 브라우저에 호환성에 맞게 움직이게 됩니다. 깃허브 해당 플러그인에 깃허브 주소입니다. https://github.com/jquery/jquery-migrate GitHub - jquery/jquery-mig.. 2021. 11. 3.
jQuery - IE8 이전 호환성이 필요하다면 1.x 버전을 사용해야 합니다. 안녕하세요. 고코더 입니다 IE가 브라우저 시장을 점유했고 지금은 크롬 기반의 브라우저가 시장을 제패했습니다. 이 덕분에 오래전에 개발된 사이트 중에는 아직도 IE 구버전이 필요한 경우가 많습니다. jQuery 1.x 그런데 jQuery를 사용하는 사이트라면 구버전을 호환하기 위해서는 1.x 버전이 필요합니다. 좀 더 정확히 이야기하면 1.9 이하일 때 가능합니다. 아래 URL로 이동하면은 1.8.3 구버전 IE를 호환하는 최신(?) 버전을 다운로드할 수 있습니다. https://blog.jquery.com/2012/11/13/jquery-1-8-3-released/ jQuery 1.8.3 Released | Official jQuery Blog jQuery 1.8.3 Released Woo hoo, T.. 2021. 11. 3.
jQuery - 제이쿼리에서 trim() 사용하기 안녕하세요. 고코더입니다. 이전 시간에 자바스크립트로 trim() 기능을 구현했습니다. 하지만 제이쿼리를 사용하면 우리가 알던 그 trim()을 쉽게 사용이 가능합니다. ● 1. 사용법은 익숙한 trim() 사용 방법 그대로 기능이 구현되어 있습니다. let data = " gocoder "; result = $.trim(data); console.log(result) ● 2. 결과 화면처럼 아주 쉽게 앞뒤 공백을 제거할 수 있습니다. 역시 제이쿼리의 편리함이란 2021. 11. 2.
jQuery UI - datepicker 특정 요일 선택하지 못하게 하기 / 데이트피커로 주말 선택 막기 안녕하세요. 고코더 입니다. datepicker에서 특정 요일의 선택을 막는 방법을 알아보도록 하겠습니다. 해당 방식은 데이터 피커에서 제공하는 beforeShowDay기능을 통해 제어가 가능합니다. ● 1. 간단한 예시로 설명을 드리겠습니다. . beforeShowDay를 실행하고 date.getDay()를 가져옵니다. 해당 값은 0:일요일~6:토요일까지 숫자를 반환하고 이에 대해 return 처리를 하면 쉽게 구현이 가능합니다. 비활성하고 싶은 요일의 코드만 남기고 아래 소스를 사용하시면 적용이 빠르실 거 같습니다. $("#calendar").datepicker({ beforeShowDay: function(date){ /* 일요일만 선택 불가 */ return [(date.getDay() != 0).. 2021. 11. 1.
jQuery - select 박스, 옵션 값 이외에 다른 값도 사용하기 안녕하세요. 고코더 입니다. 셀렉트 박스를 사용하다보면 옵션 value 값 이외에도 다른 데이터가 필요할 경우가 있습니다. 그럴 경우에는 data 함수를 사용하면 원하는 데이터를 얻을 수 있습니다. 예를 한번 들어보겠습니다. ● 1. 과일을 선택하는 셀렉트 박스를 만들었습니다. 그리고 value는 과일명 그리고 가격을 "data-price" 라는 속성에 값을 입력하였습니다. 빨간 과일 노란 과일 ● 2. 옵션 값 이외에 price 속성 값을 data() 함수를 사용해 가격을 가져왔습니다. 하나의 옵션 값에 두 가지 이상의 데이터를 가져오고 싶을때 사용 가능한 방법입니다. $("#fruit").on("change", function () { var value = $(this).val();//과일명 var .. 2021. 10. 30.
jQuery - 라디오박스 (radio box) readOnly 설정하기, 클릭되지 않게 하기 안녕하세요. 고코더 입니다. 라디오박스는 기본적으로 readOnly를 제공하지 않습니다. 그렇기 때문에 "disabled"를 처리할 수 밖에 없습니다. 하지만 명백히 이 두개는 상당히 다릅니다. 읽기 전용과 비활성화라는 다른 기능을 제공합니다. 그래서 오늘은 라디오 박스를 readOnly 처럼 사용할 수 있도록 jQuery를 통해 만드는 방법을 알아봅니다. ● 1. 해당 코드를 작성합니다. 선택자에서는 읽기전용으로 만들고 싶은 라디오 박스를 선택하고, 해당 코드를 실행합니다. 원리는 매우 간단합니다. 클릭시에 아무런 반응도 하지 않도록 이벤트를 주었습니다. $('input[name=radioBox]').click(function (event){ event.preventDefault(); event.sto.. 2021. 10. 30.
jQuery - parent() 부모요소를 선택하기 제이쿼리를 사용해, 부모요소 찾기 안녕하세요. 고코더 입니다. ● 1. jQuery에서 해당 요소위에 바로 위에 존재하는 부모 요소를 선택하는 방법을 알아보겠습니다. 실무에서 자주 사용하는 3가지 정도의 방법이 있지만 오늘은 하나의 부모 요소를 반환하는 parent() 를 사용해보겠습니다. ● 2. 해당 p태그의 상단에는 div 태그가 있습니다. 이를 한번 선택해보도록 하겠습니다. 부모를 찾아라 ● 3. 방법은 간단합니다. 자식요소에서 부모 요소를 찾는 방법은 .parent();를 사용합니다. $('p').parent(); ● 4. 조금 더 응용 해보겠습니다. 해당 처럼 사용하면 div 라는 태그가 선택되어, div 가 출력 됩니다. var tag = $('p').parent().prop('tagName.. 2021. 6. 29.
jQuery - ajax sync 옵션 동기, 비동기 동작 방식은? ajax 동기식은 진정한 동기 방식이 아니다 안녕하세요.고코더 입니다. 요즘은 백엔드와 프론트로 나눠져 있는 웹생태계 덕분에 ajax 사용이 많아졌습니다. 거의 필수적인 함수 입니다. 저도 처음 ajax를 만나고 이렇게 자주 사용할줄은 몰랐네요. ● 1. 그런데 ajax에 보면 항상 보이는 옵션이 있습니다. async 라는 옵션입니다. 많은 분들이 이 옵션으로 동기,비동기를 처리할 수 있는걸로 알고 있습니다. 하지만 맞는 말이기도 하고 틀린 말이기도 합니다. 사실 ajax 자체가 비동기 처리를 위해 사용되는건데 동기로 지정한다는게 약간 어불성설 같습니다. ->코딩 이론 - 동기(synchronous) , 비동기(Asynchronous )의 차이점 ● 2. 우선 사용법은 아래와 같습니다.1234567891.. 2019. 10. 21.
jQuery - select 선택 값 변경시 trigger(), prop() 차이는? trigger() vs prop() ? select 안녕하세요.고코더 입니다. 자바스크립트로 셀렉트 박스를 선택을 변경하는 개발을 할때 유의할 점이 있습니다. 지난 시간에 prop()과 trigger()을 각각 이용하여 셀렉트 박스의 옵션을 변경하는 방법을 배워 봤는데요. jQuery - trigger()로 select 박스 선택 값 변경하기jQuery - prop()으로 select 상태 값 변경이번 시간에는 이 두개의 차이점을 설명하려고 합니다. ● 1. trigger vs prop 각 함수로 select 박스 옵션을 변경할때 용도를 정리해보겠습니다. tirigger() : 사용자가 셀렉트 박스를 변경할때와 같이 이벤트를 발생시키고 싶을때 prop() : 사용자에게 화면에만 해당 옵션을 보여줄때 이벤.. 2019. 10. 17.

티스토리툴바