前端追随的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
时间： 2024-10-10 00:12:30