반응형 분류 전체보기163 [ jquery 기초 ] jquery Animation - 애니메이션 | 효과란? 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다. jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다. 예제1) - https://jsfiddle.net/sunghun/8nt17wdk/3/ target 예제2) - https://jsfiddle.net/sunghun/8nt17wdk/4/ » Run Hello! 2019. 10. 12. [ jquery 기초 ] jquery Event - 고급 메서드 .live() .live( eventType, handler ) .live( eventType, eventData, handler ) .live( events ) live() 메서드의 경우 원래는 jQuery의 플러그인으로 개발되어 사용이 되었으나, 너무나 좋은 기능 때문인지 “1.3” 이후 버전의 jQuery에는 기본 기능으로 추가 되었습니다. .click(), .bind() 와 같은 이벤트 메서드에서는 이미 로드가 완료된 개체에 이벤트를 주었다면, .live() 메서드의 경우 동적으로 생성될 개체나 요소에 대해서도 이벤트를 맵핑 할 수 있습니다. $(“a”).click(function() { alert(‘click a’); }); 의 경우 HTML 문서에 존재하는 “a”요소를 찾아 마우스 클릭 이벤트.. 2019. 10. 11. [ jquery 기초 ] jquery Event - bind() 메서드 .bind() .bind( eventType, [ eventData ], handler(eventObject) ) .bind( eventType, [ eventData ], false ) .bind( events ) .bind() 메서드는 말 그대로 개체와 이벤트를 묶어주는 역할을 합니다. 앞의 이벤트 메서드의 경우 직접 이벤트를 호출 하지만, .bind() 메서드는 파라미터의 값으로 이름을 넣음으로써 해당 이벤트를 체크하게 됩니다. $(“div”).click(function() { alert(‘click’); } $(“div”).bind(‘click’, function() { alert(‘bind click’); } 두 메서드의 차이점 보이시나요? .click() 메서드의 직접호출이 아닌 해당 이벤트의.. 2019. 10. 10. [ jquery 기초 ] jquery Event - 이벤트 지원 메서드 | 이벤트란? 시스템에서 일어나는 사건을 의미 Javascript나 jquery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스이동, 타이핑, 페이지 로딩 등) 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. 이벤트에 대한 기본적인 내용은 자바스크립트 이벤트 편 참고 http://opentutorials.org/course/49 jQuery에서는 사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있는 메소드를 지원하고 있습니다. 마우스의 클릭과 키보드의 입력은 물론이고 심지어 더블클릭과 마우스 휠에 대한 이벤트를 쉽게 처리 할 수 있습니다. jQuery에서 제공하는 이벤트 관련 메소드의 종류는 정말로 너무나 많습니다... 2019. 10. 9. [ jquery 기초 ] jquery FORM API - 폼을 위한 API | 폼이란? 서버로 데이터를 전송하기 위한 수단 Query는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다. jQuery 폼 API 문서 : http://api.jquery.com/category/forms/ | 폼(form)을 위한 API 웹 프로그램에서 Form은 매우 중요한 요소입니다. 사용자의 데이터를 서버로 전송을 하는 막중한 임무를 뛰고 있습니다. ASP.NET에서는 단일 폼의 형태로 구성이 되어 있었으며, 많은 부분이 Form에 대해 크게 신경을 쓰지 않아도 되는 부분이 있었습니다. 하지만 ASP.NET MVC가 나오면서 상황은 바뀌었습니다. ASP, PHP 처럼 Form을 직접적으로 컨트롤 하고, 다중 폼을 이용한 프로그래밍이 쉬워졌기 때문입니다. 물론 ASP.NET도 Form을 통한 .. 2019. 10. 8. [ jquery 기초 ] jquery Attribute - 속성 관련 메서드 | HTML 문서의 속성, 엘리먼트 제어하기 - http://api.jquery.com/category/manipulation/ .attr() 요소의 속성값을 가져오기 위해서는 .attr(attributeName)을 사용하며, 속성값을 설정하기 위해서는 .attr(attributeName, value)를 사용하면 됩니다. .removeAttr() removeAttr( attributeName ) 선택된 개체의 속성값을 제거 할 수 있습니다. .val() 선택된 요소의 값을 가져옵니다. jQuery 에서 셀렉터 다음으로 가장 많이 사용되는 메서드가 아닌가 싶습니다. Input, select 등의 요소에서 value에 해당하는 값을 가져오거나 설정하며, 자바스크립트의 document.getElementByI.. 2019. 10. 7. [ jquery 기초 ] jquery CSS - 스타일 메서드 | HTML 문서의 스타일(CSS) 제어하기 .css() .css()를 이용해 현재 적용되어 있는 스타일을 가져오거나 새로운 스타일을 적용합니다. $(“div”).css(“background-color”)의 경우 해당 선택된 개체의 배경 색상을 가져옵니다. 기본적인 표현 식은 스타일에서 사용되는 구문을 동일하게 사용하시면 됩니다. 새로운 스타일을 적용하고 싶을 경우에는 css(propertyName, value) 메서드를 사용하시면 됩니다. 앞에서 진행한 예제를 보시면 대부분의 경우 이 메서드를 사용해서 강조하고 있습니다. 사용법 또한 스타일 관련 문법만 알고 계시면 어렵지 않게 활용 가능합니다. 붉은색 배경을 넣고 싶을 경우 $(“div”).css(“background-color”, “red”); pr.. 2019. 10. 6. [ jquery 기초 ] jquery Filter - 자식 필터(Child Filter) | 자식필터 앞서 다룬 기본 필터와 유사한 모습을 하고 있지만 :first, :last 경우 단일 요소가 반환 되지만, 자식필터의 경우 단일요소가 아닌 집합을 반환하게 된다. 필터 종류 및 형식 필터 설명 :first-child 자식 요소 중 첫번째에 해당하는 요소를 모두 반환합니다. :last-child 자식 요소 중 마지막에 해당하는 요소를 모두 반환합니다. :nth-child (index/odd/even/equation) 자식 요소 중 지정된 값에 해당하는 요소를 모두 반환합니다. :only-child 자신이 부모 요소와 유일한 자식인 모든 요소를 반환합니다. | Nth-child 기본적인 동작은 다른 필터와 동일합니다. 특이한 점은 index, even, odd 같은 값을 지정하여 사용을 하거나 .. 2019. 10. 5. [ jquery 기초 ] jquery Filter - 폼 필터(Form Filter) | 폼 필터 폼 필터 종류 선택 폼 :button :checkbox :checked :disabled :enabled :file :focus (1.6 이상에서 지원) :image :input 모든 input 요소 :password :radio :reset :selected :submit :text :hidden 2019. 10. 4. 이전 1 2 3 4 5 6 7 ··· 19 다음 반응형
