반응형 프로그래밍 개발/JQuery8 JQuery 탐색 탐색 체인 컨텍스트를 유지하면서 제어의 대상이 되는 엘리먼트를 변경하는 기법이다. ${'#root}.addclass{'s'}.removeClass{'s'}.add('s').addclass{'s'}.removeClass{'s'}.first{'s'}........ 위의 예시처럼 계속 체인처럼 연결하여 탐색을 계속 코딩할 수 있다. .add(selector) : 엘리먼트를 추가한다 .andSelf() : 현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다 .children([selector]) : 자식 엘리먼트를 선택한다 .closest(selector) : 가장 가까운 selector 조상 엘리먼트를 탐색한다 .each(function(index,Element)) : 현재 엘리먼트 셋에 반복 작업을 실행한다 ... 2020. 12. 30. JQuery 폼 폼 서버로 데이터를 전송하기 위한 수단 JQuery는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다. JQuery 폼 API 문서 : http://api.jquery.com/category/forms/ Forms | jQuery API Documentation Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event handler to the “focus” JavaScript event, or tr api.j.. 2020. 12. 29. JQuery 엘리먼트 제어 엘리먼트 제어 jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다. http://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of api.jquer.. 2020. 12. 28. JQuery Event Event 시스템에서 일어나는 사건을 의미한다. javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등) 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. jQuery의 이벤트 크로스브라우징의 문제를 해결해줌 on로 이벤트 핸들러를 설치하고, off로 제거 trigger로 이벤트 핸들러를 강제로 실행 (예제2) click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함 예제 코드 2020. 12. 25. JQuery Chain Chain jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. chain의 장점 코드가 간결해진다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함. 예시 Jin seok kim 탐색(traversing) chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법 너무 복잡한 chain은 코드의 가독성을 떨어 뜨릴 수 있다. 참고 사이트 http://api.jquery.com/category/traversing/ Traversing | jQuery API Documentation Create a new jQuery object with elements added to the set of m.. 2020. 12. 23. JQuery 선택자 선택자란? jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다. 예제 코드 - id 선택자 : #선택자 - class 선택자 : .선택자 - 엘리먼트 선택자: 엘리먼트 자체 - 다중 선택자 : #선택자, #선택자2 아래 코드에서 JQuery을 이용하여 선택자를 불러오는 것을 확인 할 수 있다. 아래 jQuery 사이트에서 더 다양한 선택자를 찾아볼 수 있다. 활용할 수 있는 이해만 하면 선택자를 다 외우지 못하도 활용할 수 있다. https://api.jquery.com/category/selectors/ Selectors | jQuery API Documentation Select all elements that are i.. 2020. 12. 22. JQuery Wrapper Wrapper jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자') 맨앞의 jQuery 문자가 레퍼이며, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환시킨다. 레퍼의 안전한 사용 $(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 주의해야 한다. 제어 대상을 지정하는 방법 jQuery( selector, [context] ) jQuery( element ) test2 test 2020. 12. 18. JQuery 이란 JQuery 엘리먼트를 선택하는 강력한 방법이다. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공한다. 자바스크립트 라이브러리라고 할 수 있다. 사용방법 http://jquery.org 에서 jquery 소스코드를 다운로드 한다. 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다. Javascript와 JQuery 비교 탭을 클릭했을 때 포커스를 색깔로 표시 변경하는 코드이다. 자바스크립트 본래의 코드보다 제이쿼리가 훨씬 간결해졌다. 2020. 12. 18. 이전 1 다음 반응형
