iT邦幫忙

DAY 11
5

上一篇文章 http://ithelp.ithome.com.tw/question/10158237

上一篇文章簡單介紹jQuery入門的語法
這篇文章要介紹進階一點點的應用(但不難,起放心)

除了上述的入門語法之外,

下面列出常用的作法:
 標籤(Tag Name)名稱。寫成$(“h2”)抓取網頁裡面的<h2>。
 元素ID(Element ID)。寫成$(“#logo”)抓取<h2 id=”logo”>。
 元素類別(Element class)名稱。寫成$(“.blue”)抓取<h2 class=”blue”>。
 元素內部的屬性(attritube)名稱。寫成$(“input[type=text]”)抓取網頁裡面的文字輸入方塊<input type=text>。
 抓取第一個<p>標籤,寫成$(“p:first”)。

each可以遊歷網頁所有的元素(標籤),下面的例子是修改所有<h2>的CSS樣式(把字體顏色改成紅色)。

<script type="text/javascript">
$(document).ready(function () {
$("h2").each(function () {
this.style.color = "red";
});
});
</script>

each(function),遊歷所有的元素並執行相關功能。

eq(index索引數),電腦從”零”算起,所以eq(9)代表第十個元素。

filter(expression),可以傳回子集合的元素。如下圖。

[img=415,324]http://ithelp.ithome.com.tw/upload/images/20141006/20141006104615543202779d898_resize_600.jpg[/img]

Expression(運算式)可以是標籤名稱、選取器(selector)或是可以傳回布林(Boolean)值的function函式。

find(selectorString),如同字面的意義,find,傳回子集合的元素。

first()與last(),傳回第一個、最後一個的元素。

next()與prev()傳回下一個與上一個元素。

size(),傳回元素的總數量(有幾個)。

slice(啟始index, 結束index) 如下圖。

.slice(2,4)表示從第三個(電腦從零算起)開始,至第五個結束,因此符合條件的是第三與第四個底色改變了。

重點!不包含最後一個!

[img=415,252]http://ithelp.ithome.com.tw/upload/images/20141006/2014100610464054320290dcd03_resize_600.jpg[/img]

==== 使用jQuery新增、移除與修改元素 ====

jQuery使用selector(選取器)的功能來決定哪個元素(HTML標籤)需要改變,常見的用法如下:

addClass(輸入class名稱),增加一個CSS樣式的類別(class),例如把原本的<p>改造為<p class=”hello”>

append(請輸入HTML字串),在原本的元素底下加入一段HTML。

detach(),刪除DOM裡面所有的元素。

html(),抓取元素的HTML內容。倘若網頁中有多個<h1>,那麼只抓取第一個<h1>的內容。

html(請輸入HTML字串),設定元素的內容(取代原本的)。

val()取得、或是修改表單的value值(寫法val(修改後的文字)),作法類似上面的html()

replaceWith(請輸入HTML字串),取代元素的內容。

attr(),修改HTML元素的屬性(attritube)。

==== 使用jQuery控制事件 ====

jQuery可以新增或移除瀏覽器裡面的JavaScript的事件處理程序

$("#submit").bind("click", function() {
// 當id=submit的按鈕被按下去(click)就會執行的程式碼。
});

或是寫成這樣:
$("#submit").click(
       function () {
       })

您可以在 jQuery官方網站找到更多資訊 http://api.jquery.com/category/events/

每一個屬性、方法,我都盡量寫一個範例讓大家看

這樣比較容易體會

但這麼多的範例、執行成果(圖片),我實在沒法一張一張PO上網(太累了)

真的很抱歉。

我的網站有一篇文章更詳盡的介紹了本文相關的範圍

請看:jQuery小學堂 http://www.dotblogs.com.tw/mis2000lab/archive/2014/03/17/introduction_jquery_20140317.aspx

不要走開,馬上回來。

下一篇文章:HTML5與輸入驗證

http://ithelp.ithome.com.tw/question/10158551

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#10--寫得少,做得多。jQuery簡介(I)
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#12--HTML5輸入驗證,(新)表單元件
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言