JavaScript知识点归纳之简介

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Miss_LL/article/details/58162933

简介：

参照学习菜鸟教程上例子所做本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>