2.属性篇(新增的一些属性）
# 2.属性篇
- 1. placeholder --实际应用中可用
用于input的提示信息
```html
<input type="text" placeholder="手机/邮箱/用户名">
```
- 2. Calendar, date, time, email, color, range, url, search --实际应用中一般不使用，兼容性有问题
```html
<form>
<!-- Calendar -->
<input type="date"> <!-- chrome支持,Safari不支持,IE不支持 -->
<input type="time"><!-- chrome支持,Safari不支持,IE不支持 -->
<input type="week"><!-- chrome支持,Safari不支持,IE不支持 -->
<input type="datetime-local"><!-- chrome支持,Safari不支持,IE不支持 -->
<input type="number"> <!--限制输入为数字chrome支持,Safari不支持,IE不支持-->
<input type="email"><!-- chrome,Firefox支持,Safari不支持,IE不支持 -->
<input type="color"><!-- chrome支持,Safari不支持,IE不支持 -->
<input type="range" min="1" max="100" name="range"><!-- chrome支持,Safari支持,firefox不支持,IE不支持 -->
<input type="search" name="search"><!-- chrome支持,Safari支持一点,IE不支持 -->
<input type="url"><!-- chrome支持,firefox支持,Safari不支持,IE不支持 -->
<input type="submit">
</form>
```
- 3. contenteditable --实际应用中可用
对元素中的文本节点可以编辑
属性可以继承，父元素有此属性，子元素没有，子元素继承父元素此属性
```html
<div contenteditable="true">
hello<br>
<span>world</span>
</div><!--没有兼容性问题，这个属性是可以使用的-->
```
- 4. draggable --实际应用中一般不使用，兼容性有问题
使元素可拖拽
拖拽的生命周期：
拖拽开始，拖拽进行中，拖拽结束
拖拽的组成：
被拖拽的物体，目标区域（目标元素）
被拖拽元素的事件：
ondragstart:拖拽开始事件,按下物体的一瞬间是不会触发拖拽开始事件的
ondrag:拖拽进行事件
ondragend:拖拽结束事件
通过开始事件中e.clientX和结束事件中e.clientX可以计算出元素横移的距离
拖拽目标元素的事件：
ondragenter:被拖拽元素上的鼠标进入目标区域才触发的，不是被拖拽元素图形进入目标元素就触发的。
ondragover:被拖拽元素上的鼠标进入目标区域会不停的触发。
ondragleave:被拖拽元素上的鼠标离开目标区域触发。
ondrop:被拖拽元素上的鼠标在目标区域松开触发。只有在ondragover中阻止默认事件e.preventDefault()，才会触发ondrop事件
所有的标签元素，当拖拽周期结束时，默认事件是回到原处
事件是由行为触发的，但是一个行为可以不止触发一个事件
```html
<style>
.test{
width:100px;
height:100px;
background:#f0f;
position:absolute;
left:0;
top:0;
}
.target{
width:200px;
height:200px;
border:1px solid black;
position:absolute;
left:600px;
top:200px;
}
</style>
<div class="test" draggable="true"></div><!--chrome,safari支持,firefox不支持-->
<div class="target"></div>
<script>
var oDragDiv = document.getElementsByClassName("a")[0];
oDragDiv.ondragstart = function(e){
console.log(e);
}
oDragDiv.ondrag = function(e){
console.log(e);
}
oDragDiv.ondragend = function(e){
console.log(e);
}
</script>
<script>
//实现拖拽功能
var oDragDiv = document.getElementsByClassName("a")[0];
var beginX = 0,
beginY = 0;
oDragDiv.ondragstart = function(e){
beginX = e.clientX;
beginY = e.clientY;
}
oDragDiv.ondragend = function(e){
var x = e.clientX - beginX;
var y = e.clientY - beginY;
oDragDiv.style.left = oDragDiv.offsetLeft + x + "px";
oDragDiv.style.top = oDragDiv.offsetTop + y + "px";
}
</script>
<script>
//拖拽到目标区域
var oDragDiv = document.getElementsByClassName("a")[0];
oDragDiv.ondragstart = function(e){
}
oDragDiv.ondragend = function(e){
}
var oDragTarget = document.getElementsByClassName("target")[0];
oDragTarget.ondragenter = function(e){
}
oDragTarget.ondragover = function(e){
e.preventDefault();
}
oDragTarget.ondragleave = function(e){
}
oDragTarget.ondrop = function(e){
console.log("drop");
}
</script>
<!--默认可拖拽标签 -->
<a href="http://www.baidu.com">baidu</a>
<img src="1.jpg">
```
- 5. e.dataTransfer.effectAllowed 和 e.dataTransfer.dropEffect --实际应用中一般不使用，兼容性有问题
e.dataTransfer.effectAllowed:写在ondragstart事件中，用来改变鼠标样式
e.dataTransfer.dropEffect:写在ondrop事件中，用来改变鼠标样式
```html
<style>
.test{
width:100px;
height:100px;
background:#f0f;
position:absolute;
left:0;
top:0;
}
.target{
width:200px;
height:200px;
border:1px solid black;
position:absolute;
left:600px;
top:200px;
}
</style>
<div class="test" draggable="true"></div><!--chrome,safari支持,firefox不支持-->
<div class="target"></div>
<script>
//拖拽到目标区域
var oDragDiv = document.getElementsByClassName("a")[0];
oDragDiv.ondragstart = function(e){
e.dataTransfer.effectAllowed = "link";
}
var oDragTarget = document.getElementsByClassName("target")[0];
oDragTarget.ondrop = function(e){
e.dataTransfer.dropEffect = "link";
}
</script>
```
以上是markdown格式的笔记
