分享javascript、jquery實用程式碼段

本文實例為大家簡單分享javascript、jquery實用demo，供大家參考，具體內容如下

javascript判斷H5頁離開判斷

function onbeforeunloadFn(){
 console.log('离开页面');
 //...code
}
function showOnbeforeunload(flags){
 if(flags){
 document.body.onbeforeunload = onbeforeunloadFn;
 }else{
 document.body.onbeforeunload = null;
 }
}
$(function(){
 showOnbeforeunload(true);
})

   

jqimg標籤圖片是否已載入完畢

iframe取得內容-與設定

imgStatus = 0;
 $("img").each(function(){
 if(this.complete){/*this.complete代表图片加载完成*/
  imgStatus++;
 }
 });

   

javascript獲取瀏覽器上一頁的url

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";
}

   

rr

簡單倒數功能

/*返回上一次url,如果是新窗口则不能获取到*/
var beforeUrl = document.referrer;

   

jQuery的節點運算

<script>
$(".class").live(&#39;tap&#39;,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(&#39;tap&#39;,function(oEvent){
  e = window.event || oEvent;if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}e.preventDefault();
  var flag = $(this).data(&#39;flag&#39;);
  if(flag){/*为true时允许点击进入事件*/
   /* code... */
  }
  });
 }
 }
 $(function(){
 bindInit(&#39;.parentTap&#39;);
 bindInit(&#39;.childTap&#39;);
 bindInit(&#39;.childsTap&#39;);
 });
</script>

   

js中if判斷語句中的in語法

<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 ? &#39;&#39; : &#39;0&#39;) + d);
   $(".t_h", "#" + timeId).html((h > 9 ? &#39;&#39; : &#39;0&#39;) + h);
   $(".t_m", "#" + timeId).html((m > 9 ? &#39;&#39; : &#39;0&#39;) + m);
   $(".t_s", "#" + timeId).html((s > 9 ? &#39;&#39; : &#39;0&#39;) + 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>

   

js中typeof和instanceof區別

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")
*/

   

HTML5快取sessionStorage

/*
在js代码中
通常的if判断语句会这样写:
*/
if(1 == 1){
 alert("1等于1");
}else{
 alert("1不等于1");
}
/*而在in写法下可以这样:*/
if(1 in window){
 alert("window包含1");
}else{
 alert("window不包含1");
}