黑马程序员__重点dom实例！

最新推荐文章于 2024-11-13 15:29:17 发布
最新推荐文章于 2024-11-13 15:29:17 发布
阅读量3.1k 收藏
点赞数
分类专栏： 心路历程 文章标签： function input table javascript html button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengzhihen12345/article/details/7931359
版权

---------------------- android培训、java培训、期待与您交流！ ----------------------

 

开篇跟大家推荐一套我自学用的视频，通过自学就能5K就业的绝好视频！

全套学习路线及视频
Java全套顶级视频
DotNet全套视频

PHP全套视频  

 

级联菜单：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>级联菜单</title>

<script type="text/javascript">

function selCity()

{

       var arr=[[""],["海淀区","朝阳区","东城区","西城区"]

                      ,["武汉","荆州","宜昌","襄樊"]

                      ,["济南","青岛","烟台","威海"]

                      ,["沈阳","大连","鞍山","抚顺"]];

       var cityNode=document.getElementById("selid");

       var index=cityNode.selectedIndex;

       //alert(cityNode.options[index].innerText);

       var citys=arr[index];

       var selsubNode=document.getElementById("selsubid");

       selsubNode.options.length=0;

       for(var x=0;x<citys.length;x++)

       {

              var optionNode=document.createElement("option");

              optionNode.innerText=citys[x];

              selsubNode.appendChild(optionNode);

       }

      

}

</script>

</head>

<body>

<select id="selid" onChange="selCity()">

       <option>--选择城市--</option>

       <option>北京</option>

       <option>湖北</option>

       <option>山东</option>

       <option>辽宁</option>

</select>

<select id="selsubid">

       <option>--选择地区--</option>

</select>

</body>

</html>

 

添加删除指定附件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>添加删除</title>

<style type="text/css">

table td a:link,table td a:visited

{

       text-decoration:none;

       color:#00CCFF;

}

table,table td

{

       border:#0099CC 1px solid;

}

</style>

<script type="text/javascript">

var count=1;

function addFile()

{

       var tabNode=document.getElementsByTagName("table")[0];

       var trNode=tabNode.insertRow();

       trNode.id="tr_"+count;

       var tdNode_file=trNode.insertCell();

       var tdNode_del=trNode.insertCell();

       tdNode_file.innerHTML="<input type='file'/>";

       tdNode_del.innerHTML="<a href='javascript:void(0)' οnclick='delfile("+count+")'>删除附件</a>"

       count++;

}

function delfile(num)

{

       var trNode=document.getElementById("tr_"+num);

       trNode.parentNode.removeChild(trNode);

}

</script>

</head>

<body>

<table>

       <tr>

              <td>

                     <a href="javascript:void(0)" onClick="addFile()">添加附件</a>

              </td>

       </tr>

</table>

</body>

</html>

 

模拟邮件全选、反选、取消全选、删除所选、颜色间隔、高亮显示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<style type="text/css">

table

{

       width:70%;

       border:#0000CC 1px solid;

}

table th,table td

{

       border:#0066CC 1px solid;

}

table th

{

       background-color:#33CC00;

}

.one

{

       background-color:#FFCC00;

}

.two

{

       background-color:#99FF33;

}

.over

{

       background-color:#9900FF;

}

</style>

<script type="text/javascript">

var name;

window.οnlοad=function trColor()

{

       var tabNode=document.getElementsByTagName("table")[0];

       var trs=tabNode.rows;

       for(var x=1;x<trs.length;x++)

       {

              if(x%2==1)

              {

                     trs[x].className="one";

              }

              else

                     trs[x].className="two";

                    

              trs[x].οnmοuseοver=function()

              {

                     name=this.className;

                     this.className="over";

              }

              trs[x].οnmοuseοut=function()

              {

                     this.className=name;

              }

       }

}

function checkAll(index)

{

       var allNode=document.getElementsByName("all")[index];

       var mails=document.getElementsByName("mail");

       for(var x=0;x<mails.length;x++)

       {

              mails[x].checked=allNode.checked;

       }

}

//完成按钮的全选、反选、取消全选的功能

function checkButton(num)

{

       var mails=document.getElementsByName("mail");

       for(var x=0;x<mails.length;x++)

       {

              if(num>1)

                     mails[x].checked=!mails[x].checked;

              else

                     mails[x].checked=num;//利用javascript特性，0、null为假，非0、非null为真

       }

}

//完成删除邮件的功能

var arr=new Array();

var pos=0;//定义指针，记录位置

function delMail()

{

       var mails=document.getElementsByName("mail");

       for(var x=0;x<mails.length;x++)

       {

              if(mails[x].checked)

                     arr[pos++]=mails[x];

       }

       for(var x=0;x<arr.length;x++)

       {

              var trNode=arr[x].parentNode.parentNode;

              trNode.parentNode.removeChild(trNode);

       }

       trColor();

}

</script>

</head>

<body>

<table>

       <tr>

              <th><input type="checkbox"  name="all" οnclick="checkAll(0)"/>全选</th>

              <th>发件人</th>

              <th>邮件名称</th>

       </tr>

       <tr>

              <td><input type="checkbox" name="mail"/></td>

              <td>张三00</td>

              <td>新的邮件</td>

       </tr>

              <tr>

              <td><input type="checkbox" name="mail"/></td>

              <td>张三11</td>

              <td>新的邮件</td>

       </tr>

              <tr>

              <td><input type="checkbox" name="mail"/></td>

              <td>张三22</td>

              <td>新的邮件</td>

       </tr>

              <tr>

              <td><input type="checkbox" name="mail"/></td>

              <td>张三33</td>

              <td>新的邮件</td>

       </tr>

              </tr>

              <tr>

              <td><input type="checkbox" name="mail"/></td>

              <td>张三44</td>

              <td>新的邮件</td>

       </tr>

              </tr>

              <tr>

              <td><input type="checkbox" name="mail"/></td>

              <td>张三55</td>

              <td>新的邮件</td>

       </tr>

              </tr>

              <tr>

              <td><input type="checkbox" name="mail"/></td>

              <td>张三66</td>

              <td>新的邮件</td>

       </tr>

              </tr>

              <tr>

              <td><input type="checkbox" name="mail"/></td>

              <td>张三77</td>

              <td>新的邮件</td>

       </tr>

       <tr>

              <th><input type="checkbox" name="all" onClick="checkAll(1)"/>全选</th>

              <th colspan="2">

                     <input type="button" value="全选" onClick="checkButton(1)"/>

                     <input type="button" value="取消全选" onClick="checkButton(0)"/>

                     <input type="button" value="反选" onClick="checkButton(2)"/>

                     <input type="button" value="删除所选邮件" onClick="delMail()"/>      

              </th>

       </tr>

</table>

</body>

</html>

 

表单校验：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>表单校验</title>

<style type="text/css">

form

{

       background-color:#66CCFF;

       border:#0033CC 1px solid;

       width:350px;

}

</style>

<script>

function checkUser(userNode)

{

       var user=userNode.value;

       var userSpanNode=document.getElementById("userid");

       var userReg=/^[a-z]{5}$/i;//只能是五位的字母，不区分大小写

       if(user.match(userReg))

              userSpanNode.innerHTML="用户名正确".fontcolor("green");

       else

              userSpanNode.innerHTML="用户名错误".fontcolor("red");

}

var password;

function checkPassword(passwordNode)

{

       password=passwordNode.value;

       var passwordSpanNode=document.getElementById("pswid");

       var passwordReg=/^\w{5,15}$/;//密码能是5-15位的数字或者字母

       if(password.match(passwordReg))

              passwordSpanNode.innerHTML="密码正确".fontcolor("green");

       else

              passwordSpanNode.innerHTML="密码错误".fontcolor("red");

}

function checkRepsw(repasswordNode)

{

       var repassword=repasswordNode.value;

       var repasswordNode=document.getElementById("repswid");

       if(repassword==password)

              repasswordNode.innerHTML="输入正确".fontcolor("green");

       else

              repasswordNode.innerHTML="输入错误".fontcolor("red");

}

 

function checkMail(mailNode)

{

       var mail=mailNode.value;

       var mailSpanNode=document.getElementById("mailid");

       var mailReg=/^\w+@\w+(\.\w+)+$/;

       if(mail.match(mailReg))

              mailSpanNode.innerHTML="邮箱格式正确".fontcolor("green");

       else

              mailSpanNode.innerHTML="邮箱格式错误".fontcolor("red");

}

</script>

</head>

<body>

<form>

用户名称：<input type="text"name="user" onBlur="checkUser(this)"/>

<span id="userid"></span><br/>

输入密码：<input type="text"name="psw" onBlur="checkPassword(this)"/>

<span id="pswid"></span>

<br/>

确认密码：<input type="text"name="repsw" onBlur="checkRepsw(this)"/>

<span id="repswid"></span><br/>

邮件地址：<input type="text"name="mail" onBlur="checkMail(this)"/>

<span id="mailid"></span>

<br/>     

<input type="submit"value="提交数据"/>

</form>

</body>

</html>

 

最后跟大家推荐一套我自学用的视频，通过自学就能5K就业的绝好视频！

全套学习路线及视频
Java全套顶级视频
DotNet全套视频

PHP全套视频  

---------------------- android培训、java培训、期待与您交流！ ----------------------详细请查看：http://edu.csdn.net/heima 

 

fengzhihen12345
关注
专栏目录
WebApis学习笔记 更新完毕 2022最新黑马程序员
专注于 前端开发 知识分享
07-20 2045
黑马程序员WebApis学习笔记-复习笔记
Vue快速入门 - 黑马 (附音乐播放器源码)
weixin_51909882的博客
01-21 1209
黑马程序员Vue快速入门学习笔记，附部分源码
DOM总结（三）及综合案例
03-17 259
DOM总结（三）及综合案例 1，DOM属性-----replaceChild()     replaceChild()---替换节点: 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild);     返回值是一个指向已被替换的那个子节点的引用指针。     如果被插入的子节...
DOM操作综合实例
weixin_33696822的博客
10-19 205
- 综合实例(点击注册，下面表格增加一行)window.onload = function(){ document.getElementById("addUser").onclick = function(){ var nameValue = document.getElementById("name").value; var emailValue = document....
黑马程序员 JavaScript DOM 案例
qq_43156556的博客
11-21 5212
JavaScript DOM 案例 电灯开关（两种实现方式） 轮播图片 自动跳转页面 动态表格实现添加和删除数据 1. 电灯开关 实现效果：点击电灯切换开关状态，也即实现图片转换 核心逻辑： 获取加载图片的对象<img> var bulb = document.getElementById("image"); 修改<img>标签中的src bulb.src = "img/pic_bulboff.gif"; 方式一：在<img>标签中添加onclick()事件属性
DOM综合案例-飞翔的小鸟
张培跃的个人博客
04-11 3626
通过jsDOM完成的一个小游戏
由浅入深JavaScript9基础-Dom综合实例1
张东旭
06-15 539
JavaScript9基础-Dom综合实例1 在前两节课程中我们讲述了DOM基础以及DOM表格基础。 但是要想学好DOM就必须要大量的练习。这节课我们通过大量例子的 练习来提高对DOM的熟练度。 DOM综合实例-丰富表格 我们先做一个基础表格，该表格只具有添加功能： eg1:                      table, th, td
中关村黑马程序员训练营android-4.0视频下载地址
03-24
根据提供的信息，我们可以总结出以下关于“中关村黑马程序员训练营Android-4.0视频”的相关知识点： ### 一、概述 “中关村黑马程序员训练营Android-4.0视频”是一套针对Android开发初学者和进阶学习者的培训课程...
custom_mybatis.zip
10-04
在本项目"custom_mybatis.zip"中，你将找到一个个人学习MyBatis的实践案例，这个案例来源于黑马程序员的课程，重点在于利用DOM4J进行XML配置文件的解析。DOM4J是一个强大的Java XML API，它可以用来读写、操作和解析...
JS-基础笔记二次总结（B站跟过黑马的同学看过来）
huohuoit的博客
06-08 701
这里都是基于我在B站跟过的黑马教学视频上的PPT进行二次总结的笔记，结合了自己平时的加注和记录。欢迎跟过黑马视频的小伙伴们一起来复习Pink老师授予我们的快乐知识，在此也非常感谢黑马机构，让我有系统的资料对前端技术有了整体性的学习。这里也非常适合新手对JS有一个非常系统的了解与整体认识。那么，开始吧。 一、初识JavaScript 1、JavaScript的作用 表单动态校验（密码强度检测） （ JS 产生最初的目的 ） 网页特效 服务端开发(Node.js) 桌面程序(Electron)
JavaScript学习笔记（5）
Dontla的博客
04-19 267
文章目录DOM重点核心总结注册事件两种方式事件监听方式 addEventListener（通用）attachEvent（基本不用）注册事件兼容性解决方案（照顾不同版本浏览器）删除事件（解绑事件）removeEventListener（通用） detachEvent（不用）删除事件的兼容性解决方案（照顾不同版本浏览器）DOM事件流 捕获阶段[下沉阶段] 冒泡阶段（先捕获，后冒泡）DOM事件流的代码验证（看捕获阶段和冒泡阶段绑定的事件哪个先执行，只适用于addEventListener）事件对象 event（
js中复选框的全选、全部选与反选
qq_27493017的博客
09-20 347
html: <input type="button" value="全选" onclick ="checkAll();"/> <input type="button" value="全不选" onclick ="checkNone();"/> <input type="button" value="反选" onclick ="checkReverse();"/&g...
JS访问表格内容，计时器等示例代码
做得最大的项目，就是人生
08-25 904
还是把总结的东西放到网上好哇，记不清楚直接拷贝来用哇         function OpenWin() {             window.open("http://www.g.cn");         }         function OpenWin
JavaScript DOM 编程艺术一书综合示例
watermelonbig的专栏
12-11 3698
在HTML页面结构中，常用到的几个区域是头部区域，使用header元素；导航区域，使用nav 元素；在内容区域可以使用article元素来展示每一页的内容。这些标签元素都是HTML5标签。在使用HTML5元素时，建议在文档的元素中包含Modernizer库，用来对浏览器是否支持H5标签进行检验。取得当前页面的URL，可以使用window.location
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 425
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Vue中的常用指令
m0_62388400的博客
11-12 1184
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 166
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 764
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
从零开始快速构建Vue3项目
最新发布
欧唯薇
11-13 872
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
使用simple_html_dom解析HTML文档
"这篇文档介绍了如何下载和使用simple_html_dom库来处理HTML文档，通过示例代码展示了如何创建DOM对象以及进行DOM操作，包括查找和访问元素及其属性。" 在PHP开发中，处理HTML文档时，`simple_html_dom`是一个非常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值