Development/JavaScript 썸네일형 리스트형 [jQuery] Visibility Filter(가시성 필터) 안녕하세요. 빅한입니다. 최근에 회사일로 너무 바쁜일들과 집안의 좋은 일들이 많아서 이제야 글을 쓰게 되네요. 지난번에 썼던글을 확인해보니 Form 필터에 대해서 했었군요! 그럼 오늘은 간단하게 두가지 필터에 대해서 알아보겠습니다. 종류 위에서 언급했다시피 오늘은 딱 두가지 필터! 보이는 것과 안보이는 것을 선택자 필터를 알아보겠습니다. :hidden - 숨겨진 모든 요소를 선택 :visible - 보여지는 모든 요소를 선택 예제 소스 파일 구성은 다음과 같습니다. + root + lib - jquery.js + selector - selector_visibility_filter.html 예제 파일은 다음과 같습니다. - selector_visibility_filter.html hidden count: .. 더보기 [jQuery] 형식 선택자 (Form) 안녕하세요. 작은것을 좋은 하는 빅한입니다. 금일은 내용 필터 선택자에 이어서 형식 선택자(Form)에 대해서 알아보겠습니다. Form 선택자는 하기에 앞서 HTML에서는 Form은 개인적으로 요소의 모음 또는 그룹이라고 생각합니다. 이렇게 생각하는 이유는 대부분 요소는 특정 주제에 대한 입력값들은 받게되는데요. 그 입력값은 대부분 요소로 받기 때문에 그룹이라고 생각하게 된것 같습니다. 그럼 지금부터 Form 선택자에 대하여 정리해보겠습니다. 종류 요소는 몇가지 요소로 나눠질수 있는데요. 주로 'type'이라는 속성으로 구분이 됩니다. 대표적인 text부터 시작해서 checkbox, radio, file, hidden, password, button, image, reset, submit이 있고 요소 외.. 더보기 [jQuery] 내용 필터 선택자 (Content Filter) 안녕하세요. 빅한입니다. 오늘은 지난 자식 필터에 이어서 내용 필터에 관하여 살펴보도록 하겠습니다. Content Filter는 선택된 요소의 내용을 기준으로 필터하는 것이라 보면 됩니다. 즉 해당 태그의 text요소를 필터합니다. 예를 하나 들어보면 내용입니다. 위의 샘플에서 span이라는 태그에서 "내용입니다."라는 것에 대해서 특정 문자가 있는지, 아무 글자도 없는지, 특정 요소가 있는지, 자식노드가 있는지를 보고 조건에 맞는 요소를 선택하는 것이라 생각하시면 됩니다. 종류 종류에는 4가지 종류가 있습니다. :contains(text) - 지정된 텍스트를 포함하는 모든 요소를 선택 :empty - 텍스트 노드를 포함하여 자식이 없는 요소를 모든 요소를 선택 :has(selector) - 지정한 선택.. 더보기 [jQuery] 자식 필터 선택자(Child Filter) 안녕하세요. 빅한 입니다. 아.. 임시저장한것이 날라갔네요... 가슴이 아프네요... 그래도 있는 힘것 다시 정리하도록 하겠습니다. 이번에는 자식 필터 선택자에 대하여 살펴보겠습니다. 말에서 표현되는 것처럼 현재 선택자에 대한 부모의 자식에 대한 필터라고 생각하시면 이해하기 쉬울것 같습니다. 주로 표현한 선택자의 기점으로 바로위 부모의 자식 또는 형제 요소중에 고르는 것을 말합니다. 앞으로 설명할 종류에서 볼수 있듯이 크게 'child'와 'of-type'의 명칭이 들어간 것을 볼수 있는데요. 'child'는 선택자에 대한 부모를 기점으로 자식요소들 중 특정 요소를 찾는 것이고 'of-type'은 선택자의 기점으로 형제노드를 찾는 것이라 이해하시면 보다 쉽게 이해 될것입니다. 그럼 종류부터 시작해 보겠습.. 더보기 [jQuery] 기본 필터 선택자(Basic Filter) 안녕하세요. 빅한입니다. 이번에는 선택자(selector) 중에서 필터 선택자에 대해서 알아보겠습니다. 대략적인 선택자의 기능에 대해서는 여기서 확인해 주세요! 글에 내용에 있어서 수정할 부분이나 궁금한 부분이 있으면 공유해서 서로 win-win할수 있는 공간이 되었으면 합니다 그럼 본격적으로 서술하도록 하겠습니다. 먼저 이번 선택자인 기본 필터에 관한 내용은 간단히 서술 하면 다음과 같습니다. :animated - 선택자를 실행할 때 애니메이션 진행 상태에 있는 모든 요소를 선택 :even - 일치하는 집합 내의 인덱스가 0을 포함한 짝수인 요소를 선택 :odd - 일치하는 집합내의 인덱스의 홀수 번째 요소를 선택 :focus - 현재 포커스가 있는 요소를 선택 :eq(n) - 일치하는 집합 내의 인덱.. 더보기 [jQuery] 속성 지시자(Attribute Selector) 안녕하세요. 빅한입니다. 이번에는 제이쿼리(jQuery)의 속성 지시자(Attribute Selector)의 예제를 해볼 차례입니다. 이전에는 JSFiddle로 실행을 했지만 이번에는 html을 실제로 만들어서 진행하도록 하겠습니다. 그전에 jQuery 라이브러리가 필요한데요. 다운로드 및 적용 방법은 이곳을 통하여 확인해 주세요. 그럼 jQuery 라이브러리를 다운받았다는 가정하에 진행하도록 하겠습니다. 폴더 구조는 아래와 같습니다. - folder : 폴더 +- lib : 폴더 +- jquery-3.4.1.min.js : 다운받았던 jquery 라이브러리 +- selector : 폴더 +- attribute_selector.html : 예제 HTML 파일 atribute_selector.html 파일.. 더보기 [jQuery] 다운로드 및 적용 방법 1. 다운로드 첫번째. 다운로드 하는 방법. 1_ 홈페이지에 접속합니다. 2_ Download jQuery를 클릭합니다. 3_ 다운로드(Download the comporessed....)를 클릭합니다. 4_ 만약 아래와 그림과 같이 문서가 출력이 된다면 마우스 우클릭 후 '다른 이름으로 저장' 클릭 5_ 파일이 다운로드 되었는지 확인합니다. 두번째. CDN으로 불러오기 jquery 홈페이지 https://code.jquery.com/ google https://developers.google.com/speed/libraries/#jquery microsoft https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_.. 더보기 [jQuery] 선택자 - 기본 선택자 예제 안녕하세요. BigHan입니다. 이번에는 jQuery 선택자 중 기본 선택자 예제를 다뤄보겠습니다. 예제를 다루기 위해서 JSFiddle 사이트를 사용하도록 하겠습니다. JSFiddle에 관하여는 차후 간단하게 소개하는 시간에 알려드리겠습니다. (사실 저도 JSFiddle이 어떤 기능들이 있는지 알지 못합니다.) 아무튼 이곳에 가서 예제를 다뤄가면서 실습하도록 하겠습니다. cdn 추가에서 jQuery를 추가해주고 백지상태에서 시작해도록하겠습니다. 먼저 예제를 시작하기전에 기본 선택자는 다음과 같습니다. 1. "*" 2. ".class" 3. "element" 4. "#id" 5. "selector1, selector2" 이 다섯가지 선택자를 사용하기 위하여 먼저 element(요소)를 만들어보겠습니다. .. 더보기 이전 1 2 다음
