项目:gdlt_custom_number 总结收获和经验
2015-07-28 11:20
381 查看
不懂的知识点:
在上面有用到eval,网上说用类似JQuery.parseJSON(),链接如下
戳戳戳,eval与JQuery.parseJSON
顺便说说JSON.parse(),用于将一个字符串解析成json对象
var str = '{"name": "smalldragon","age":"23"}'; JSON.parse(str);
JSON.stringify()用于将一个对象解析成字符串
var a ={a:1;b:2}; JSON.stringify(a);
大部分不支持使用eval的原因有: 1、性能不好 2、不安全 3、产生混乱的代码逻辑
知识:
1.JQuery中find()函数和children()函数的区别。
一个是获取所有后代元素,一个是只获取子元素
2.事件必须在元素已经存在的时候绑定
例如,先在已存在元素上addClass("goto"),然后再在下面跟着写$(".goto").click(func);什么的
3. get 和 set 滚动轮高度
BackCompat: Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat: Standards-compliant mode is switched on. (Standards Mode)
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
总之像上面都设置上就可以了
3.如何在设置弹出窗口背景hidebg的高度?
在看了慕课网网站的源码发现,以前我们都是这样写的,然后设置hidebg为网页的最大高度,document.documentElement.clientHeight
这样hidebg就占据了整个屏幕,又学到一招
4.background-size: contain(背景图片包含在块内),cover(把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。),而且在实际应用中,发现,background-size:这行代码要写在background后面,否则无效,可能是后写background会把background中未设置的属性设为默认了,包括background-size,这就是简写合并CSS样式的规则,包括margin,padding,font这些可合并的属性
5.<!docype html>这一行文档说明非常重要,如果去掉,实际中写的代码在IE8~9样式完全改变
6.在检测时PC端还是mobile端用到的JS代码
7.使用左右轮播图时,虽说setTimeout()才是真正的每隔一段时间,但是也不知道为什么就是会出错,用了setInterval()就可以
第二点是可以在设置了一张图大小宽度的元素上使用hover事件,因为子元素就不会变化,就不用使用mouseenter和mouseleave事件了
8.取消绑定事件了怎么再次绑定,只能重新绑定一个事件
9.跨域要用jsonp,而且要访问的外域上的网址返回的是JSON才行,不是就是出错,而且在测试中JQuery的$.getJSON()会不进行下面的function,魂淡,原来在URL中callback前面是要&不是问号啊(更新,其实只是做个URL参数,写为第一个参数就为问号)
JS原生JSONP写法,获取的参数也必须是JSON数据:
10.JS控制按钮,防止频繁点击
①JS高程上写的函数节流方法
②别人博客上写的,通过变量来控制
11.有异步AJAX的函数是不能做判断的,
比如
原本以为是AJAX成功是这样的顺序:alert("4444")→alert("1111")→alert("2222");
但有异步AJAX的函数成功的顺序是这样的: alert("1111")→alert("2222")→alert("4444");
原因竟然是因为异步的时候checkPhone()在判断中默认是false,真的是醉了醉了,那还只能设为同步了(async:false)
12.这次移动端的网页是可以嵌入到联通的一个APP,要实现分享功能时,同事都说直接在浏览器上打开是分享不了的。于是,我们就在网页调用客户端的分享功能来实现,然后才发现原来嵌入在APP上的网页是可以获取客户端信息的。
代码如下:
项目链接:gdlt_custom_number
$.ajax({ type : 'POST', url : 'award.action', dataType : 'json', error : function() { alert('not connect'); //@todo3 }, success : function(result) { var json = eval("(" + result + ")"), msg = json[0].msg, prizeId = parseInt(json[0].prizeId); var angle = parseInt(json[0].angle); hidebg.style.height = 2835 + 'px'; $('#lotteryBtn').stopRotate(); rotateFunc(angle, prizeId); } });
在上面有用到eval,网上说用类似JQuery.parseJSON(),链接如下
戳戳戳,eval与JQuery.parseJSON
顺便说说JSON.parse(),用于将一个字符串解析成json对象
var str = '{"name": "smalldragon","age":"23"}'; JSON.parse(str);
JSON.stringify()用于将一个对象解析成字符串
var a ={a:1;b:2}; JSON.stringify(a);
大部分不支持使用eval的原因有: 1、性能不好 2、不安全 3、产生混乱的代码逻辑
知识:
1.JQuery中find()函数和children()函数的区别。
一个是获取所有后代元素,一个是只获取子元素
2.事件必须在元素已经存在的时候绑定
例如,先在已存在元素上addClass("goto"),然后再在下面跟着写$(".goto").click(func);什么的
3. get 和 set 滚动轮高度
function getScrollTop() { var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; return scrollTop; } function setScrollTop(scroll_top) { document.documentElement.scrollTop = scroll_top; window.pageYOffset = scroll_top; document.body.scrollTop = scroll_top; }理由是: 关于scrollTop的文章
BackCompat: Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat: Standards-compliant mode is switched on. (Standards Mode)
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
总之像上面都设置上就可以了
3.如何在设置弹出窗口背景hidebg的高度?
在看了慕课网网站的源码发现,以前我们都是这样写的,然后设置hidebg为网页的最大高度,document.documentElement.clientHeight
<div id="hidebg"></div> <div id="popUp"></div>但慕课网的html结构是下面这样的,把hidebg样式设为下面那样:
#hidebg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; }
这样hidebg就占据了整个屏幕,又学到一招
<div id="hidebg"> <div id="popUp"> </div> </div>
4.background-size: contain(背景图片包含在块内),cover(把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。),而且在实际应用中,发现,background-size:这行代码要写在background后面,否则无效,可能是后写background会把background中未设置的属性设为默认了,包括background-size,这就是简写合并CSS样式的规则,包括margin,padding,font这些可合并的属性
5.<!docype html>这一行文档说明非常重要,如果去掉,实际中写的代码在IE8~9样式完全改变
6.在检测时PC端还是mobile端用到的JS代码
<script type="text/javascript"> //平台、设备和操作系统 var system = { win: false, mac: false, xll: false, ipad:false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; //跳转语句,如果是手机访问就自动跳转到wap.baidu.com页面 if (system.win || system.mac || system.xll||system.ipad) { } else { window.location.href = "mgdlt.jsp"; } </script>
7.使用左右轮播图时,虽说setTimeout()才是真正的每隔一段时间,但是也不知道为什么就是会出错,用了setInterval()就可以
第二点是可以在设置了一张图大小宽度的元素上使用hover事件,因为子元素就不会变化,就不用使用mouseenter和mouseleave事件了
var interval = 3000; /*var timeoutId = setTimeout(function(){ clearTimeout(timeoutId); $(".right-arrow").click(); timeoutId = setTimeout(arguments.callee,interval); }, interval); $("#wrapper2").hover(function(){ console.log(1); clearTimeout(timeoutId); },function(){ console.log(2); timeoutId = setTimeout(function(){ clearTimeout(timeoutId); $(".right-arrow").click(); setTimeout(arguments.callee,interval); }, interval); </span>});*/ var timeoutId = setInterval(function(){ $(".right-arrow").click(); },interval); $("#wrapper2").hover(function(){ //console.log(1); clearInterval(timeoutId); },function(){ //console.log(2); timeoutId = setInterval(function(){ $(".right-arrow").click(); },interval); });
8.取消绑定事件了怎么再次绑定,只能重新绑定一个事件
9.跨域要用jsonp,而且要访问的外域上的网址返回的是JSON才行,不是就是出错,而且在测试中JQuery的$.getJSON()会不进行下面的function,魂淡,原来在URL中callback前面是要&不是问号啊(更新,其实只是做个URL参数,写为第一个参数就为问号)
/*var url = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836?callback=?"; $.getJSON(url, function(json){ for(var i in json){ alert(i + ":" + json[i]); } });*/ $.ajax({ type: "get", url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836", dataType: "jsonp", success: function(json){ for(var i in json){ alert(i + ":" + json[i]); } }, error: function(json){ for(var i in json){ alert(i + ":" + json[i]); } } });
JS原生JSONP写法,获取的参数也必须是JSON数据:
var obj = document.createElement("script"); function jsonpcallback(json) { for(var i in json){ alert(i + ":" + json[i]); } } obj.src = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13662443836&callback=jsonpcallback"; document.body.appendChild(obj);
10.JS控制按钮,防止频繁点击
①JS高程上写的函数节流方法
function throttle(method, context){ clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); }, 100);
②别人博客上写的,通过变量来控制
var clicktag = 0; $('.a_cc').click(function () { if (clicktag == 0) { clicktag = 1; $(this).addClass("a_bb"); alert('click触发了'); setTimeout(function () { clicktag = 0 }, 5000); } });
11.有异步AJAX的函数是不能做判断的,
比如
if(!checkPhone()){ alert("111"); } alert("2222"); $.ajax({ type : "POST", url : "http://localhost:8080/custom_number/checkPhone.action", dataType : 'json', data : {"phone":phone}, cache : false, async:true, error : function() { alert("3333");return false; }, success : function(result) { alert("4444"); return true; } });
原本以为是AJAX成功是这样的顺序:alert("4444")→alert("1111")→alert("2222");
但有异步AJAX的函数成功的顺序是这样的: alert("1111")→alert("2222")→alert("4444");
原因竟然是因为异步的时候checkPhone()在判断中默认是false,真的是醉了醉了,那还只能设为同步了(async:false)
12.这次移动端的网页是可以嵌入到联通的一个APP,要实现分享功能时,同事都说直接在浏览器上打开是分享不了的。于是,我们就在网页调用客户端的分享功能来实现,然后才发现原来嵌入在APP上的网页是可以获取客户端信息的。
代码如下:
function shareClient() { var mobileVersion = uautil.getversion(); //mobileVersion="3.2iphone"; if(mobileVersion.indexOf('3.2') != -1){ var shareJson = "{\"shareType\":\"url\",\"shareTitle\":\"私人定制靓号免费送!\",\"shareContent\":\"为你打造专属“密码”,不花1分钱,留住美好记忆!\",\"shareURL\":\"http://gdlt10010.iimedia.cn\",\"shareIconURL\":\"http://gdlt10010.iimedia.cn/img3/shareIconURL.jpg\"}"; if (mobileVersion.indexOf('iphone') != -1) { window.location = "clientAction={\"type\":\"share2\",\"url\":\"\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定制靓号免费送!\",\"shareJson\":" + shareJson +"}"; } else { js_invoke.interact("{\"type\":\"share2\",\"url\":\"\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定制靓号免费送!\",\"shareJson\":" + shareJson + "}"); } }else { if (mobileVersion.indexOf('iphone') != -1) { window.location = "clientAction={\"type\":\"share\",\"url\":\"gdlt10010.iimedia.cn\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定制靓号免费送!\"}"; } else { js_invoke.interact("{\"type\":\"share\",\"url\":\"http://gdlt10010.iimedia.cn/gdltapp.html\",\"shareList\":\"sinaweibo,tencentweibo,qzone,wechat,wechatmoments,email,shortmessage,qq\",\"msg\":\"私人定制靓号免费送!\"}"); } } } var uautil={ getuserAgent:function(){//获取客户端UA信息 return navigator.userAgent.toLowerCase(); }, getagent:function(){//获取客户端类型 var agent = uautil.getuserAgent(); if(/android/.test( agent )){ return 'android'; }else if(/iphone/.test( agent )){ return 'iphone'; }else{ return 'other'; } }, getversion: function(){ var versionStr = null; var agent = uautil.getagent(); var agent2 = navigator.userAgent.toLowerCase(); if(agent=='android'){ versionStr ac76 = agent2.match('unicom\\{version:([A-Za-z_]*@+[0-9]+.+[0-9]+),desmobile:[0-9]*\\}'); }else if(agent=='iphone'){ versionStr = agent2.match('unicom\\{version:([A-Za-z_]*@+[0-9]+.+[0-9]+)\\}'); } return versionStr!=null?versionStr[1]:''; } };
项目链接:gdlt_custom_number
相关文章推荐
- OOP-ECMAScript - 深入理解Javascript
- css display 总结
- javascript不能支持函数的重载
- 手写json
- jquery validate 扩展验证失败的回调方法
- February 29 容斥定理 求闰年个数
- seaJs学习笔记2 – seaJs组建库的使用
- HTML5基础 --- Canvas元素
- JSP中的include动态加载
- Swap Nodes in Pairs
- javascript_this的用法
- HTML5实现摇一摇
- js数组的操作
- CSS中background-position的使用
- CSS实现文字自动换行
- 初识HTML
- html的三种样式定义方式:外部样式表;内部样式表;内联样式表
- JSON.parse()和JSON.stringify()
- EXC_BREAKPOINT(code=EXC_ARM_BREAKPOINT,subcode=0xdefe)
- jquery获取select框的值、单选框的值、textarea的值、获取input框的值