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