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】多睡/少睡一小时！冬夏令时全解析
多伦多2016年11月6日凌晨2点开始起时间调回一小时,时间到凌晨2点时自动跳回到1点,大家可以多睡一小时(或者多一小时写essay的时间)~ 多伦多2017年3月12日凌晨2点开始时间拨快一小时时间 ...
- c++中类长度解析
通常我们定义一个类,它所占的空间有多大呢? 首先我们看一下下面的这个类 class A{ public: void func1(void){ printf("11111heihei\n&qu ...
- Spring 3 MVC and JSON example
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- [React Fundamentals] Development Environment Setup
In this lesson we'll setup a simple build process for converting our ES6 React components into ES5 u ...
- Timus 1446. Sorting Hat 分类问题
At the start of each school year, a very important event happens at Hogwarts. Each of the first-year ...
- Abap 内表的语法
ABAP中的内表相当于其他程序设计语言中的二维数组,存储多行结构相同的数据 不同于二维数组,内表在创建后,列结构与列数是固定不变的,而行数是动态增长的 内表支持循环对每行数据进行操作,也支持整体操作 ...
- CodeMachine Debugger Extension DLL
http://www.codemachine.com/downloads.html http://www.codemachine.com/tool_cmkd.html#stack
- javascript 引擎Rhino源代码分析 浅析 实例函数对象及this
http://blog.csdn.net/liantian_wu/article/details/49797481
- com.code.servlet
package com.code.servlet; import java.io.IOException; import java.util.LinkedHashMap; import java.ut ...
- Android4.4 + WebAPI 实现拍照上传
网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后, ...