JavaScript知识点归纳之简介

最新推荐文章于 2024-10-15 21:10:18 发布

Miss_LL

最新推荐文章于 2024-10-15 21:10:18 发布

阅读量491

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/Miss_LL/article/details/58162933

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文通过实例展示了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>