javascript基础08(js对象,BOM,库)

1.js对象
JavaScript中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript允许自定义对象。
JavaScript 提供多个内建对象,比如StringDateArray等等。 对象只是带有属性方法的特殊数据类型。

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 DOMdocument也是 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 框架很容易进行测试,您无需在计算机上安装它们,同时也没有安装程序,只需从网页中引用一个库文件。

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

推荐阅读更多精彩内容