HTML5之新特性（选择器、class列表属性、JSON新方法、data自定义数据、延迟加载JS）

最新推荐文章于 2022-12-06 15:27:35 发布
最新推荐文章于 2022-12-06 15:27:35 发布
阅读量1.5k 收藏 4
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013267266/article/details/51383064
版权

HTML5之新特性

 

l  HTML5新特性的浏览器支持情况

•     http://www.caniuse.com/#index

•      

l  新的选择器

•     querySelector   获取一个或一组中第一个元素

 

<script>

 

//document.getElementById();

//document.getElementsByTagName();

 

//$('#div1')   $('.box')  $('ul li')

 

window.onload = function(){

     

      //varoDiv = document.querySelector('[title=hello]');

     

      varoDiv = document.querySelector('.box'); //只能选择一组中的第一个元素

     

      //alert(oDiv.length );

     

      oDiv.style.background  = 'red';

     

     

};

 

</script>

</head>

 

<body>

<div id="div1"class="box" title="hello">div</div>

<divclass="box">div2</div>

</body>

 

•     querySelectorAll     获取一组元素

（与jquery的方式差不多）

                

                 window.onload = function(){

      

       var aDiv =document.querySelectorAll('.box');   //获取一组元素

      

       alert(aDiv.length );

      

      

      

      

};

 

</script>

</head>

 

<body>

<div id="div1" class="box"title="hello">div</div>

<div class="box">div2</div>

</body>

 

•     getElementsByClassName  获取一组class元素

 

<script>

 

window.onload = function(){

      

       var aDiv =document.getElementsByClassName('box');

      

       alert(aDiv.length );//2

      

};

 

</script>

</head>

 

<body>

<div id="div1" class="box"title="hello">div</div>

<div class="box">div2</div>

</body>

 

 

 

 

l  获取class列表属性

•     classList

–    length :  class的长度

–    add()  :  添加class方法

–    remove()  :  删除class方法

–    toggle() :  切换class方法 class中没有则执行添加，有class则执行删除操作

 

window.onload = function(){

    varoDiv = document.getElementById('div1');

    alert(oDiv.classList );  //类似与数组的对象  

};

</script>

</head>

<body>

<div id="div1"class="box1 box2 box3">div</div>

</body>

 

 

window.onload = function(){

       var oDiv =document.getElementById('div1');

       oDiv.classList.add('box4');

             

};

 

</script>

</head>

 

<body>

<div id="div1" class="box1 box2box3">div</div>

</body>

 

 

window.onload = function(){

       var oDiv =document.getElementById('div1');

       oDiv.classList.remove('box2');

      

};

</script>

</head>

<body>

<div id="div1" class="box1 box2box3">div</div>

</body>

 

 

 

 

window.onload = function(){

       var oDiv =document.getElementById('div1');

       oDiv.classList.toggle('box2');

      

};

 

</script>

</head>

 

<body>

<div id="div1" class="box1 box2box3">div</div>

</body>

 

之前有box2，则执行删除操作

 

 

l  JSON的新方法

•     parse() : 把字符串转成json

–    字符串中的属性要严格的加上引号

•     stringify() : 把json转化成字符串

–    会自动的把双引号加上

 

/*var str ='{"name":"hello"}';  //一定是严格的JSON形式

var json = JSON.parse(str);

alert( json.name );*/

 

 

var json = {name :"hello"};

var str = JSON.stringify(json);

alert( str );

 

•     新方法与eval的区别

•      

//eval : 可以解析任何字符串变成JS

//parse : 只能解析JSON形式的字符串变成JS  (安全性要高一些)

•     Eval一些植入木马，病毒等不安全的字符串也可以解析

 

/*var str = 'function show(){alert(123)}';

 

eval(str);

 

show();*///弹出123

 

/*var str = 'function show(){alert(123)}';

 

JSON.parse(str);

 

show();*///不成功

 

•     新方法的应用

–    深度克隆新对象

 

/*var a = {

name: 'hello'

};

 

var b = a;

 

b.name = 'hi';

 

alert( a.name );//hi

 

 

/*var a = {

name: 'hello'

};

 

var b = {};

 

for(var attr in a){

b[attr]= a[attr];

}

 

b.name = 'hi';

 

alert( a.name );*/ //hello 浅拷贝 

深拷贝还要涉及递归

 

// var a = {

//    name : { age : 100 }

// };

// var str = JSON.stringify(a);

// var b = JSON.parse(str);

// b.name.age = 200;

// alert( a.name.age );//100

 

•     如何其他浏览器做到兼容

–    http://www.json.org/去下载json2.js

 

 

l  data自定义数据

•     dataset

–    data-name :  dataset.name

–    data-name-first  :  dataset.nameFirst

–     

<script>

window.onload = function(){

varoDiv = document.getElementById('div1');

//alert(oDiv.dataset.miaov );

alert(oDiv.dataset.miaovAll );

};

 

</script>

</head>

 

<body>

<div id="div1" data-miaov="妙味" data-miaov-all="妙味课堂">div</div>

</body>

•     Data数据在jquery mobile中有着重要作用

 

<div data-role="page"id="div1">

    <divdata-theme="c"data-role="header">

       <h3>妙味课堂</h3>

   </div>

   <div data-role="context">

       <a href="#div2"data-transition="slide">点击</a>

   </div>

</div>

 

<div data-role="page"id="div2">

    <divdata-theme="b" data-role="header">

       <h3>妙味课堂-移动开发教程</h3>

   </div>

   <div data-role="context">

       <a href="#div1"data-transition="slide" data-direction="reverse">点击</a>

   </div>

</div>

 

 

l  延迟加载JS

•     JS的加载会影响后面的内容加载

–    很多浏览器都采用了并行加载JS，但还是会影响其他内容

•     Html5的defer和async

–    defer : 延迟加载，会按顺序执行，在onload执行前被触发

–    只能对外部的起作用，对内联的是没有作用的。

–    async : 异步加载，加载完就触发，有顺序问题

–    并排执行谁先加载后，谁先执行，之间有依赖关系不适用

–    适用于独立的JS，互相不影响，比如广告

–    动态创建script标签，异步

 

<title>无标题文档</title>

<!--<script src="a.js"defer="defer"></script>

<script src="b.js"defer="defer"></script>

<script src="c.js"defer="defer"></script>-->

 

<script src="a.js" async="async"></script>

<script src="b.js" async="async"></script>

<script src="c.js" async="async"></script>

</head>

 

<body>

<img src="">

 

</body>

 

•     Labjs库（专门做异步的库）

 

tianshizhimeng155
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
selector:JSON选择器-快速且易于使用的JSON选择器
05-12
@ gizt / selector-快速和简单的JSON选择器 @gizt/selector是一个快速直观的JSON选择器（语法基于JSON表示法和glob）。 您可以在这里在线尝试 快速开始 npm install @gizt/selector 用法 // es6/browser import select from '@gizt/selector' // node const select = require ( '@gizt/selector' ) 例子 let data = { "title" : "Awesome" , "users" : [ { "name" : "John" , "family" : "Doe" , "friends" : [ { "name" : "F1" } ] } , { "name" : "Joe" , "family"
JQuery实现table行折叠效果以JSON做数据源
10-25
虽然在这个特定的例子中，我们没有用到这个方法，但在处理JSON数据时，这可能是一个有用的工具，特别是当你需要确保列表中的元素唯一时。 总结，实现JQuery的table行折叠效果并以JSON做数据源涉及以下步骤： 1. ...
html5-JSON的新方法
weixin_30527423的博客
07-11 44
JSON的新方法 parse()：把字符串转成json - 字符串中的属性要严格的加上引号 stingify()：把json转化成字符串 - 会自动的把双引号加上 新方法的应用 - 深度克隆对象 如何其他浏览器做到兼容 - http://www.json.org/去下载json2.js <script> var...
html5有哪些新特性？
luuu7的博客
05-02 719
拖拽释放(Drag and drop)    语义化更好的内容标签（header,nav,footer,aside,article,section）    音频、视频API(audio,video)    画布(Canvas)    地理(Geolocation)    本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；    sessionStorage
html5的class属性值,HTML class 属性 | 菜鸟教程
weixin_32039589的博客
06-04 656
HTML class 属性实例在 HTML 文档中使用 class 属性：菜鸟教程(runoob.com)h1.intro {color:blue;}p.important {color:green;}标题 1段落。注意：这是一个很重要的段落。 :)尝试一下 »本章节后面还有更多实例。浏览器支持所有主流浏览器都支持 class 属性定义和用法class 属性定义了元素的类名。class 属性通常用...
html5属性手册,HTML class 属性
weixin_33433927的博客
06-09 193
实例在 HTML 文档中使用 class 属性： h1.intro {color:blue;}p.important {color:green;}Header 1A paragraph.Note that this is an important paragraph. :) 运行一下 »本章节后面还有更多实例。浏览器支持 所有主流浏览器都支持 class 属性定义和用法class 属性定义了元素的...
微信小程序 详解下拉加载与上拉刷新实现方法
08-31
微信小程序提供了多种方式来实现下拉刷新和上拉加载更多功能，可以根据实际需求选择合适的方法。`onPullDownRefresh`和`onReachBottom`适合全局性的刷新和加载，而`scroll-view`组件则提供了更细粒度的控制，可以在...
jQuery JSON动态获取表格数据代码.zip
07-05
1. DOM操作：jQuery通过选择器（如$("#id")或$(".class")）可以轻松地获取DOM元素，然后使用链式方法（如.html()、.append()等）来操作这些元素的内容和结构。 2. 事件处理：jQuery提供了简洁的事件绑定方式，如.on...
如何使用简单HTML和JavaScript制作复杂的多折线图
04-03
1. **数据加载**：从JSON文件或其他数据源获取数据，D3.js提供了便利的数据绑定功能。 2. **设置画布**：使用D3.js的`select`和`append`方法创建SVG画布，设置其宽度和高度。 3. **定义比例和轴**：创建比例函数...
jQuery 实现批量提交表格多行数据的方法
10-18
- `.class` 选择器：选取具有指定类名的所有元素，如 `$(".intro")` 选取所有类名为 "intro" 的元素。 - 在示例中，使用了 `$(".choose")` 来选取所有类名为 "choose" 的复选框。 2. **jQuery 函数**： - `is()`...
JsonParser:JSONCSS选择器
05-12
JSONCSS类型选择器 与杰克逊一起建造 假设程序的第一个参数是JSON File Path 程序将Json从文件处理到内存树中。 该程序将用户输入转换为SearchNode对象。 SearchNode对象充当比较器，检查是否有任意节点等于其自身。 然后对树进行递归深度优先搜索。 如果要实现复合或链式选择器，我们会将用户输入的搜索字符串分成由空格分隔的搜索词的数组，并将每个搜索词转换为SearchNode。 SearchNode数组将传递给搜索方法，与之匹配的每个递归项都将再次调用该方法，将搜索项对象的尾部传递到下一级，当SearchNode与数组中的唯一元素匹配为true时，返回true。
HTML5class的小知识点
qq_42408149的博客
09-06 416
如果css样式中有通用兄弟选择器，和类选择器等，都需要在同一个标签中定义class=“”时可以用空格分割如：class=“first active”；
html5中class,HTML5中classList属性
weixin_30095343的博客
06-21 262
[导读] 前面为大家介绍了一些有关HTML5新添加的选择器，分别是querySelector()，querySelectorAll()和getElementsByClassName()。这三个都有自己独特的功能，大家有需要的话可以看HTML5实战与剖析中的相关内容。今天为大前面为大家介绍了一些有关HTML5新添加的选择器，分别是querySelector()，querySelectorAll()和...
html 语言中class,HTML5 classList操作类名属性简介
weixin_29759387的博客
06-03 345
通常我们在操作类名时，需要通过className属性来添加，删除和替换类名。因为className中是一个字符串，所以即使我们只是修改字符串的一部分，也要每一次都重新设置整个字符串的值。例如有下面的代码：这个元素中共有三个类名。如果要删除第一个类名name1，需要把这三个类名拆开，删除不需要的类名，然后在将余下的类名组合后重新放回去。代码如下：//第一步要获取类名字符串，并将它拆分为一个数组var...
HTML5中的data-*属性
weixin_30815427的博客
02-21 206
data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符； 属性值可以是任意字符串； 注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。 与jQuery的.data()不是一个概念。 在获取自定义属性的值时，使用dataset属性，然后通过自定义属性(这时去掉data-前缀)的名称去获取值。...
html5 php list,HTML5的classList属性操作CSS类的使用详解
weixin_35917339的博客
04-08 153
这篇文章主要介绍了详解使用HTML5的classList属性操作CSS类,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧前言以前我们有需要用js或jquery的一些方法hasClass、addClass、removeClass，在一个元素的class属性上添加或者删除某几个类，达到某种样式变化的需求，但还是稍微麻烦了一些。h5新增的classList可以让我们更方便的元...
html5怎么添加class,使用HTML5的 classList API操作CSS类
weixin_39686634的博客
06-16 344
作为前端工程师，我们经常需要根据用户与页面上的元素的交互来更改CSS样式。如果你接触过 jQuery，相信对 hasClass(), addClass()，removeClass() 这些方法不陌生。幸运的是，HTML5提供了一种原生的方式来实现这些效果，而不再需要jQuery。目前主流浏览器均已支持 classList API，对于 IE 11之前的版本需要借助于兼容库。什么是classList...
基于golang的Json选择器
Man_ge的博客
12-06 392
json 例子： 如上面的json，要选择出future的第一个的date的值， 输出: 2022/07/29 10:23:08 2021-10-25 < nil > 输出
json数据分隔联动选择器
周家大小姐
08-22 371
uniapp 时分秒选择器
最新发布
07-16
当选择器的值发生改变时，`bindchange`事件会触发`bindTimeChange`方法，将新的选择器值更新到`timeValue`和`time`数据中。之后可以根据需要对这些数据进行进一步处理，比如展示到页面上或者发送到服务器。 通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值