# 8 簡易 jQuery 套件

##  套件規則

只要透過 **`$.fn`** 就可以寫一個基於 jquery 專用外掛。

先參考 IIFE(Immediately Invoked Function Expression) 範例：

```javascript
(function(a){
  alert(a);
})(5);
```

{% embed url="<https://codepen.io/carlos411/pen/wvKaWym>" %}

步驟一：在 IIFE 裡面寫

```javascript
(function(){
  // code here...
})();
```

步驟二：在 IIFE 裡代入 jQuery 參數，這是為了避免跟其它函式庫有命名上的衝突，jQuery 代入，由 **`$`** 變數承接：

```javascript
(function($){
  // code here...
})(jQuery);
```

步驟三：在 $.fn 繼續撰寫基於 jQuery 相關的自訂程式，並回傳 jQuery 物件

```javascript
(function($){

  $.fn.printMessage = function(params){
    // 其它原始碼...
    return this;
  };
  
})(jQuery);
```

## 自訂 printMessage 套件

將函式掛載在 jQuery 函式庫當中。

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/ZEgQzpo>" %}

## 套用 slick 輪播套件


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/jquery/8.-jquery-wai-gua-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.