jQuery

  • 在自己的網站上坎入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 includephp 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

    jquery

  • 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,支援八種常見的統計圖表類型,夠將圖表混合在一起使用,也支援動畫的效果,讓我們製作出來的圖表更加精美!

    範例一 格線顏色與多線條

    Chart.js

        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);
        };