分享javascript、jquery實(shí)用代碼段

更新時(shí)間：2016年10月20日 11:47:47 作者：會(huì)寫代碼的謝霆鋒

這篇文章主要為大家分享了javascript、jquery實(shí)用代碼段,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家簡單分享javascript、jquery實(shí)用demo，供大家參考，具體內(nèi)容如下

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標(biāo)簽圖片地址是否已經(jīng)加載完畢

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

iframe獲取內(nèi)容-和設(shè)置

if($(".ad_show iframe").size() > 0 ){
 $(".ad_show iframe").attr("id","iframead");/*設(shè)置iframe的id*/
 /*獲取id為iframead的iframe的dom對(duì)象*/
 var iframebox = document.getElementById("iframead").contentWindow;
 /*設(shè)置兜底內(nèi)容*/
 iframebox.document.body.innerText = "1234";
}

javascript獲取瀏覽器上一頁的url

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

關(guān)于頭疼的移動(dòng)端點(diǎn)擊冒泡事件

<script>
$(".class").live('tap',function(oEvent){
 e = window.event || oEvent;
 if(e.stopPropagation){
 e.stopPropagation();
 }else{
 e.cancelBubble = true;
 }
 e.preventDefault();
});
</script>
/*雖說tap事件可以阻止大部分冒泡事件，但是還是有一小部分移動(dòng)端不吃你這套，那么有另外一個(gè)解決辦法*/
/*將層級(jí)間的事件通過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>
<!--給父級(jí)parentTap綁定一個(gè)點(diǎn)擊事件-->
<!--給子級(jí)childTap綁定一個(gè)點(diǎn)擊事件-->
<!--給子孫級(jí)childsTap綁定一個(gè)點(diǎn)擊事件-->
<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時(shí)允許點(diǎn)擊進(jìn)入事件*/
   /* code... */
  }
  });
 }
 }
 $(function(){
 bindInit('.parentTap');
 bindInit('.childTap');
 bindInit('.childsTap');
 });
</script>

簡單倒計(jì)時(shí)功能

<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">
 /*倒計(jì)時(shí)*/
 var timeDown = {
  GetRTime: function (timeId,oldNowTime) {
  var tempTime;/*保存上一次時(shí)間*/
  if(oldNowTime){
   tempTime = new Date(oldNowTime.getTime() + 1000);/*如果有上一次時(shí)間則賦值*/
   /*console.log(tempTime);*/
  }
  var EndTime = new Date($("#" + timeId).data("end"));/*獲取結(jié)束時(shí)間*/
  if (!tempTime) {
   if ($("#" + timeId).data("now") == "" || $("#" + timeId).data("now") == "null") {
   var NowTime = new Date();
   } else {
   var NowTime = new Date($("#" + timeId).data("now"));/*取開始時(shí)間*/
   }
  } else {
   var NowTime = tempTime;
  }
  if (EndTime.getTime() >= NowTime.getTime()) {/*判斷時(shí)間*/
   var t = EndTime.getTime() - NowTime.getTime();/*得到結(jié)束時(shí)間減去開始時(shí)間的時(shí)間戳*/
   var d = Math.floor(t / 1000 / 60 / 60 / 24);/*日*/
   var h = Math.floor(t / 1000 / 60 / 60 % 24);/*時(shí)*/
   var m = Math.floor(t / 1000 / 60 % 60);/*分*/
   var s = Math.floor(t / 1000 % 60);/*秒*/
   /*將時(shí)間填入對(duì)應(yīng)的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);/*將開始時(shí)間+1秒*/
   setTimeout(function () {
   timeDown.GetRTime(timeId,NowTime);/*等待一秒后繼續(xù)執(zhí)行*/
   }, 1000);
  } else if (EndTime.getTime() == NowTime.getTime()) {/*當(dāng)時(shí)間相等時(shí)要做處理的code*/
   $("#"+timeId).hide();
  }
  }
 }
 var t=0;
 if ($(".newTime").size() > 0) {
  $(".newTime").each(function(){
  var timeId="timeOut"+t;
  $(this).attr("id",timeId);/*設(shè)置多個(gè)倒計(jì)時(shí)時(shí)指定唯一id*/
  t++;
  timeDown.GetRTime(timeId,null);/*開始調(diào)用*/
  });
 }
 </script>

jQuery的節(jié)點(diǎn)操作

jQuery.parent(expr) /*找父親節(jié)點(diǎn)，可以傳入expr進(jìn)行過濾，比如$("span").parent()或者$("span").parent(".class")*/

jQuery.parents(expr) /*類似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素*/

jQuery.children(expr) /*返回所有子節(jié)點(diǎn)，這個(gè)方法只會(huì)返回直接的孩子節(jié)點(diǎn)，不會(huì)返回所有的子孫節(jié)點(diǎn)*/

jQuery.contents() /*返回下面的所有內(nèi)容，包括節(jié)點(diǎn)和文本。這個(gè)方法和children()的區(qū)別就在于，包括空白文本，也會(huì)被作為一個(gè)*/

/*
 jQuery對(duì)象返回，children()則只會(huì)返回節(jié)點(diǎn)

 jQuery.prev()，返回上一個(gè)兄弟節(jié)點(diǎn)，不是所有的兄弟節(jié)點(diǎn)

 jQuery.prevAll()，返回所有之前的兄弟節(jié)點(diǎn)

 jQuery.next(),返回下一個(gè)兄弟節(jié)點(diǎn)，不是所有的兄弟節(jié)點(diǎn)

 jQuery.nextAll()，返回所有之后的兄弟節(jié)點(diǎn)

 jQuery.siblings(),返回兄弟姐妹節(jié)點(diǎn)，不分前后

 jQuery.find(expr),跟jQuery.filter(expr)完全不一樣。
 jQuery.filter()是從初始的jQuery對(duì)象集合中篩選出一部分，
 而jQuery.find()的返回結(jié)果，不會(huì)有初始集合中的內(nèi)容，
 比如$("p"),find("span"),是從<p>元素開始找<span>,等同于$("p span")
*/

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

/*
在js代碼中
通常的if判斷語句會(huì)這樣寫:
*/
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代碼會(huì)捕獲一個(gè)異常錯(cuò)誤:
 因?yàn)閒oo.bar();是未定義的;
 因此在js代碼中如果沒有異常捕獲,整個(gè)頁面都不會(huì)繼續(xù)解析.
 從而導(dǎo)致頁面加載失敗.
 這里就需要通過try-catch來異常捕獲這種錯(cuò)誤,并把他反饋出來

目前我們可能得到的系統(tǒng)異常主要包含以下6種:
 EvalError: raised when an error occurs executing code in eval()
 翻譯:當(dāng)一個(gè)錯(cuò)誤發(fā)生在eval()執(zhí)行代碼 
 RangeError: raised when a numeric variable or parameter is outside of its valid range 
 翻譯:當(dāng)一個(gè)數(shù)值變量或參數(shù)的有效范圍之外
 ReferenceError: raised when de-referencing an invalid reference 
 翻譯:引用無效的引用
 SyntaxError: raised when a syntax error occurs while parsing code in eval()
 翻譯:語法錯(cuò)誤,當(dāng)發(fā)生語法錯(cuò)誤在eval()解析代碼里
 TypeError: raised when a variable or parameter is not a valid type 
 翻譯:錯(cuò)誤類型：當(dāng)一個(gè)變量或參數(shù)不是一個(gè)有效的類型
 URIError: raised when encodeURI() or decodeURI() are passed invalid parameters 
 翻譯:調(diào)用encodeURI()或decodeURI()時(shí),傳入的參數(shù)是不通過無效的

以下是異常捕獲是的屬性:
 Error具有下面一些主要屬性：
 description: 錯(cuò)誤描述 (僅IE可用). 
 fileName: 出錯(cuò)的文件名 (僅Mozilla可用). 
 lineNumber: 出錯(cuò)的行數(shù) (僅Mozilla可用). 
 message: 錯(cuò)誤信息 (在IE下同description) 
 name: 錯(cuò)誤類型. 
 number: 錯(cuò)誤代碼 (僅IE可用). 
 stack: 像Java中的Stack Trace一樣的錯(cuò)誤堆棧信息 (僅Mozilla可用).
*/ 
/*
 如要判斷異常信息的類型，可在catch中進(jìn)行判斷：
 */

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區(qū)別

/*先捕獲異常,拋出異常*/
try {
 throw new myBlur(); // 拋出當(dāng)前對(duì)象 
}catch(e){
 console.log(typeof(e.a)); //返回function類型
 if(e.a instanceof Function){//instanceof用于判斷一個(gè)變量是否某個(gè)對(duì)象的實(shí)例,true
 console.log("是一個(gè)function方法");
 e.a();//執(zhí)行這個(gè)方法,輸出"失去焦點(diǎn)"
 }else{
 console.log("不是一個(gè)function方法");
 }
}
function myBlur(){
 this.a = function(){
 console.log("失去焦點(diǎn)");
 };
}

/*
 通暢typeof一般只能返回如下幾個(gè)結(jié)果:
 number,boolean,string,function,object,undefined;
 如果要用if做比較則比較后面要用雙引號(hào)引起來
*/
 if(typeof(param) == "object"){
 alert("該參數(shù)等于object類型");
 }else{
 alert("該參數(shù)不等于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本地存儲(chǔ)的值
sessionStorage.setItem(key,value)//將value存儲(chǔ)到key字段
sessionStorage.removeItem(key)//刪除指定key本地存儲(chǔ)的值
sessionStorage.length//sessionStorage的項(xiàng)目數(shù)

/*
sessionStorage與localStorage的異同:
 sessionStorage和localStorage就一個(gè)不同的地方，
 sessionStorage數(shù)據(jù)的存儲(chǔ)僅特定于某個(gè)會(huì)話中，
 也就是說數(shù)據(jù)只保持到瀏覽器關(guān)閉，當(dāng)瀏覽器關(guān)閉后重新打開這個(gè)頁面時(shí)，之前的存儲(chǔ)已經(jīng)被清除。
 而localStorage是一個(gè)持久化的存儲(chǔ)，它并不局限于會(huì)話

sessionStorage和localStorage的clear()函數(shù)的用于清空同源的本地存儲(chǔ)數(shù)據(jù):
 比如localStorage.clear()，它將刪除所有同源的本地存儲(chǔ)的localStorage數(shù)據(jù)，
 而對(duì)于SessionStorage，它只清空當(dāng)前會(huì)話存儲(chǔ)的數(shù)據(jù)。

sessionStorage和localStorage具有相同的方法storage事件:
 在存儲(chǔ)事件的處理函數(shù)中是不能取消這個(gè)存儲(chǔ)動(dòng)作的。
 存儲(chǔ)事件只是瀏覽器在數(shù)據(jù)變化發(fā)生之后給你的一個(gè)通知。
 當(dāng)setItem(),removeItem()或者clear() 方法被調(diào)用，
 并且數(shù)據(jù)真的發(fā)生了改變時(shí)，storage事件就會(huì)被觸發(fā)。
 注意這里的的條件是數(shù)據(jù)真的發(fā)生了變化。也就是說，
 如果當(dāng)前的存儲(chǔ)區(qū)域是空的，你再去調(diào)用clear()是不會(huì)觸發(fā)事件的。
 或者你通過setItem()來設(shè)置一個(gè)與現(xiàn)有值相同的值，事件也是不會(huì)觸發(fā)的。
 當(dāng)存儲(chǔ)區(qū)域發(fā)生改變時(shí)就會(huì)被觸發(fā)。
*/

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: