一、删除元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>删除元素</title>
  5. </head>
  6. <body>
  7.     <ul>
  8.         <li>春</li>
  9.         <li>夏</li>
  10.         <li>秋</li>
  11.         <li>冬</li>
  12.         <li>中</li>
  13.     </ul>
  14. <input type="button" value="点击删除最后一个li" onclick="d();">
  15. <script type="text/javascript">
  16.     function d(){
  17.         var f = document.getElementsByTagName('li');
  18.         //var lis =
  19.         f[f.length-1].parentNode.removeChild(f[f.length-1]);
  20. }
  21. </script>
  22. </body>
  23. </html>

二、联动菜单

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>
  5.  
  6.     </title>
  7. </head>
  8.  
  9. <body>
  10.         <select name = "" id = "prov" onchange="ld();">
  11.         <option value = '-1'>请选择</option>
  12.         <option value = '0'>北京</option>
  13.         <option value = '1'>山西</option>    
  14.  
  15.         </select>
  16.         <select name = "" id = "city" onchange="">
  17.  
  18.         </select>
  19. <script type="text/javascript">
  20.  
  21.     var area = [['海淀','门头沟','大兴'],['太原','阳泉','晋城']];
  22.     function ld(){
  23.  
  24.         var p = document.getElementById('prov');
  25.         //alert(p.value);
  26.         var opt = '';
  27.         if(p.value == '-1'){
  28.             document.getElementById('city').innerHTML = opt;
  29.  
  30.         }
  31.         for(i=0;i<area[p.value].length;i++){
  32.             opt = opt + "<option>"+area[p.value][i]+"</option>";
  33.         }
  34.         document.getElementById('city').innerHTML = opt;
  35.  
  36.     }
  37.  
  38. </script>
  39.  
  40. </body>
  41. </html>>

三、计时器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7. <h1>定时器</h1>
  8. <img src="./tp/0.gif">
  9. <script type="text/javascript">
  10.     function bang(){
  11.         var ti = document.getElementsByTagName('input')[0];
  12.         var time = (parseInt(ti.value) - 1);
  13.         //console.log(time);
  14.         if(ti.value <=0){
  15.             document.getElementsByTagName('img')[0].src = "./tp/爱奇艺.png";
  16.             clearInterval(clock);
  17.         }
  18.         ti.value = time;
  19.         //document.getElementsByTagName('img')[0].src = "./tp/爱奇艺.png";
  20.  
  21.     }
  22.     var  clock = window.setInterval('bang()',1000);
  23.     //setTimeout
  24.  
  25. </script>
  26. <input type="button" name="time" value = "5">
  27. </body>
  28. </html>

四、获得交点和失去交点

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7. <input type="text" name="of" onfocus="f();" onblur="b();"><br><br>
  8. <input type="text" name="of1"><br>
  9. <script type="text/javascript">
  10.         function f(){
  11.             var f = document.getElementsByName('of')[0];
  12.             f.style.border = '1px solid red';
  13.         }
  14.         function b(){
  15.             var f = document.getElementsByName('of')[0];
  16.             f.style.border = '';
  17.         }
  18.  
  19. </script>
  20.  
  21. </body>
  22. </html>

五、鼠标移至上方onmouseover

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7. <style type="text/css">
  8.     div{
  9.         width: 200px;
  10.         height: 200px;
  11.         background: red;
  12.  
  13.     }
  14. </style>
  15. <div onmouseover = 'ov();'></div>
  16. <script type="text/javascript">
  17.     function ov(){
  18.         alert("huanyin");
  19.  
  20.     }
  21.  
  22. </script>
  23. </body>
  24. </html>

六、提交事件onsubmit

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8.     function ti(){
  9.         console.log('nihao');
  10.         //alert("qingtianxie");
  11.         //alert(document.getElementsByName('user')[0].value);
  12.         if(document.getElementsByName('user')[0].value == ""){
  13.             alert("please write userid");
  14.             return false;
  15.         }else{
  16.             return true;
  17.         }
  18.  
  19.     }
  20.  
  21. </script>
  22. <form action = "onsubmit.html"  onsubmit="return ti();">
  23.     <input type="text" name="user"><br>
  24.     <input type="text" name="pass"><br>
  25.     <input type="submit" name="">
  26.  
  27. </form>
  28.  
  29. </body>
  30. </html>

七、页面加载完成window.onload

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <script type="text/javascript">
  7. window.onload  = function ti(){
  8.     document.getElementsByTagName('p')[0].style.border = '1px solid blue';
  9. }
  10.  
  11. </script>
  12. <body >
  13. <p>
  14.     nihapo
  15. </p>
  16. </body>
  17. </html>

八、事件对象（产生事件时产生的浏览器数据对象）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.         img{
  7.             width: 130px;
  8.             height: 130px;
  9.             position: relative;
  10.             left: 0px;
  11.             top: 0px;
  12.             right: 0px;
  13.         }
  14.     </style>
  15.     <script type="text/javascript">
  16.         window.onload = function(){
  17.         document.getElementsByTagName('img')[0].onmouseover = function(ev){
  18.             //alert(ev);
  19.             console.log(ev);
  20.             this.style.left = ev.pageX+50+'px';
  21.             this.style.top = ev.pageY+50+'px';
  22.  
  23.         }
  24. }
  25.     </script>
  26. </head>
  27. <body>
  28. <img src="./tp/0.gif" />
  29.  
  30. </body>
  31. </html>

九、增加节点

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7.     <ul>
  8.         <li>春</li>
  9.         <li>夏</li>
  10.         <li>秋</li>
  11.         <li>冬</li>
  12.         <li>中</li>
  13.     </ul>
  14.     <input type="button" value="增加一个元素" onclick="creat();">
  15.     <script type="text/javascript">
  16.         function creat(){
  17.             var f = document.getElementsByTagName('ul')[0];
  18.             var s = document.createElement('li');
  19.  
  20.             var txt = document.createTextNode('春天');
  21.             s.appendChild(txt);
  22.             f.appendChild(s);
  23.  
  24.         }
  25.  
  26.     </script>
  27. </body>

十、利用事件委托的五子棋（实例化格子元素的父元素table，产生点击时的事件对象table.target中获取实际点击的对象）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <style type="text/css">
  7.     table{
  8.         width: 300px;
  9.         height: 300px;
  10.         border: 0;
  11.         border-collapse: collapse;
  12.     }
  13.     td{
  14.         border: 1px solid black;
  15.         background: green;
  16.     }
  17. </style>
  18. <body>
  19. <table>
  20. <tr>
  21.     <td></td>
  22.     <td></td>
  23.     <td></td>
  24.     <td></td>
  25.     <td></td>
  26. </tr>
  27. <tr>
  28.     <td></td>
  29.     <td></td>
  30.     <td></td>
  31.     <td></td>
  32.     <td></td>
  33. </tr>
  34. <tr>
  35.     <td></td>
  36.     <td></td>
  37.     <td></td>
  38.     <td></td>
  39.     <td></td>
  40. </tr>
  41. <tr>
  42.     <td></td>
  43.     <td></td>
  44.     <td></td>
  45.     <td></td>
  46.     <td></td>
  47. </tr>
  48. <tr>
  49.     <td></td>
  50.     <td></td>
  51.     <td></td>
  52.     <td></td>
  53.     <td></td>
  54. </tr>
  55. </table>
  56. <script type="text/javascript">
  57.     /*var i = 0;
  58.     //alert(document.getElementsByTagName('td'));
  59.     while(i<document.getElementsByTagName('td').length){
  60.         document.getElementsByTagName('td')[i].onclick = function (){
  61.             this.style.background = 'black';
  62.         }
  63.         i++;
  64.     }*/
  65.     var sum = 0;
  66.     document.getElementsByTagName('table')[0].onclick = function (ev){
  67.         ev.target.style.background = sum++%2?'black':'white';
  68.     }
  69. </script>
  70. </body>
  71. </html>

十一、正则验证邮箱exec方法

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7. <ul>
  8.     <li>张飞</li>
  9.     <li>关羽&lt;guanyu@qq.com&gt;</li>
  10.     <li>赵云</li>
  11.     <li>诸葛&lt;zhuge@qq.com&gt;</li>
  12. </ul>
  13. <script type="text/javascript">
  14.     var lis = document.getElementsByTagName('li');
  15.     var i = 0;
  16.  
  17.     console.log(lis[1].innerHTML);
  18.         while(i<lis.length){
  19.             var patt = /\w+@\w+(\.\w+)+/;
  20.             //alert('1');
  21.         if(patt.exec(lis[i].innerHTML) == null){
  22.             //alert('2');
  23.             lis[i].style.background = 'blue';
  24.  
  25.         }i++;
  26.     }
  27.         //var txt = lis[i].innerHTML;
  28.  
  29. </script>
  30. </body>
  31. </html>

暂时就这么多。

js个人笔记的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  3. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  4. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  7. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  10. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

随机推荐

  1. IOS知识小记

    iOS开发 小知识点 http://www.cnblogs.com/tangbinblog/archive/2012/07/20/2601324.html Objective-C中的instancet ...

  2. Android 常用的快捷键（随时更新）

    android studio 是google出的一款好用不贵的ide,好像是powerd by idea的那个公司,反正风格上差不多.下面是android studio常用的快捷键设置,记录一下自己用 ...

  3. 修改hosts文件（判断是否为管理员/以管理员权限运行脚本）

    将以下命令保存为 HostsModify.ps1,然后执行即可 #该脚本用来添加hosts解析记录.脚本在执行的时候会判断当前用户是否为管理员,如果不是则弹出提示框口,要求输入相应密码 If (-NO ...

  4. 【WPF】 打开本地的文件或者文件夹

    问题描述: 我做的程序中需要添加帮助文档,我将文档生成了CHM格式,在用户点击帮助按钮时候 弹出帮助文档. 实现方法: System.Diagnostics.Process.Start(AppDoma ...

  5. 【原创】OllyDBG 入门系列（一）－认识OllyDBG

     ****** http://blog.fishc.com/645.html   标 题: [原创]OllyDBG 入门系列(一)-认识OllyDBG作 者: CCDebuger时 间: 2006-0 ...

  6. 看原理图之UART

    UART原理 协议类之间的通信就跟人之间交流一样,要遵守一定的原则:1.你说的话别人得听得懂,不能有语言障碍:2.你不能说的太快,别人都来不及反应. 对上面的话用专业点的语句描述下就是: 1.双方约定 ...

  7. 戴尔笔记本win8.1+UEFI下安装Ubuntu14.04过程记录

    瞎扯:笔记本刚买不久就想装ubuntu来着,但结果发现BIOS启动方式为UEFI,网上一搜索发现跟曾经的双系统安装方法不一样,看详细教程感觉相当复杂,并且也有点操心折腾跪了这新本本所以一直没有动手.但 ...

  8. JSON数据格式以及与后台交互数据转换实例

    /* 作者:烟大阳仔 时间:20131013 介绍:主要了解一下json的格式,看看数据是怎么存储的 */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTM ...

  9. [Bootstrap] 3. Responsive Gridding (.hidden-sm, visible-md)

    Grid Size For .col-md We started designing our site using the col-md-* classes. These classes target ...

  10. nginx学习七 高级数据结构之动态数组ngx_array_t

    1 ngx_array_t结构 ngx_array_t是nginx内部使用的数组结构.nginx的数组结构在存储上与大家认知的C语言内置的数组有相似性.比方实际上存储数据的区域也是一大块连续的内存. ...