数组1:arr.push(**)向数组中追加元素,可以添加任何类型的元素
实例
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; // arr.push(2,3,'aaa'); console.log(arr); alert('长度是'+arr.length); </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
数组2:删除最后一个元素,将删除的元素放在变量中res,alert显示为9,控制台输出剩余数组是1,2,3,4.
实例
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //从尾部弹出元素 var res = arr.pop(); alert(res); console.log(arr); </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
数组3:从数组中删除一个元素,并且数组里彻底删除这个元素。
实例
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //从开始位置删除元素 var res = arr.shift(); alert(res); console.log(arr); </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
数组4:反过来添加一个元素unshift,如下:
实例
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //从开始位置添加元素,abc是添加的元素 var res = arr.unshift('abc'); alert(res); console.log(arr); </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
数组5:从数组中删除一个特定位置的元素,index是删除元素在数组中的位置,也就是下标,从第几个开始删除,howmany是英文多少的意思,在这里就是要删除多少个,下面代码中的结果是删除了数组中3这个元素,从第三个开始删除,并且删除一个元素。
实例
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //arr.splice(index,howmany); var res = arr.splice(2,1); console.log(res); console.log(arr); </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
数组6:查询数组中是否有特定的某个元素,indexOf中,searchvalue代表寻找的元素或者说目标值,formindex代表从哪里开始寻找。下面代码中,由于数组中不存在元素5,所以返回-1.如果能够寻找到想要的元素,则返回这个元素的位置,也就是下标。
实例
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //arr.indexOf(searchvalue,formindex); var res = arr.indexOf(5,0); console.log(res); console.log(arr); </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
数组6:使用while循环遍历数组,i++不能缺少,否则会造成死循环。
实例
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,5,9]; var i=0; while(i<arr.length){ console.log(arr[i]); i++; } </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
事件1:鼠标滑进设置的div中,在控制台查看结果
实例
<html> <head> </head> <body> <div style="background: coral;height: 100px;width:100px;" onmouseover="over()"> </div> </body> <script> function over(){ console.log('鼠标滑进了'); } </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
事件2:鼠标划出div,控制台查看结果
实例
<html> <head> </head> <body> <div style="background: coral;height: 100px;width:100px;" onmouseout="out()"> </div> </body> <script> function out(){ console.log('鼠标滑出了'); } </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
事件3:onmouseover,onmouseout结合在一起后,查看控制台,一出一进都会触发效果,说明js可以在dom中添加事件。
实例
<html> <head> </head> <body> <div style="background: coral;height: 100px;width:100px;" onmouseleave ="leave()"; onmouseover="over()"> </div> </body> <script> function leave(){ console.log('鼠标滑出了'); } function over(){ console.log('鼠标滑进了'); } </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
事件4:检查事件,查看输入的内容是否符合规则
实例
<html> <head> </head> <body> <input type="text " placeholder="email" onblur="checks()"/><br><br> </div> </body> <script> function checks(){ alert('邮箱不合法'); } </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
事件5:change(),当一个内容发生变化时,另个元素也会根据这个元素而发生联动,同时变化。
代码中,改变一个元素时,触发一个alert,代表成功改变了。
实例
<html> <head> </head> <body> <select name="" id="" onchange="change()"> <option value="1">沈阳</option> <option value="2">北京</option> <option value="3">广州</option> </select> </div> </body> <script> function change(){ alert('value改变了'); } </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例