DOM操作 JS事件 节点增删改查
--------------------------习惯是社会的巨大的飞轮和最可贵的维护者。——威·詹姆斯
day 49
[value属性操作]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
姓名:
<input type="text" name="user" value="" id="i1">
<hr>
籍贯:
<select name="pro" id="i2" multiple="multiple">
<option value="1">湖北省</option>
<option value="2">湖南省</option>
<option value="3">河南省</option>
</select>
<hr>
简介:
<textarea name="info" id="i3" cols="30" rows="10"> </textarea>
<hr>
<input type="submit">
</form> <script> let i1=document.getElementById("i1");
let i2=document.getElementById("i2");
let i3=document.getElementById("i3"); console.log(i1.value);
console.log(i2.value);
console.log(i3.value); </script> </body>
</html>
[节点的增删改查]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="p1">
<h3 class="title">WELCOME!</h3>
</div>
<hr>
<div class="c1">
<div><button class="add">一 展示图片</button></div>
</div>
<hr>
<div class="c2">
<button class="rem">删除节点 </button>
<h4>欢迎删除,圣诞快乐!</h4>
</div>
<hr>
<div class="c3">
<button class="replace">替换节点 </button>
</div> <script>
// 1 创建节点添加节点
let ele=document.getElementsByClassName("add")[0];
ele.onclick=function () {
// 1 创建节点对象 <img src="imgs/圣诞老人.png" alt="" width="200" height="200">
let img=document.createElement("img") ; // <img >
img.setAttribute("src","imgs/圣诞老人.png");// <img src="imgs/圣诞老人.png">
img.setAttribute("width","200");
img.setAttribute("height","200");// <img src="imgs/圣诞老人.png" alt="" width="200" height="200">
console.log(img);
// 2 添加节点 父节点.appendchild(添加节点)
let pele=document.getElementsByClassName("c1")[0];
pele.appendChild(img) };
// 2 删除节点 父节点.removeChild(删除节点)
let ele2=document.getElementsByClassName("rem")[0];
ele2.onclick=function () {
let pele2=document.getElementsByClassName("c2")[0];
pele2.removeChild(this.nextElementSibling);
}; // 替换节点 父节点.replaceChild(新节点,旧节点)
let ele3=document.getElementsByClassName("replace")[0];
ele3.onclick=function () {
// 父节点
let pele3=document.getElementsByClassName("p1")[0];
// 新节点
let p=document.createElement("p"); // <p></p>
p.innerHTML="深圳欢迎您!";
// 旧节点
let title=document.getElementsByClassName("title")[0];
pele3.replaceChild(p,title)
}
</script> </body>
</html>
[js事件]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
margin-left: 10px;
}
</style>
<script> window.onload=function(){
// 1 创建节点添加节点
let ele=document.getElementsByClassName("c1")[0];
ele.onfocus=function () {
console.log("获取光标!") };
ele.onblur=function () {
console.log("退出光标!")
}; ele.onselect=function () {
console.log("正在拷贝该文本!")
}; let form=document.getElementById("form");
form.onsubmit=function () {
// 校验数据
let user=document.getElementById("user").value;
let email=document.getElementById("email").value;
console.log(user,email);
if (user.length<5){
console.log("长度不够!");
document.getElementById("user").nextElementSibling.innerHTML="长度不够";
setTimeout(function () {
document.getElementById("user").nextElementSibling.innerHTML="";
},1000);
return false }
};
}
</script> </head>
<body> <input type="text" class="c1"> <hr> <form id="form" action="" method="get">
<div>
<label for="user">姓名</label>
<input type="text" name="user" id="user"><span class="error"></span>
</div>
<div>
<label for="email">邮箱</label>
<input type="text" name="email" id="email"><span class="error"></span>
</div>
<input type="submit">
</form> </body>
</html>
[二级联动]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <select name="" id="pros">
<option value="0">请选择省份</option>
<option value="1">河北省</option>
<option value="2">广东省</option>
<option value="3">湖南省</option>
</select>
<select name="" id="citys">
<option value="">请选择城市</option>
</select> <script>
// 1 数据结构
let data={
"1":["石家庄","邯郸","邢台","衡水","保定"],
"2":["东莞","惠州"," 广州","汕头","深圳"],
"3":["长沙","张家界","湘潭","娄底"],
}; let pro=document.getElementById("pros");
let city=document.getElementById("citys");
pro.onchange=function () {
console.log(this.value);
//2 获取用户选择省份
let choose_pro=this.value;
// 3 获取省份对应的城市列表
let citys=data[choose_pro];
console.log(citys); // 清除操作
city.options.length=1;
// 循环添加
for(var i=0;i<citys.length;i++){ // 创建option标签
let option=document.createElement("option")// <option></option>
option.innerText=citys[i];
option.value=i+1;
// 添加标签
city.appendChild(option);
}
}
</script> </body>
</html>
DOM操作 JS事件 节点增删改查的更多相关文章
- springLdap 操作ldap示例（增删改查）
转自:http://blog.csdn.net/sundenskyqq/article/details/9002440 这部分的示例网上的确有很多,但是个人在查找的过程中还是感到不够满意,所以就自己总 ...
- zkCli的使用 常用的节点增删改查命令用法
zkCli的使用 常用的节点增删改查命令用法 1. 建立会话 命令格式:zkCli.sh -timeout 0 -r -server ip:port ./zkCli.sh -server -time ...
- java中XML操作：xml与string互转、读取XML文档节点及对XML节点增删改查
一.XML和String互转: 使用dom4j程式变得很简单 //字符串转XML String xmlStr = \"......\"; Document document = D ...
- Zookeeper节点增删改查与集群搭建（笔记）
1.上传文件目录说明 上传的文件一般放在 /home/下 安装文件一般在 /usr/local/下 2. 安装zookeeper 2.1将zookeeper-3.4.11.tar.gz拷贝到/home ...
- EF Codefirst 多对多关系 操作中间表的 增删改查（CRUD）
前言 此文章只是为了给新手程序员,和经验不多的程序员,在学习ef和lambada表达式的过程中可能遇到的问题. 本次使用订单表和员工表建立多对多关系. 首先是订单表: public class Ord ...
- mySQL CRUD操作（数据库的增删改查）
一.数据库操作 1.创建数据库 create database 数据库名称 2.删除数据库 drop database 数据库名称 二.表操作 1．创建表 create table 表名 ( ...
- JS源生代码“增删改查”之增
51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...
- Node.js之mysql增删改查
1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...
- DjangoMTV模型之model层——ORM操作数据库（基本增删改查）
Django的数据库相关操作 对象关系映射(英语:(Object Relational Mapping,简称ORM),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说 ...
随机推荐
- JS 同步输入
var txtBigBalance; //金额同步输入 if ($.browser.msie)//IE { $("#txtBalanceP").get(0).onpropertyc ...
- Python中类的定义及使用
类是一些有共同特征和行为事务事物的抽象概念的总和. 从中可以看出,方法只能使用实例直接调用(无需传self参数),而使用类调用必须传入实例对象: 属性可以使用实例调用,也可以使用类直接调用,因此可以看 ...
- backup是个相对论
工作互备,是很多团队领导者都关注的事情.显然,当一项任务由两个(甚至两个以上的人)来完成,当任务交付使用后出现问题时,不会因为其中某一个成员的缺席而导致问题一时处理不了.如果某个任务只是由一个人来担当 ...
- [20180828]exadata--豆腐渣系统的保护神.txt
[20180828]exadata--豆腐渣系统的保护神.txt --//昨天看awr报表发现如下,时间8-9点报表,这个时间病房业务很少,主要门诊的业务: 1.awr报表情况:Top 10 Fore ...
- c/c++ 线性表之双向链表
c/c++ 线性表之双向链表 线性表之双向链表 不是存放在连续的内存空间,链表中的每个节点的next都指向下一个节点,每个节点的before都指向前一个节点,最后一个节点的下一个节点是NULL. 真实 ...
- [Hive_5] Hive 的 JDBC 编程
0. 说明 Hive 的 JDBC 编程 1. hiveserver2 介绍 hiveserver2 是 Hive 的 JDBC 接口,用户可以连接此端口来连接 Hive 服务器 JDBC 驱动类为 ...
- JavaScript获取IE版本号与HTML设置ie文档模式
JavaScript获取IE版本代码: var gIE = getIE(); alert(gIE.version) function getIE() { var rmsie = /(msie) ([\ ...
- 搭建windows测试环境的步骤
步骤:1.JDK安装 2.配置好JDK环境变量3.Tomcat安装4.将war包放在Tomcat的发布目录中webapps中,5.conf>server.xml里面设置默认解压,unpackW ...
- 约瑟夫环简介，问题以及java实现
问题:一群猴子排成一圈,按1,2,--.,n依次编号.然后从第一只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,再把它踢出去-------.,如此不停的进行下去,直到最后只剩下一只猴 ...
- C# -- 使用Aspose.Cells创建和读取Excel文件
使用Aspose.Cells创建和读取Excel文件 1. 创建Excel Aspose.Cells.License li = new Aspose.Cells.License(); li.SetLi ...