JS学习2--精简有趣的JS_精简而有趣的js代码-CSDN博客

本文链接：https://blog.csdn.net/zinjin_woxin/article/details/46842755

本文深入探讨了JavaScript中的省略方法声明、省略方法名的方法、类的声明、for/in循环、正则表达式匹配以及数值判断等核心内容，通过实例展示了如何在网页交互中灵活运用这些特性。

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

1.省略方法声明的方法实现

<!-- 点击文字，实现文字的改变 -->
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
</body>
</html>

2.省略方法名的方法

<script>
//js可以给HTML DOM对象分配事件
document.getElementById("myBtn").onclick=function(){
    displayDate()
};
</script>

3.js的类的声明感觉和java还是蛮大的，不需要构造方法，本身就可以使用参数。从表面上看，就是方法中套方法
4.js的for/in循环好NB，可以循环对象的属性（感觉这是只有一种基本类型带来的方便），同时for/in也可以用来循环
5.神奇的match【element.src.match(“bulbon”)】

<!-- 控制灯亮 -->
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="/i/eg_bulboff.gif";
  }
else
  {
  element.src="/i/eg_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulbon.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>
</html>

6.isNaN(x)判断是否为数字

<!-- 判断一个数是否为数字 -->
<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script>w
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
    {
    alert("Not Numeric");
    }
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>