JavaScript知识点归纳之简介

本文通过实例展示了JavaScript在网页中实现直接输出、响应事件、修改内容、切换图片、改变样式及验证输入等常见操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介:

参照学习菜鸟教程上例子所做本JavaScript知识点归纳之XXX。

1.JavaScript直接写入HTML输出流:

<script>
	document.write("<h1>这是由JavaScript写入的语句</h1>");
</script>

2.JavaScript对事件作出反应

<button type="button" onclick="alert('欢迎来到JavaScript世界')">点击有惊喜</button>

3.javascript能够改变HTML原定元素内容

<p id="demo">我是一串文字君</p>
<button type="button" onclick="fontShow();">点击改变文字</button>

<script>
function fontShow(){
fonts=document.getElementById("demo");//找到元素
fonts.innerHTML="我是改变了的文字";//改变内容
}
</script>

4.JavaScript改变HTML图像

<img id="myImage" onclick="changeImage()" src="img/pic_off" width="100" height="100">
<script>
function changeImage(){
element = document.getElementById("myImage");//获取图片id
if(element.src.math("on")){
element.src="img/pic_off)";
}else{
element.src="img/pic_on";
}
}
</script>

http://www.runoob.com/try/try.php?filename=tryjs_lightbulb这个在菜鸟教程上有例子的效果

5.javascript能够改变HTML元素样式

<p id="demo">我的将要改变样式的文字</p>
<button type="button" onclick="changeFont()">点击改变文字样式</button>
<script>
function changeFont(){
fonts=document.getElementById("demo");//找到元素
fonts.style.color="red";//改变颜色
}
</script>

6.javascript验证输入

<p>如果不是数字,浏览器会弹出提示框</p>
<input id="demo" typ="text">
<button type="button" onclick="number()">点击判断是否为数字</button>
<script>
function number(){
var number = document.getElementById("demo").value;
if(number==""||isNaN(number)){
alert("不是数字");
}
}
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值