用truffle寫測試用例
JQuery學習
什麼是JQuery
jQuery是JavaScript世界中使用最廣泛的一個庫。
jQuery解決了一些很重要的問題。實際上，jQuery能幫我們幹這些事情：
消除瀏覽器差異：你不需要自己寫冗長的程式碼來針對不同的瀏覽器來繫結事件，編寫AJAX等程式碼；
簡潔的操作DOM的方法：寫 $(’#test’) 肯定比document.getElementById(‘test’) 來得簡潔；
輕鬆實現動畫、修改CSS等各種操作。
jQuery的理念“Write Less, Do More“，讓你寫更少的程式碼，完成更多的工作！
官網：https://jquery.com/
文件：https://jquery.cuishifeng.cn/
jQuery只是一個 jquery-xxx.js 檔案，但你會看到有compressed（已壓縮）和uncompressed（未壓縮）兩種版本，使用時完全一樣，但如果你想深入研究jQuery原始碼，那就用uncompressed版本。
使用jQuery只需要在頁面的 head 引入jQuery檔案即可：
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
公式： $(selector).action()
美元符號定義 jQuery
選擇符（selector）“查詢"和"查詢” HTML 元素
選擇器
選擇器是jQuery的核心。
jQuery的選擇器就是幫助我們快速定位到一個或多個DOM節點。
按ID查詢
如果某個DOM節點有 id 屬性，利用jQuery查詢如下：
// 查詢<div id="abc">:
var div = $('#abc');
按tag查詢
按tag查詢只需要寫上tag名稱就可以了：
var ps = $('p'); // 返回所有<p>節點
ps.length; // 數一數頁面有多少個<p>節點
按class查詢
按class查詢注意在class名稱前加一個 . ：
var a = $('.red'); // 所有節點包含`class="red"`都將返回 // 例如: // <div class="red">abc</div> // <p class="green red">abc</p>
按屬性查詢
一個DOM節點除了 id 和 class 外還可以有很多屬性，很多時候按屬性查詢會非常方便，比如在一個表單中按屬性來查詢：
var email = $('[name=email]'); // 找出<??? name="email">
var passwordInput = $('[type=password]'); // 找出<??? type="password">
var a = $('[items="A B"]'); // 找出<??? items="A B">
當屬性的值包含空格等特殊字元時，需要用雙引號括起來。
按屬性查詢還可以使用字首查詢或者字尾查詢：
var icons = $('[name^=icon]'); // 找出所有name屬性值以icon開頭的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name屬性值以with結尾的DOM
// 例如: name="startswith", name="endswith"
操作DOM
修改Text和HTML
jQuery物件的 text() 和 html() 方法分別獲取節點的文字和原始HTML文字。
分別獲取文字和HTML：
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'
如何設定文字或HTML？jQuery的API設計非常巧妙：無引數呼叫 text() 是獲取文字，傳入引數就變成設定文字，HTML也是類似操作。
var j1 = $('#test-ul li.js');
var j2 = $('#test-ul li[name=book]');
j1.html('<span style="color: red">JavaScript</span>');
j2.text('JavaScript & ECMAScript');
一個jQuery物件可以包含0個或任意個DOM物件，它的方法實際上會作用在對應的每個DOM節點上。
$('#test-ul li').text('JS');
修改CSS
jQuery物件有“批量操作”的特點，這用於修改CSS實在是太方便了。要高亮顯示動態語言，呼叫jQuery物件的 css(‘name’, ‘value’) 方法，我們用一行語句實現：
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color','red');
注意，jQuery物件的所有方法都返回一個jQuery物件（可能是新的也可能是自身），這樣我們可以進行鏈式呼叫，非常方便。
jQuery物件的 css() 方法可以這麼用：
var div = $('#test-div');
div.css('color'); // '#000033', 獲取CSS屬性
div.css('color', '#336699'); // 設定CSS屬性
div.css('color', ''); // 清除CSS屬性
css() 方法將作用於DOM節點的 style 屬性，具有最高優先順序。如果要修改 class 屬性，可以用jQuery提供的下列方法：
var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 新增highlight這個class
div.removeClass('highlight'); // 刪除highlight這個class
顯示和隱藏DOM
要隱藏一個DOM，我們可以設定CSS的 display 屬性為 none ，利用 css() 方法就可以實現。
不過，要顯示這個DOM就需要恢復原有的 display 屬性，這就得先記下來原有的 display 屬性到底是 block 還是 inline 還是別的值。
考慮到顯示和隱藏DOM元素使用非常普遍，jQuery直接提供 show() 和 hide() 方法，我們不用關心它是如何修改 display 屬性的，總之它能正常工作：
var a = $('a[target=_blank]');
a.hide(); // 隱藏
a.show(); // 顯示
注意，隱藏DOM節點並未改變DOM樹的結構，它隻影響DOM節點的顯示。這和刪除DOM節點是不同的。
獲取DOM資訊
利用jQuery物件的若干方法，我們直接可以獲取DOM的高寬等資訊，而無需針對不同瀏覽器編寫特定程式碼：
// 瀏覽器可視視窗大小:
$(window).width(); // 800
$(window).height(); // 600
// HTML文件大小:
$(document).width(); // 800
$(document).height(); // 3500
// 某個div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 設定CSS屬性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 設定CSS屬性 height: 200px，是否生效要看CSS是否有效
attr() 和 removeAttr() 方法用於操作DOM節點的屬性：
// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 屬性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name屬性變為'Hello'
div.removeAttr('name'); // 刪除name屬性
div.attr('name'); // undefined
操作表單
對於表單元素，jQuery物件統一提供 val() 方法獲取和設定對應的 value 屬性：
/*
<input id="test-input" name="email" value="">
<select id="test-select" name="city">
<option value="BJ" selected>Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<textarea id="test-textarea">Hello</textarea>
*/
<script>
var
input = $('#test-input'),
select = $('#test-select'),
textarea = $('#test-textarea');
input.val(); // 'test'
input.val('[email protected]'); // 文字框的內容已變為[email protected]
select.val(); // 'BJ'
select.val('SH'); // 選擇框已變為Shanghai
textarea.val(); // 'Hello'
textarea.val('Hi'); // 文字區域已更新為'Hi'
</script>
可見，一個 val() 就統一了各種輸入框的取值和賦值的問題。
新增DOM
要新增新的DOM節點，除了通過jQuery的 html() 這種暴力方法外，還可以用 append() 方法。
如何向列表新增一個語言？首先要拿到 ul 節點：
var ul = $('#test-div>ul');
然後，呼叫 append() 傳入HTML片段
ul.append('<li><span>1LDK</span></li>');
ul.prepend('<li><span>1LDK</span></li>');
append() 把DOM新增到最後， prepend() 則把DOM新增到最前。
如果要把新節點插入到指定位置，例如，JavaScript和Python之間，那麼，可以先定位到JavaScript，然後用 after() 方法：
var js = $('#test-div>ul>li:first-child');
js.before('<li><span>1LDK</span></li>');
js.after('<li><span>1LDK</span></li>');
也就是說，同級節點可以用 after() 或者 before() 方法。
刪除節點
要刪除DOM節點，拿到jQuery物件後直接呼叫 remove() 方法就可以了。如果jQuery物件包含若干DOM節點，實際上可以一次刪除多個DOM節點：
var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被刪除
事件
jQuery能夠繫結的事件主要包括：
滑鼠事件
click: 滑鼠單擊時觸發；
dblclick：滑鼠雙擊時觸發；
mouseenter：滑鼠進入時觸發；
mouseleave：滑鼠移出時觸發；
mousemove：滑鼠在DOM內部移動時觸發；
hover：滑鼠進入和退出時觸發兩個函式，相當於mouseenter加上mouseleave。
鍵盤事件
鍵盤事件僅作用在當前焦點的DOM上。
keydown：鍵盤按下時觸發；
keyup：鍵盤松開時觸發；
keypress：按一次鍵後觸發。
其他事件
focus：當DOM獲得焦點時觸發；
blur：當DOM失去焦點時觸發；
change：當元素的值發生改變時，會發生 change 事件。
submit：當提交表單時，會發生 submit 事件。
ready：當頁面被載入並且DOM樹完成初始化後觸發。
初始化事件
我們自己的初始化程式碼必須放到 document 物件的 ready 事件中，保證DOM已完成初始化：
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm').on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
相關程式碼會在DOM樹初始化後再執行。
由於 ready 事件使用非常普遍，所以可以這樣簡化：
$(document).ready(function () {
// on('submit', function)也可以簡化:
$('#testForm').submit(function () {
alert('submit!');
});
});
甚至還可以再簡化為：
$(function () {
// init...
});
事件引數
有些事件，如 mousemove 和 keypress ，我們需要獲取滑鼠位置和按鍵的值，否則監聽這些事件就沒什麼意義了。所有事件都會傳入 Event 物件作為引數，可以從 Event 物件上獲取到更多的資訊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#testMouseMoveDiv {
width: 300px;
height: 300px;
border: 1px solid chocolate;
}
</style>
</head>
<body>
mousemove: <span id="testMouseMoveSpan"></span>
<div id="testMouseMoveDiv">
在此區域移動滑鼠試試
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' +
e.pageY);
});
});
</script>
</body>
</html>