使用jQuery + CSS animation 關鍵影格@keyframes，定義設定動畫漸變，達到按鈕hover後背景從中間展開，擴展到填充整個背景按鈕效果。 開始前先將HTML <button> 先寫好，class為elementor-button ，並再多加入四個同樣的<button>在後面，分別給這四個class加入不同顏色名稱green 、blue、red、orange。 <button class="elementor-button"> Effect...
jQuery validate.js 台灣手機格式號碼表單驗證
jQuery validate.js 是一個方便用於表單驗證的jQuery plugin，透過它你可以簡單且完整的處理表單驗證的問題，但在電話號碼處理上，他並沒有提供太完整的過濾函數，在官方網站只有說明提供了phoneUS –驗證有效的美國電話號碼，但其他國家號碼沒有相對的函數提供。 表達式Regular Expression 其實要做到台灣手機號碼的格式認證，要先對於台灣手機格式的了解： 台灣的手機號碼目前基本上都符合一定的格式，那就是總共十碼，前兩碼是09 一共有 10 位數 開頭要是 09 每一個字元都要是數字...
jQuery在click()和on()之間有什麼區別
click()事件僅在元素被渲染時起作用，並且僅在DOM準備就緒時才附加到加載的元素上。 on()事件是動態附加到DOM元素的，這對將事件附加到在ajax請求，或其他情況下呈現的DOM元素（在DOM準備就緒後）很有用。 DEMO GET按鈕動態載入了<li>元素，在這樣比較兩個不同情況： list-on()：動態產生的資料，使用on()事件點擊產生出來的<li>元素，並可以成功觸發alert出來<li>元素內的文字。...
jQuery Bootstrap tabs分頁應用兩階層連結開啟指定tab
使用Bootstrap3 tabs網址轉跳後指定要開啟某個tabs，包含指定第二階的tabs。 指定連結到某個tab可使用一下網址參數做選取，tab1為第一階，tab2為第二階。 /index.html?tab1=2&tab2=3 程式碼 先在網址取得網址列參數後使用:eq(1)開啟指定的tabs。 ``` //先取得網址字串，假設此頁網址為「index.aspx?id=U001&name=GQSM」 var url = location.href; //再來用去尋找網址列中是否有資料傳遞(QueryString)...
如何在jQuery中獲取checkbox value
要獲取Value屬性的值，您可以執行以下操作： $("input[type='checkbox']").val(); 或者，如果您為其設置了class或id，則可以： $('#check_id').val(); $('.check_class').val(); 但是，無論是否選中，它都會返回相同的值，這可能會造成混淆，因為它不同是使用於提交表單行為。 檢查是否已checked 要檢查是否已checked，請執行以下操作： if ($('#check_id').is(":checked")) { // it is checked }...
jQuery簡單的應用YouTube IFrame Player API
當你網頁內嵌了一個 YouTube，通常的做法就是對那個影片點選分享 => 內嵌，就會跑出一條讓你複製貼上的 iframe，像是: <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/PEr5agHOTcg"...
如何使用jQuery AJAX submit 傳送form表單方法
serialize()方法使用標準URL編碼表示法創建文本字符串。它可以充當已經選擇個別表單控件，諸如jQuery對象上<input>，<textarea>和<select>：$( "input, textarea, select" ).serialize();通常更容易選擇<form>自身進行序列化： $( "form" ).on( "submit", function( event ) {...
使用Javascript將HTML表格table轉換輸出Excel xlsx、xls、csv、txt電子檔
TableExport.js 簡單易用的Javascript插件，允許您只在一行代碼，會自動產生輸出Excel、txt、csv按鈕，快速動態地將HTML表格轉換為Excel電子表格 .xls .xlsx，逗號分隔值.csv和純文本 .txt。 下載和設置 使用<script>標籤手動安裝 要使用此插件，請在HTML文檔的結束標記之前包含jQuery庫，FileSaver.js腳本和 TableExport.js插件<body>： <script...