Pro JavaScript Techniques学习笔记


Posted in Javascript onDecember 28, 2010

全局变量是Window对象属性的一部分,例子:

var test = 'test'; 
alert(window.test);

浏览器渲染和操作HTML的大致顺序:

HTML解析完毕
外部脚本和样式表加载完毕
脚本在文档内解析并执行
HTML DOM完全构造起来
图片和外部内容加载
网页完成加载
所有的主流浏览器都实现了innerHTML属性,但是因为没有统一标准,所以或多或少会有一些怪异的bug。

基于Mozilla的浏览器在innerHTML声明中并不回会返回<style>元素;
IE返回的元素字符都是大写的;
innerHTML作为一个只能用在HTML DOM文档的元素中的属性,若在XML DOM文档中使用的话只会返回null值。
检查元素是否有用一个指定的属性:

function hasAttribute(elem, name) { 
return elem.getAttribute(name) != null; 
};

JavaScript事件在两个阶段中执行:捕获和冒泡。

GET请求不应具有破坏性的副作用(比如删除一条消息)。

点击、鼠标悬停和鼠标离开事件的任何场合下,都要考虑提供非鼠标绑定的可选事件。

onmouseout ?> onblur 
onmousedown ?> onkeydown 
onmouseup ?> onkeyup 
onclick ?> onkeypress 
onmouseover ?> onfocus

eg.
var ax = document.getElementsByTagName('a'); 
for (var i = 0; i < ax.length; i++) { 
ax[i].onmouseover = ax[i].onfocus = function(){ 
this.style.backgroundColor = 'blue'; 
}; 
ax[i].onmouseout = ax[i].onblur = function(){ 
this.style.backgroundColor = 'white'; 
}; 
};

静态定位:这是元素定位的默认方式,它简单地遵循文档的普通流动(flow)。当元素是静态定位时,top和left属性无效。

position:static;top:0px;left:0px;
相对定位:这种定位形式与静态定位非常相似,因为元素会继续遵循文档的普通流动,除非受到其他指定的影响。但是,设置top或者left属性会引起元素相对于它的原始(静态)位置进行偏移。

position:relative;top:-50px;left:50px;
绝对定位:绝对定位的元素完全跳出页面布局的普通流动,它会相对于它的第一个非静态定位的祖先元素而展示。如果没有这样的祖先元素,则相对于整个文档。

position:absolute;top:20px;left:0px;
固定定位:固定定位把元素相对于浏览器窗口而定位。设置元素的top和left为0会使它显示在浏览器左上角,它完全忽略浏览器滚动条的拖动,一直会出现在用户的视野。

position:fixed;top:20px;left:0px;
开发预留退路(degrading gracefully):为页面增加任何形式的动态交互都有疏远某部分用户的潜在可能。应该时刻在意的是,当JavaScript或者CSS禁用的时候,Web应用程序应该具备基最基本可用性。

Javascript 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
前端面试知识点目录一览
Apr 15 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 #Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 #Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 #Javascript
javascript写的日历类(基于pj)
Dec 28 #Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 #Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 #Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 #Javascript
You might like
Protoss热键控制
2020/03/14 星际争霸
PHP实现的封装验证码类详解
2013/06/18 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP反射基础知识回顾
2020/09/10 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python中针对函数处理的特殊方法
2014/03/06 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python类的继承和多态代码详解
2017/12/27 Python
python实现名片管理系统
2018/11/29 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
教育科学研究生自荐信
2013/10/09 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
2019教师的学习计划
2019/06/25 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang