iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0

前一篇講了所有的選擇器,今天來說明一下 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

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


上一篇
Day28:小事之 jQuery 選擇器
下一篇
Day30:小事之 心得、目錄與推薦
系列文
前端路上那些重要與不重要的小事30

尚未有邦友留言

立即登入留言