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

JavaScript的个人学习随手记(二)的更多相关文章

  1. javascript oop深入学习笔记(二)--javascript的函数

    一.概述: 函数是进行模块化程序设计的基础, javascript重的的函数不同于其他语言,每个函数都作为一个对象被维护和运行.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或则讲函数作为参 ...

  2. JavaScript的个人学习随手记(三)

    JavaScript Window - 浏览器对象模型 Window 对象 以下window对象时使用均可省略window 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaSc ...

  3. JavaScript的个人学习随手记(一)

    JavaScript 简介  要学习的人可以到W3School http://www.w3school.com.cn/b.asp JavaScript 是世界上最流行的编程语言. 这门语言可用于 HT ...

  4. JavaScript高级程序设计---学习笔记(二)

    面向对象程序设计1.属性类型.定义多属性.读取属性特性对象的属性在创建时都带有一些特征值,JavaScript通过这些特征值来定义它们的行为.这些特性是为了实现JavaScript引擎用的,因此不能直 ...

  5. JavaScript学习总结(二)数组和对象部分

    pt学习总结(二)数组和对象部分 2016-09-16    分类:WEB开发.编程开发.首页精华暂无人评论     来源:trigkit4 分享到:更多1 对象部分 Object类型 Object  ...

  6. javascript基础学习(十二)

    javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显 ...

  7. JavaScript学习总结(二)

    JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...

  8. Javascript 随机数函数 学习之二:产生服从正态分布随机数

    一.为什么需要服从正态分布的随机函数 一般我们经常使用的随机数函数 Math.random() 产生的是服从均匀分布的随机数,能够模拟等概率出现的情况,例如 扔一个骰子,1到6点的概率应该相等,但现实 ...

  9. 深入浅出的javascript的正则表达式学习教程

    深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...

随机推荐

  1. Javascript之一切皆为对象1

    在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScrip ...

  2. Expression Template(表达式模板,ET)

    1.前言 在前一篇文章自己实现简单的string类中提到在实现+操作符重载函数时,为了防止返回时生成的临时对象调用拷贝构造函数动态申请内存空间,使用了一个叫move的函数,它是C++0x新增的特性.既 ...

  3. kafka源码分析之二客户端分析

    客户端由两种:生产者和消费者 1. 生产者 先看一下生产者的构造方法: private KafkaProducer(ProducerConfig config, Serializer<K> ...

  4. WebGIS开源方案中空间数据的入库、编辑、发布的操作流程

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 本开源方案的构架是:geoserver(服务器)+tomca ...

  5. Android TextView中显示图片

    Android官方给我们提供的Html类下面的fromHtml方法 当你需要转换的HTML代码是带图片的,比如<IMG/>,那么你就需要使用到重载的第二个方法了,这个方法里面有个Image ...

  6. Delphi TListView刷新闪烁问题

    应用场景 TListView可以动态选择列并显示而且列宽度也要保存,加载数据ListView会出现N次闪烁 步骤一: 选择要显示列: 点击"确定"按钮,显示下图 步骤二: 界面会出 ...

  7. 关于jqGrig如何写自定义格式化函数将JSON数据的字符串转换为表格各个列的值

    首先介绍一下jqGrid是一个jQuery的一个表格框架,现在有一个需求就是将数据库表的数据拿出来显示出来,分别有id,name,details三个字段,其中难点就是details字段,它的数据是这样 ...

  8. SQL Server在哪里存放DMV的数据?

    我被反复问到的一个问题是,通过各个DMV和DMF返回的数据,SQL Server在哪里存放? 很多人认为这类数据会存放在像mater这样的系统数据库里.但事实并非如此.各个系统数据库(master和m ...

  9. Ionic2学习笔记(5):Provider

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html             Provider是一种为App提供数据源的方式, 举个 ...

  10. Nancy之Cache的简单使用

    一.前言 说起缓存,或许大家都不陌生,甚至是天天都在用!当然缓存也被分的越来越细,页面缓存.数据缓存.文件缓存等等. 其实呢,我个人觉得,主要还是两大类:数据的缓存和页面的缓存.数据缓存的话就包括所有 ...