东莞网站策划,营销网名,wordpress添加小工具插件,导航网站开发JavaScript 宿主对象
BOM
window 全局对象 window对象是可以直接被访问到的每一个用var声明的变量都会自动作为window对象的属性存在 function声明的函数也会自动作为window对象的方法存在访问window对象的属性和方法可以不用写window 属性
innerWidth 获取浏览器窗口的宽度…JavaScript 宿主对象
BOM
window 全局对象 window对象是可以直接被访问到的每一个用var声明的变量都会自动作为window对象的属性存在 function声明的函数也会自动作为window对象的方法存在访问window对象的属性和方法可以不用写window 属性
innerWidth 获取浏览器窗口的宽度innerHeight 获取浏览器窗口的高度location history document screen navigator
方法
alert();prompt();confirm(); let r confirm(sdsf);console.log(r); // 弹窗确定输出truesetInterval(); 接收两个参数 回调函数和时间 每隔1000ms执行一次操作 let i 0;let r setInterval(function () {i;console.log(i);if(i5){clearInterval(r);} // i等于5停止},1000) // 回调函数 时间console.log(r); // 异步执行let r1 setInterval(function () {console.log(hello);},1000) // 回调函数 时间console.log(r1);clearInterval(r1);clearInterval(); 停止运行setTimeout(); 只会执行一次clearTimeout();getComputedStyle(); let one document.querySelector(.one);let styleObj getComputedStyle(one);console.log(styleObj);console.log(styleObj.background);let borderWidth getComputedStyle(container).borderLeftWidth;let cw parseInt(getComputedStyle(container).width);let ch parseInt(getComputedStyle(container).height);onpopstate(); 当浏览器历史记录发生改变后触发onhashchange(); 当浏览器锚链接地址发生改变后触发
history
state 当前历史记录中保存的状态信息length 保存的历史记录条数back(); 后退到上一条forward(); 前进到下一条go(0) 刷新 go(1) 前进到下一条 go(-1) 后退到上一条 go(3) 跳转到第三个pushState(); 添加一条历史记录replaceState(); 替换当前界面的历史记录信息
location对象
属性
protocol 协议部分 eg: http: https:hostname 域名部分 eg: www.sxuek.com localhost www.news.baidu.comhost 域名端口号port 端口号 eg: :63342 :80pathname 路径部分 eg: /s /aa/bb /index/index.htmlsearch 查询部分 eg: ?namezhangsanage19hash 锚链接部分 eg: #tophref 完整的url
方法
reload(); 刷新 重新加载所有资源assign(); 页面跳转到另外一个地址replace(); 页面跳转到另外一个地址 不会生成历史记录
DOM
document 整个文档 属性
titlebody
方法
querySelector(); 从文档中获取某个标签对象 参数css选择器querySelectorAll(); 从文档中获取某个标签对象集合getAttribute(); 获取元素身上某个属性的值
以div为代表的普通元素对象
className 获取或设置元素的类名 let two document.querySelector(.two);let three document.querySelector(.three);two.onclick function () {three.className active;}innerHTML 获取或者设置元素的内容 let p document.querySelector(p);p.innerHTMLbhello/b; console.log(p.innerHTML); textContent 获取或设置元素的纯文本格式的内容不能设置标签设置标签时不识别 let divObj document.querySelector(#demo);divObj.textContenthello;console.log(divObj.textContent);style 获取到当前的行内样式对象
let divObj document.querySelector(#demo);divObj.onclickfunction(){console.log(divObj.style);console.log(divObj.style.width);divObj.style.width500px;divObj.style.height500px;divObj.style.backgroundColorred;}classList 类名集合对象 add 添加一个类名remove 移除一个类名toggle 切换类名 如果有则移除如果没有则添加 let divObj document.querySelector(#demo);console.log(divObj.classList);divObj.classList.add(d);console.log(divObj.classList);divObj.classList.remove(c);divObj.onclick function () {divObj.classList.toggle(active);}console.log(divObj.classList);contains 判断是否包含某个类名 offsetWidth 实际占据的宽度offsetHeight 实际占据的高度scrollTop 获取或设置当前元素的内部元素滚动超出容器顶部的值一定是正值scrollLeft 获取或设置当前元素的内部元素滚动超出容器左部的值
let out document.querySelector(.out);out.onclick function(){console.log(out.scrollTop);//内部元素超出out顶部的值的console.log(out.scrollLeft);}out.scrollLeft200; // 直接设置超出左边的值let one document.querySelector(.one);console.log(one.offsetWidth); //340offsetLeft 距离有定位属性的前辈元素的左边距如果前辈元素没有定位那就是基于文档的位置offsetTop 距离有定位属性的前辈元素的上边距如果前辈元素没有定位那就是基于文档的位置
事件
onClick 点击事件 方法可以通过用户鼠标点击div调用onmouseenter 鼠标进入元素后触发 banner.onmouseenter function () { //鼠标移入停止播放clearInterval(st);}onmouseleave 鼠标离开元素后触发 banner.onmouseleave function () { // 鼠标移除后继续播放if(flag){ // 判断是否点击了轮播点如果为真之后代码不执行否则接着自动播放return;}st setInterval(move,3000); // 继续播放}onscroll 检测元素内部发生滚动的事件(一般给window)onfocus 获得焦点onblur 失去焦点
方法
addEventListener(); 具体给某个事件添加事件监听函数 transitionend banner.addEventListener(click,function () {});
banner.addEventListener(transitionend,function () {});事件扩展 常用 click 鼠标单击mouseenter 鼠标从外部进入mouseleave 鼠标进入外部dblclick 鼠标双击事件mousedown 鼠标按下事件mouseup 鼠标抬起事件mousemove 鼠标移动事件wheel 滚轮事件 mousewheel IE/GoogleDOMMouseScroll Firefox contextmenu 右击事件mouseover 鼠标从外部进入mouseout 鼠标进入外部scroll 滚动事件resize 尺寸发生改变load 加载完成 img/window页面加载完成 键盘触发事件 keydown 某个键按下 按压不动 window document body 可输入内容的标签keyup 某个键抬起keypress 某个键按压不动 focus 获取焦点blur 失去焦点change 内容改变并且失去焦点submit 表单提交事件reset 表单重置事件transitionend 过渡结束 事件添加 obj.on事件名function(){} DOM为我们提供的快速的给对象添加事件的借口1.并不是每一个事件都有 2.每个接口只能添加一个函数-事件处理程序 obj.addEventListener(“事件名”,function(){}) 元素时间用来添加事件的方法1.可以添加任意事件 2.对于同一个事件可以添加同一个处理程序 事件移除 div.onclick function(){} -- div.onclick null;div.addEventListener(“事件名”,函数名) -- removeEventListener(“事件名”,函数名); 事件对象 用来保存事件发生的时候才会产生的一些信息 获取对象
div.onclick function (val) {console.log(val);}div.addEventListener(“click”,function (e) { console.log(e);});
事件对象的属性 鼠标事件 screenX screenY 触发事件时鼠标距离屏幕的位置clientX clientY 触发事件是鼠标距离浏览器窗口的位置pageX pageY 触发事件时鼠标距离文档的位置offsetX offsetY 触发事件时鼠标距离事件源的位置which 用来判断当前按下的是左键还是右键 通用 type 当前事件的名称target 目标事件源事件冒泡开始的元素 滚轮事件 deltaY 滚轮滚动方向 键盘事件 keycode 获取所按键的键盘码ctrlKey 判断当前ctrl键是否按下shiftKey 判断当前shift键是否按下altKey 判断当前alt键是否按下
事件对象的方法
preventDefault(); 阻止浏览器的默认行为stopPropagation(); 阻止事件流的传播
事件流
事件流 当我们触发某个对象身上的事件的时候他的父元素、以及父元素的父元素…直到整个页面都会按照特定的顺序响应这个事件 冒泡型事件流 从最明确的事件源到最不明确的事件源依次触发 捕获型事件流 从最不明确的事件源到最明确的事件源依次触发addEventListener(事件处理程序.true);捕获型事件流触发完成后会继续冒泡事件流 事件流的利用和阻止 利用阻止 e.stopPropagation();事件委托阻止事件流的方法
