집 >웹 프론트엔드 >프런트엔드 Q&A >jquery에는 어떤 타사 플러그인이 있나요?

jquery에는 어떤 타사 플러그인이 있나요?

青灯夜游원래의: 2022-05-23 18:24:133129검색

jquery 타사 플러그인: 1. Validation, 양식 유효성 검사 플러그인 2. Form, Ajax 양식 플러그인 3. livequery, 동적 바인딩 이벤트 플러그인 4. Cookie, 플러그인 - 쿠키 관리용 5. SimpleModal, Modal 창 플러그인 등

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

JQuery에는 트리 메뉴, 날짜 제어, 이미지 전환 플러그인, 팝업 창 등과 같은 다양한 타사 플러그인이 있습니다. 기본 프런트 엔드 페이지의 구성 요소에는 해당 플러그인이 있습니다. , JQuery 플러그인으로 만든 효과는 매우 눈부십니다. 그리고 필요에 따라 플러그인을 다시 작성하고 패키징할 수 있어 간단하고 실용적입니다.

다음은 일반적으로 사용되는 타사 플러그인을 소개합니다.

jquery에 일반적으로 사용되는 타사 플러그인

1. jQuery 양식 유효성 검사 플러그인: Validation

(1) 유효성 검사 소개

JavScript가 사용되는 가장 일반적인 경우는 양식 유효성 검사입니다. jQuery는 뛰어난 JavaScript 라이브러리이며 뛰어난 양식 유효성 검사 플러그인도 제공합니다. 유효성 검사는 전 세계의 여러 프로젝트에서 검증되었으며 많은 웹 개발자로부터 칭찬을 받은 가장 오래된 jQuery 플러그인 중 하나입니다. 표준 검증 방법 라이브러리로서 검증에는 다음과 같은 장점이 있습니다.

내장 검증 규칙: 필수, 숫자, 이메일, URL 및 신용 카드 번호와 같은 19가지 유형의 검증 규칙이 내장되어 있습니다.
맞춤형 검증 규칙 : 매우 편리할 수 있습니다. 검증 규칙을 사용자 정의합니다.
간단하고 강력한 검증 정보 프롬프트: 검증 정보 프롬프트가 기본값으로 설정되어 있으며, 기본 프롬프트 정보를 사용자 정의하는 기능을 제공합니다.
실시간 검증: 키업 또는 블러를 통해 검증이 실행될 수 있습니다. 이벤트는 양식이 제출될 때만이 아니라 확인하는 데 시간이 걸립니다.

(2) 플러그인 다운로드 주소: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

유효성 검사 플러그인의 공식 API 주소는 다음과 같습니다. http://docs.jquery.com/Plugins/Validation

2. jQuery 양식 플러그인: Form

(1) Form 플러그인 소개

jQuery Form 플러그인은 뛰어난 Ajax 양식 플러그인입니다. 침입 없이 매우 쉽게 사용할 수 있습니다. Ajax를 지원하도록 HTML 양식을 업데이트하세요. jQuery에는 양식 요소 제어부터 제출 프로세스 관리 방법 결정까지의 기능을 결합한 ajaxForm() 및 ajaxSubmit()이라는 두 가지 핵심 메서드가 있습니다. 또한 플러그인에는 formToArray(), formSerialize(), fieldSerialize(), fieldValue(),clearForm() 및 ResetForm() 등의 다른 메서드도 포함되어 있습니다.

(2) jQuery Form 양식 플러그인 다운로드 주소: http:///jquery.malsup.com/form/. 독자는 웹사이트에서 플러그인을 다운로드하고 간단한 시작 지침, API, 예제 코드 등을 볼 수 있습니다.

3. 동적 바인딩 이벤트 플러그인: livequery

(1) 라이브 쿼리 플러그인 소개

jQuery의 이벤트 바인딩 기능을 사용하면 jQuery 코드와 HTML 코드를 완전히 분리할 수 있어 코드의 계층적 관계가 더 명확해집니다. 유지 관리가 더 쉽습니다. 그러나 페이지에 동적으로 로드되는 HTML 요소의 경우 이벤트를 매번 이러한 요소에 다시 바인딩해야 하므로 매우 불편합니다. 이에 따라 해당 DOM 요소의 시간을 등록하거나 콜백 기능을 트리거하는 데 사용할 수 있는 livequery라는 새로운 플러그인이 탄생했습니다. 현재 선택기와 일치하는 요소가 이벤트에 바인딩될 뿐만 아니라 나중에 JavaScript를 통해 추가된 요소도 이벤트에 바인딩됩니다. 요소가 더 이상 선택기와 일치하지 않으면 livequery는 이벤트 등록을 자동으로 취소하므로 개발자는 더 이상 HTML 요소의 소스에 주의를 기울일 필요가 없으며 바인딩된 이벤트를 작성하는 방법에만 집중하면 됩니다.

jQuery 선택기를 통해 DOM 요소를 선택하면 라이브 쿼리 플러그인이 이를 전체 DOM 범위에서 실시간으로 유지합니다. 즉, 요소가 이전에 존재했거나 나중에 동적으로 로드되었는지 여부에 관계없이 CSS가 요소를 스타일링하는 것처럼 이벤트가 바인딩됩니다. 동시에 이 플러그인은 거의 모든 리소스를 사용하지 않고도 이러한 기능을 수행합니다.
(2) jQuery 라이브쿼리 플러그인 다운로드 주소: http://plugins.jquery.com/livequery/

4. jQuery UI 플러그인

(1) jQuery UI 소개:

jQuery UI는 jQuery 플러그인— —인터페이스. 인터페이스 플러그인의 초기 버전은 jQuery 1.1.2 버전만 지원했던 1.2 버전이었다. 이후 일부 사람들은 대부분의 인터페이스 대표를 jQuery 1.2 API를 기반으로 재구성하고 API를 통합했다. 대대적인 개선으로 인해 버전 번호는 1.3이 아니라 바로 1.5로 점프하고 jQuery UI로 이름이 변경되었습니다.

jQuery UI는 크게 상호작용, 위젯, 효과 라이브러리의 3가지 부분으로 나누어집니다

상호작용. 다음은 마우스 상호작용과 관련된 내용입니다. 끌기, 배치, 확대/축소, 선택 및 정렬 등이 포함됩니다. 일부 위젯은 이러한 대화형 구성 요소를 기반으로 만들어졌습니다. 이 라이브러리에는
위젯을 지원하기 위해 jQuery UI 핵심 라이브러리인 ui.core.js가 필요합니다. 다음은 주로 일부 인터페이스 확장입니다. 여기에는 아코디언 탐색, 자동 완성, 색상 선택기, 대화 상자, 슬라이더, 레이블, 달력, 돋보기, 진행률 표시줄 및 스피너 컨트롤러가 포함됩니다. 이 라이브러리에는 jQuery UI 핵심 라이브러리가 필요합니다. ui.core.js는
효과 라이브러리를 지원합니다. 이 라이브러리는 풍부한 애니메이션 효과를 제공하는 데 사용되므로 애니메이션은 더 이상 animate() 메서드로 제한되지 않습니다. 효과 라이브러리에는 자체 핵심 세트인 effect.core.js가 있으며 jQuery의 핵심 라이브러리 ui.core.js

지원이 필요하지 않습니다. (2) jQuery UI 플러그인의 다운로드 주소는 http입니다. //jqueryui.com/download /all/. 소스 코드, 배포 버전, 테스트 드라이버를 포함한 전체 패키지를 직접 다운로드하려면 "jQuery UI 1.6rc2" 링크를 선택하세요.

5. 쿠키 관리 플러그인: 쿠키

(1) 쿠키 플러그인 소개

쿠키는 웹사이트 디자이너가 클라이언트에 배치하는 작은 텍스트 파일입니다. 쿠키는 사용자에게 많은 편의를 제공할 수 있습니다. 예를 들어, 쇼핑 웹사이트는 사용자가 검색한 상품 목록을 저장하거나, 포털 웹사이트는 사용자가 어떤 유형의 뉴스를 탐색하기를 좋아하는지 기억합니다. 사용자가 실행 중일 때 사용자의 로그인 상태도 저장되므로 사용자가 웹사이트를 방문할 때마다 이 정보를 입력할 필요가 없습니다.

jQuery는 웹사이트에서 쿠키를 관리할 수 있는 매우 간단한 플러그인을 제공하며, 플러그인 이름도 Cookie입니다.

(2) jQuery Cookie 플러그인 다운로드 주소: http://plugins.jquery .com/cookie/

6 , 모달 창 플러그인: SimpleModal

(1) SimpleModal 플러그인 소개

SimpleModal은 모달 창 개발을 위한 강력한 인터페이스를 제공하는 경량 jQuery 플러그인입니다. 모달 창 프레임으로 사용할 수 있습니다. SimpleModal은 매우 유연하며 상상할 수 있는 모든 것을 만들 수 있으며 UI 개발 시 브라우저 간 문제를 고려할 필요가 없습니다.

(2) SimpleModal 플러그인 다운로드 주소: http://www.ericmmartin.com/projects/simplemodal/

7. 지연 로딩 이미지 플러그인:lazyload

레이 로딩 또는 로딩 시작 특정 조건이 충족되는 경우에만 그림

다운로드 URL: https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

8, 플라이 플러그인

장바구니 추가 효과 및 포물선 운동 달성

다운로드 주소: https://github.com/amibug/fly

9, qrcode

j클라이언트에서 매트릭스 QR 코드 QRCode를 생성할 수 있는 쿼리 플러그인

다운로드 주소: https //github.com/lrsjng/ jquery-qrcode

10 및 spinner

는 장바구니 수를 쉽게 추가하거나 뺄 수 있으며 키보드의 위아래 키를 사용하여 쇼핑 수를 변경할 수도 있습니다. 카트.