JavaScript的个人学习随手记

Posted 2020-08-11

JS html DOM

 

改变 HTML 输出流

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

今天的日期是： Sat Sep 24 2016 15:06:50 GMT+0800 (中国标准时间)

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

 

document.write(Date());

 

 

改变 HTML 内容

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

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

document.getElementById(id).innerHTML=new HTML

 

如：

document.getElementById("p1").innerHTML="New text!";

 

改变 HTML 属性

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

document.getElementById(id).attribute=new value

 

 

JavaScript HTML DOM - 改变 CSS

改变 HTML 样式

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

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

 

例子 1

下面的例子会改变 <p> 元素的样式：

<p id="p2">Hello World!</p> 
<script>
document.getElementById("p2").style.color="blue";
</script>

 

 

JavaScript HTML DOM 事件

例子 1

在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

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

 

 

使用 HTML DOM 来分配事件

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

 

onload 和 onunload 事件

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

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

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

 

 

onchange 事件

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

 

onmousedown、onmouseup 以及 onclick 事件

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

 

JavaScript HTML DOM 元素（节点）

创建新的 HTML 元素

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

实例

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p></div> 
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node); 
var element=document.getElementById("div1");
element.appendChild(para);
</script>

 

 

从父元素中删除子元素：

parent.removeChild(child);

 

 

 

 

 

JavaScript Number 对象

JavaScript 只有一种数字类型。

可以使用也可以不使用小数点来书写数字。

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。

整数（不使用小数点或指数计数法）最多为 15 位。

小数的最大位数是 17，但是浮点运算并不总是 100% 准确

 

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

 

 

 

 

JavaScript 对象

JavaScript RegExp 对象

RegExp 对象用于规定在文本中检索的内容。

RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

可以规定字符串中的检索位置，以及要检索的字符类型，等等。

 

定义 RegExp

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。

RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

 

 

test() 方法检索字符串中的指定值。返回值是 true 或 false。

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

compile() 方法用于改变 RegExp。

 

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

例子：

var patt1=new RegExp("e"); 
document.write(patt1.test("The best things in life are free")); 
patt1.compile("d"); 
document.write(patt1.test("The best things in life are free"));

 

由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：

true false