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格式的笔记
posted @ 2020-05-26 23:28  lanshanxiao  阅读(76)  评论(0编辑  收藏