javascript判断h5页面离开
function onbeforeunloadfn(){ console.log('离开页面'); //...code } function showonbeforeunload(flags){ if(flags){ document.body.onbeforeunload = onbeforeunloadfn; }else{ document.body.onbeforeunload = null; } } $(function(){ showonbeforeunload(true); })
jq判断img标签图片地址是否已经加载完毕
imgstatus = 0; $("img").each(function(){ if(this.complete){/*this.complete代表图片加载完成*/ imgstatus++; } });
iframe获取内容-和设置
if($(".ad_show iframe").size() > 0 ){ $(".ad_show iframe").attr("id","iframead");/*设置iframe的id*/ /*获取id为iframead的iframe的dom对象*/ var iframebox = document.getelementbyid("iframead").contentwindow; /*设置兜底内容*/ iframebox.document.body.innertext = "1234"; }
javascript获取浏览器上一页的url
/*返回上一次url,如果是新窗口则不能获取到*/ var beforeurl = document.referrer;
关于头疼的移动端点击冒泡事件
<script> $(".class").live('tap',function(oevent){ e = window.event || oevent; if(e.stoppropagation){ e.stoppropagation(); }else{ e.cancelbubble = true; } e.preventdefault(); }); </script> /*虽说tap事件可以阻止大部分冒泡事件，但是还是有一小部分移动端不吃你这套，那么有另外一个解决办法*/ /*将层级间的事件通过h5属性data-flag="true"来控制*/ <!--html--> <div class="parenttap" data-flag="true"> <div class="childtap" data-flag="false"> <div class="childstap" data-flag="false"> .... </div> </div> </div> <!--给父级parenttap绑定一个点击事件--> <!--给子级childtap绑定一个点击事件--> <!--给子孙级childstap绑定一个点击事件--> <script type="text/javascript"> var bindinit = function(classname){ if($(classname).size() > 0){ $(classname).on('tap',function(oevent){ e = window.event || oevent;if(e.stoppropagation){e.stoppropagation();}else{e.cancelbubble = true;}e.preventdefault(); var flag = $(this).data('flag'); if(flag){/*为true时允许点击进入事件*/ /* code... */ } }); } } $(function(){ bindinit('.parenttap'); bindinit('.childtap'); bindinit('.childstap'); }); </script>
简单倒计时功能
<div class="newtime" data-end="2016-10-13 23:59:59" data-now="2016-10-13 03:59:59"> <div class="t_d"></div> <div class="t_h"></div> <div class="t_m"></div> <div class="t_s"></div> </div> <script type="text/javascript"> /*倒计时*/ var timedown = { getrtime: function (timeid,oldnowtime) { var temptime;/*保存上一次时间*/ if(oldnowtime){ temptime = new date(oldnowtime.gettime() + 1000);/*如果有上一次时间则赋值*/ /*console.log(temptime);*/ } var endtime = new date($("#" + timeid).data("end"));/*获取结束时间*/ if (!temptime) { if ($("#" + timeid).data("now") == "" || $("#" + timeid).data("now") == "null") { var nowtime = new date(); } else { var nowtime = new date($("#" + timeid).data("now"));/*取开始时间*/ } } else { var nowtime = temptime; } if (endtime.gettime() >= nowtime.gettime()) {/*判断时间*/ var t = endtime.gettime() - nowtime.gettime();/*得到结束时间减去开始时间的时间戳*/ var d = math.floor(t / 1000 / 60 / 60 / 24);/*日*/ var h = math.floor(t / 1000 / 60 / 60 % 24);/*时*/ var m = math.floor(t / 1000 / 60 % 60);/*分*/ var s = math.floor(t / 1000 % 60);/*秒*/ /*将时间填入对应的html中*/ $(".t_d", "#" + timeid).html((d > 9 ? '' : '0') + d); $(".t_h", "#" + timeid).html((h > 9 ? '' : '0') + h); $(".t_m", "#" + timeid).html((m > 9 ? '' : '0') + m); $(".t_s", "#" + timeid).html((s > 9 ? '' : '0') + s); temptime = new date(nowtime.gettime() + 1000);/*将开始时间+1秒*/ settimeout(function () { timedown.getrtime(timeid,nowtime);/*等待一秒后继续执行*/ }, 1000); } else if (endtime.gettime() == nowtime.gettime()) {/*当时间相等时要做处理的code*/ $("#"+timeid).hide(); } } } var t=0; if ($(".newtime").size() > 0) { $(".newtime").each(function(){ var timeid="timeout"+t; $(this).attr("id",timeid);/*设置多个倒计时时指定唯一id*/ t++; timedown.getrtime(timeid,null);/*开始调用*/ }); } </script>
jquery的节点操作
jquery.parent(expr) /*找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")*/ jquery.parents(expr) /*类似于jquery.parents(expr),但是是查找所有祖先元素，不限于父元素*/ jquery.children(expr) /*返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点*/ jquery.contents() /*返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个*/ /* jquery对象返回，children()则只会返回节点 jquery.prev()，返回上一个兄弟节点，不是所有的兄弟节点 jquery.prevall()，返回所有之前的兄弟节点 jquery.next(),返回下一个兄弟节点，不是所有的兄弟节点 jquery.nextall()，返回所有之后的兄弟节点 jquery.siblings(),返回兄弟姐妹节点，不分前后 jquery.find(expr),跟jquery.filter(expr)完全不一样。 jquery.filter()是从初始的jquery对象集合中筛选出一部分， 而jquery.find()的返回结果，不会有初始集合中的内容， 比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span") */
js中if判断语句中的in语法
/* 在js代码中 通常的if判断语句会这样写: */ if(1 == 1){ alert("1等于1"); }else{ alert("1不等于1"); } /*而在in写法下可以这样:*/ if(1 in window){ alert("window包含1"); }else{ alert("window不包含1"); }
js的try-catch
try{ foo.bar(); }catch(e){ console.log(e.name + ":" + e.message); } try{ throw new error("whoops!"); }catch(e){ console.log(e.name + ":" + e.message); } /* 改js代码会捕获一个异常错误: 因为foo.bar();是未定义的; 因此在js代码中如果没有异常捕获,整个页面都不会继续解析. 从而导致页面加载失败. 这里就需要通过try-catch来异常捕获这种错误,并把他反馈出来 目前我们可能得到的系统异常主要包含以下6种: evalerror: raised when an error occurs executing code in eval() 翻译:当一个错误发生在eval()执行代码 rangeerror: raised when a numeric variable or parameter is outside of its valid range 翻译:当一个数值变量或参数的有效范围之外 referenceerror: raised when de-referencing an invalid reference 翻译:引用无效的引用 syntaxerror: raised when a syntax error occurs while parsing code in eval() 翻译:语法错误,当发生语法错误在eval()解析代码里 typeerror: raised when a variable or parameter is not a valid type 翻译:错误类型：当一个变量或参数不是一个有效的类型 urierror: raised when encodeuri() or decodeuri() are passed invalid parameters 翻译:调用encodeuri()或decodeuri()时,传入的参数是不通过无效的 以下是异常捕获是的属性: error具有下面一些主要属性： description: 错误描述 (仅ie可用). filename: 出错的文件名 (仅mozilla可用). linenumber: 出错的行数 (仅mozilla可用). message: 错误信息 (在ie下同description) name: 错误类型. number: 错误代码 (仅ie可用). stack: 像java中的stack trace一样的错误堆栈信息 (仅mozilla可用). */ /* 如要判断异常信息的类型，可在catch中进行判断： */ try { coo.bar();//捕获异常,referenceerror:引用无效的引用 }catch(e){ console.log(e instanceof evalerror); console.log(e instanceof rangeerror); if(e instanceof evalerror){ console.log(e.name + ":" + e.message); }else if(e instanceof rangeerror){ console.log(e.name + ":" + e.message); }else if(e instanceof referenceerror){ console.log(e.name + ":" + e.message); } }
js中typeof和instanceof区别
/*先捕获异常,抛出异常*/ try { throw new myblur(); // 抛出当前对象 }catch(e){ console.log(typeof(e.a)); //返回function类型 if(e.a instanceof function){//instanceof用于判断一个变量是否某个对象的实例,true console.log("是一个function方法"); e.a();//执行这个方法,输出"失去焦点" }else{ console.log("不是一个function方法"); } } function myblur(){ this.a = function(){ console.log("失去焦点"); }; } /* 通畅typeof一般只能返回如下几个结果: number,boolean,string,function,object,undefined; 如果要用if做比较则比较后面要用双引号引起来 */ if(typeof(param) == "object"){ alert("该参数等于object类型"); }else{ alert("该参数不等于object类型"); } /*又如:*/ console.log(object instanceof object);//true console.log(function instanceof function);//true console.log(number instanceof number);//false console.log(string instanceof string);//false console.log(function instanceof object);//true console.log(foo instanceof function);//true console.log(foo instanceof foo);//false
html5缓存sessionstorage
sessionstorage.getitem(key)//获取指定key本地存储的值 sessionstorage.setitem(key,value)//将value存储到key字段 sessionstorage.removeitem(key)//删除指定key本地存储的值 sessionstorage.length//sessionstorage的项目数 /* sessionstorage与localstorage的异同: sessionstorage和localstorage就一个不同的地方， sessionstorage数据的存储仅特定于某个会话中， 也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前的存储已经被清除。 而localstorage是一个持久化的存储，它并不局限于会话 sessionstorage和localstorage的clear()函数的用于清空同源的本地存储数据: 比如localstorage.clear()，它将删除所有同源的本地存储的localstorage数据， 而对于sessionstorage，它只清空当前会话存储的数据。 sessionstorage和localstorage具有相同的方法storage事件: 在存储事件的处理函数中是不能取消这个存储动作的。 存储事件只是浏览器在数据变化发生之后给你的一个通知。 当setitem(),removeitem()或者clear() 方法被调用， 并且数据真的发生了改变时，storage事件就会被触发。 注意这里的的条件是数据真的发生了变化。也就是说， 如果当前的存储区域是空的，你再去调用clear()是不会触发事件的。 或者你通过setitem()来设置一个与现有值相同的值，事件也是不会触发的。 当存储区域发生改变时就会被触发。 */