HTML/CSS/jQuery学习笔记

1： HTML5画布 必须先创建Canvas才能使用javascript绘制图形，所以javascript必须在canvas之后。

---

2： HTML5拖放 主要分为“被拖动元素”和“位置元素”。“被拖动元素”需要将draggable属性设置为true,同时设置ondragstart属性，该属性调用某一函数，该函数实现dataTransfer.setData()方法，该方法设置数据类型和值，如
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
”位置元素“中设置ondragover属性，该属性调用的函数实现event.preventDefault() 方法，使该元素可以放置别的元素。同时需要设置ondrop属性，当放置被拖元素时会发生drop事件，该事件所调用的函数中需要实现：preventDefault()方法、dataTransfer.getData(“Text”)(获得setData()中同类型的数据)、appendChild()方法。如：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
注意：因为所调用的方法中用到了id所以”被拖动元素“和“位置元素“必须设置id。

---

3： HTML布局 不使用float属性时div块默认按顺序从上往下排列，当某一元素使用float时会先判断前一个元素状态，如果前一个元素设置了float则本元素与上一元素水平排列（水平方向没有空间就另起一行）否则垂直排列。元素设置clear属性之对自己有效，即：如果本元素浮动时左边有元素，若设置clear:left,则本元素会另起一行。详细内容可以参考大神的分析

---

4：两个div嵌套 当外部div没有设置border时，内部div设置margin属性会出问题，如图：

在内部增加float属性可以正常显示：

或者在外部div上border属性设置为可显示的样式。
分析：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距会发生外边距合并。

---

5： CSS图片透明 设置图片半透明，当鼠标悬停图上，图片不透明。在此例中设置opacity属性时，两个opacity必须设置为“内部样式表”或者“外部样式表”不能设置到“内联样式”中。
分析：当样式仅需要在一个元素上应用一次时，不使用“内联样式”。

---

6：行内元素居中：text-align:center; 块元素居中：margin:auto;

---

7： jQuery中选择器 $("#two #three")中间有空格是一个派生选择器表示two类元素中的three元素。$("#two#three")没有空格表示同时包含两个类的元素，如class="two three"或者class="one tow three"。$(".two .three")中间有空格也是一个派生选择器，含义类似于上面的类的规则，而$(".two.three")是不存在的，因为 ID 属性不允许有以空格分隔的词列表所以ID 选择器不能结合使用。

---

8： jQuery AJAX load() 方法的使用，在自己电脑上运行网站提供的例子发现没有得到应有的结果，无法实现网页的局部更新。
经过测试：

• 360浏览器、IE浏览器、chrome均不能成功运行；
• firefox、Microsoft Edge（Win10自带浏览器）可以成功运行。