<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="11" placeholder="haoa" value="nihao">
<ul>
<!--//允许用户可以在先编辑，是一个布尔值的属性 可以被指定为true和false-->
<li contenteditable="true">测试</li>
</ul>
<!--contextmenu 定义div元素的上下文菜单 只有在firfox中有效-->
<div oncontextmenu="mymenu">上下文菜单
<menu>
<menuitem label="微信分享1"></menuitem>
<menuitem label="微博分享"></menuitem>
</menu>`
</div>
<!-- data- * 属性 可以自定义用户数据 有利于js脚本中判断每个李彪项目包含的信息类型 -->
<ul>
<li data-animaml = "bird">猫头鹰</li>
<li data-animaml = "fish">鲤鱼</li>
<li data-animaml = "animal">长颈鹿</li>
<li data-animaml = "tiger">老虎</li>
</ul>
<div id = "user" data-uid = "12345" data-uname = "愚人码头" style="width: 200px" > </div>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*使用js的方式去访问自定义的属性*/
var lists= document.getElementsByTagName("li");
for(var key in lists){
console.log(lists[key].dataset.animaml);
}
for(var i = 0 ;i<lists.length;i++){
console.log(lists[i].dataset.animaml);
}
/*使用jquery的范式去访问属性*/
var $li = $("li").data("animaml");
console.log($li);
$(".box").data("blah");
$(".box").data("blah", "hello");
$(".box").data("blah");
// 使用getAttribute获取 data- 属性
/*这种取得元素属性是js的 这个浏览器都是支持的 */
var userid = document.getElementById("user");
var ni = userid.getAttribute("data-uid");
/*当html中定了data-属性的时候 因为这种属性不会影响HTML的布局 这样取值的应该如下
hrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实*/
var usrdata = document.getElementById("user");
console.log(usrdata.id); //user
console.log(usrdata.dataset.uid); //12345
console.log(usrdata.dataset.uname); //愚人码头
usrdata.dataset.dateOfBirth = "nihao";
console.log(usrdata.dataset.dateOfBirth); // ''
/*关于data-属性选择器*/
document.querySelectorAll ( '[data-flowering]' ) ;
// 选择所有包含 'data-text-colour' 属性值为red的元素
document.querySelectorAll ( '[data-text-colour="red"]' ) ;
</script>
<!--draggable 定义属性是否可以被拖动 true可以拖动 false不可以拖动 auto使用浏览器默认的行为 除了ie8以下 其他都是支持 -->
</body>
</html>