文章列表 頁1

文章分類：
HTML
CSS
javascript
jQuery
Vue.js
PHP
Laravel
SVG
Alpine.js

透過 javascript 取得 checkbox 是否勾選的方法

要透過 javascript 去抓取 checkbox 是否勾選，可以檢查 dom 物件的 checked 的屬性。

javascript 中 switch(true) 模式

javascript 中 switch(true) 模式用法。

[jQuery] 按下加到購物車後，物品飛到購物車的效果

有些網站為了增加互動，會做把物品點了後東西飛到購物車的效果，這個只要善用網頁排版的概念就能夠做出來了，這邊來示範一下。

[jQuery] 點選圖片後切換循環播放效果

用一個陣列來儲存圖片，在點擊的時候切換圖片的 index 並加上動畫完成。

[CodeIgniter] 使用 reCAPTCHA 驗證(包含 AJAX) 教學

如果要在網站上加裝防機器人的機制，google 提供的這個 reCAPTCHA 是一個很方便的套件，如果有投票、留言板之類的功能怕被灌票的話，可以透過裝上這個來防治。

從 0 開始的 Laravel- 使用 Controller

為了讓專案更好管理，我們會在 Laravel 裡利用 controller 來管理資料跟 view 的部分。

[jQuery] 取得 datalist 的值

使用 jQuery 取得 datalist 標籤的內容的方法。

[Figma] 匯入 .fig 檔案至 figma 專案

說明怎麼匯入檔案到 figma 專案。

使用js的setInterval實現網頁打字機效果

練習用jquery寫打字機的效果。

用 jquery 製作自動伸展寬度的 input 欄位

因為有需求所以研究怎麼寫這樣的 UI: 如果在input的時候，想要後面一直有固定的值的寫法，又希望在打的時候能夠自動跟著輸入的值，這樣看起來使用者會覺得這個值就是之後會輸入到系統的值。

解決 iOS 上當下拉式選單(select)內 option 的文字太長，內容會被截斷的問題

解決 iOS 內下拉式選單(select) option 文字過長會被截斷的問題。

從 0 開始的 Laravel- 讀入別的 blade 以及樣板的用法

講述在 blade 內讀入其他 view，以及建立樣板的方法。

從 0 開始的 Laravel- blade 的判斷式與迴圈控制

除了模板繼承與顯示資料功能以外，Blade 也提供了方便的縮寫給一般的 PHP 控制敘述，像是條件陳述式和迴圈。這些縮寫提供了乾淨、簡潔的方式來使用 PHP 的控制結構，同時還保留對應在 PHP 中熟悉且同樣的語法。

從 0 開始的 Laravel- blade 使用基本介紹，字串、HTML與 json 的輸出

Laravel Blade 的基礎，了解如何將變數帶到 view 以及各種呈現方式。

[PHP] 透過 array_map 把陣列內容重整後輸出

PHP 的 array_map 對於處理資料來說很好用，可以把原始資料透過簡單的轉換變成符合想要使用的格式。

使用 jQuery ajax 上傳 csv 後並透過 D3.js 畫出圖表

在網頁上用 ajax 動態上傳檔案後並馬上繪製出圖表，結合 jquery 跟 d3.js。

使用 Google Lighthouse 審查網頁的 SEO 表現

Lighthouse 是一個 Gogole 提供的用來檢查網頁各項指數的工具，可以在 Chrome 的擴充功能找到應用安裝，firefox 也有，安裝完後會在工具列的右上角看到一個燈塔的圖示，切換到你要的檢查的頁面後再按下 Generate report，稍等一下就能看到報告了。

[jQuery] 使用 js 讓用 img 嵌入的 svg 可以變色

使用 js 把用 img 讀入的外部 svg 檔案轉成 svg 標籤內容。