jquery 플러그인이 뭐야?

jquery 플러그인은 jquery를 사용하여 개발자가 작성한 일부 도구인 "jquery 플러그인"을 의미합니다. 호출 시 jQuery로 캡슐화된 함수 또는 특수 효과로 이해될 수 있으며, 이를 달성하는 데는 소량의 코드만 사용할 수 있습니다. 많이 좋은 결과가 있습니다. jquery 플러그인을 작성하는 목적은 주로 일련의 기존 메서드나 기능을 캡슐화하여 나중에 유지 관리를 용이하게 하고 개발 효율성을 향상시키기 위해 다른 곳에서 재사용할 수 있도록 하는 것입니다.

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

플러그인은 "플러그인"을 의미합니다. jquery 플러그인은 "jquery 플러그인"을 의미합니다.

jquery 플러그인이란 무엇인가요?

jQuery 플러그인은 개발자가 Jquery를 사용하여 특수 효과를 만든 다음 이를 js 파일로 캡슐화하거나 패키징하고 모든 사람이 사용할 수 있도록 온라인에 게시하는 스크립트 모음입니다.

jquery 플러그인을 작성하는 목적은 주로 일련의 기존 메서드나 기능을 캡슐화하여 나중에 유지 관리를 용이하게 하고 개발 효율성을 향상시키기 위해 다른 곳에서 재사용할 수 있도록 하는 것입니다.

일반적으로 이러한 플러그인은 jQuery 라이브러리 파일 외에 플러그인 파일도 호출해야 합니다. 사용설명서가 있어 한눈에 이해할 수 있습니다. 예를 들어 jQuery 공식 웹사이트에서 제작한 플러그인 jQuery를 사용하는 경우 라이브러리 파일을 링크할 뿐만 아니라 다음과 같이 UI 파일과 UI CSS 파일도 링크해야 합니다.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

이러한 작업 후에는 jQuery가 효과는 실제로 역할을 수행하는 웹 페이지 파일을 참조할 수 있습니다.

플러그인 작성

플러그인 작성과 관련하여 jquery는 공식적으로 객체 수준 플러그인 개발을 위한 템플릿 세트를 제공합니다:

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各种参数、各种属性
        };
        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //实现功能的代码
        });
    };
})(jQuery);

템플릿의 핵심 사항:

1. 내부 매개변수로 이동하는 것이 더 안전합니다

2. 불필요한 문제를 피하기 위해 앞에 세미콜론을 추가합니다.

jquery 플러그인 호출 방법:

1. $.extend()

2. $.fn

에 jquery에 메서드 추가를 통해 $.widget()

을 통해 생성하려면 jQuery UI 위젯 팩토리 메서드를 사용하세요. 1번은 선택기를 호출할 수 없으며 해당 사용자만 이해할 수 있습니다. jQuery에는 정적 메서드를 추가하므로 DOM 개체를 선택할 필요가 없습니다.

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

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

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

1. jQuery 양식 검증 플러그인: Validation

(1) 검증 소개

JavScript가 가장 일반적으로 사용되는 경우는 양식 검증이며, 우수한 JavaScript 라이브러리인 jQuery도 탁월한 양식 검증 플러그를 제공합니다. -in—— Validation.Validation은 가장 오래된 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) livequery 플러그인 소개

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는 크게 상호작용, 위젯, 효과 라이브러리

• 상호작용의 세 부분으로 나뉩니다. 다음은 마우스 상호작용과 관련된 내용입니다. 끌기, 배치, 확대/축소, 선택 및 정렬 등이 포함됩니다. 일부 위젯은 이러한 대화형 구성 요소를 기반으로 만들어졌습니다. 이 라이브러리에는
• 위젯을 지원하기 위해 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

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

다운로드 주소: https://github.com/vsn4ik/jquery.spinner

etc. . .

【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】

위 내용은 jquery 플러그인이 뭐야?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!