반응형 즐거움 넘치는 IT 세계/코드로 만드는 디자인69 [ 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. [ jquery 기초 ] jquery Filter - 기본 필터(Basic Filter) | Filter를 이용한 개체 접근 형식(표현식) 설명 :animated 애니메이션이 동작중인 모든 요소와 일치하는 요소를 반환합니다. :eq(index) Index에 해당하는 요소를 반환합니다.(단일요소) :even 짝수의 요소를 반환합니다. (0부터 시작) :odd 홀수의 요소를 반환합니다. (0부터 시작) :first 첫번째 요소를 반환합니다. :last 마지막 요소를 반환합니다. :gt(index) Index 보다 높은 Index에 해당되는 요소를 모두 반환합니다. :lt(index) Index 보다 낮은 Index에 해당되는 요소를 모두 반환합니다. :header 모든 헤더 요소들을 반환합니다.(h1,h2,h3….) :not(selector) Selector와 일치되는 요소를 제외한 나머지 요소.. 2019. 10. 3. [ VueJS 입문 ] 컴포넌트의 사용 / Intro to Components 컴포넌트(components란?) (공식사이트 - 컴포넌트) '컴포넌트는 하나의 독립된 기능을 하는 부품' https://jsfiddle.net/sunghun/th2m9ws7/77/ 샘플을 보면 여러개의 Vue인스턴스들이 동일한 형태로 반복 사용된걸 볼 수 있다. 이렇게 똑같은 인스턴스를 반복하는것은 비효율적이다. 이처럼 반복되는 사용을 피할 수 있는 방법이 바로 컴포넌트를 활하는 것이다. 즉 반복할 것을 컴포넌트로 만들어두고 필요할때 꺼내어 쓴다로 이해하자. Vue.component('태그이름', 옵션) https://jsfiddle.net/sunghun/th2m9ws7/79/ 위 내용을 살펴보자. 'Hello'는 우리가 사용할 컴포넌트의 태그명이라고 생각하고 실제 HTML 코드 상에서 태그명을 그대로.. 2019. 10. 3. 이전 1 2 3 4 5 6 ··· 8 다음 반응형
