jquery 썸네일형 리스트형 [jQuery] Visibility Filter(가시성 필터) 안녕하세요. 빅한입니다. 최근에 회사일로 너무 바쁜일들과 집안의 좋은 일들이 많아서 이제야 글을 쓰게 되네요. 지난번에 썼던글을 확인해보니 Form 필터에 대해서 했었군요! 그럼 오늘은 간단하게 두가지 필터에 대해서 알아보겠습니다. 종류 위에서 언급했다시피 오늘은 딱 두가지 필터! 보이는 것과 안보이는 것을 선택자 필터를 알아보겠습니다. :hidden - 숨겨진 모든 요소를 선택 :visible - 보여지는 모든 요소를 선택 예제 소스 파일 구성은 다음과 같습니다. + root + lib - jquery.js + selector - selector_visibility_filter.html 예제 파일은 다음과 같습니다. - selector_visibility_filter.html hidden count: .. 더보기 [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] 다운로드 및 적용 방법 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(요소)를 만들어보겠습니다. .. 더보기 [jQuery] jQuery란 무엇일까? jQuery란 무엇일까? 어떤이들은 라이브러리의 일종이라고 부르며 다른이들은 프레임워크의 일종이라고 부르기도하는 jQuery... 많은 이들이 사랑하고 특히 대한민국에서 많이 사용하고 있는 jQuery는 무엇일까? jQuery의 홈페이지에서는 이렇게 설명하고 있습니다. jQuery는 빠르고 작으며 기능이 풍부한 JavaScript 라이브러리입니다. 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하면 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax를 훨씬 간단하게 만들 수 있습니다. 다양성과 확장 성을 결합한 jQuery는 수백만 명이 JavaScript를 작성하는 방식을 변경했습니다. 즉, jQuery는 가벼운 라이브러리라는게 공식적인 입장인듯 합니다. 별외로 개인적인 생각을.. 더보기 자바스크립트 클래스 기초 본내용은 책의 내용을 학습하고개인적으로 정리를 하고자 만든 내용입니다.알아서 판단하여 보시길 바랍니다. 참고 책 : 자바스크립트 + JQuery 완전정복 스터디 3 완전정복스터디 : PART_05_자바스크립트 클래스와 클래스 단위 프로그래밍 1장 자바스크립트 클래스 기초. 자바스크립트에서는 클래스가 없다.하지만 클래스와 유사하게 함수를 만들어서 사용할 수 있다.3가지 방법을 비교하여 설명하고자 한다.(프로토타입에 중점을 두고 비교하길 바란다.) 1_특징 1_1_리터럴 방식클래스 만드는 용도는 아니며 주로 여러 개의 매개변수를 그룹으로 묶어 함수의 매개변수로 보낼 때 사용정의와 함께 인스턴스가 만들어지는 장점이 있음. 단! 인스턴스는 오직 하나만 만들 수 있음. 1_2_함수 방식간단한 클래스 제작 시 사용.. 더보기 이전 1 다음
