javascript函数应用和DOM
一、调用函数
例:
<html>
<head>
<title></title>
<script language="javascript" type="text/script">
function text() {
alert("该函数被调用了")；
}
</script>
</head>
<body>
<input type="button" value="点击此按钮" onclick="text()">
</body>
</html>
confirm消息对话框
自定义函数例子：
function text2(){
var sex=confirm("点击“确定”是男，点击“取消”是女")；
if(sex==true){
alert(你是男)；
}else{
alert(你是女)；
}
}
2.prompt消息对话框
自定义函数例子：
function text3(){
var chengji
chengji=prompt("请在此处输入你的成绩进行判断");
if(chengji>=90){
alert("你的成绩在90分线。");
}else if(chengji>=75){
alert("你的成绩在75分线");
}else if(chengji>=60){
alert("你的成绩刚刚及格")；
}else{
alert("你的成绩输入有误，或不及格。")；
}
}
3.打开新窗口(window.open)
自定义函数例子：
function text4(){
window.open('http://www.baidu.com','_blank','height="800",width="800",top="100",left="0"');
}
4.关闭窗口(window.close)
自定义函数例子：
function text5(){
window.close();
}
二、DOM
文档对象模型，定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
元素节点：一个元素视为一个节点，比如<html><body><p><h1>等等。
文本节点：向用户展示的内容，就是文本节点。
属性节点：元素属性，如<a>标签的链接属性。href=XXX。
比如：
<a href="http://www.baidu.com">百度一下</a>
上述代码中，<a>标签为元素节点。
href部分为属性节点。
“百度一下”四个字是文本节点。
三、通过ID获取元素。
基本语法：
document.getElementById("id名")
比如：
<p id="p1">你好</p>
-------------------------
var a=document.getElementById('p1'); //变量 a 获取了id为"p1"的p元素 。
document.write("结果"+a);
四、innerHTML属性
用以获取或替换HTML元素的内容。
基本语法:
object.innerHTML = "新内容";
比如：
<h1 id="h_javascript">你好</h1>
----------------------------------
var a=document.getElementById('h_javascript'); //变量 a 获取了id为"h_javascript"的h1元素。
a.innerHTML ="我不好"; //通过innerHTML更改了变量a的元素内容，从而更改了h1的元素内容。
五、改变HTML样式。
基本语法：
object.style.属性="属性值";
比如：
<h1 id="con">你好</h1>
-------------------------------
var a=document.getElementById("con");
a.style.color="red";
a.style.backgroundColor="#ccc";
a.style.width="300px";
六、显示和隐藏(display属性)
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
基本语法:
object.style.display=value
比如：
<p id="con">这是一段文字</p>
<input type="button" onclick="text1()" value="显示内容">
<input type="button" onclick="text2()" value="隐藏内容">
----------------------------------
function text1(){
var a=document.getElementById("con");
a.style.display = "block";
}
function text2(){
var a=document.getElementById("con");
a.style.display = "none";
}
七、控制类名(className)
作用：
获取元素的class属性
为网页内的某个元素指定一个CSS样式来更改该元素的外观
基本语法：
object.className= "XXX"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
</html>