iT邦幫忙

2

[鼠年全馬鐵人挑戰] Week 4-網頁排版筆記: jQuery 超入門筆記

Dy.H 2020-03-09 13:04:551176 瀏覽
  • 分享至 

  • xImage
  •  

既上一篇文章後而有的第 4 篇筆記學習文章,這樣的記錄學習方式,一方面可以回朔一下記憶(腦容量不夠 ><)。一方面在學習更多更深的技術時,可以看看當初學習的筆記,也可以拿來笑笑自已的文筆和理解力。


jQuery 超超級入門筆記

之前在工作上有時會套用別人寫好的 jQuery 套件,我也只會把我所要的 class 或是 id 改改。可以有效果了(動)就開心得不得了。但卻不清楚到底固中原理是什麼。直到真正的學習 jQuery 才清楚到,原來是這麼一回事。(jQuery 好好玩)。

我先用我善長的 CSS 來做例子

CSS 選擇器:

.head h1{ display: block;}

jQuery:

jQuery 像是指定 Class 的方式。

$(‘.head h1’).show();  //指定選擇器,要 jQuery 做什麼事。

忘了前面最重要的一點!
一定要先確保網頁已戴入 HTML, jQuery 才會開始做我們要他做的事件。

$(document).ready(function(event){
	$(‘.head h1’).show();  //show();事件可以有很多種,jQuery 字典
});

上面程式理解後的,註解說明:
//選擇器 + 事件 ->讓網頁具有互動性(事件: EFFECTS> )
//像是動態增加 style 樣式
//像是 css 選擇器指定樣式。

而css選擇器又是什麼呢?

CSS選擇器是 CSS 規則的一部分。它能讓你選定要調整哪個(或哪些)元素的樣式。

後記補充:
“”,’’ 是指定選擇器才需要$(‘document’) 我常錯的失誤(哭啊)。
補上jQuery字典 連結

老師每次講完課後,我都覺得頭頭是道,沒錯沒錯我也要奮勇向上。但,為什麼每次寫完都沒有動作?自我檢查,原來又是我的失誤,所以也把這個標記上來,以防萬一自已又犯錯。
HTML標籤選選
$(‘h1’).show();
Class選選
$(‘.h1’).show();
ID選選
$(‘#h1’).show();


最後最後,放上簡單的 Click 語法:

$(document).ready(function (event) {
    $(".button").click(function(){
        $("h1").hide();
    });
});

理解後的說明:
在這個條件下,要做的事。
1.確保網頁已戴入 HTML
2.讀取".button"條件後,處理
3.指定事件
小小比喻:
經過審慎思考後,確認未來目標樣子(工程師,設計師,...師),首要條件初級門檻需要不斷的努力(不斷的拿寶物),才能事件晉級到資深工程師(才能有更大的寶物)。我的比喻有點嚴肅了><

以上是初級學習生在 jQuery 領域中所學習及理解的。若有不對之處,還請各位大大給我建議。我會虛心學習。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言