在自己的網站上坎入Youtube 播放影片，是一件簡單且輕鬆的事，Youtube提供了完美的平台，迅速且流暢的播放速度，遠比將影片放在自己的主機上方便許多。

jQuery cookie應用方法

jquery.cookie.js 一個輕量級的cookie 插件，可以讀取、寫入、刪除cookie。

對cookies的操作在當訪問一個網站就無時無刻的都伴隨著我們，記錄著我們的一舉一動，並將不危害用戶隱私的信息，將以保存，這樣用戶就不用去從新再次操作重複的步驟，這樣大大方便了客戶，也增加了客戶對網站的回頭率。

jquery.cookie.js 提供了jquery中非常簡單的操作cookie的方法。

$.cookie('the_cookie'); // 獲得cookie
$.cookie('the_cookie', 'the_value'); // 設定cookie
$.cookie('the_cookie', 'the_value',{path:'/'}); // 設定cookie為整個網站有效
$.cookie('the_cookie', 'the_value', { expires: 7 }); //設定cookie有效時間7天
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一個cookie 包括有效期 路徑 域名等

使用jQuery來達到如iframe、asp include 和 php include 的效果。
 

而jQuery能做到的比iframe連結另一個網頁html內容來的活用，使用css做樣式變化，也較有彈性。再次比較asp include 和 php include 這樣的方式，無須使用以上asp和php伺服器就能達到你想要的include html。(注意：此方法get()屬於ajax需要在server上執行。)

jQuery選取元素時，可以使用到parent()，選擇層級元素的上階層級，但往往需要在選取在上一階層，如父親的父親(阿公)，如範例<li>的爸爸<ul>，<ul>的爸爸<nav>，要對<nav>做些事情時，要如何處理？

這時候其實很簡單，只要在相同的parent()之後再接續一個parent()，就能找到你要的元素層級，如下範例展示對<nav>插入一個Hello文字。

jQuery .resize()

jQuery $(window).resize視窗被調整過時，運行此函數，再使用$(window).width()取得目前遊覽器視窗寬度。若要取得的是遊覽器高度可改用$(window).height()。

$(document).ready(function(){
    $(window).resize(function() {
        var wdth=$(window).width();
        $("span").text(wdth);
    });
});

jQuery .scroll()

jQuery .scroll() 事件可用於滾動的元素和瀏覽器視窗物件 window。只需將函數綁定到指定元素的scroll事件，當瀏覽者滾動指定的元素時則會觸發捲動 scroll 事件運行指定的 function 函數。

$(function(){
    $(window).scroll(function () {
        var scrollVal = $(this).scrollTop();
        $("span.qScrollTop").text(scrollVal);
    });
});

<table>內容值存取至資料庫

使用jquery將table資料存成物件格式，在整個丟給後端去存取，認為這是最為明智的方式。

主要存取整個<table>需要做的就是，將<table>內的資訊記錄下來，好讓後端存取使用。如重要的欄位資訊主要的data-key。

jQuery如何讓網頁載入後自動按下按鈕或連結，執行一些動作。

答案就是用click()，以下簡單的程式碼驗證一下。

HTML

<div id="autoclickme">
    <a onclick="myFunction()">Onload Autoclick me !!</a>
</div>

當你網頁內嵌了一個 YouTube，通常的做法就是對那個影片點選分享 => 內嵌，就會跑出一條讓你複製貼上的 iframe，像是:

<iframe src="https://www.youtube.com/embed/PEr5agHOTcg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

本教程中，我們將看看如何創建一個具有視差動畫效果的jQuery滑塊。在這個例子中，只用幾行代碼就實現了視差滑塊(少於40行和3kb)。jQuery庫中眾所周知和使用最廣泛的函數編寫了這個例子。很容易理解代碼流並根據您的需要進行定制。

在這個例子中，我使用init()函數一個接一個地定位幻燈片。幻燈片縮略圖列在滑塊圖像下方。幻燈片和縮略圖將添加到滑塊容器中。在點擊該縮略圖圖像時，通過改變幻燈片的位置向用戶顯示相應的幻燈片。在更換滑塊位置時，滑塊容器也會以不同的級別和速度來回滑動，從而產生視差效果。

Demo

serialize()方法使用標準URL編碼表示法創建文本字符串。它可以充當已經選擇個別表單控件，諸如jQuery對象上<input>，<textarea>和<select>：$( "input, textarea, select" ).serialize();通常更容易選擇<form>自身進行序列化：

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

在這種情況下，jQuery序列化表單中的成功控件。form檢查元素是否包含它們包含的輸入，在所有其他情況下，要序列化的輸入元素應該是傳遞給.serialize()方法的集合的一部分。在集合中選擇表單及其子項將導致序列化字符串中出現重複。

要獲取Value屬性的值，您可以執行以下操作：

$("input[type='checkbox']").val();

關於Chart.js

Chart.js是一款彈性很高的圖表JavaScript library，支援八種常見的統計圖表類型，夠將圖表混合在一起使用，也支援動畫的效果，讓我們製作出來的圖表更加精美！

範例一　格線顏色與多線條

    var config = {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                data: [10, 30, 39, 20, 25, 34, -10],
                fill: false,
            }, {
                label: 'My Second dataset',
                fill: false,
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.blue,
                data: [18, 33, 22, 19, 11, 39, 30],
            }]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Grid Line Settings'
            },
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
                    },
                    ticks: {
                        min: 0,
                        max: 100,
                        stepSize: 10
                    }
                }]
            }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
    };