jQuery
Let's control our webpage!
Presentor: Flower, YoYo
Date: 2016/12/1, 2016/12/15
Link: https://goo.gl/7zntkd
What would we do today?
Notes
更厲害的！
Remember JS?
大家應該都忘了吧Q
來幫大家複習個：
http://slides.com/jerryshey/javascript
However...
該怎麼讓網頁上的東西(element)動起來呢?
1. 先選取那個element，也可以是一個group
2. 想對它做什麼事
>///<
Some example
If we write in vanilla.js
(也就是沒有使用任何套件、框架、函式庫的js)
1. select by tag (multiple)
document.getElementsByTagName("p")
3. select by id (single)
document.getElementById("super")
2. select by class (multiple)
document.getElementsByClassName("super")
QAQ
The only powerful I found
1. select by selector (single)
document.querySelector('<selector>')
2. select by selector (multiple)
document.querySelectorAll('<selector>')
Still too long to memorize
We DO need a candy
jQuery
What is jQuery?
A JavaScript Library, it simplifies the mentioned queries.
Furthermore, it extends some basic function of JavaScript.
Hands On
啊！ selector 都忘了
Usage
$('<selector>')
1. select an element
Usage
$('<selector>').methodName();
2. After selecting an element, you'll need to deal with it.
What action we would like to do?
add, update, delete, traversal
Add
$('<parent_selector>').append(<child_element>);
$('<child_element>').appendTo(<parent_selector>);
Child is added to the parent
Parent adds child
Update
$('<input_selector>').val(<value>);
$('<selector>').html(<everything>);
$('<selector>').text('<plain_text>');
Only for tag <input>, <textarea>, and so on.
The common usage
Delete
$('<selector>').remove();
It's easy, just call
Traversal
$('<parent_selector>').find('<child_selector>');
$('<parent_selector>').children('<child_selector>');
$('<child_selector>').parent('<parent_selector>');
$('<child_selector>').parents('<parent_selector>');
$('<selector>').siblings('<brother_selector>');
Find children
Find parents
Find siblings
How to include JQuery?
// 給個範例？
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>Let's go!
Part II
Demo
Simple Notelist
HTML Skeleton
<div id="main">
<div class="form">
<div class="field">
<input type="text" name="work" id="input-note" placeholder="Please enter something..."/>
<button class="btn-add">Submit</button>
</div>
</div>
<div id="note-list"></div>
</div>
<div class="item" id="list-template">
<span class="text"></span>
<span class="action">
<button class="btn-edit">edit</button>
<button class="btn-delete">delete</button>
</span>
</div>CSS Style
body {
background: #ccc;
}
#main {
width: 400px;
}
#list-template {
display: none;
}
.form .field {
display: flex;
width: 100%;
}
.form .field input {
display: flex;
width: 100%;
}
.item {
position: relative;
margin-bottom: 4px;
min-height: 24px;
max-height: 24px;
}
.item .text {
position: absolute;
height: 40px;
line-height: 40px;
top: 0;
left: 0;
bottom: 0;
padding: 0 5px;
}
.item .action {
position: absolute;
top: 5px;
right: 0;
bottom: 0;
}JS Step0 - 'Ready'
$(document).ready(function() {
/*
When code here start to execute, it indicates that every DOM element is ready.
That is, you can manipulate them safely.
Therefore, you should write down your code here this time and almost time.
Such as clicking-event of buttons, manipulating elements,
activating plugins and so on.
*/
});Code inside this block will not run until every DOM(element) has ready.
文件物件模型（Document Object Model, DOM）是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。
JS Step1 - Append a new note
// After clicking the form, it should submit.
function submit() {
// get the value of input
var note = $("#input-note").val();
if (note === '') {
alert("Please type something...");
return;
}
// append a new note
appendNote(note);
// clear the input
clearInput();
}JS Step1 - Append a new note
// 1. Append note
function appendNote(note) {
// The parameter "note" represents the text of new note.
console.log("new note: ", note);
// new note: '這是即將被新增的note'
// next part
}JS Step1 - Append a new note
// 1. Append note
function appendNote(note) {
// First, since we've already have a template, we can just clone it and use it without rewriting;
// however, don't forget that the attribute "id" should be unique.
var newNote = $("#note-template").clone().removeAttr("id");
// Second, find the 'text' part and modify it
newNote.find(".text").text(note);
}JS Step1 - Append a new note
// A basic function with name (具名函數)
function sayHi() {
return "Hi";
}
sayHi();
// Basic function definition// A anonymous function (匿名函數)
var sayHi = function() {
return "Hi";
}
$("#btn").click(sayHi);
// One common use for anonymous functions is as arguments to other function.JS Step1 - Append a new note
function appendNote(note) {
var newNote = $("#note-template").clone().removeAttr("id");
newNote.find(".text").text(note);
// Third, bind the click event to both buttons.
// The keyword 'this' indicates the element which triggers the function.
newNote.find(".action .btn-edit").click(function() {
console.log("this: ", this);
modifyNote(this);
});
newNote.find(".action .btn-delete").click(function() {
deleteNote(this);
});
}JS Step1 - Append a new note
// 1. Append note
function appendNote(note) {
var newNote = $("#note-template").clone().removeAttr("id");
newNote.find(".text").text(note);
newNote.find(".action .btn-edit").click(function() {
console.log("this: ", this);
modifyNote(this);
});
newNote.find(".action .btn-delete").click(function() {
deleteNote(this);
});
// Finally, we could append the new note to the list ^_^.
newNote.appendTo("#note-list");
}JS Manipulation-2
// modify a note
function modifyNote(target) {
// target is from the 'this' of click callback
// Show a popup and ask you to enter something.
var new_note_text = prompt();
// If there is text, assign it to the note text.
if (new_note_text) {
$(target).parents(".item").find(".text").text();
}
}
// delete a note
function deleteNote(target) {
$(target).parents(".item").remove();
}JS Manipulation-3
// Bind the click event to addButton
$(".btn-add").click(function() {
submit();
});
// Bind the keypress event to input
$("#input-note").keypress(function(e) {
var keycode = e.which;
// 13 === enter
if (keycode == 13) {
submit();
}
})UI framework
UI framework
RWD-support UI framework
RWD: Responsive Web Design 響應式設計
UI Framework:
AWD: Adaptive Web Design 適應式設計
套用制式的排版、網格、元件、樣式，以幫助開發者快速構築畫面
Grid System
A modern web layout solution
Split page into grid blocks in rows.
Then you may deal with your layout without mess pain.
Breakpoints
Bootstrap
Semantic
A better CSS layout
Magic!
Demo
Link:note list demo (with Semantic UI)
HTML Skeleton
<div class="ui stackable grid container">
<div class="ui four wide column"></div>
<div class="ui eight wide column">
<div class="ui segments">
<!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
<div class="ui segment form">
<div class="field">
<label for="work"></label>
<div class="ui action input">
<input type="text" name="work" id="input-note" placeholder="Please enter something..."/>
<div type="submit" class="ui teal submit button btn-submit">Submit</div>
</div>
</div>
</div>
<div class="ui segment">
<div id="note-list"></div>
</div>
<!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
</div>
</div>
<div class="ui four wide column"></div>
</div>
<div class="item" id="note-template">
<div class="text">123</div>
<div class="action">
<div class="ui circular blue icon button btn-edit">
<i class="write icon"></i>
</div>
<div class="ui circular red icon button btn-delete">
<i class="remove icon"></i>
</div>
</div>
</div>
CSS Style
html, body {
height: 100%;
}
body {
background: linear-gradient(to left, #348F50 , #56B4D3);
/* use flex to align it */
}
#note-template {
display: none;
opacity: 0;
}
#note-list .item {
/* use flex to align it */
position: relative;
margin-bottom: 4px;
height: 40px;
border: 1px dashed #ddd;
opacity: 1;
animation: fadeIn .65s;
-webkit-animation: fadeIn .65s;
}
.item .text {
height: 40px;
line-height: 40px;
padding: 0 10px;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Thanks
jQuery
By Hao-You Hung
jQuery
by / Flower, YoYo | NCHUIT
