JavaScript总结之一

最新推荐文章于 2024-09-23 17:12:42 发布

yemyself

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量340

点赞数 1

分类专栏： javascript 文章标签： dom html dom html css javascript

本文链接：https://blog.csdn.net/yemyself/article/details/49445821

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一部JavaScript教程

！！！注意：省略号(。。。。。。)为不重要的或太过简单

Javascript组成部分=ECMAScript+BOM+DOM

BOM=Window+Navigator+Screen+History+Location

DOM=DOM核心+DOM CSS +DOM XML + HTML DOM

DOM:JavaScript将HTML页面解析为文档(就是通过document对象)

一、JS教程

。。。。。。。。。。。。。。。。。。。。。。

JavaScript 是属于网络的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 是因特网上最流行的脚本语言。

JavaScript 很容易使用！你一定会喜欢它的！

二、JS HTML DOM

2.1、DOM简介

通过 HTML DOM，可访问 JavaScriptHTML 文档的所有元素。

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

2.2、DOMHTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

2.2.1、改变HTML输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是：Thu Aug 27 16:34:53 2015

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

eg：

document.write(Date());

</script>

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。就是在页面一加载完才执行

2.2.2、改变HTML内容

修改 HTML 内容的最简单的方法时使用innerHTML 属性。

eg：

<body>

<h1 id="header">Old Header</h1>

var element= document.getElementById("header");

element.innerHTML = "New Header";

</script>

</body>

例子解释：

上面的 HTML 文档含有 id="header" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)

2.2.3、改变HTML属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

eg：

<body>

document.getElementById("image").src = "landscape.jpg";

</script>

</body>

例子解释：

上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

DOM HTML总结：document.write();innerHTML;src;获得element后直接.点属性值修改

2.3、DOMCSS--参考HTMLDOM Style 对象参考手册

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=newstyle

eg1:

<body>

Hello World!

</p>

document.getElementById("p2").style.color = "blue";

</script>

</body>

eg2:

显示与隐藏

<body>

这是一段文本。

</p>

</body>

总结：更多详情请参考HTML DOM Style对象

Style对象代表一个单独的样式声明。可从应用样式的文档或元素访问Style对象。

2.4、DOM事件--参考HTML DOM Event 对象参考手册

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

2.4.1、对事件做出反映

eg：

当点击文字时，发生改变

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

还可以这样：

Eg2：

function changetext(thiss){

thiss.innerHTML = "谢谢!";

}

</script>

</head>

<body>

<h1 onclick="changetext(this)">请点击该文本</h1>

</body>

2.4.1、HTML事件属性，来分配事件

如需向 HTML 元素分配事件，您可以使用事件属性。

实例

向 button 元素分配 onclick 事件：

<buttonοnclick="displayDate()">点击这里</button>

2.4.2、使用HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

Eg:

<body>

<p>

点击按钮就可以执行<em>displayDate()</em>函数。

</p>

document.getElementById("myBtn").onclick = function(){

displayDate()

};

function displayDate(){

document.getElementById("demo").innerHTML = Date();

}

</script>

</body>

2.4.4、onload和onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

eg：

function checkCookies(){

if (navigator.cookieEnabled == true) {

alert("已启用 cookie")

}

else {

alert("未启用 cookie")

}

</script>

<p>

提示框会告诉你，浏览器是否已启用 cookie。

</p>

</body>

2.4.5、onchange事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

eg：

function myFunction(){

var x= document.getElementById("fname");

x.value = x.value.toUpperCase();

}

</script>

</head>

<body>

输入英文字符：

<p>

当您离开输入字段时，会触发将输入文本转换为大写的函数。

</p>

</body>

2.4.6、onmouseover和onmouseout事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

2.4.7、onmousedown、onmouseup以及onclick事件

onmousedown,onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

总结：如需所有 HTML DOM 事件的完整列表，请参阅 W3School 提供的 HTML DOM Event 对象参考手册。

2.5、DOM 节点—参考HTML DOM教程

2.5.1、创建新的HTML元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

eg：

<body>

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

var para= document.createElement("p");

var node= document.createTextNode("这是新段落。");

para.appendChild(node);

var element= document.getElementById("div1");

element.appendChild(para);

</script>

Jquery直接实现：

$("#div1").append("<p id='p1'>这是新段落。 </p>");

</body>

代码详解：

2.5.2、删除已有的HTML元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

eg：

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

var parent = document.getElementById("div1");

var child = document.getElementById("p1");

parent.removeChild(child);

</script>

注意：一定要用父元素删除子元素。如果找不到父元素，可以使用parentNode找到父元素在删除。如：

varchild = document.getElementById("p2");

document.getElementById("p2").parentNode.removeChild(child);

如果您希望学到更多有关使用 JavaScript 访问 HTMLDOM 的知识，请访问我们完整的 HTML DOM 教程。

HTML DOM 教程---主要内容：

在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：

如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素

三、JS对象---参考《js参考手册--js对象》

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。省略了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

Js对象包括

js对象、

js数字、

js字符串、

js日期、

js数组、

js逻辑、

js算数、

js正则表达式

四、JS Window

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

4.1、JSWindow

4.1.1、Window 对象

所有浏览器都支持window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、全局函数以及全局变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

4.1.2、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;

4.1.3、其他 Window 方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

4.2、JSScreen 。。。。。

window.screen 对象包含有关用户屏幕的信息。

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

4.3、JSLocation 。。。。。

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

4.4、JS History 。。。。。

4.5、JS Navigator 。。。。。

4.6、JS PopupAlert 。。。。。

4.7、JS Timing 。。。。。

4.3、JS Cookies 。。。。。

五、JS库

JavaScript 库 - jQuery、Prototype、MooTools。

所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。

六、JS 实例和测验

6.1、JS实例

基础 JavaScript 实例

JavaScript 语句、注释和代码块

JavaScript 变量

JavaScript 条件语句 If ... Else

JavaScript 消息框

JavaScript 函数

JavaScript 循环

JavaScript 错误处理

高级 JavaScript 实例

6.2、JS对象实例

JavaScript String（字符串）对象实例----参阅：JavaScript String 对象参考手册。

JavaScript Date（日期）对象实例----参阅：JavaScript Date 对象参考手册。

JavaScript Array（数组）实例----参阅：JavaScript Array 对象的参考手册。

JavaScript Boolean（布尔）对象实例---参阅：JavaScript Boolean 对象的参考手册。

JavaScript Math（算数对象）实例------参阅：JavaScript Math 对象的参考手册。

七、JS参考手册

7.1、JavaScript对象--另起篇幅-----见JavaScript 参考手册-

7.2、HTMLDOM对象--另起篇幅-----

八、JS课外书

8.1、JS高级教程--另起篇幅------

yemyself

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录