Teilen Sie praktische Codefragmente für Javascript und JQuery

Das Beispiel in diesem Artikel dient lediglich dazu, eine praktische Demo von Javascript und JQuery als Referenz zu teilen. Der spezifische Inhalt ist wie folgt

Javascript bestimmt, ob die H5-Seite verlassen wurde

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

jq ermittelt, ob die IMG-Tag-Bildadresse geladen wurde

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

Javascript ruft die URL der vorherigen Seite im Browser ab

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

Über die Kopfschmerzen des mobilen Terminals Klicken Sie auf das Bubbling-Ereignis

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

Einfache Countdown-Funktion

<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>

jQuery-Knotenbetrieb

<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>

Die in-Syntax in der if-Urteilsanweisung in js

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

>

try-catch in js

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

Der Unterschied zwischen Typ und Instanz von in js

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

HTML5-Cache-Sitzungsspeicher

/*先捕获异常,抛出异常*/
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