js常用 - 简书

js常用

0.改变 HTML 内容

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

1.是否包含字符

element.src.match("bulbon")，作用意思是：检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串

<body>
    
<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
    
</body>

2、改变 HTML 样式

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

3.验证输入

<input id="demo" type="text">
<script>
function myFunction()
{
   var x=document.getElementById("demo").value;
   if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
       alert("不是数字");
   }
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

4.JavaScript 显示数据

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

5.字符串方法

image.png

6.typeof判断数据类型

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

undefined 和 null 的区别

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
任何变量都可以通过设置值为 undefined 来清空。类型为 undefined.

person = undefined;          // 值为 undefined, 类型是undefined

7.Date 方法

image.png

8.获取表单数据校验

<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
 alert("姓必须填写");
 return false;
 }
}
</script>

<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>

9.let、var、const修饰符

let 、var可以作全局和局部变量，但是let可以作为块级作用域。

var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10
------------------------------------------------------------------------------
let i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 5

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改
const定义常量与使用let 定义的变量相似：

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称
两者还有以下两点区别：

const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

10.json数据转换

JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。