# [函式庫] JQuery

**JQuery 為 Javascript 的函式庫 ( Library )**

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

### 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`