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的内容:
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" οnclick="test2()"></input>
</div>
</div>
</body>
JS:
<script type="text/javascript">
function test2() {
var p = document.createElement("p");//创建一个dom节点p
var 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>
<div id="parent"><div id="son">测试:<input type="text"></input></br><input type="button" value="button" οnclick="test2()"></input></div><input type="button" value="移除测试节点" οnclick="test3()"/></div></body>JS:function test3() {var parent = document.getElementById("parent");//获取到div的父节点var son = document.getElementById("son");//获取到div的子节点parent.removeChild(son);}DOM节点修改CSS的样式
DOM节点修改CSS的样式
HTML: <p id="001p">我是男的</p> <input type="button" value="修改DOM节点的CSS样式" οnclick="test4()"/> JS: <script type="text/javascript"> function test4() { document.getElementById("001p").style.color="red"; } </script>