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),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说 ...
随机推荐
- mssql sqlserver 使用sql脚本获取群组后,按时间排序(asc)第一条数据的方法分享
摘要: 下文讲述使用sql脚本,获取群组后记录的第一条数据业务场景说明: 学校教务处要求统计: 每次作业,最早提交的学生名单下文通过举例的方式,记录此次脚本编写方法,方便以后备查,如下所示: 实现思路 ...
- 【MM系列】SAP MB1A MB1B MB1C MB11 MIGO的区别解析
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MB1A MB1B MB1C ...
- c/c++ 多态的实现原理分析
多态的实现原理分析 当类里有一个函数被声明成虚函数后,创建这个类的对象的时候,就会自动加入一个__vfptr的指针, __vfptr维护虚函数列表.如果有三个虚函数,则__vfptr指向的是第一个虚函 ...
- sed:-e 表达式 #1,字符 10:未终止的“s”命令
执行shell脚本时,使用sed变量替换指定的字符串,一直出现这个错误: [root@bqh-118 scripts]# vim while_rz.sh [root@bqh-118 scripts]# ...
- 利用uWSGI和nginx进行服务器部署
搭建服务器虚拟环境 1)在本机进入虚拟环境,执行命令导出当前需要的所有包. pip freeze > plist.txt 2)通过ftp软件将项目代码和plist.txt文件上传到服务器. 3) ...
- Python:字符串格式化
Python中提供了多种格式化字符串的方式,遇到一个项目,在一个文件中,就用了至少两种方式.特别是在使用Log时,更让人迷惑. 因此特地花时间来了解一下Python中字符串格式化的几种方式: # -* ...
- 译文——The habits of highly successful people
1.Morning Routine (早上列行公事) Probably the most common habit ultra-successful people have is they can t ...
- 模拟placeholder
把这个记下来,主要是因为这里的 defaultValue 我之前竟然不知道 <input type="text" value="提示内容" onFocus ...
- ES5-ES6-ES7_解构赋值
解构赋值的概念 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) 传统对变量赋值的方式,以前,为变量赋值,只能直接指定值. var a = 1; ...
- redis 查找附近的人
儿童定位手表,有个交友功能,查找附近的人,用redis的geo来实现比较简单,其实是一个ZSET(有序集合) redis 版本要大于3.2 查看redis 版本 /usr/bin/redis-s ...