简单分享javascriptjquery实用demo

Posted 2020-08-15

前端追随的javascript、jquery

javascript判断H5页面离开

 1 function onbeforeunloadFn(){
 2     console.log(‘离开页面‘);
 3     //...code
 4 }
 5 function showOnbeforeunload(flags){
 6     if(flags){
 7         document.body.onbeforeunload = onbeforeunloadFn;
 8     }else{
 9         document.body.onbeforeunload = null;
10     }
11 }
12 $(function(){
13     showOnbeforeunload(true);
14 })

jq判断img标签图片地址是否已经加载完毕

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

iframe获取内容-和设置

1 if($(".ad_show iframe").size() > 0 ){
2     $(".ad_show iframe").attr("id","iframead");/*设置iframe的id*/
3     /*获取id为iframead的iframe的dom对象*/
4     var iframebox = document.getElementById("iframead").contentWindow;
5     /*设置兜底内容*/
6     iframebox.document.body.innerText = "1234";
7 }

javascript获取浏览器上一页的url

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

关于头疼的移动端点击冒泡事件

 1 <script>
 2 $(".class").live(‘tap‘,function(oEvent){
 3     e = window.event || oEvent;
 4     if(e.stopPropagation){
 5         e.stopPropagation();
 6     }else{
 7         e.cancelBubble = true;
 8     }
 9     e.preventDefault();
10 });
11 </script>
12 /*虽说tap事件可以阻止大部分冒泡事件，但是还是有一小部分移动端不吃你这套，那么有另外一个解决办法*/
13 /*将层级间的事件通过H5属性data-flag="true"来控制*/
14 <!--html-->
15 <div class="parentTap" data-flag="true">
16     <div class="childTap" data-flag="false">
17         <div class="childsTap" data-flag="false">
18             ....
19         </div>
20     </div>
21 </div>
22 <!--给父级parentTap绑定一个点击事件-->
23 <!--给子级childTap绑定一个点击事件-->
24 <!--给子孙级childsTap绑定一个点击事件-->
25 <script type="text/javascript">
26     var bindInit = function(className){
27         if($(className).size() > 0){
28             $(className).on(‘tap‘,function(oEvent){
29                 e = window.event || oEvent;if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}e.preventDefault();
30                 var flag = $(this).data(‘flag‘);
31                 if(flag){/*为true时允许点击进入事件*/
32                     /* code... */
33                 }
34             });
35         }
36     }
37     $(function(){
38         bindInit(‘.parentTap‘);
39         bindInit(‘.childTap‘);
40         bindInit(‘.childsTap‘);
41     });
42 </script>

简单倒计时功能

 1 <div class="newTime" data-end="2016-10-13 23:59:59" data-now="2016-10-13 03:59:59">
 2     <div class="t_d"></div>
 3     <div class="t_h"></div>
 4     <div class="t_m"></div>
 5     <div class="t_s"></div>
 6 </div>
 7     <script type="text/javascript">
 8         /*倒计时*/
 9         var timeDown = {
10             GetRTime: function (timeId,oldNowTime) {
11                 var tempTime;/*保存上一次时间*/
12                 if(oldNowTime){
13                     tempTime = new Date(oldNowTime.getTime() + 1000);/*如果有上一次时间则赋值*/
14                     /*console.log(tempTime);*/
15                 }
16                 var EndTime = new Date($("#" + timeId).data("end"));/*获取结束时间*/
17                 if (!tempTime) {
18                     if ($("#" + timeId).data("now") == "" || $("#" + timeId).data("now") == "null") {
19                         var NowTime = new Date();
20                     } else {
21                         var NowTime = new Date($("#" + timeId).data("now"));/*取开始时间*/
22                     }
23                 } else {
24                     var NowTime = tempTime;
25                 }
26                 if (EndTime.getTime() >= NowTime.getTime()) {/*判断时间*/
27                     var t = EndTime.getTime() - NowTime.getTime();/*得到结束时间减去开始时间的时间戳*/
28                     var d = Math.floor(t / 1000 / 60 / 60 / 24);/*日*/
29                     var h = Math.floor(t / 1000 / 60 / 60 % 24);/*时*/
30                     var m = Math.floor(t / 1000 / 60 % 60);/*分*/
31                     var s = Math.floor(t / 1000 % 60);/*秒*/
32                     /*将时间填入对应的html中*/
33                     $(".t_d", "#" + timeId).html((d > 9 ? ‘‘ : ‘0‘) + d);
34                     $(".t_h", "#" + timeId).html((h > 9 ? ‘‘ : ‘0‘) + h);
35                     $(".t_m", "#" + timeId).html((m > 9 ? ‘‘ : ‘0‘) + m);
36                     $(".t_s", "#" + timeId).html((s > 9 ? ‘‘ : ‘0‘) + s);
37                     tempTime = new Date(NowTime.getTime() + 1000);/*将开始时间+1秒*/
38                     setTimeout(function () {
39                         timeDown.GetRTime(timeId,NowTime);/*等待一秒后继续执行*/
40                     }, 1000);
41                 } else if (EndTime.getTime() == NowTime.getTime()) {/*当时间相等时要做处理的code*/
42                     $("#"+timeId).hide();
43                 }
44             }
45         }
46         var t=0;
47         if ($(".newTime").size() > 0) {
48             $(".newTime").each(function(){
49                 var timeId="timeOut"+t;
50                 $(this).attr("id",timeId);/*设置多个倒计时时指定唯一id*/
51                 t++;
52                 timeDown.GetRTime(timeId,null);/*开始调用*/
53             });
54         }
55     </script>

jQuery的节点操作

 1 jQuery.parent(expr) /*找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")*/
 2 
 3 jQuery.parents(expr) /*类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素*/
 4 
 5 jQuery.children(expr) /*返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点*/
 6 
 7 jQuery.contents() /*返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个*/
 8 
 9 /*
10     jQuery对象返回，children()则只会返回节点
11 
12     jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
13 
14     jQuery.prevAll()，返回所有之前的兄弟节点
15 
16     jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
17 
18     jQuery.nextAll()，返回所有之后的兄弟节点
19 
20     jQuery.siblings(),返回兄弟姐妹节点，不分前后
21 
22     jQuery.find(expr),跟jQuery.filter(expr)完全不一样。
23     jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，
24     而jQuery.find()的返回结果，不会有初始集合中的内容，
25     比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")
26 */

js中if判断语句中的in语法

 1 /*
 2 在js代码中
 3 通常的if判断语句会这样写:
 4 */
 5 if(1 == 1){
 6     alert("1等于1");
 7 }else{
 8     alert("1不等于1");
 9 }
10 /*而在in写法下可以这样:*/
11 if(1 in window){
12     alert("window包含1");
13 }else{
14     alert("window不包含1");
15 }

js的try-catch

 1 try{
 2     foo.bar();
 3 }catch(e){
 4     console.log(e.name + ":" + e.message);
 5 }
 6 try{
 7     throw new Error("Whoops!");
 8 }catch(e){
 9     console.log(e.name + ":" + e.message);
10 } 
11 /*
12 改js代码会捕获一个异常错误:
13     因为foo.bar();是未定义的;
14     因此在js代码中如果没有异常捕获,整个页面都不会继续解析.
15     从而导致页面加载失败.
16     这里就需要通过try-catch来异常捕获这种错误,并把他反馈出来
17 
18 目前我们可能得到的系统异常主要包含以下6种:
19     EvalError: raised when an error occurs executing code in eval()
20         翻译:当一个错误发生在eval()执行代码 
21     RangeError: raised when a numeric variable or parameter is outside of its valid range  
22         翻译:当一个数值变量或参数的有效范围之外
23     ReferenceError: raised when de-referencing an invalid reference 
24         翻译:引用无效的引用
25     SyntaxError: raised when a syntax error occurs while parsing code in eval()
26         翻译:语法错误,当发生语法错误在eval()解析代码里
27     TypeError: raised when a variable or parameter is not a valid type  
28         翻译:错误类型：当一个变量或参数不是一个有效的类型
29     URIError: raised when encodeURI() or decodeURI() are passed invalid parameters   
30         翻译:调用encodeURI()或decodeURI()时,传入的参数是不通过无效的
31 
32 以下是异常捕获是的属性:
33     Error具有下面一些主要属性：
34         description: 错误描述 (仅IE可用).  
35         fileName: 出错的文件名 (仅Mozilla可用).  
36         lineNumber: 出错的行数 (仅Mozilla可用).  
37         message: 错误信息 (在IE下同description)  
38         name: 错误类型.  
39         number: 错误代码 (仅IE可用).  
40         stack: 像Java中的Stack Trace一样的错误堆栈信息 (仅Mozilla可用).
41 */ 
42 /*
43     如要判断异常信息的类型，可在catch中进行判断：
44  */
45 
46 try {
47     coo.bar();//捕获异常,ReferenceError:引用无效的引用
48 }catch(e){
49     console.log(e instanceof EvalError);
50     console.log(e instanceof RangeError);
51     if(e instanceof EvalError){ 
52         console.log(e.name + ":" + e.message);
53     }else if(e instanceof RangeError){
54         console.log(e.name + ":" + e.message); 
55     }else if(e instanceof ReferenceError){
56         console.log(e.name + ":" + e.message); 
57     }
58 } 

js中typeof和instanceof区别

 1 /*先捕获异常,抛出异常*/
 2 try {
 3     throw new myBlur(); // 抛出当前对象 
 4 }catch(e){
 5     console.log(typeof(e.a)); //返回function类型
 6     if(e.a instanceof Function){//instanceof用于判断一个变量是否某个对象的实例,true
 7         console.log("是一个function方法");
 8         e.a();//执行这个方法,输出"失去焦点"
 9     }else{
10         console.log("不是一个function方法");
11     }
12 }
13 function myBlur(){
14     this.a = function(){
15         console.log("失去焦点");
16     };
17 }
18 
19 /*
20     通畅typeof一般只能返回如下几个结果:
21     number,boolean,string,function,object,undefined;
22     如果要用if做比较则比较后面要用双引号引起来
23 */
24     if(typeof(param) == "object"){
25         alert("该参数等于object类型");
26     }else{
27         alert("该参数不等于object类型");
28     }
29 
30 /*又如:*/
31 console.log(Object instanceof Object);//true
32 console.log(Function instanceof Function);//true 
33 console.log(Number instanceof Number);//false
34 console.log(String instanceof String);//false
35 console.log(Function instanceof Object);//true
36 console.log(Foo instanceof Function);//true
37 console.log(Foo instanceof Foo);//false

HTML5缓存sessionStorage

 1 sessionStorage.getItem(key)//获取指定key本地存储的值
 2 sessionStorage.setItem(key,value)//将value存储到key字段
 3 sessionStorage.removeItem(key)//删除指定key本地存储的值
 4 sessionStorage.length//sessionStorage的项目数
 5 
 6 /*
 7 sessionStorage与localStorage的异同:
 8     sessionStorage和localStorage就一个不同的地方，
 9     sessionStorage数据的存储仅特定于某个会话中，
10     也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前的存储已经被清除。
11     而localStorage是一个持久化的存储，它并不局限于会话
12 
13 sessionStorage和localStorage的clear()函数的用于清空同源的本地存储数据:
14     比如localStorage.clear()，它将删除所有同源的本地存储的localStorage数据，
15     而对于SessionStorage，它只清空当前会话存储的数据。
16 
17 sessionStorage和localStorage具有相同的方法storage事件:
18     在存储事件的处理函数中是不能取消这个存储动作的。
19     存储事件只是浏览器在数据变化发生之后给你的一个通知。
20     当setItem(),removeItem()或者clear() 方法被调用，
21     并且数据真的发生了改变时，storage事件就会被触发。
22     注意这里的的条件是数据真的发生了变化。也就是说，
23     如果当前的存储区域是空的，你再去调用clear()是不会触发事件的。
24     或者你通过setItem()来设置一个与现有值相同的值，事件也是不会触发的。
25     当存储区域发生改变时就会被触发。
26 */

以上内容仅供参考

编写者:Night 2016-10-20 11:15:01