반응형 제이쿼리란18 [ 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. [ jquery 기초 ] jquery - DOM 계층을 이용한 요소 접근 | DOM 이란? HTML 트리 구조를 통해 클라이언트 영역에서 재조합 기능을 제공하여 사용자와 상호 작용을 하는 구조적인 모델, 즉 트리구조내에서 객체에 개별 접근하는 방법을 말한다. HTML은 트리 구조로 자신,부모,조상,자식,후손 등에 쉽게 접근이 가능하다. | DOM의 구조 출처: | 계층 접근 셀렉터 종류 형식(셀렉터) 셀렉터 표현식 Child Selector $(“parent > child”) Descendant Selector $(“ancestor descendant”) Next Adjacent Selector $(“prev + next”) Next Siblings Selector $(“prev ~ siblings”) | Child Selector : $("Parent > Child") 부모.. 2019. 10. 2. [ jquery 기초 ] jquery Chain | Chain 이란? jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. jQuery 예제 코드를 보면 태그가 하나 있고 a태그에 href 속성과 target 속성을 jQuery를 이용해 변경하려고 합니다. 해당 소스를 실행해 보면 실행된 코드는 jQuery를 이용해 변경된 내용으로 출력된 것을 볼 수 있습니다. 즉, 여기서 보듯 .attr셀렉터를 이용해 연결연결하여 연속적으로 제어를 하고 있습니다. 이 구조가 Chain 이라고 할 수 있습니다. 1. Chain의 장점 코드가 간결해진다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치한다. 2. 탐색(traversing) Chain의 대상을 바.. 2019. 10. 1. [ jquery 기초 ] jquery 셀렉터 - 속성(Attribute) | 개체의 속성값을 이용하여 선택해보자 - Attribute Selector 각각 요소들은 속성을 가질 수 있습니다. 미리 정해진 이름이나 필요에 의해 만들어진 이름, CSS 셀렉터와 필터의 조합을 통해 요소에 접근 할 수 있습니다. 더 상세한 내용은 공식사이트에서도 확인하실 수 있습니다. Selector Example Selects [attribute] $("[attr]") attr 속성(attribute)값을 가지는 Selector 요소와 일치 [attribute=value] $("[attr='value']") attr 속성의 값이 value 와 동일한 값이 Selector 요소와 일치 [attribute!=value] $("[attr!='value']") attr 속성의 값이 value 와 같지 않.. 2019. 8. 19. [ jquery 기초 ] jquery 셀렉터 - 기본 | 팩토리함수 '$()' 함수는 괄호안에 CSS선택자를 정의해 반환합니다. 하나의 함수로 여러가지의 종류의 객체를 생성할 수 있는 팩토리함수 입니다. 'jQuery()' 함수는 동일한 기능을 하며 타 언어에서 $의 중복을 피하기 위해 지원합니다. | jQuery 셀렉터 기본적으로 jQuery의 선택자는 CSS의 태그 선택자와 비슷합니다. 앞서 CSS 선택자를 하신 분들이라면 더욱 쉽게 이해하실수 있을꺼라 생각됩니다. 더 상세한 셀렉터의 사용 방법은 공식사이트에서도 확인하실 수 있습니다. Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All ele.. 2019. 8. 18. [ jquery 기초 ] jquery란? | 기본 이해 jquery는 2006년 "John Resic"에 의해 디자인된 자바스크립트 라이브러리이다. 자바스크립트의 코드를 단순하고 간결한 상태로 개발이 가능하며, 동일한 코드의 반복과 복잡하고 많은 코드로 개발되던 기존의 작업에 비해 여러 가지 효과나 이벤트를 간단한 함수의 호출만으로 쉽고 빠르게 개발이 가능하도록 도와줍니다. | jquery의 특징 1) CSS 셀렉터 - html 문서의 구조를 명료하면서도 읽기 쉬운 형태로 표현 및 사용 가능 2) 플러그인 아키텍처 - 중복되는 기능과 코드가 엉키는 등의 오류를 피하고 산출물의 공유가 가능하며, 이미 많이 개발되어 공유되어 있는 플러그인들을 쉽고 빠르게 이용 가능 3) 메서드 체인 - 여러 개의 동장(기능)을 한 줄에 나열하여 임시 변수의 사용을.. 2019. 8. 17. 이전 1 2 다음 반응형
