iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
0
Modern Web

網頁程式設計so easy系列 第 11

Day10 [jQuery]

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(){
    //初始化
});

上一篇
Day 9 [JavaScript-2]
下一篇
Day11 [RWD & BootStrap]
系列文
網頁程式設計so easy30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言