零HTML5筆記 | 選擇器 | 元素拖放

querySelector 選擇首次遇到的
querySelectorAll 選擇所有
classList : add remove toggle

var div = document.getElementById('div1')
console.log(typeof div.classList); //object
// alert(div.classList)  //box1 box2 box3
div.classList.add('box4')
div.classList.remove('box2')
div.classList.toggle('box4') // 有則刪，無則加

---

eval(): 可以解析任何字符串變成js

parse: 只能解析JSON形式的字符串變成JS 安全性高些

字符串[json形式]轉 -- > JS ; JSON.parse(str)

json轉--> 字符串 ；JSON.stringify(json)

//str是一個fun
var str = 'function show(){ alert(123) }'
eval(str);     //字符串轉成原生js
show()     //之後即可調用*/

//str是一個json
var str = '{"name":"elmok"}'   //'{name:"elmok"}' 這咱不行，一定要加引號
var json = JSON.parse(str)   // json =  {"name":"hello"}
console.log(json.name);      //hello

//json變字符串
var json = {name:"hello"}    //json變成字符串 會自動加上雙引號
var str = JSON.stringify(json)
console.log(str);

問題：克隆一個json a{}，並且改變不影響原json
先把a{}轉為字符串'a{}'，存在str = 'a{}'裏，再把str轉為json,存在新建變量b = {}，則改變b不影響a

var a = {name: 'hello'}
var str = JSON.stringify(a)
var b = JSON.parse(str)
b.name = 'hi'
console.log(a.name);

兼容 https://github.com/douglascrockford/JSON-js

---

自定義屬性，想要取得某個值，可使用dataset對象

<div id="div1" data-mm="BB" data-mm-bb="BBBB">div</div>

    var div = document.getElementById('div1')
    alert(div.dataset.mm)
    alert(div.dataset.mmBb) //多個駝峰寫法

---

延遲加載JS
defer : 延迟加载，会按顺序执行，在onload执行前被触发
async : 异步加载，加载完就触发，有顺序问题

<script src="a.js" defer="defer"></script> <!--onload執行之前執行-->
<script src="a.js" async="async"></script> <!--圖片與js同時加載-->

---

元素拖動<>

首先，被拖動元素自身定義：draggable="true"

draggable ：

设置为true，元素就可以拖拽了

拖拽元素事件 : 事件对象为被拖拽元素

dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间，连续触发
dragend , 拖拽结束触发

目标元素事件 : 事件对象为目标元素

dragenter , 进入目标元素触发，相当于mouseover
dragover ,进入目标、离开目标之间，连续触发
dragleave , 离开目标元素触发，相当于mouseout
drop , 在目标元素上释放鼠标触发

See the Pen JYYKeV by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

FF下必須設置dataTransfer对象才可能拖動（圖片以外）的元素

setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value
ev.dataTransfer.effectAllowed 設置光標樣式：copy link uninitialized..
ev.dataTransfer.setDragImage(img, 0, 0) 拖動的東西變為指定的對像，如一張圖片，0,0表示對象的座標XY

See the Pen bVVeyR by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

li[i].ondragstart = function (ev) { //g開始
  var ev = ev || event
  //   ev.dataTransfer.setData('name','hello') //ff bug
  ev.dataTransfer.setData('name', 'hello')
  ev.dataTransfer.effectAllowed = 'copy'; //光標樣式
  ev.dataTransfer.effectAllowed = 'link'; //光標樣式
  ev.dataTransfer.effectAllowed = 'uninitialized'; //光標樣式
  ev.dataTransfer.setDragImage(img, 0, 0) //拖的東西指定為div，即使變為div
}

小實例1：文件拖放上傳

See the Pen ojjYqE by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
小實例2：拖放購物車

See the Pen jbbVYO by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>