《3.查询器,ajax进度条等新特性介绍(精品).pptx》由会员分享，可在线阅读，更多相关《3.查询器,ajax进度条等新特性介绍(精品).pptx（12页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、北风网项目培训北风网项目培训html5、css3在移动互联网中的开发讲师：BR查询器,ajax进度条等新特性上上节节回回顾顾1.h5的发展历程2.浏览器对于h5的支持情况3.h5与h4的区别1.selectors api2.JSON parse3.Hashchange4.async,defer for script5.Progress for ajax6.DeviceOrientation、orientationchange7.touch events本本本本节节节节内容内容内容内容h4:getElementById,getElementsByName,getElementsByTagName
2、h5:querySelector,querySelectorAll。支持的查询:Selector apiSelector apiSelector apiSelector api查询器器事例事例描述描述.class.name查询所有class=“name”的元素#id#name查询id=“name”的元素*查询所有元素elementp查询所有元素Element,elementDiv,p查询所有 和元素Element elementDiv p所有在中的元素ElementelementDivp所有并父元素是的元素attributetype所有含有type属性的元素attribute=valuetyp
3、e=text所有type=“text”的元素查询器器事例事例描述描述attribute=valueahref=http查询所有并src属性以http开头的元素attribute$=valueahref$=“.htm查询所有并src属性以.htm结尾的元素attribute*=valueahref=“index 所有并src属性含有index的元素:first-childp:first-child所有并且为父元素的第1个子元素:last-childp:last-child所有并且为父元素的最后1个子元素:nth-child(n)p:nth-child(2)所有并且为父元素的第2个子元素:firs
4、t-of-typep:first-of-type所有并且为父元素的第1个元素:last-of-typep:last-of-type所有并且为父元素的最后1个元素:nth-last-of-type(n)p:nth-last-of-type(2)所有并且为父元素的第2个元素:not(selector):not(p)查询所有非元素1.JSON.parse2.JSON.stringifyJSON parseJSON parseJSON parseJSON parsewindow.onhashchange=function(e)/do somethingHashChangeEvent=newURLold
5、URLhashchangehashchangehashchangehashchange1.async 异步加载js，加载完毕后解析执行，不阻塞加载。2.defer 在页面加载完毕后才解析执行 async,defer for scriptasync,defer for scriptasync,defer for scriptasync,defer for scriptWaiting for Magical Unicorns var xh=new XMLHttpRequest()xh.open(GET,“)xh.onprogress=function(pe)if(pe.lengthComputab
6、le)/get pe.total,pe.loaded xh.send()Progress for ajaxProgress for ajaxProgress for ajaxProgress for ajax事件监听window.addEventListener(deviceorientation,function(event)switch(window.orientation)case 90:case-90:orientation=横屏;break;default:orientation=竖屏;/process event.alpha,event.beta and event.gamma,t
7、rue);window.addEventListener(orientationchange,function(e)/get orientation);DeviceOrientationDeviceOrientation1.Ontouchstart(onmousedown)2.Ontouchend(onmousemove)3.Ontouchmove(onmouseup)4.Ontouchcancel/使用document.querySelector(#touchable).addEventListener(touchstart,function(ev)ev.touches:触摸的对象数(直接对应触摸的手指数)ev.targetTouches:当前touch事件元素上对象数(当前绑定元素的手指数)touc:h对象属性:pageX 相对于父元素的x坐标pageY 相对于父元素的y坐标clientX 相对于当前窗口的x坐标clientY 相对于当前窗口的y坐标screenX 相对于当前屏幕的x坐标screenY 相对于当前屏幕的y坐标target 指代当前点击的对象touch eventstouch events本课程版权归北风网所有本课程版权归北风网所有欢迎访问我们的官方网站