今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

了解 jQuery基本语法

 随桌游精灵的CSS样式进行优化调整

了解HTML5  提供了两种在客户端存储数据的新方法

明天计划的事情：（一定要写非常细致的内容） 

 了解jQuery的

-   Attributes

-   Content and CSS Manipulations

-   DOM

-   Events

-   Effects

-   Animations

-   And more!

用JavaScript实现桌游精灵的页面逻辑功能

遇到的问题：（遇到什么困难，怎么解决的） 

收获：（通过今天的学习，学到了什么知识）

什么是jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler. (jQuery是一个快速，小巧，功能丰富的JavaScript库。 它使HTML文档遍历和操作，事件处理和动画更简单。 jQuery的所有功能都可以通过JavaScript进行访问，因此对JavaScript的理解，构建和调试代码至关重要。

• 将 HTML 页面的 id 为 start 的元素,并且改变它的 HTMl 内容为"Go"。 
• JavaScript:
  
  var el = document.getElementById("start");

  el.innerHTML = "Go";
•  jQuery:
  $("#start").html("Go");

使用jQuery 正如你所看到代码更简短,也更利于理解.

• Syntax(语法) jQuery 用于选择(查询)HTML元素并对其执行"动作"。

•  基本的语法是:$("selector").action()

• 1. $ 访问jQuery;
  2. (selector) 寻找HTML元素;
  3. 对元素执行action();

示例

• $(this).hide() - 隐藏当前元素
  
• $("p").hide() -     隐藏所有段落
  
• $(".test").hide() -     隐藏所有 class="test" 的所有元素
  
• $("#test").hide() -     隐藏所有 id="test" 的元素
  

常用的选择器:

• Selector	Sample	Description
  *	$("*")	all elements
  #id	$("#div")	all elements with id="div"
  .class	$(".div")	all elements with class="div"
  elements	$("p")	all <p> elements
  el1,el2,el3	$("h1,h2,h3")	all <h1>,<h2>,<h3> elements
  :first	$("h1:first")	first <h1> elements
  :last	$("h1:last")	last <h1> elements
  :first-child	$("li:first-child")	all <li>that are the first child of their parent
  :last-child	$("li:last-child")	all <li>that are the last child of their parent
  :nth-child(n)	$("li:nth-child(2)")	all <li>that are the 2nd child of their parent
  parent > child	$("div > p")	all <p>that are a direct child of a <div> element
  parent descendant	$("span p")	all <p>that are descendants of a <span> parent
  :eq(index)	$("ul li:eq(2)")	the third element in a list (index starts at 0)
  :content(text)	$(":contains('solo')")	all elements which contain the text 'solo'
  [attribute]	$("[src]")	all elements with a src attribute
  :input	$(":input")	all input elements
  :text	$(":text")	all input elements with type="text"

From  <https://www.xiuyetang.com/document_items_308_547.html#id547>

HTML5  提供了两种在客户端存储数据的新方法

‍‍1. ‍‍LocalStorage

localStorage是其中之一。localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

实例

创建和访问 localStorage:

<script>
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

From  <https://www.xiuyetang.com/document_items_241_338.html#id338>

‍‍2. ‍‍SessionStorage

sessionStorage是其中之一。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

实例

• 创建并访问一个  sessionStorage:

<script >
sessionStorage.lastname = "Smith";
document.write(sessionStorage.lastname);
</script >

• 对用户在当前       session 中访问页面的次数进行计数:

// 对用户在当前       session 中访问页面的次数进行计数:
< script >
if (sessionStorage.pagecount) {
    sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
}
else {
    sessionStorage.pagecount = 1;
}
document.write("Visits" + sessionStorage.pagecount + "time(s) this session.");
</script >

From  <https://www.xiuyetang.com/document_items_241_339.html#id339>