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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
js实现滑动进度条效果
Aug 21 Javascript
小程序实现tab标签页
Nov 16 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
php 生成饼图 三维饼图
2009/09/28 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
php给图片加文字水印
2015/07/31 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
django 修改server端口号的方法
2018/05/14 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python实现括号匹配的思路详解
2018/08/23 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
元旦联欢会主持词
2014/03/26 职场文书
学校对教师的评语
2014/04/28 职场文书
校庆活动策划方案
2014/06/05 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
教师节表彰会主持词
2015/07/06 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
Vue深入理解插槽slot的使用
2022/08/05 Vue.js