JavaScript的基础

来源：互联网发布：山西省建筑业企业网络编辑：程序博客网时间：2024/06/08 03:31

JavaScript的基础

JS的引入方式：

内部和外部方式

内部引入：

<script type="text/javascript">alert("test");</script>

外部引入（src是外部文件的名字路径）：

<script type="text/javascript" src="test.js"></script>

JS的注释：

JS的注释和Java一模一样

JS的变量声明：

JS是弱脚本语言，需要使用var来定义变量

JS在网页中的输出

document.write("<h1>"+1212+"</h1>");

JS中的变量类型
数值类型，字符串类型，布尔类型，未定义变量（undefined），空变量（null）
JS中的运算符
和Java中的类似
JS的选择和循环语句
和Java类似
JS中的函数
用function定义
function 方法名
JS操作DOM节点（概念是W3School中摘取）
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。

所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

修改DOM的内容：

document.getElementById("001td").innerHTML="1111";

上面这个是修改固定标签中的内容，比如td，下面是修改input框中的值

document.getElementById("001input").value="22222";

增加DOM标签

网页：

<body><div id="parent"><div id="son">测试：<input type="text"></input></br><input type="button" value="button" onclick="test2()"></input></div></div></body>JS：<script type="text/javascript">function test2() {var p = document.createElement("p");//创建一个dom节点pvar text = document.createTextNode("这是测试文本信息");//创建一条测试信息p.appendChild(text);//将text信息添加到p后面var parent = document.getElementById("parent");//获取到div的父节点var son = document.getElementById("son");//获取到div的子节点//我们的目的是在parent节点和son节点中间添加一个p标签并显示信息，这个就是新增DOM节点的操作parent.insertBefore(p, son);//这个其实就印证了DOM节点是一个树，给这个父div节点又添加了一个子节点//parent.appendChild(p);//这个就是给父节点的div后面添加一个子节点p}</script>

移除DOM节点：

HTML：<body>
DOM节点修改CSS的样式
<div id="parent"><div id="son">测试：<input type="text"></input></br><input type="button" value="button" onclick="test2()"></input></div><input type="button" value="移除测试节点" onclick="test3()"/></div></body>JS:function test3() {var parent = document.getElementById("parent");//获取到div的父节点var son = document.getElementById("son");//获取到div的子节点parent.removeChild(son);}
DOM节点修改CSS的样式
HTML：<p id="001p">我是男的</p><input type="button" value="修改DOM节点的CSS样式" onclick="test4()"/>JS:<script type="text/javascript">function test4() {document.getElementById("001p").style.color="red";}</script>

阅读全文

0 0