首页 > 代码库 > JS补充
JS补充
JS 由三部分组成:ECMAScript:也叫解释器,充当翻译角色,这是 JS 的核心部分。
DOM:文档对象模型(Document Object Model)。DOM 赋予了 JS 操作 HTML 的能力,即 document 操作。
BOM:浏览器对象模型(Browser Object Model)。BOM 赋予了 JS 操作浏览器的能力,即 window 操作。
变量的作用域:全局变量和局部变量。全局变量简单说就是在函数外声明的变量,任何地方都可以使用,而局部变量就是在函数内部声明的变量,只能在声明他的函数内部使用。JS 变量的生命期从他们被声明的时候开始,全局变量会在页面被关闭之后删除,局部变量则在函数被运行以后删除。
这里穿插下 :CSS 基础篇、绝对有你想要
JS BOM window 对象的 Cookie
(1)、创建和读取cookie document.cookie 将以字符串的方式返回所有的 cookie,格式: cookie1=value; cookie2=value; cookie3=value;
(2)、修改cookie 修改 cookie 类似于创建 cookie,新的 cookie 将被添加到 document.cookie 中显示。
(3)、删除cookie 只需要设置expires 参数为以前的时间即可,也就是设置为 -1
AJAX
基本格式实例:
function ajax(url, fnSucc, fnFaild){ var oAjax = new XMLHttpRequest(); oAjax.open(‘GET‘, url, true); oAjax.send(); oAjax.onreadystatechange = function(){ if(oAjax.readyState == 4){ if(oAjax.status == 200){ fnSucc(oAjax.responseText); } else{ if(fnFaild){ fnFaild(oAjax.status); } } } };
DOMReady :脚本在 HTML DOM 加载渲染布局显示完成后才能运行,且要放在 body 部分内容的后面,而 DOMReady 则定义使脚本无论放在哪里都能执行。window.onload 事件是在浏览器绘制完 DOM 节点,再加载完页面上的所有资源后,然后执行脚本。也就是说在文档解析渲染,资源加载完成之前,不让脚本执行。使用 window.onload 对于很多实际的操作(比如DOM操作,事件绑定等)就显得太迟了,比如图片过多,window.onload 却迟迟不能触发,影响用户体验。
jQuery 实现 DOMReady:
<script>
//jQuery 实现
$(document).ready(function (){
document.getElementById(‘main‘).style.color = ‘red‘;
});
</script>
JS 实现 DOMReady:用 JS 实现 DOMReady 其实也很简单,可以添加一个监听事件,即 addEventListener,该方法的语法为:document.addEventListener("事件名称", 函数, false);,false 表示在冒泡阶段捕获。再传入DOMContentLoaded 事件,这个事件是从 onl oad 事件延伸而来的,当一个页面完成加载时,初始化脚本的方法是使用 onl oad 事件,该方法的缺点是仅在所有资源都完全加载后才被触发,如果页面的图片很多的话,从用户访问到 onl oad 触发可能需要较长的时间,所以开发人员随后创建了一种自定义事件,DOMReady,他在 DOM 构建之后、资源加载之前就可以被触发,他的表现形式就是 DOMContentLoaded 。jQuery 源码中也是使用该方法完成的。
<script>
function domReady(fn){
document.addEventListener(‘DOMContentLoaded‘, fn, false);
}
domReady(function (){
document.getElementById(‘main‘).style.color = ‘red‘;
});
</script>
JS补充