[JS] JavaScript由浅入深(1) 基本特性
1.全局变量的特性:
在函数体内直接写的变量(未用var标志)自动升级为全局变量。
(function func() {
i = 100;
}());
alert(i);
非常不建议不写var.
var num = 1;
(function func() {
i = 100;
}());
delete i;
delete num;
if (typeof i != "undefined") alert(i);
if (typeof num != "undefined") alert(num);
2.DOM操作
a.什么是DOM(Document Object Model),文档对象模型。包括元素节点,文本节点,属性节点和注释节点。
b.DOM操作:
HTML:write(),innerHTML,innerText,getElementById()
CSS:
<div>text</div>
<script>
var e = document.getElementsByTagName('div')[0];
e.style.background = 'blue';
</script>
Event:事件有4种添加方式。
所有事件:事件
3.异常:
try {
throw 'exception happend';
} catch (e) {
alert(e);
}
4.类型:
JS中5种基本类型:string number boolean undefined null 和一个复杂类型:object
注意:
typeof null 是object。
因为null类型只有一个值null,null即代表一个类型,又代表一个空对象的指针。
因为undefined类型只有一个值undefined,undefined代表一个类型,又代表一个未定义的变量.
typeof Object 是function
Object Function String都是构造函数。(推荐以后构造函数名Pascal命名,方法Camel命名)
5.内置对象
JS中有7个Number String Date Array Boolean Math RegExp默认构造函数。通过new关键字,可以定义对应的对象。
注意:
prototype是用来向对象添加属性和方法。
constructor是指向函数本身的指针。
6.事件
事件流:
事件流是指在页面中接受事件的顺序。
事件冒泡指从最具体的节点到最不具体的节点,事件捕获和事件冒泡完全相反。
事件对象:
触发DOM事件时,会产生事件对象。
type:事件类型 target:相当于sender stopPropagation():阻止事件冒泡 preventDefault():阻止事件默认行为(如:a标签默认点击跳转事件)
添加事件:
addEventListener(事件名,函数,是否冒泡)
attachEvent(on事件名,函数)
on事件 = 函数
a.直接在html上
<div onclick="func()">text</div>
<script>
function func() {
//todo
}
</script>
b.DOM0级处理
<div >text</div>
<script>
var e = document.getElementsByTagName('div')[0];
e.onclick = func;
function func() {
//todo
}
</script>
c.DOM2级处理
<div >text</div>
<script>
var e = document.getElementsByTagName('div')[0];
e.addEventListener('click', func);
function func() {
//todo
}
</script>
d.IE8以下
<div >text</div>
<script>
var e = document.getElementsByTagName('div')[0];
a.attachEvent('onclick', func);
function func() {
//todo
}
</script>
7.BOM
BOM(BrowserObjectModel)浏览器对象模型。
包括:window,timing,history,location,screen
window:
window对象代表浏览器窗口。DOM节点属于window对象的一个属性。所有的全局变量自动成为window对象的一个属性。
timing:
<div>text</div>
<div>text</div>
<script>
setInterval(function () {
var e = getDivs()[0];
e.innerHTML = new Date().toLocaleString();
}, 500); setTimeout(function() {
var e = getDivs()[1];
e.innerHTML = new Date().toLocaleString();
}, 500); function getDivs() {
return document.getElementsByTagName('div');
}
</script>
8.DOM控制HTML:
增:document.createElement(tagName);
删:element.removeChild(element);
改:element.setAttribute(attrName, attrValue);
查:
document.getElementById(elementId); element.parentNode; element.childNodes;
document.getAttribute(attrName);
9.prototype(原型)
除了基本类型外,都有prototype属性。
prototype(包括原型链)中的属性会直接继承到对象上。
10.call和apply
当用call和apply调用方法时,方法中的this可以由我们指定。
function func(a, b) {
this.sum = a + b;
return this;
}
var o1 = {};
var o2 = {};
func.call(o1, 3, 5);
func.apply(o2, [3, 4]);
alert(o1.sum);
alert(o2.sum);
时间:
GMT(Greenwich Mean Time)——格林尼治标准时间,世界基准时间
UTC 这几个字母是英文Coordinated Universal Time 和法语Temp UniverselleCoordinee 的混合体。世界时。原子时。
[JS] JavaScript由浅入深(1) 基本特性的更多相关文章
- [JS] JavaScript由浅入深(2) 进阶
本节,将围绕以下几点来讲. 知识点:多线程.作用域.闭包.this 先顶后看 1.多线程 在不支持H5的浏览器中.使用Concurrent.Thread.js. 在支持H5中,使用WebWork. 在 ...
- Atitit.js模块化 atiImport 的新特性javascript import
Atitit.js模块化 atiImport 的新特性javascript import 1. 常见的js import规范amd ,cmd ,umd1 1.1. Require更多流行3 2. at ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- 运用javascript的成员访问特性来实现通用版的兼容所有浏览器的打开对话框功能
打开网页对话框,一般有三种方法:window.open.window.showModalDialog.window.showModelessDialog,每一种都有它的优点与不足.第一种方法:wind ...
- atitit.js 各版本 and 新特性跟浏览器支持报告
atitit.js 各版本 and 新特性跟浏览器支持报告 一个完整的JavaScript实现是由以下3个不同部分组成的 •核心(ECMAScript)--JavaScript的核心ECMAScrip ...
- Asm.js: Javascript的编译目标
正如许多开发者一样,我也为Asm.js的前景而感到兴奋不已.最近的新闻——Asm.js正 在被Firefox支持——引起了我的兴趣.同样感兴趣的还有Mozilla和Epic声明(mirror)他们已经 ...
- 理解Javascript的动态语言特性
原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...
- JavaScript面向对象的三大特性
1.JavaScript面向对象的三大特性 JavaScript的三大特性:封装性.继承性.多态性. 2.JavaScript实现封装特性 在一些静态类型的语言如java中,本身语法就提供了这些功能. ...
- js中对象的一些特性,JSON,scroll家族
一.js中对象的一些特性 对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值 获得对象的属性的方式 为元素设置DOM0级事件 二.JSO ...
随机推荐
- Drupal7_2:安装drupal
Drupal7_2:安装drupal 分类: Drupal72012-10-30 01:06 1074人阅读 评论(0) 收藏 举报 假设你已经搭建好了所需的必备环境,接下来就参照以下几步,快速安装一 ...
- 搞了个基于zookeeper的Leader/Follower切换Demo
基于zookeeper写了个Leader选举类库demo,场景如下: 上图中的Program1..4可以部署在1台server上,也可以部署在多台server上,也可以是一个进程中的多个线程. 运行效 ...
- jQuery中position()与offset()区别
使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点在于位置的相对点不同. 可以看看下边的图: ...
- 2015想做O2O?那就来看看O2O报告!
来源:互联网
- android studio svn不显示问题
今天更新android studio SDK 重启后发现SVN功能没有了,工具栏也没有了更新提交按钮,刚开始以后是SVN程序可以不行了(在我的电脑提交更新没问题)我在官网下了最新1.9.4 打开and ...
- 关于 c# 操作 world
把数据存放在datatable 中并循环取出来数据然后再保存在world中 protected void ExportToWord(DataSet Ads) { try { Object Nothin ...
- 推荐一个C#代码混淆器 .NET Reactor【转】
C#的代码辛苦写出来之后,一个反射工具,就可以完全显露出来. 当然,在做项目时,这个功能还不错.因为我就曾在一个项目上使用C#,没有进行任何混淆.结果在项目二年多之后,需要做一些调整,自己保存的源代码 ...
- 在Linux下用源码编译安装apache2
Linux下安装一个软件,最好去看下它的官方guide,apache2.4的安装安装guide 0. installation guide http://httpd.apache.org/docs/2 ...
- Web 技术人员需知的 Web 缓存知识(转)
最近的译文距今已有4年之久,原文有一定的更新.今天踩着前辈们的肩膀,再次把这篇文章翻译整理下.一来让自己对web缓存的理解更深刻些,二来让大家注意力稍稍转移下,不要整天HTML5, 面试题啊叨啊叨的~ ...
- Spring3系列9- Spring AOP——Advice
Spring3系列9- Spring AOP——Advice Spring AOP即Aspect-oriented programming,面向切面编程,是作为面向对象编程的一种补充,专门用于处理系统 ...