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的 ...
随机推荐
- UVA 299 (13.07.30)
Train Swapping At an old railway station, you may still encounter one of the lastremaining ``train ...
- ulua学习笔记（二）：官方资料及问题解决方案
uLua&SimpleFramework入门视频教程网盘地址 视频教程地址 http://pan.baidu.com/s/1gd8fG4N游戏框架地址 https://github.com/j ...
- 剑指OFFER之树的子结构（九度OJ1520）
题目描述: 输入两颗二叉树A,B,判断B是不是A的子结构. 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入的第一行一个整数n,m(1<=n<=1000,1< ...
- UVA 705 Slash Maze
Slash Maze By filling a rectangle with slashes (/) and backslashes ( ), you can generate nice litt ...
- p2p項目”復活“之想
http://blog.csdn.net/christopherwu/article/details/23976503 原來以為p2p項目就要夭折,墮入絕望無奈的深淵之時,與多位朋友的交流,抬頭看見了 ...
- Gearman + Nodejs + MySQL UDF异步实现 MySQL 到 Redis 的数据同步
[TOC] 1, 环境 CentOS, MySQL, Redis, Nodejs 2, Redis简介 Redis是一个开源的K-V内存数据库,它的key可以是string/set/hash/list ...
- ConvertHelper与泛型集合
在机房重构时.我们常常会用到ConvertHelper. 它把从数据库中查询到的dateTable(也是一个暂时表)转化为泛型,然后再填充到DataGridView控件中. ConvertHelper ...
- php验证字符串长度问题
C:\Users\Administrator>php -r "echo strlen('你好')";4C:\Users\Administrator>php -r &qu ...
- Ubuntu10.04下载并编译Android4.3源代码
注:转载或引用请标明出处 http://blog.csdn.net/luzhenrong45/article/details/9719433 去年用Ubuntu10.10成功下载并编译Andro ...
- Java设计模式07：常用设计模式之装饰器模式（结构型模式）
1. Java之装饰器模式(Decorator Pattern) (1)概述: 装饰模式在Java种使用也很广泛,比如我们在重新定义按钮.对话框等时候,实际上已经在使用装饰模式了.在不必改变原 ...