思思博士

摘要： 第一阶段:HTML事件处理阶段.就是在元素里面添加onclick之类的属性来调用某个函数.1 1 function test() {2 alert(0);3 }这种写法有2个缺点: 1.存在时差问题.用户可能在HTML元素已出现在页面上就出发相应的事件,但是如果事件处理程序可能还没有加载过来,就会引发错误. 2.HTML和javascript紧密耦合,如果要更换事件处理程序,则就要同时修改HTML和jiavascript代码,给维护工作带来了很大的麻烦. 第二阶段:DOM0级事件处理程序阶... 阅读全文

摘要： 事件流包括三个阶段: 1.事件捕获阶段 2.处于目标阶段 3.事件冒泡阶段 1.事件捕获阶段 现在页面中有一个按钮. 如果单击这个按钮的话,在事件捕获过程中,document会首先接收到click事件,然后沿着DOM树依次向下,一直传播到事件的实际目标input 因为老版本的浏览器不支持事件捕获,所以很少在使用这个事件流. 2.目标阶段:完成了事件捕获,紧接着处于目标阶段,这个时候发生事件了,弹出1(这个阶段非常特别,根据浏览器情况的不同以及调用程序的参数的不同号,在不同的时候执行,没办法把... 阅读全文

摘要： scrollIntoView(b)可以在任何HTML上调用,通过滚动滚动条,调用的元素就可以出现在可视区域. 参数如果是true,或者不传参数,则表示调用元素的顶部与浏览器顶部平齐. 如果传入false,调用元素会尽可能出项在视口中.HTML代码:1 2 3 4 1 //传入参数时true或不传参数时:2 function displayRed() {3 document.getElementById("guoDiv").scrollIntoView(true);4 }点击按钮后:1 //传入参数f... 阅读全文

摘要： HTML5也添加了辅助管理DOM焦点的功能.元素获得焦点的方式有页面加载,用户输入和代码中调用的focus()方法.而document.activeElement属性保存着当前获得焦点的引用.1 var button = document.getElementById("guoBtn");2 button.focus();3 alert(document.activeElement == button); //true另外就是document.hasFocus()方法了.这个方法用于确定文档是否获得了焦点.1 alert(document.ha... 阅读全文

摘要： 选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配的元素,返回null. 1 var result = {};2 result = document.querySelector("body"); //[object HTMLBodyElement]3 result = document.querySelector("#guoDiv").innerHTML; //div里面的内... 阅读全文

摘要： 废话不多说,先看效果图,和上一章节用的是同一个小图片:这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多插件代码: 1 ; (function ($) { 2 $.fn.gysFdj = function (options) { 3 var defaluts = { 4 cameraW: 100, //镜头宽度 5 cameraH: 100, //镜头高度 6 ... 阅读全文

摘要： 这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的.先看效果图:html代码:1 2 3 4 js插件代码: 1 ; (function ($) { 2 $.fn.gysFdj = function (options) { 3 var defaults = { 4 cameraW: 100, //镜头宽度 5 cameraH: 100... 阅读全文

摘要： cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,insertChild(),replaceChild()将它添加到文档1 2 13 24 35 1 var oDiv = document.getElementById("guoDiv");2 var deepList = oDiv.clone... 阅读全文

摘要： removeChild(a)是用来删除文档中的已有元素 参数a:要移出的节点 1 2 13 24 35 1 var oDiv = document.getElementById("guoDiv");2 var firsChild = oDiv.firstElementChild ? oDiv.firstElementChild : oDiv.firstChild3 var returnNode = oDiv.removeChild(firsChild); //移出第一个元素,返回被移出元... 阅读全文

摘要： replaceChild(a,b)是用来替换文档中的已有元素的 参数a:要插入的节点, 参数b:要替换的节点var oDiv = document.getElementById("guoDiv"); var oSpan = document.createElement("span"); oSpan.innerHTML = "4"; var firsChild = oDiv.firstElementChild ? oDiv.firstElementChild : oDiv.firstCh... 阅读全文