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的 ...
随机推荐
- DES 算法的 C++ 与 JAVA 互相加解密
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 【转】于request.getSession(true/false/null)的区别
http://blog.csdn.net/gaolinwu/article/details/7285783 关于request.getSession(true/false/null)的区别 一.需求原 ...
- COM编程VS实践
目录 1. 2. 2.1. 2.2. 2.3. 3. 3.1. 3.2. 3.3. 1.COM实践简介 因需要对Office系列进行程序操作,特研究了一下COM相关的编程. 个人体会:COM面向接口编 ...
- git reset and git checkout
git reset --hard <commit>: 1.替换引用的指向.引用指向新的提交ID; 2.替换暂存区.替换后,暂存区的内容和引用指向的文件夹树一致; 3.替换工作区.替换后,工 ...
- insert erase和replace的例子
9.43 编写一个函数,接受三个string参数s.oldVal和newVal.使用迭代器及insert和erase函数将s中所有oldval替换为newVal.测试程序,用它替换通用的简写形式,如, ...
- Gaussian Discriminant Analysis
如果在我们的分类问题中,输入特征$x$是连续型随机变量,高斯判别模型(Gaussian Discriminant Analysis,GDA)就可以派上用场了. 以二分类问题为例进行说明,模型建立如下: ...
- Vi、Vim及Gedit编辑器
搜索(注意,不需要输入:号.也可以先输入:号再键入命令) /string……………………向后搜索,从光标处向文件尾搜索,按n键继续搜索下一个 ?string……………………向前搜索 注意:搜索时会将所 ...
- Java 如何连接 SQL 2008 R2
前提: 1. 复制sqljdbc_auth.dll到C:\Windows\System32这个路径下. 2. 添加sqljdbc4.jar到Libraries里面. 代码示例: import java ...
- php面试常用算法
这些都是真实的IT公司招聘PHP程序员的面试题,这些都是简单的基本算法.包括:冒泡算法.快速排序算法.二分查找算法.顺序算法. 冒泡排序,对象可以是一个数组 01 function bubble_so ...
- Spring3之MVC
模式-视图-控制器(MVC)是UI设计中常见的设计模式, 该模式区分应用程序中的模式.视图和控制器三个角色,消除了业务逻辑与UI的耦合.模式负责封装视图展示的应用数据.视图应该只显示数据,不包含任何业 ...