ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學 線上教程 教學影片

2014-10-09

MIS2000Lab.的「HTML5 認證考試， 從零開始」#10 / #11 -- jQuery入門 (做得多，寫得少)

摘要:MIS2000Lab.的「HTML5 認證考試， 從零開始」#10 / #11 -- jQuery入門 (做得多，寫得少)





 

前兩篇文章完成了HTML的DOM -- MIS2000Lab.的「HTML5 認證考試，從零開始」#6~#9 -- CSS樣式、Box Model與HTML5 / JavaScript入門

 
 
本文內容，將會在2014年底，碁峰出版社推出的HTML5新書裡面
 
接下來要介紹jQuery......
 
 
jQuery是一個開放原始碼的JavaScript函式庫，而且具備「跨瀏覽器」的相容性，
對於擷取網頁中的DOM更為簡潔，而且具備AJAX功效可以存取Web Service。
 
威力強大卻簡單好用（輕量化），如同jQuery官方網站的標題「寫得少，做得多」。
 
Microsoft開發工具Visual Studio在ASP.NET網站與專案上，很早就支援jQuery的開發，
透過整合的開發畫面讓您撰寫jQuery更好上手。
 
您也可以上網搜尋「Visual Studio Express」就能下載免費版本，
 
開發網頁的朋友請下載for Web版。
 
 
 
==== 引用jQuery到我的網頁裡面 ====
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
</head>
 
<body>
    ...
</body>
</html>
註解：jQuery版本進步很快，上述的版本數1.8.0僅供參考。
 
 
您也可以從別人的網站引用這些jQuery檔案（.js檔），這種稱為CDN
 
一個常用的CDNs是Google網站--
 
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 
 
 
==== 使用jQuery函式 ====
 
jQuery函式庫最主要的特點就是「jQuery函式（function）」，
通常使用縮寫「$()符號」來代替，也可以寫成完整的jQuery()。
 
通常等到整個網頁（document）都成功載入之後，呼叫jQuery函式庫的功能才會運作，
 
您可以在下面的程式碼看見關鍵字「ready」。

 

 
 
下一個範例，
 
按下按鈕之後，網頁內的主題文字變成紅色。

<script type="text/javascript">
$(document).ready(function () {
   $("#Button1").click(function () {
        $("h2").css("color", "red");
});
// 註解：按下（.click）id=Button1的表單元件之後，會把網頁中<h2>標籤內的文字，透過CSS樣式改成紅色的字。
});
</script>

<h2>MIS2000 Lab.</h2>
<h2>簡單的 jQuery語法練習。</h2>

<input type="button" id="Button1" value="傳統HTML按鈕，改變標題的顏色" />

 

 
 
 
 
==== 使用jQuery選取元素與遊歷DOM ====
 
 
要抓取網頁裡面所有的<p>標籤，請寫成：
$(“p”)
 
 
如果要抓取ID名為 xyz的「所有」標籤（Tag），例如<div id=”xyz”>或是<li id=”xyz”>則請寫成：
$(“#xyz”)
//註解：JavaScript語法必須寫成document.getElementsById(“xyz”)才有相同效果。
 
 
想要抓取特定類別（Class）裡面的所有標籤，例如<div class=”RedFont”>或是 <p class=”RedFont”>請寫成：
$(“.RedFont”)
 
倘若要為<div>這個標籤動態加入class=”myCSS”則寫成：
$(“div”).addClass(“myCSS”)
 
表示我們要搜尋HTML網頁裡面，「所有」的<div>標籤（Tag），並為他們全數加上 myCSS的CSS樣式。

 

上述文章，已經發表在這本書裡面：

 

 

 

 

 

上一篇文章簡單介紹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)，可以傳回子集合的元素。如下圖。
 

 

Expression（運算式）可以是標籤名稱、選取器（selector）或是可以傳回布林（Boolean）值的function函式。
 
find(selectorString)，如同字面的意義，find，傳回子集合的元素。
 
first()與last()，傳回第一個、最後一個的元素。
 
next()與prev()傳回下一個與上一個元素。
 
size()，傳回元素的總數量（有幾個）。
 
 
slice(啟始index, 結束index) 如下圖。
 
 
.slice(2,4)表示從第三個（電腦從零算起）開始，至第五個結束，因此符合條件的是第三與第四個底色改變了。
 
重點！不包含最後一個！
 

 

==== 使用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的事件處理程序
 
 
 
......後續的內容，我有完整發表在網站上。  請參閱：

jQuery 入門 小學堂

 
本文內容，將會在2014年底，碁峰出版社推出的HTML5新書裡面

 
 
 
 
 
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
9789863475750

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

  • 出版商:碁峰
  • 出版日期：2015-04-09
  • 台幣定價:
    • $480
  • 售價:7.9 折 $379
  • 語言:繁體中文
  • 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

 
 

 

我將思想傳授他人， 他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學，遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學，遠距教學 (ASP.NET MVC 約 135hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我，不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程（Web Form + MVC）。 第一天課程， "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了！MIS2000Lab.主講   事先錄好的影片，並非上課側錄！   觀看時，有如「一對一」面對面講課。

 

 

 

贊助商連結

BloggerAds

本頁段落