본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

(158)
[jQuery] 내용 필터 선택자 내용 필터 선택자 콘텐츠와 관련된 요소를 선택하는 방법입니다. 내용 필터 선택자(Content Filters) 내용 필터 선택자 종류 설명 :contains() 선택된 집합의 일치하는 문자열 요소를 선택합니다. :empty 선택된 집합 요소에 텍스트가 없을 때 선택됩니다. :has() 선택된 집합의 일치하는 요소를 선택합니다. :parent 선택된 집합 요소에 텍스트가 있들 때에 선택됩니다. Sample1 내용 필터 선택자 예제입니다. 결과 속성 선택자 기본 선택자 계층 선택자 속성 선택자 기본 필터 선택자 내용 필터 선택자 :contains() :empty :has() :parent 보임 필터 선택자 자식요소 필터 선택자 폼 필터 선택자 리셋 클릭하면 :contains()를 선택합니다. 클릭하면 :em..
[jQuery] 기본 필터 선택자 기본 필터 선택자 필터는 선태자 앞에 :(콜론)을 붙어 표현을 하며, 필터를 사용해 다양한 조건에 따라 선택할 수 있습니다. 기본 필터 선택자(Basic Filters) 기본 필터 선택자 종류 설명 :animated 선택된 집합에서 show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다. :eq(index) 선택된 태그들의 인덱스 번호를 통해 선택합니다. :gt(index) 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다. :lt(index) 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다. :header 선택된 집합에서 제목 요소(h1~h6)들을 선택합니다. :first 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다...
[jQuery] 속성 선택자 속성 선택자 태그의 속성을 사용하여 선택하는 방법입니다. 속성 선택자(Hierarchy) 속성 선택자 종류 예시 설명 [name|="value"] $("li a[href|='web']") 속성 중에 'web'과 같은 속성 값을 선택합니다. [name*="value"] $("li a[href*='web']") 속성 중에 'web'가 포함되어 있는 태그를 선택합니다. [name~="value"] $("li a[href~='web']") 속성 중에 'web'으로 시작하는 태그를 선택합니다. [name$="value"] $("li a[href$='web']") 속성 중에 'web'으로 끝나는 태그를 선택합니다. [name="value"] $("li a[href='web']") 속성 중에 'web'와 일치하는 속..
[jQuery] 계층 선택자 계층 선택자 계층적인 구조에서 선택하는 방법입니다. 계층 선택자(Hierarchy) 계층 선택자 종류 예시 설명 하위 선택자(Descendant Selector) $("div p") div 태그의 모든 자식 중 p 태그를 모두 선택합니다. 자식 선택자(Child Selector) $("div > p") div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택합니다. 형제 선택자(Next Adjacent Selector) $("div + p") div 태그의 인접한 형제 p 태그 중 첫번째 태그만 선택합니다. 형제들 선택자(Next Siblings Selector) $("div ~ p") div 태그의 인접한 형제 p 태그를 모두 선택합니다. Sample1 기본 선택자 예제입니다. 결과 계층 선택자 기본 ..
[jQuery] 기본 선택자 기본 선택자 기본 선택자는 CSS와 동일하게 선택자를 선택하는 방법입니다. 가장 기본적으로 요소를 선택하는 방법입니다. 이 방법은 CSS와 동일합니다. 기본 선택자(Basic Selectors) 기본 선택자 종류 예시 설명 태그 선택자 $("p") 기본 태그를 선택합니다. 클래스 선택자 $(".class") 클래스 태그를 선택합니다. 아이디 선택자 $("#id") 아이디 태그를 선택합니다. 그룹 선택자 $("p, .class, #id") 여러가지 태그를 선택합니다. 전체 선택자 $("*") 전체 태그를 선택합니다. Sample1 기본 선택자 예제입니다. 결과 기본 선택자 태그 선택자 : 기본 태그를 선택합니다. 클래스 선택자 : 클래스 태그를 선택합니다. 아이디 선택자 : 아이디 태그를 선택합니다. 그룹..
[jQuery] 변수의 변환(형변환) 변수의 변환(형변환) 변수에는 여러가지 자료형이 들어 갈 수 있습니다. 이런 자료형의 성질을 변환 시킬 수 있는데 이것을 자료형 변환 또는 형변환이라고 합니다. 자료형 변환 자료형 변환을 하는 방법은 직접 명시적으로 자료형을 변환하거나 자바스크립트 객체를 이용하여 변환하는 방법이 있습니다. 형변환 변수의 자료형을 변형하는 예제입니다. html
[jQuery] Basic 제이쿼리 기초 제이쿼리를 사용하기 위한 기본 사용방법입니다. 제이쿼리 사용방법 제이쿼리를 사용하기 위해서는 자바스크립트 라이브러리 파일이 필요합니다. jQuery 라이브러리는 jQuery 공식사이트에서 다운 받을 수 있습니다. jQuery는 1.x, 2.x, 3.x 버전이 있습니다. 1.x 버젼은 IE6, IE7, IE8 버젼을 지원합니다. 제이쿼리 다운로드 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 다운 받아야 합니다. 다운 받기 Script CDN 사용하기 CDN(Content Distribution Network)는 전 세계적으로 분산되어 있는 서버 네트워크를 사용하는 시스템입니다. 콘텐츠를 효율적으로 사용하기 위한 네트워크 시스템을 의미합니다. 다음은 구글에서 제공하는 CDN입니다. Script..
[jQuery] Intro 제이쿼리 제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 제이쿼리는 HTML에 포함되어 있는 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된, 웹 브라우저 호환성을 가진 자바스크립트 라이브러입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 다양한 함수의 집합을 의미합니다. 제이쿼리의 장점 제이쿼리는 CSS를 쉽게 적용할 수 있습니다. 제이쿼리는 크로스브라우징을 지원합니다. 제이쿼리는 플러그인이 풍부합니다. 제이쿼리는 코드를 적게, 효율적으로 작성할 수 있습니다. 제이쿼리는 좋은 확장성과 ajax기능을 구현합니다.