웹페이지에서 날짜를 선택하는 UI 컴포넌트 중 간단하면서 쉽게 적용하는 jQuery Datepicker가 많이 사용됩니다. 이때 보여주게되는 요일 시작의 기본값이 아래 순서와 같습니다.[ 일 월 화 수 목 금 토 ]이때 만약 다른 요일부터 시작하게하려면? 어떻게할까요? 가능할까요??스크린샷) 기본값으로 일요일부터 시작되는 Datepicker# jQuery Datepicker 다른 요일부터 나오도록 설정하기제이쿼리의 Datepicker는 원하는 요일부터 선택 가능하도록 옵션값을 지정할 수 있습니다. 즉 아래와 같은 값들이 가능합니다.[ 월 화 수 목 금 토 일 ]또는[ 토 일 월 화 수 목 금 ]아래 스크린샷 처럼 순서를 바꿀 수 있게됩니다.스크린샷) 일요일이 아닌 월요일부터 시작일이 바뀜물론 어떤 요일이든 선택할 수 있습니다. 그렇다면 어떻게 하면 요일 시작값 일요일이 아닌 다른 요일로 변경하는지 알아봅니다. 아래는 이를 적용한 코드입니다.! Datepicker 요일 설정 예제보기아
2018-05-30 16:03:49제이쿼리의 이벤트 메서드 중 하나인 click()의 반대되는 unclick()이 존재할까요?이벤트를 추가한 경우 제거해야할 상황이 있습니다. 특히 비동기식 페이지에서는 페이지 전환이 이뤄지지 않아 메모리 leak이 발생할 수 있기 때문이죠. 그렇기 때문에 실제로 이벤트는 on(), off()를 사용하여 이벤트를 바인딩고 언바인딩합니다. 그래야 성능 및 메모리 이슈가 없겠죠 ~ 그렇다면 이런 메서드 없이 click()을 사용한 경우라면 ??? 어떻게 unbinding 할 수 있을까요? 아래 예제라면...$('button').click(function() { alert();});위 코드는 아래처럼 unclick() 이 존재한다면 언바인딩 가능하겠죠~ 즉 이벤트를 제거할 수 있겠죠!$('button').unclick();그럼 실제로 unclick()이 존재할까요?# unclick()은 존재할까요의 답변예전 제이쿼리 1.1 이전의 버전에서 존재하였던 메서드입니다. 하지만 on(), off
2017-04-29 15:53:53제이쿼리를 사용한 animate() 예제를 아래에 쭈~욱 만들어주세요!animate()를 사용하면서 고려할 부분은 무엇일까요?# animate() 사용시 주의점위 제이쿼리 메소드를 사용하기 이전에 animate()를 사용하는 대상의 엘리먼트에 position 속성을 추가해줘야합니다. 그렇지 않을 경우 의도와는 다르게 움직일 수 있습니다.
2017-04-27 02:36:37만약 제이쿼리(jQuery)를 사용하여 long polling을 구현할 경우 간단한 예제는 아래와 같습니다.(function poll() { $.ajax({ url: '/api/', type: 'GET', dataType: 'json', success: function() { console.log('success'); }, timeout: 3000, complete: setTimeout(function() { poll(); }, 6000) })})();위 코드는 서버와 통신하여 값을 받은 경우 다시 정해진 6초 후에 poll() 함수를 호출하여 지속적인 통신이 가능하도록 한 long polling 코드의 하나입니다. code snippet widget
2017-04-06 20:29:21jQuery를 사용하여 비동기 통신 AJAX를 사용할때 대기시간을 설정할 수 있습니다. 이 값을 설정하면 대기하는 시간이 지날 경우 에러 등의 상태로 전환하게 됩니다.알려진바로는 timeout의 기본값은 브라우저 및 환경에 따라 각기 다르다고 합니다.대기시간을 설정하는 이유는 통신 지연등의 이유도 있지만 Long polling이라는 방식에서도 사용됩니다. 이는 연결 대기시간을 늦추어 완벽하지는 않지만 게속 통신이 가능하도록 유지하는 방법 중 하나입니다.그럼 아래는 jQuery에서 AJAX의 대기시간을 설정하는 예제입니다. 이때 timeout 값을 설정하도록 합니다.# 제이쿼리 AJAX의 대기시간 설정 예제보기 $.ajax({ url: '/blog/', type: 'get', dataType: 'json', timeout: 3000});위 예제는 timeout을 3초로 설정하였습니다.
2017-04-06 20:20:39jQLite 작은 jQuery라고도 하는 이 안에 수행 가능한 것들은 무엇인가요?AngularJS에는 jQLite가 포함되어 있습니다. 이 덕분에 angularJS를 사용하면서도 jQuery의 파워풀한 기능을 일부 사용할 수 있죠. 하지만 jQuery가 지원하는 모든 기능을 지원하는 것은 아니죠.만약 jQuery를 사용하길 원하는 경우 jQLite는 자동으로 동작하지 않으므로 걱정하지 않아도 됩니다. 하지만 두 가지를 동시에 사용하는 것은 퍼포먼스를 중요시 하는 프로젝트에서 한 번 고려할 사항이기도 합니다. 이미 jQLite가 많은 기능을 지원해 주기 때문이죠.# 제이쿼리의 Css 방식 선택자 기능 지원제이쿼리를 사용할 경우 간편한 선택자 엔진이 매우 편리합니다. jQLite 역시 동일한 방식으로 선택자 기능을 가지며 아래와 같이 AngularJs에서 사용 가능합니다.$elementangular.element()jQuery()$()그럼 jQLite가 지원하는 기능들은 어떤 것이 있는
2017-03-31 15:07:50자바스크립트의 이벤트는 이벤트를 발생시키는 경우(트리거 요소)를 구분하여 줍니다. 이때 가장 많이 사용되는 click 이벤트... 그리고 마우스 눌렀다가 뗄 경우 발생하는 mouseup 이벤트가 따로 존재하는데 이 둘의 차이점이 무엇인지 알아보겠습니다.왜 이런 궁금증이 생기는가...??클릭 이벤트가 클릭을 하는 시점에서 발생하지 않고 마우스를 클릭 후 띄는 액션에 발생하기 때문에 두 가지 모두 동일해보이기 때문입니다. 단순하게(?) 생각해봐도 mouseup 이벤트 발생이 좀 더 효과적일 것으로 기대할 수 있으나 왜 그런지 ~ 무엇이 다른지 확실히 알 필요가 있을 것입니다.일단 이 두 이벤트 함수를 나타내보면 아래와 같을 것입니다.<script type="text/javascript">/* 클릭 이벤트 함수 */$('선택한 요소').on('click', function() { ...});/* 마우스업 이벤트 함수 */$('선택한 요소').on('mouseup', function() {
2016-02-01 10:17:08제이쿼리 UI는 사용하기 편리한 다양한 UI(유저 인터페이스)를 매우 많이 지원한다. 이 중에서도 편리하면서 꼭 필요한 기능 중 하나로 datepicker를 꼽을 수 있다...# jQuery 플러그인 Datepicker UIDatepicker UI는 말 그대로 날짜를 쉽게 선택할 수 있도록 도와주는 인터페이스로 사용 방법이 매우 간단하고 쉽다. 특히 제이쿼리를 사용하는 프로젝트의 경우 편하게 사용할 수 있는 Datepicker UI가 많이 쓰인다.! Datepicker UI 한글 사용 방법은?기본값이 영어로 나오는 경우 이를 한글로 변경해주는 설정이 필요하다. 한글로 변경하기 위해서 추가적인 설정이 필요한데 이 방법은 아래와 같다. 그럼 아래의 아래의 예제코드를 보자.# datepicker 한글화 예제소스 보기 datepicker에서 한글을 사용하기 위한 방법으로 아래와 같이 설정이 필요하다. 아래의 스크립트를 추가한다.// KR language callendar$.datepick
2015-12-23 17:22:17제이쿼리를 사용하여 현재 요소의 부모요소를 없애거나 추가할 수 있습니다. 바로 unwrap(), wrap() 메소드입니다.$(test).wrap('<div></div>');$(test).unwrap();위 내용은 간단한 사용방법으로 랩핑하기 위한 부모요소가 필요한 경우 wrap()의 매개변수로 등의 태그명을 선택하여 넣어주는 방법을 사용합니다. 매우 간단하죠. 만약 span 태그로 랩핑한다면 아래와 같을 것입니다.$(test).wrap('<span></span>');unwrap()은 특별한 매개변수가 필요하지 않습니다. 현재 요소에서 부모요소 태그를 자동으로 제거하여 줍니다.참고로 해당 메소드는 제이쿼리 1.4 이후부터 사용 가능합니다. 매우 손쉽게 사용이 가능한 두 메소드의 사용 방법은 아래 예제를 참고하세요.<body> <div> <p>test</p> </div></body><script> test = $('p'); test.unwrap();</script
2015-12-22 12:48:49제이쿼리를 사용해 이벤트 제어시 이벤트를 발생시킨 요소에 대하여 컨트롤 하는 경우 $(this) 키워드를 사용한다. 이때는 당연히 이벤트를 실행시키는 함수가 필요할 것이고 그 안에서 제이쿼리로 지정된 특정 요소를 컨트롤하기 위해 event.target을 사용하기도 하지만 가장 많이 쉽게 사용하는 부분이 바로 $(this)라는 키워드 선택이다.참고... 함수에서 이벤트가 발생하는 경우 객체 안에서의 this는 객체의 프로토타입을 나타내지만 함수 안에서는 해당하는 요소를 this의 값으로 가지고 반환한다. $(this)는 제이쿼리를 통한 이벤트 생성시 반환되는 요소이다. this는 $(this)[0]과 같다.궁금한 부분이 있었으니 만약 제이쿼리(jQuery) 이벤트를 통해 실행된 이벤트 함수에서 event.target을 통해 정해진 특정 요소가 제이쿼리 요소로서 컨트롤이 가능한지가 궁금하였다. 이에 대하여 테스트를 해보았고 결론은 다른 제이쿼리 요소와 같이 제이쿼리 메소드 및 속성 지정
2015-12-21 15:36:52제이쿼리 1.8부터 사용이 가능한 메소드 addBack()에 대하여 알아보겠습니다. 아래는 기본적인 사용방법입니다..addBack().이어서 수행 할 메소드 및 속성;addBack() 메소드를 수행하면 이전에 선택되었던 제이쿼리 요소를 반환합니다. 즉 이전에 선택된 요소를 찾기 위한 노력이 줄어들 수 있습니다. 자세한 내용은 아래 예제를 참고해주세요.# addBack() 예제보기아래는 addBack() 메소드를 사용하여 이전 요소를 선택하는 방법입니다. 만약 선택한 요소가 가진 텍스트 값을 자식 노드 input 태그의 값으로 교체한 후 다시 자신을 선택하여 가진 값을 0을 변경할 경우의 예제를 알아보겠습니다. 코드는 아래와 같습니다.<body> <p>123-456-7890</p> <input name="telNum" /></body>위와 같이 이전요소를 선택하기 위한 방법으로 다양한 선택자 함수가 있습니다. 그 중에서도 많이 쓰이는 것이 end() 메소드입니다. 이 end(
2015-12-08 11:28:53제이쿼리에서 html의 특정요소, 노드를 삭제하려면 어떻게 해야할까요? 이때 제이쿼리는 remove() 메소드를 사용할 수 있습니다. remove() 메소드는 선택된 요소를 간편하게 제거하여줍니다. 어떻게 하는지 아래에서 알아봅니다.# jQuery의 remove()를 사용하여 엘리먼트 제거하기참고로 empty() 또는 detach() 메소드 역시 제거하는 메소드로 비슷하나 동일한 것은 아닙니다. 우선 remove()는 다음과 같이 수행합니다.1. 선택된 자신 및 자식 요소들 모두 삭제함2. 연결된 모든 이벤트 역시 삭제함위와같이 자신을 포함한 모든 자식 요소들이 삭제되는 것이 특징입니다. 뿐만 아니라 엘리먼트가 가지고 있는 데이터 및 이벤트들도 함께 삭제되는 것이 또 다른 특징입니다. 만약 이를 원치 않을 경우 detach() 메소드를 사용하는게 좋겠죠. 그럼 아래의 예제를 참고하세요.# jQuery remove() 예제보기간단한 예제를 알아봅니다. 아래의 예제는 remove() 메
2015-04-23 15:19:44제이쿼리를 사용하여 간단하게 자식요소를 선택하는 방법을 알아보려고 합니다. 자식요소를 선택하는 방법에는 children() 함수가 많이 사용됩니다. 이 외에도 find() 함수가 존재하는데 오늘은 children()에 대하여 자세히 알아봅니다.# 제이쿼리 children() 자식요소 얻기위에 잠시 언급한 find() 그리고 오늘 알아볼 children()의 차이점을 알아보겠습니다. 이 둘의 차이점이라면 children()은 부모 요소의 바로 아래 단계인 자식요소만 선택할 수 있으나, find()는 부모 태그의 모든 하위 요소의 자식을 선택하여 가져올 수 있다는 점이 차이점입니다. 그럼 children()의 간단한 사용방법은 아래와 같습니다.$(element).children(option) 괄호안의 선택옵션은 필수가 아닌 선택입니다. 만약 옵션을 입력할 경우 특정 요소만 필터링하여 반환하는 것이 가능합니다. 즉 아래와 같이 사용할 수 있습니다.! children() 옵션 사용하여 찾
2015-03-17 16:25:52# JavaScript(자바스크립트)는 무엇인가?Java Script는 웹개발 스크립트 언어 중 가장 넓리 쓰이는 객체지향 언어(OOL: Object Oriented Language)이다. 개발언어는 객체지향언어와 절차지향언어와 구분되는데 최근 사용되는 언어는 거의 대부분 객체지향 언어를 사용하고 있다.무엇보다 그 이유는...첫째, 코드의 재사용율이 높다둘째, 불필요한 코드의 반복 사용을 줄여주어 간결한 코딩이 가능하다제이쿼리(jQuery)는 JavaScript를 이용한 라이브러리 중 하나로 자바스크립트를 매우 간결하게 쉽게 사용할 수 있도록 도와주는 라이브러리 언어로 보면된다. 물론 jQuery 외에도 Prototype 등 다른 라이브러리도 많으나 요새는 거의 jQuery가 넓리 쓰이고 있으며 서버와 통신이 많은 경우 AngularJS도 많이 사용된다제이쿼리는 선택자가 CSS와 거의 동일해 쓰기 편하고 배우기 쉽다는 장점이 있다. 또한 Ajax(비동기식전송) 역시 jQuery를 이
2014-01-31 12:54:57우선, 이벤트 통합 메서드는 JQuery 1.7 이후 버젼부터 사용이 가능합니다. 기존의 이벤트의 핸들러 함수로는 bind(), live(), delegate()가 있죠. 이 방법들 역시 사용이 가능하나 기능이 축소 및 변경되었기 때문에 앞으로는 통합 메소드 on() 을 사용하시기 바랍니다. 1.7 이후부터는 사용방법이 조금 바뀌었습니다. 어떻게 사용하는지 아래 예제를 참고하세요.# jQuery 통합메서드 on(), off() 알아보기먼저 on() 또는 off()는 아래와 같은 문법으로 사용됩니다.$(선택요소).on('click', function() { // 실행할 구문});이 방법은 좀 더 쉽게 알아보기 위해서 아래 예제 소스 코드를 참고하세요!# on() 이벤트 통합 메서드 예제 소스 보기아래 예제는 간단한 버튼 클릭 예제입니다. 클릭할 경우 클릭되었다는 경고창을 불러오게됩니다. 매우 간단하죠. 중요한 부분은 on() 메소드를 사용하였다는 점 하나입니다.<div> <butt
2014-01-03 11:24:21
