分享javascript、jquery实用代码段
本文实例为大家简单分享javascript、jquery实用demo，供大家参考，具体内容如下
javascript判断H5页面离开
functiononbeforeunloadFn(){
console.log('离开页面');
//...code
}
functionshowOnbeforeunload(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_showiframe").size()>0){
$(".ad_showiframe").attr("id","iframead");/*设置iframe的id*/
/*获取id为iframead的iframe的dom对象*/
variframebox=document.getElementById("iframead").contentWindow;
/*设置兜底内容*/
iframebox.document.body.innerText="1234";
}
javascript获取浏览器上一页的url
/*返回上一次url,如果是新窗口则不能获取到*/ varbeforeUrl=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-->
<divclass="parentTap"data-flag="true">
<divclass="childTap"data-flag="false">
<divclass="childsTap"data-flag="false">
....
</div>
</div>
</div>
<!--给父级parentTap绑定一个点击事件-->
<!--给子级childTap绑定一个点击事件-->
<!--给子孙级childsTap绑定一个点击事件-->
<scripttype="text/javascript">
varbindInit=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();
varflag=$(this).data('flag');
if(flag){/*为true时允许点击进入事件*/
/*code...*/
}
});
}
}
$(function(){
bindInit('.parentTap');
bindInit('.childTap');
bindInit('.childsTap');
});
</script>
简单倒计时功能
<divclass="newTime"data-end="2016-10-1323:59:59"data-now="2016-10-1303:59:59">
<divclass="t_d"></div>
<divclass="t_h"></div>
<divclass="t_m"></div>
<divclass="t_s"></div>
</div>
<scripttype="text/javascript">
/*倒计时*/
vartimeDown={
GetRTime:function(timeId,oldNowTime){
vartempTime;/*保存上一次时间*/
if(oldNowTime){
tempTime=newDate(oldNowTime.getTime()+1000);/*如果有上一次时间则赋值*/
/*console.log(tempTime);*/
}
varEndTime=newDate($("#"+timeId).data("end"));/*获取结束时间*/
if(!tempTime){
if($("#"+timeId).data("now")==""||$("#"+timeId).data("now")=="null"){
varNowTime=newDate();
}else{
varNowTime=newDate($("#"+timeId).data("now"));/*取开始时间*/
}
}else{
varNowTime=tempTime;
}
if(EndTime.getTime()>=NowTime.getTime()){/*判断时间*/
vart=EndTime.getTime()-NowTime.getTime();/*得到结束时间减去开始时间的时间戳*/
vard=Math.floor(t/1000/60/60/24);/*日*/
varh=Math.floor(t/1000/60/60%24);/*时*/
varm=Math.floor(t/1000/60%60);/*分*/
vars=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=newDate(NowTime.getTime()+1000);/*将开始时间+1秒*/
setTimeout(function(){
timeDown.GetRTime(timeId,NowTime);/*等待一秒后继续执行*/
},1000);
}elseif(EndTime.getTime()==NowTime.getTime()){/*当时间相等时要做处理的code*/
$("#"+timeId).hide();
}
}
}
vart=0;
if($(".newTime").size()>0){
$(".newTime").each(function(){
vartimeId="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>,等同于$("pspan")
*/
js中if判断语句中的in语法
/*
在js代码中
通常的if判断语句会这样写:
*/
if(1==1){
alert("1等于1");
}else{
alert("1不等于1");
}
/*而在in写法下可以这样:*/
if(1inwindow){
alert("window包含1");
}else{
alert("window不包含1");
}
js的try-catch
try{
foo.bar();
}catch(e){
console.log(e.name+":"+e.message);
}
try{
thrownewError("Whoops!");
}catch(e){
console.log(e.name+":"+e.message);
}
/*
改js代码会捕获一个异常错误:
因为foo.bar();是未定义的;
因此在js代码中如果没有异常捕获,整个页面都不会继续解析.
从而导致页面加载失败.
这里就需要通过try-catch来异常捕获这种错误,并把他反馈出来
目前我们可能得到的系统异常主要包含以下6种:
EvalError:raisedwhenanerroroccursexecutingcodeineval()
翻译:当一个错误发生在eval()执行代码
RangeError:raisedwhenanumericvariableorparameterisoutsideofitsvalidrange
翻译:当一个数值变量或参数的有效范围之外
ReferenceError:raisedwhende-referencinganinvalidreference
翻译:引用无效的引用
SyntaxError:raisedwhenasyntaxerroroccurswhileparsingcodeineval()
翻译:语法错误,当发生语法错误在eval()解析代码里
TypeError:raisedwhenavariableorparameterisnotavalidtype
翻译:错误类型：当一个变量或参数不是一个有效的类型
URIError:raisedwhenencodeURI()ordecodeURI()arepassedinvalidparameters
翻译:调用encodeURI()或decodeURI()时,传入的参数是不通过无效的
以下是异常捕获是的属性:
Error具有下面一些主要属性：
description:错误描述(仅IE可用).
fileName:出错的文件名(仅Mozilla可用).
lineNumber:出错的行数(仅Mozilla可用).
message:错误信息(在IE下同description)
name:错误类型.
number:错误代码(仅IE可用).
stack:像Java中的StackTrace一样的错误堆栈信息(仅Mozilla可用).
*/
/*
如要判断异常信息的类型，可在catch中进行判断：
*/
try{
coo.bar();//捕获异常,ReferenceError:引用无效的引用
}catch(e){
console.log(einstanceofEvalError);
console.log(einstanceofRangeError);
if(einstanceofEvalError){
console.log(e.name+":"+e.message);
}elseif(einstanceofRangeError){
console.log(e.name+":"+e.message);
}elseif(einstanceofReferenceError){
console.log(e.name+":"+e.message);
}
}
js中typeof和instanceof区别
/*先捕获异常,抛出异常*/
try{
thrownewmyBlur();//抛出当前对象
}catch(e){
console.log(typeof(e.a));//返回function类型
if(e.ainstanceofFunction){//instanceof用于判断一个变量是否某个对象的实例,true
console.log("是一个function方法");
e.a();//执行这个方法,输出"失去焦点"
}else{
console.log("不是一个function方法");
}
}
functionmyBlur(){
this.a=function(){
console.log("失去焦点");
};
}
/*
通畅typeof一般只能返回如下几个结果:
number,boolean,string,function,object,undefined;
如果要用if做比较则比较后面要用双引号引起来
*/
if(typeof(param)=="object"){
alert("该参数等于object类型");
}else{
alert("该参数不等于object类型");
}
/*又如:*/
console.log(ObjectinstanceofObject);//true
console.log(FunctioninstanceofFunction);//true
console.log(NumberinstanceofNumber);//false
console.log(StringinstanceofString);//false
console.log(FunctioninstanceofObject);//true
console.log(FooinstanceofFunction);//true
console.log(FooinstanceofFoo);//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()来设置一个与现有值相同的值，事件也是不会触发的。 当存储区域发生改变时就会被触发。 */
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。