分享javascript、jquery实用代码段


Posted in Javascript onOctober 20, 2016

本文实例为大家简单分享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);
})

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

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

iframe获取内容-和设置

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

javascript获取浏览器上一页的url

/*返回上一次url,如果是新窗口则不能获取到*/
var beforeUrl = 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-->
<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('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时允许点击进入事件*/
   /* code... */
  }
  });
 }
 }
 $(function(){
 bindInit('.parentTap');
 bindInit('.childTap');
 bindInit('.childsTap');
 });
</script>

简单倒计时功能

<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 ? '' : '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);/*将开始时间+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>

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>,等同于$("p span")
*/

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

/*
在js代码中
通常的if判断语句会这样写:
*/
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代码会捕获一个异常错误:
 因为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); 
 }
}

js中typeof和instanceof区别

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

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()来设置一个与现有值相同的值,事件也是不会触发的。
 当存储区域发生改变时就会被触发。
*/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
js简单倒计时实现代码
Apr 30 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 #Javascript
纯JavaScript手写图片轮播代码
Oct 20 #Javascript
Zabbix添加Node.js监控的方法
Oct 20 #Javascript
Javascript实现图片懒加载插件的方法
Oct 20 #Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 #Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 #Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 #Javascript
You might like
学习php开源项目的源码指南
2014/12/21 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP 图片处理
2020/09/16 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现文件复制删除
2016/04/19 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
django中静态文件配置static的方法
2018/05/20 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python 反向输出字符串的方法
2018/07/16 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
建设幸福中国演讲稿
2014/09/11 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
保护动物的宣传语
2015/07/13 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python