js个人笔记
一、删除元素
<!DOCTYPE html>
<html>
<head>
<title>删除元素</title>
</head>
<body>
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
<li>中</li>
</ul>
<input type="button" value="点击删除最后一个li" onclick="d();">
<script type="text/javascript">
function d(){
var f = document.getElementsByTagName('li');
//var lis =
f[f.length-1].parentNode.removeChild(f[f.length-1]);
}
</script>
</body>
</html>
二、联动菜单
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head> <body>
<select name = "" id = "prov" onchange="ld();">
<option value = '-1'>请选择</option>
<option value = '0'>北京</option>
<option value = '1'>山西</option> </select>
<select name = "" id = "city" onchange=""> </select>
<script type="text/javascript"> var area = [['海淀','门头沟','大兴'],['太原','阳泉','晋城']];
function ld(){ var p = document.getElementById('prov');
//alert(p.value);
var opt = '';
if(p.value == '-1'){
document.getElementById('city').innerHTML = opt; }
for(i=0;i<area[p.value].length;i++){
opt = opt + "<option>"+area[p.value][i]+"</option>";
}
document.getElementById('city').innerHTML = opt; } </script> </body>
</html>>
三、计时器
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>定时器</h1>
<img src="./tp/0.gif">
<script type="text/javascript">
function bang(){
var ti = document.getElementsByTagName('input')[0];
var time = (parseInt(ti.value) - 1);
//console.log(time);
if(ti.value <=0){
document.getElementsByTagName('img')[0].src = "./tp/爱奇艺.png";
clearInterval(clock);
}
ti.value = time;
//document.getElementsByTagName('img')[0].src = "./tp/爱奇艺.png"; }
var clock = window.setInterval('bang()',1000);
//setTimeout </script>
<input type="button" name="time" value = "5">
</body>
</html>
四、获得交点和失去交点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" name="of" onfocus="f();" onblur="b();"><br><br>
<input type="text" name="of1"><br>
<script type="text/javascript">
function f(){
var f = document.getElementsByName('of')[0];
f.style.border = '1px solid red';
}
function b(){
var f = document.getElementsByName('of')[0];
f.style.border = '';
} </script> </body>
</html>
五、鼠标移至上方onmouseover
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red; }
</style>
<div onmouseover = 'ov();'></div>
<script type="text/javascript">
function ov(){
alert("huanyin"); } </script>
</body>
</html>
六、提交事件onsubmit
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function ti(){
console.log('nihao');
//alert("qingtianxie");
//alert(document.getElementsByName('user')[0].value);
if(document.getElementsByName('user')[0].value == ""){
alert("please write userid");
return false;
}else{
return true;
} } </script>
<form action = "onsubmit.html" onsubmit="return ti();">
<input type="text" name="user"><br>
<input type="text" name="pass"><br>
<input type="submit" name=""> </form> </body>
</html>
七、页面加载完成window.onload
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
window.onload = function ti(){
document.getElementsByTagName('p')[0].style.border = '1px solid blue';
} </script>
<body >
<p>
nihapo
</p>
</body>
</html>
八、事件对象（产生事件时产生的浏览器数据对象）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
img{
width: 130px;
height: 130px;
position: relative;
left: 0px;
top: 0px;
right: 0px;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.getElementsByTagName('img')[0].onmouseover = function(ev){
//alert(ev);
console.log(ev);
this.style.left = ev.pageX+50+'px';
this.style.top = ev.pageY+50+'px'; }
}
</script>
</head>
<body>
<img src="./tp/0.gif" /> </body>
</html>
九、增加节点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
<li>中</li>
</ul>
<input type="button" value="增加一个元素" onclick="creat();">
<script type="text/javascript">
function creat(){
var f = document.getElementsByTagName('ul')[0];
var s = document.createElement('li'); var txt = document.createTextNode('春天');
s.appendChild(txt);
f.appendChild(s); } </script>
</body>
十、利用事件委托的五子棋（实例化格子元素的父元素table，产生点击时的事件对象table.target中获取实际点击的对象）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
table{
width: 300px;
height: 300px;
border: 0;
border-collapse: collapse;
}
td{
border: 1px solid black;
background: green;
}
</style>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
/*var i = 0;
//alert(document.getElementsByTagName('td'));
while(i<document.getElementsByTagName('td').length){
document.getElementsByTagName('td')[i].onclick = function (){
this.style.background = 'black';
}
i++;
}*/
var sum = 0;
document.getElementsByTagName('table')[0].onclick = function (ev){
ev.target.style.background = sum++%2?'black':'white';
}
</script>
</body>
</html>
十一、正则验证邮箱exec方法
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>张飞</li>
<li>关羽<guanyu@qq.com></li>
<li>赵云</li>
<li>诸葛<zhuge@qq.com></li>
</ul>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
var i = 0; console.log(lis[1].innerHTML);
while(i<lis.length){
var patt = /\w+@\w+(\.\w+)+/;
//alert('1');
if(patt.exec(lis[i].innerHTML) == null){
//alert('2');
lis[i].style.background = 'blue'; }i++;
}
//var txt = lis[i].innerHTML; </script>
</body>
</html>
暂时就这么多。
js个人笔记的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- js读书笔记
js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- JS面向对象笔记二
菜单导航,<JS面向对象笔记一>, 参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
随机推荐
- 【每天一个Linux命令】10. 用户账号的新建/修改/删除以及密码修改 useradd/usemod/userdel/passwd
在 Linux 系统中,与用户管理有关的文件主要有如下几个:分别是/etc/passwd,/etc/shadow,/etc/gfoup,/etc/gshadow .它们分别与用户的账号,密码,用户组及 ...
- Java数组的内存管理
Java数组的内存管理 Java语言是典型的静态语言,因此Java的数组是静态的,即当数组被初始化之后,该数组的长度是不可变的.Java程序中的数组必须经初始化才能使用.所谓初始化,就是当数组对象的元 ...
- 【Stage3D学习笔记续】真正的3D世界（二）：显示模型
虽然我们进入真3D世界了,但是上一章的Demo仍然是显示的一个平面,尽管我们的平面在3D空间中旋转可以看出一点3D透视的效果,但是既然是真3D,就要拿出点3D的样子来! 如果要显示3D模型,我们就要告 ...
- openssl enc 加解密
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- Codeforces Round #319 (Div. 1) C. Points on Plane 分块
C. Points on Plane Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/576/pro ...
- 推荐一个国外的vps
也是我遇到过的最廉价的国外的vps,稳定性还不错,用到如今没问题.唯一的缺点就是适合大的企业型的vps卖完了.... ..中文服务,中文界面. 能够用来FQ啊神马的. http://www.hi-vp ...
- [Practical Git] Switching between current branch and last checkout branch
When working on a project, it is much easier to work on features and bugs in isolation of the rest o ...
- springMVC整合xStream
一. 简单介绍: xStream能够轻易的将Java对象转换成xml.JSON.本篇博客将使用springMVC整合利用xStream转换xml. 关于xStream使用的博文:http://blog ...
- java基础复习之对于String对象，能够使用“=”赋值，也能够使用newkeyword赋值，两种方式有什么差别？
String类型是实际工作中经经常使用到的类型,从数据类型上划分,String是一个引用类型,是API中定义的一个类.所以String类型的对象能够用new创建,比如String name=new S ...
- [015]staic成员及staic成员函数
C++primer里面讲过:static成员它不像普通的数据成员,static数据成员独立于该类的任意对象而存在,每个static数据成员是与类关联的对象,并不与该类的对象相关联!这句话可能比较拗口, ...