Chapter 10 jQuery and Events

10.1 教材

• 網頁程式設計基礎: https://courses.openedu.tw/courses/course-v1:plus+TK+19014/pdfbook/2/

10.2 學習主題

• Rhmtl

• jQuery

• Events

• Events and JSON

10.3 主題內容

10.3.1 Rhmtl應用

建立bootstrap模版

• https://getbootstrap.com/

• 有navbar, 3 columns, middle column has three div’s with id from myOutput1 to myOutput3.

  • https://github.com/tpemartin/uiux-inclass-practice/blob/29bbe6a4f5d025532c468f05b3380436a850580f/05-29.Rhtml

10.3.2 jQuery

• https://courses.openedu.tw/courses/course-v1:plus+TK+19014/pdfbook/2/

Chrome developer tools:

• elements > (select element) > (right click mouse) > Copy > Copy Selector

var el=$(paste_from_your_clip_board)

• 檢視你可以對el做的method, 在Console window,

> el.{{等待pop up}}

要暫時性的檢視一個element, 也可以在elements > (select element) > (點左側...) > store as global variable, 它會創造一個臨時性的global variable代表此element。

使用jQuery script要注意：

• script要在jQuery loading之後。

• script要在document ready後。

• 若要在console檢視，物件必需宣告成global.

<script>
var el; // 宣告el為global variable
$(document).ready(function(){
  el=$("body > div > div > div:nth-child(3) > p:nth-child(1)"); // initiate value
  console.log( "ready!" );
})
</script>

• https://github.com/tpemartin/uiux-inclass-practice/blob/c8fa1014f194bde6e11c7f8872f66a9d18518110/05-29.Rhtml

• 增加一個show ### Events

• Events: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Chrome developer tools

• elements > (select an element)

  • Underneath Event Listeners, check “ONLY” Framework listeners

Bootstraps不同form elements

• dropdown: https://getbootstrap.com/docs/4.5/components/dropdowns/

  • dropdown menu with three options: A, B, C.

  • In your global scope, create an object called userChoice. It saves the option choice of the user.

• forms: https://getbootstrap.com/docs/4.5/components/forms/

• input group: https://getbootstrap.com/docs/4.5/components/input-group/

• https://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery

Events and JSON

• Formulate your form input as a JSON

• Retrieve request data from your form input

10.4 課後練習