1.js对象
JavaScript
中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript
允许自定义对象。
JavaScript
提供多个内建对象,比如String
、Date
、Array
等等。 对象
只是带有属性
和方法
的特殊数据类型。
1)访问对象的属性
语法:objectName.propertyName
var message="Hello World!";
var x=message.length;
2)访问对象的方法
语法:objectName.methodName()
var message="Hello world!";
var x=message.toUpperCase();
3)创建 JavaScript 对象
方式1:
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
方式2:
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
方式3:使用对象构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var person1 = new person("Lee", "Loe", "blue");
为什么可以这样,因为函数就是对象。
2.JavaScript 类
JavaScript
是面向对象的语言(有人认为是基于面向对象语言,基于对象语言),但 JavaScript
不使用类。
我们可以使用面向对象的思想去使用。
在JavaScript
中,不会创建类
,也不会通过类
来创建对象
(就像在其他面向对象的语言中那样)。
JavaScript
基于 prototype
,而不是基于类
的。
eg:循环遍历对象的属性:
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
3.JavaScript Window - 浏览器对象模型
浏览器对象模型 (BOM
) 使 JavaScript
有能力与浏览器"对话"。
1)浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model (BOM))
由于现代浏览器已经(几乎)实现了 JavaScript
交互性方面的相同方法
和属性
,因此常被认为是BOM
的方法
和属性
。
2)Window 对象
所有浏览器都支持 window
对象。它表示浏览器窗口。
所有 JavaScript
全局对象、函数以及变量均自动成为 window
对象的成员。
全局变量是 window
对象的属性。
全局函数是 window
对象的方法。
甚至 HTML DOM
的 document
也是 window 对象
的属性之一:window.document.getElementById("header");
3)Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera
以及 Safari
:
window.innerHeight
- 浏览器窗口的内部高度
window.innerWidth
- 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5
:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript
方案(涵盖所有浏览器):
// 宽度
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
// 高度
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
其他 Window 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
4)JavaScript Window Screen
5)Window Location
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
Window Location Href
http://www.shouce.ren/api/view/a/872
Window Location Assign
window.location.assign("http://www.badidu.com"); // 跳转到百度
6)JavaScript Window History
Window History Back
window.history.back();
Window History Forward
window.history.forward();
7)JavaScript Window Navigator
window.navigator
对象包含有关访问者浏览器的信息。
*注意:来自navigator
对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
navigator
数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统
4.JavaScript 弹窗
可以在 JavaScript
中创建三种消息框:警告框、确认框、提示框。
window.alert("sometext"); // 警告框
window.confirm("sometext"); // 确认框
window.prompt("sometext","defaultvalue"); // 提示框
确认框:
var b = confirm("queding?");
if(b){
document.write("yes");
}else {
document.write("no");
}
5.计时事件
1)每隔一段时间执行函数
语法:setInterval("javascript function",milliseconds);
eg:
setInterval(function(){alert("Hello")},3000);
如何停止执行?
语法:window.clearInterval(intervalVariable)
var myVar=setInterval(function(){myTimer()},1000);
clearInterval(myVar);
2)setTimeout()
等待3秒,然后弹出 "Hello":
setTimeout(function(){alert("Hello")},3000);
myVar=setTimeout(function(){alert("Hello")},3000);
clearTimeout(myVar);
6.cookie
Cookies
用于存储 web
页面的用户信息。
1)什么是 Cookies?
Cookies 是一些数据, 存储于你电脑上的文本文件中。
当web
服务器向浏览器发送 web
页面时,在连接关闭后,服务端不会记录用户的信息。
Cookies
的作用就是用于解决 "如何记录客户端的用户信息"
:
2)使用 JavaScript 创建Cookie
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。
document.cookie="username=John Doe";
eg:document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT"
3)使用 JavaScript 读取 Cookie
var x = document.cookie;
4)使用 JavaScript 修改 Cookie
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
5)使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
6)设置 cookie 值的函数
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
7)获取cookie的值
var ca_arr = document.cookie.split(';');
7.javascript库
JavaScript
库 - jQuery、Prototype、MooTools
。
JavaScript
高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。
为了应对这些调整,许多的 JavaScript
(helper
) 库应运而生。
这些 JavaScript
库常被称为 JavaScript
框架。
所有这些框架都提供针对常见JavaScript
任务的函数,包括动画
、DOM
操作以及 Ajax
处理。
1)jQuery
它使用 CSS
选择器来访问和操作网页上的HTML
元素(DOM
对象)
jQuery
同时提供 companion UI
(用户界面)和插件
。
引用jQuery:
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
实例:
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
等价于:
function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);
主要的jQuery
函数是 $()
函数(jQuery
函数)。如果您向该函数传递 DOM
对象,它会返回 jQuery
对象,带有向其添加的 jQuery
功能。
当向 jQuery
传递DOM
对象时,jQuery
会返回以HTML DOM
对象包装的jQuery
对象。
$(document)
$(#id_01)
jQuery 函数会返回新的 jQuery 对象,其中的 ready() 是一个方法。
$(#document).ready()
由于在 JavaScript 中函数就是变量,因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。
$(#document).ready(checkCookies())
jQuery 允许链接(链式语法)。链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。
$("#id_05").attr("style", "color:#f00").html("我设置了style和内容");
2)Prototype
提供用于执行常见 web
任务的简单API
。
API
是应用程序编程接口(Application Programming Interface
)的缩写。它是包含属性和方法的库,用于操作 HTML DOM
。
引用 Prototype
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
3)MooTools
MooTools
也是一个框架,提供了可使常见的 JavaScript
编程更为简单的 API。
MooTools
也含有一些轻量级的效果和动画
函数。
使用框架:
决定为网页使用 JavaScript
框架之前,首先对框架进行测试是明智的,JavaScript 框架很容易进行测试,您无需在计算机上安装它们,同时也没有安装程序,只需从网页中引用一个库文件。