[函式庫] JQuery

JQuery 為 Javascript 的函式庫 ( Library )

• 在各瀏覽器的 Javascript 寫法不一樣，JQuery 統一了寫法
• 引入 : <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
• JQuery API

JQuery basic

$(document).ready(function(){
    $("p").text("Hello World!");
});

• document 代表整個 HTML，當頁完全載入後，改變 <p> 的文字為 Hello World!
• $ = JQuery

(function($){
    $(document).ready(function(){
        $("p").text("Hello World!");
    });
})(JQuery);

• 較安全的 IIFE 寫法

JQuery event

• JQuery API 裡都有用法

• hover 比較少用，通常會放在 CSS，不然如果塞太多動作會讓網頁卡卡的

jQuery Show and Hide Effects

• show : 讓東西顯示出來
• hide : 讓東西隱藏
• toggle : 如果是隱藏狀態會更改為顯示，顯示狀態則會更改為隱藏

jQuery Fading Effects

• fadeIn : 漸入
• fadeOut : 漸出

jQuery Sliding Effects

• slideUp : 向上滑動 ( 隱藏 )
• slideDown : 向下滑動 ( 顯示 )

jQuery Animation Effects

• 動畫

jQuery Chaining

$(document).ready(function(){
    $(".start").click(function(){
        $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
    });
    $(".reset").click(function(){
        $("p").removeAttr("style");
    });
});

• 方法可以連下去

jQuery Callback

• 一些涉及動畫的函數，動畫之後的程式碼可能會造成衝突，這時可以使用 Callback

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});

• 沒使用 Callback

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            alert("The slide toggle effect has completed.");
        });
    });   
});

• 使用 Callback

jQuery Get & Set Contents

• 有參數為 Set : text("hello")
• 無參數為 Get : text()

jQuery Insert Content

• append : 在前面插入 ( element 內 )
• prepend : 在後面插入 ( element 內 )
• brfore : 在前面插入 ( element 外 )
• after : 在後面插入 ( element 外 )

jQuery Remove Elements & Attribute

• 可以移除 Elements or Attribute

jQuery Add and Remove CSS Classes

• 可以增加或移除 CSS Classes

jQuery Traversing

• parent : 上一層
• parents : 祖先
• children : 裡面一層
• next : 下一個
• sibling : 鄰居

tags: 函式庫 Javascript JQuery