javascript基础(上)
来源:互联网 发布:大话设计模式 java 编辑:程序博客网 时间:2024/05/29 19:01
1.javaScript:
世界上最流行的脚本语言;属于web语言;
被设计为html页面增加交互性;
2.写入html输出:
<script type="text/javascript">
document.write("<h1>this is a javascript!</h1>");
document.write("<font size=4>this is a javascript!</font>");
</script>
不属于任何函数的语句,即加载即可执行;
只能在html输出中使用document.write();在文档加载后使用会覆盖整个页面;
3.onclick的四个框:
<head>
<title>javascript.html</title>
<script type="text/javascript">
//警告框
function text(){
alert("OFF");
}
//确认框
function textconfirm(){
alert(confirm("Del"));
}
//询问框
function textprompt(){
prompt("password","123654");
}
//双击框
function textdbl(){
alert("你双击了我!");
}
</script>
</head>
<body>
<input type="button" value="alert" onclick="text()"/>
<input type="button" value="Del" onclick="textconfirm()"/>
<input type="button" value="确认" onclick="textprompt()"/>
<input type="button" value="双击" ondblclick="textdbl()"/>
</body>
4.document属性获取:
<head>
<script>
function textimg(){
var textimg = document.getElementById("imgid");
alert(textimg.value);
alert(textimg.type);
alert(textimg.src);
// document.getElementById("imgid").value = "1234";
}
</script>
</head>
<body>
<input type="button" value="alert" onclick="text()"/><br/>
<input type="button" value="Del" onclick="textconfirm()"/><br/>
<input type="button" value="确认" onclick="textprompt()"/><br/>
<input type="button" value="双击" ondblclick="textdbl()"/><br/>
<input type="button" value="获取" onclick="email()"/>
<input type="text" id="mail"/>
<img src="u==0.jpg" width="200px" height="200px" border="2px" onclick="textimg()"/>
<input type="text" id="imgid">
</body>
5.单次点击更改页面图片
<head>
<script type="text/javascript">
function email(){
var email = document.getElementById("mail");
alert(email.id);
alert(email.src);
email.src = "img/hhh.png";
}
</script>
</head>
<body>
<input type="button" value="获取" onclick="email()"/>
<img src="img/hhh.png" style="width: 200px;height: 200px;" />
<img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>
</body>
6.反复点击按钮转换图片
<head>
<script type="text/javascript">
function email(){
var email = document.getElementById("mail");
if(email.src.match("1f.jpg")){
email.src = "img/hhh.png";
}else{
email.src = "img/1f.jpg";
}
}
</script>
</head>
<body>
<input type="button" value="获取" onclick="email()"/><br/>
<img src="img/hhh.png" style="width: 200px;height: 200px;" /><br/>
<img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>
</body>
7.点击图片转换图片
<head>
<script type="text/javascript">
function email(obj){
// var email = document.getElementById("mail");
if(obj.src == "http://pc-7thboy:8080/new009/img/1f.jpg"){
obj.src = "http://pc-7thboy:8080/new009/img/hhh.png";
}else{
obj.src = "http://pc-7thboy:8080/new009/img/1f.jpg";
}
}
</script>
</head>
<body>
<!--
<input type="button" value="获取" onclick="email()"/><br/>
-->
<img src="img/hhh.png" style="width: 200px;height: 200px;" onclick="email(this)"/><br/>
<img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>
</body>
- JavaScript基础(上)
- javascript基础(上)
- javascript基础篇--function类型(上)
- javascript基础之面向对象(上)
- HTML JavaScript 基础 (上)
- javaScript--02 CSS基础 上
- javaScript--04 JavaScript基础&DOM 上
- 06 JavaScript基础之--数组案例(上)
- 第2章 JavaScript语言基础(上)
- javaScript小结(上)
- javaScript 基础(未完)
- javascript基础(1)
- javascript基础(2)
- JavaScript基础(1)
- JavaScript 基础(2)
- JavaScript 基础(3)
- Javascript基础(一)
- JavaScript 基础(一)
- 手势检测
- 欢迎使用CSDN-markdown编辑器
- mysql导入/导出数据
- 循环队列
- mybaits错误解决:There is no getter for property named 'id' in class 'java.lang.String
- javascript基础(上)
- 表格
- 【unity3d学习笔记】场景间切换传递保存数据的方法
- 7.11-Python-语言及其应用-笔记-剖析Web--未完
- TOJ 3778.Sheldon's Friendship II
- matlab入门教程八 ----- 高等数学运算
- USACO 2.3 Longest Prefix 题解
- 机器学习/深度学习数据集(更新中,更新日期:2017-07-12)
- 软件测试之App测试点-基础安全测试