3.查询器,ajax进度条等新特1.pptxVIP

北风网项目培训 ;上节回顾;1. selectors api 2. JSON parse 3. Hashchange 4. async,defer for script 5. Progress for ajax 6. DeviceOrientation、orientationchange 7. touch events;h4 : getElementById, getElementsByName, getElementsByTagName h5: querySelector, querySelectorAll。 支持的查询: ;查询器; 1. JSON.parse 2. JSON.stringify;window.onhashchange = function(e){ // do something } HashChangeEvent = { newURL oldURL }; 1. async 异步加载js，加载完毕后解析执行，不阻塞加载。 script src=“jquery.js” async=“async” / 2. defer 在页面加载完毕后才解析执行 script src=“jquery.js” defer=“defer” / ;!DOCTYPE html titleWaiting for Magical Unicorns/title progress id=p/progress script var xh= new XMLHttpRequest() xh.open(GET, “…) xh.onprogress = function(pe) { if(pe.lengthComputable) { // get pe.total,pe.loaded } } xh.send() /script;事件监听 window.addEventListener(deviceorientation, function(event) { switch(window.orientation) { case 90: case -90: orientation = ‘横屏; break; default: orientation = ‘竖屏; } // process event.alpha, event.beta and event.gamma }, true); window.addEventListener( orientationchange, function(e){ // get orientation });;1. 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 指代当前点击的对象;本课程版权归北风网所有