jQuery介紹

jQuery是開放原始碼的JavaScript函式庫，jQuery的語法設計使得許多操作變得容易，如操作文件（document）、選擇文件物件模型（DOM）元素、建立動畫效果、處理事件、以及開發Ajax程式。jQuery也提供了給開發人員在其上建立外掛模組的能力。這使開發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。模組化的方式使jQuery函式庫能夠建立功能強大的動態網頁以及網路應用程式。

如果想在網頁中使用jquery，最常使用的方法是使用CDN(內容傳遞網路，Content Delivery Network)。

<script src="http://code.jquery.com/jquery-3.1.1.min.js">
</script>

除了使用官方網頁提供的jquery，也可以使用其他來源提供的CDN，可參考官方網頁提供的資訊。

jQuery基本用法

以CSS選擇器取得元素

• 元素選擇器：$("h3") 取得h3元素
• ID選擇器：$("#myId") 取得id="myId"的元素
• 類別選擇器：$(".myClass+") 取得class="myClass"的元素
• 組合選擇器：$("ul li") 取得ul之下的li子元素
• jQuery擴充選擇器：$(":header") 表示所有h1~h6的標題元素

使用jQuery變更網頁內容

• text()：不加參數時，可取得元素內的文字。ex:$("h3").text()
  加參數則可設定文字。ex:$("h3").text('hello');
• val()：不加參數時，可取得指定的input欄位值。加參數則可設定欄位值。
• attr('屬性名稱')：查詢或設定元素的屬性值。查詢時只要指定屬性名稱參數；若要設定，則要加上第二個參數指定屬性值。
• $('<元素名></元素名>')：建立新元素物件。ex: var ele= $('<span></span>').text('Hello'); var ele1 = $('<h1>Hello</h1>');
• append()：在現有子元素之後加入新的子元素
• prepend()：在現有子元素之前加入新的子元素
• after()：在指定元素後加入新的相鄰元素(同層元素)
• before()：在指定元素前加入新的相鄰元素(同層元素)
• wrap()：在目前元素外層加上一層父元素。ex: $('p').wrap('<div></div>');
• remove()：移除指定元素

使用jQuery變更CSS樣式

• css()：可用以查詢或設定樣式屬性。ex: $('a').css('font-size'); $('a').css('font-size','24px');
• width()：查詢或設定元件區塊(不含padding, border)寬度值(單位:px)。ex: $('div').width(); $('div').width(100);
• height()：查詢或設定元件區塊高度值(單位:px)。ex: $('div').height(); $('div').height(100);
• addClass()：以類別名稱為參數即可替元素新增類別。
• removeClass()

以下為常見寫法：

$('p').css('height',50).css('color','gray');
$('p').css({'height':50,
            'color':'gray'});
$('li:even').css('color','red');
$('li').each(function(index){
              $(this).css({
                  ...
              });
});

使用jQuery處理事件

• click()：按鈕事件
• change()：內容改變事件
• dbclick()：滑鼠雙按事件
• load()：載入事件
• mouseenter()：滑鼠進入事件
• mouseleave()：滑鼠離開事件
• submit()：表單送出事件

範例：

$('a').mouseenter(function(){
    $(this).css(...);
});

• 初始化
  範例：

$(function(){
    //初始化
});