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的 ...
随机推荐
- angular ui-route
http://www.cnblogs.com/freeliver54/p/4488141.html
- 【Stage3D学习笔记续】山寨Starling（一）：从事件说起
我在GitHub上新开了一个项目:https://github.com/hammerc/hammerc-study-Stage3D 山寨的Starling版本我取名叫做Scorpio2D,以后的笔记中 ...
- Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- CentOS6.2下安装eclipse
在eclipse官网下载eclipse的linux版本(此处省略下载过程),我下载的是eclipse-jee-indigo-SR2-linux-gtk.tar.gz,下面是安装过程: 1.sudo ...
- linux下Memcached安装以及PHP的调用
一:安装libevent 由于memcached安装时,需要使用libevent类库,所以先安装libevent 1.官网下载:http://libevent.org/ #wget https:/ ...
- 插头dp的几个模板
/* ural1519 求经过全部可行点的哈密顿回路的个数 括号匹配法,转移有点复杂,可是时间空间比較小 */ #include<cstdio> #include<cstring&g ...
- UVA 12627 - Erratic Expansion
一个红球能够分裂为3个红球和一个蓝球. 一个蓝球能够分裂为4个蓝球. 分裂过程下图所看到的: 设当前状态为k1.下一状态为k2. k1的第x行红球个数 * 2 ⇒ k2第2*x行的红球个数. k1的第 ...
- win8如何删除未知账户(s-1-5-21-2000478354-1390067357-725345543-1003）
今天突然发现从别处复制来的游戏压缩文件不能解压,并且以前把游戏文件都是放在该目录下的,以前局域网玩起游戏来老是不能作为主机,且不能下载局域网玩的RPG地图,以前就注意过这个未知账户(s-1-5-21- ...
- 使用 Docker 搭建 Java Web 运行环境
黄勇的博客 Docker 是 2014 年最为火爆的技术之一,几乎所有的程序员都听说过它.Docker 是一种“轻量级”容器技术,它几乎动摇了传统虚拟化技术的地位,现在国内外已经有越来越多的公司开始逐 ...
- [Effective C++ --024]若所有参数皆需类型转换，请为此采用non-member函数
引言 假设我们有这样的类: class A{ public: A(, ) {}; int num() const; int den() const; const A operator* (const ...