BOM & ajax

总结学习方法

  1. 不死记。而是靠熟练度增加记忆,实在忘记的查api,特别是css或者js方法
  2. 写代码的时候多想想,比如,用最简单的逻辑判断或者转换(像 a | 0, if(a.getAttribute) , a || b等等),以及更多兼容写法。
    3,不管多忙,每天积累一个 新 知识。拓宽新技术面。可以参考syy的总结。保证每天一篇
BOM
  1. close()== 点X
  2. 变量名不要使用关键字
    /* var bl;就是 window.bl; */
    不然会覆盖原来的,比如open,都是window的属性
  3. widow.close()//只能关掉自己
  4. window.open(url)
  • open_frame =window.open(url);//url未定义,会打开空白页。所以打开前先判断url
  • open_frame.document.write("asssdjd");//因为开了一个页面,所以能取到document
  • open_frame.close()//关掉刚才打开的页面
  • IE 下open_frame.document跨域不行,chrome都不允许。
  • 同域下子能拿到父的东西吗?window.opener.document, window.opener.btn_close.click()//click()是dom对象内置的方法,包含onclick,addListener等,也适用于frame。
    27ke 50min
  1. scrollTop
  • document.documentElement.scrollTop =2000 //ie
    document.body.scrollTop = 2000//chrome
    两者的运行结果是兼容的都是2000.
    也可以用兼容性写法 :
    document.documentElement.scrollTop = document.body.scrollTop = 2000
    var top ;top || 0 ; // top没有的话,用0运算 ; top | 0 ; //取整
    document.body.scrollTop.jpg
  1. 鼠标滚动事件


    onmousewheel.jpg
  2. H5匹配css3动画 window.requestAnimationFrame 代替setTimeout提高性能
    动画时间不宜长。较长的话,会出一系列问题,比如动画期间会有其他操作影响动画质量
animalTop.jpg

总结学习方法
1,不死记。而是靠熟练度增加记忆,实在忘记的查api,特别是css或者js方法
2,写代码的时候多想想,比如,用最简单的逻辑判断或者转换(像 a || 0, if

(a.getAttribute()) a || b等等),以及更多兼容写法。
3,不管多忙,每天积累一个 新 知识。拓宽新技术面。可以参考syy的总结。保证每天一

close()== 点X
变量名不要使用关键字/*
var bl;就是
window.bl;
*/
不然会覆盖原来的,比如open,都是window的属性
widow.close()//只能关掉自己
open_frame =window.open(url);//url未定义,会打开空白页。所以打开前先判断url
open_frame.document.write("asssdjd");//因为开了一个页面,所以能取到document
open_frame.close()//关掉刚才打开的页面
IE 下open_frame.document跨域不行,chrome都不允许。
同域下
子能拿到父的东西吗?window.opener.document
window.opener.btn_close.click()//click()是dom对象内置的方法,包含onclick,以及

addListener等
也适用于frame
27ke 50min

document.documentElement.scrollTop =2000 //ie
document.body.scrollTop = 2000 //chrome
两者的运行结果是兼容的都是2000.
也可以用兼容性写法
document.documentElement.scrollTop = document.body.scrollTop = 2000
var top ;top || 0 ; // top没有的话,用0运算 top | 0 ; //取整

H5匹配css3动画 window.requestAnimationFrame 代替setTimeout提高性能
动画时间不宜长。较长的话,会出一系列问题,比如动画期间会有其他操作影响动画

navigator

参考样例:提示浏览器版本更新
github/shy2850/xhcms_2014/blob/master/js/modules/
iealert/index.js

Screen 参考w3地址
.width
.height//分辨率

History
.back()/.forword()/.go()
.state()
.pushState()//会把历史记录里当前页面替换掉
.replaceState(null,'','')
像简书这样整站同步页面,每个页面都是新刷的。但是用AngularJS做的网站是单页页面,

想做到地址栏变化,就得做好地址栏映射,不停的.state()。
做好AngularJS的数据映射,可以让异步网页同步。地址栏跟数据真正做到同步,看起来跟

同步网页一样。实际上是单页网页。但是只考虑支持的浏览器。不支持IE。目前在手机上

用的比较多。
AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标

签、依赖注入、等

Location
.search//?... 参数。结束与#...

【github/shy2850/xhcms_2014/blob/master/js/modules/queryparam.js】
string.raplace(/name = val/,function(match,k,v){})

.hash//#... 索引某个id或name,就是锚点。[优先级是#后的再有有问号也叫hash.]
origin//域:协议+域名+端口,三者其一不一样就是跨域cross。顶级域名与二级域名也是

跨域,虽然可以补救(domain修改,前提是不用ajax),但是后遗症很多,比如发ajax请

求。
.pathname//目录 ,是href除去域origin、search、hash外的。一般由服务端来操作。
href = origin+pathname+serrch+hash
这些都是window对象【顶层对象,只有一个】的属性,都可以简写,略去window

XMLHttpRequest,文件传输类型,基于http请求的。
IE6是ActiveXObject,其他均内建XMLHttpRequest,
主代码

get:地址栏里显示所有的需要传递给后台的数据(search里),一个链接过去,都能看的

到。比如js,css,img等都是get请求过去的。
post:表单提交时或者如果有额外的数据,才用。

对服务器而言,参考f2e-server
request:浏览器发给服务端的数据
response:响应,服务端返给浏览器的数据,有type
responseText:取响应数据文本,然后JSON.parse()/JSON.stringify(),但是不兼容(IE8+

支持,IE7就没有内置JSON对象了)。
responseXML:取响应数据文本,若不是标准xml文档,返回null。
json: 格式本质是对象{}。Object是所有东西的基础对象。window、document都是自循环

对象:window.window.window....=window

标准的json对象格式的与js对象的差别【key,必须用引号,而且双引号。value,需是字面

量对象,显示对象,不能是复杂对象和正则对象。】
属性或者对象之间用逗号分隔,最后一个不能写逗号。】
校验网址
bjson.com
sojson.com

eval():把字符串当代码执行,同时用(),eval( '('+txt+')' );
IE7下,必须用window.JSON判断是否存在,而不能直接JSON。
IE6下没有console,只能alert.IE6没有XMLHttpRequest,是ActiveXObject
readyState的值:
get请求,2和3是同时的。
一般只对4做事情。13min

ajax,json与jsonp的差别
参考master/ajax.js,写框架模式的代码最锻炼算法。
jsonp,一般通过时间戳清除缓存。不像ajax-json可以设置cache
sc.on('load',function());//包括执行代码(回调函数)完毕
delete a;//删除全局callback变量
sc.remove();//把script标签也移除
jsonp回调函数的参数data就是后端文件里callback(data)里的data;
直接跨域:用文件系统访问就是。

math.random() * 1000 | 0//1000以内的随机数,0-999内的随机数

总之学习代码的时候,直接看样例。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,378评论 6 516
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,970评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,983评论 0 362
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,938评论 1 299
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,955评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,549评论 1 312
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,063评论 3 422
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,991评论 0 277
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,522评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,604评论 3 342
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,742评论 1 353
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,413评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,094评论 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,572评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,671评论 1 274
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,159评论 3 378
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,747评论 2 361

推荐阅读更多精彩内容

  • BOM 都有哪些内容 Windowalert, confirm, promptopen, opener, clos...
    云香水识阅读 447评论 0 4
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 892评论 0 0
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,777评论 0 8
  • **1.document.write(""); 输出语句 ****2.JS中的注释为// ****3.传统的HTM...
    reallychao阅读 1,718评论 1 40
  • 要是有人问我最后悔的事是什么,我肯定毫不犹豫的回答大学没有选择美术专业。在大学学设计,不仅累个半死,还不知道学到...
    Jesy思思阅读 289评论 2 7