前一篇講了所有的選擇器，今天來說明一下 jQuery 基本的寫法，與幾個好用的 plugin。

寫法
$('CSS Selector').要做的事();

• 例如：有五個 li ，想選取第三個 li 幫他加上 3px 的紅色邊框，並且在這個 li 裡面加上文字 YES，可以這樣寫：

$('li:nth-child(3)').css('border','3px solid red').append('YES');

$('li:nth-child(3)') --> 選擇第三個 li

.css('border','3px solid red') --> .css 即為改變其 CSS，而 css 的屬性與值要拆開來寫，各自用單引號包起來。

.append('YES') --> 將指定的內容 “YES” 插入元素中的末端。

而 jQuery 有趣的是可以一直玩接接樂，如果你想對一個元素做好幾項動作，就可以一直接著寫下去。

大致上了解 jQuery 的寫法就可以試著寫 jQuery 來控制網頁元素囉。
在 jQuery API 裡面都有連結使用方式，可以參考唷～

接下來介紹 jQuery plugin 使用方式。

jQuery plugin

以最好上手的圖片輪播 plugin 舉例- flexslider

官方網站的介紹挺詳細的，從最基本的輪播，到複雜的，都直接給你範例（一段 html 與 一段這個 plugin 專用的 jQuery 語法）
那要怎麼用在自己的網頁上呢？

第一步：下載 jquery 的 js 和要使用的 plugin

• 會使用到的檔案為 flexslider.css、jquery.min.js、jquery.flexslider.js、fonts資料夾與 images 資料夾裡面的圖示

第二步：

• 開啟一個新的 html 檔，在 header link flexslider.css 與自己的 css檔

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />

• 在 body 裡面加上官網上給的 html (熟悉 plugin 的使用後，可以自行修改結構)
  

• 在 body 之後加上 jquery.min.js、jquery.flexslider.js 與官網給的 js 語法
  

這樣子就完成最基本的圖片輪播了！非常容易。

許多的 jQuery plugin 都會有詳細的文件說明與使用範例，只要按照範例與說明的方式，都能夠很順利地使用 plugin。

plugin 推薦

圖片輪播：
flexslider
Fancybox
35款 Lightbox

瀑布流 plugin：
Masonry

下滑滾動動畫 plugin：
ScrollReveal

滿版背景 plugin：
10 jQuery Plugins For Fullscreen Background Image & Video

以上是今天的介紹。各位看倌明天見囉～