1.DOM说明
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
2.DOM选择器说明
2.1.直接查找
document.getElementById('id'); //id 选择器
document.getElementsByName('name'); //name选择器document.getElementsByTagName('tagname'); //标签选择器document.getElementsByClassName('cname'); //class选择器2.2.导航查找
parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素
2.3.事件绑定
事件绑定方式1：
Title this is a p
效果：
事件绑定方式2：
this is a p
结果：
this说明：
this is a p
查看打印：
点击后：
多个事件绑定？
this is a p
- life
- is
- hard
效果：
#点击三个li都会弹出结果
2.4.属性操作
2.4.1.属性查看操作：
Title
结果：
2.4.2.属性赋值操作
点击button的时候，将a标签的内容替换：
Title
效果：
点击change：
innerHTML 同样效果，但如果替换的是标签呢？
ele_btn.onclick = function () { ele_div.innerHTML = "an article
"; } 效果：
点击：
#HTML内容已经被转义
text呢？
var ele_btn=document.getElementsByTagName("button")[0]; ele_btn.onclick = function () { ele_div.innerText = "an article
"; } 效果：
点击：
#HTML内容未被转义
2.5.属性修改
2.5.1.属性取值赋值
Title ckl div
效果：
原生写法
Title ckl div
结果：
2.6.class属性操作
Title ckl div
效果：
删除某个class:
Title ckl div
效果：
2.7.修改input的值
Title
效果：
点击框：
2.8.点击，字体颜色变红，边框变绿色
Title
效果：
点击：
2.8.onchange属性
Title
效果：
选中陕西：
#应用场景，如果是一个选择省份和城市的应用，选择中省份后，获取省份的值，然后选择城市时，可选择的是当前省份的城市
3.实例说明
3.1.原始代码
about dom wahahaThis is a ponitWe from the same world but we never... springsummerautum
查看页面：
3.2.通过查找id来修改内容
查看结果：
3.3.通过标签来修改内容
var dname = document.getElementsByTagName('li'); for(var i in dname){ var item = dname[i]; item.innerText = i; } 运行结果：
3.4.通过class来查找修改内容
var cname = document.getElementsByClassName('ckl'); for(var j in cname){ var jtm = cname[j]; jtm.innerText = j; } 查看结果：
3.5.通过name来查找内容
var uname = document.getElementsByName('uname')[0]; var pwd = document.getElementsByName('pwd')[0]; console.log(uname.value,pwd.value); 查看结果：
4.事件选择器
4.1.通过点击按钮让数字自动加1
代码如下：
1
显示如下：
4.2.分析执行流程
获取到 1 的值 --> 写函数（当点击按钮的时候，出发函数） --> 函数内容（1.通过id获取值 2.将值转换为数字 3.将数字进行自增）
function Add() { nid = document.getElementById('num'); var text = nid.innerText; var anum = parseInt(text); anum += 1; nid.innerText = anum; } 执行如下：
5.特殊的value来获取修改值
5.1.text类型的value
特殊的value
输入值，点击获取值 ，获取到以后清空
function GetValue() { var mobj = document.getElementById('m1'); alert(mobj.value); mobj.value = ''; } 运行：
输入值：
点击获取以后：
再次查看：
5.2.select类型的获取值及修改
代码如下：
特殊的value
运行：
选择冬季，获取值：
5.3.textarea 类型的获取值
输入内容，点击获取值：
6.输入框
6.1.需求如下
输入框，默认里面有 “请输入内容”，当鼠标点进去，文字消失，输入内容后，一直保持。如果没有输入，再点出的时候，显示“请输入内容”
代码如下：
function cklfocus() { var fobj = document.getElementById('r1'); fv = fobj.value; if(fv == "请输入关键字"){ fobj.value = ''; } } function cklblur() { var fobj = document.getElementById('r1'); fv = fobj.value; if(!fv.trim()){ fobj.value = "请输入关键字"; } } 展示如下：
点入：
点出：
输入内容：
再点出：
7.创建标签
7.1.第一种方式添加输入框
代码如下：
添加 //返回值是false，就不跳转到百度
函数部分
查看结果：
点击添加：
再点击添加，也还只是一个，因为添加覆盖了第一个div里面的内容，解决如下：
查看页面并添加：
始终添加再最前面。
7.2.创建标签之添加a标签
代码如下：
函数如下：
查看结果：
点击添加：
8.标签属性
8.1.原始页面
dejavu
8.1.标签属性说明
带有的属性通过“.”来操作，没有的属性，通过setAttribute getAttribute removeAttribute 来操作
查看代码：
dejavu
查看页面：
8.2.修改增加一个class属性
8.3.增加一个自定义属性
8.4.修改style里的内容
9.关于表单提交
9.1.查看搜索设置
搜索键是q
9.2.配置form表单提交搜索
搜索：
9.3.不通过submit按钮进行提交
function Submit() { var nid = document.getElementById('fm1'); nid.submit(); } 执行操作：
输入内容：
点击提交搜索：
10.提交表单验证
10.1.代码如下
运行：
11.关于confirm
11.1.confirm代码
鼠标移上去的时候：
点击确定，查看console的结果：
再来一次，点击取消，查看console的结果：
12.href
window.location.href; 获取当前的详细路径
window.location.reload(); //刷新页面
13.定时器之跑马灯
13.1.跑马灯
setInterval("操作",时间间隔); My Heart Will Go On
演示如下：
13.2.跑马灯停下来
clearInterval(); //清除间隔循环
代码如下：
查看结果：
点击后，停止
13.3.只执行一次
cklobj = setTimeout("paofunc()",1000); setTimeout同setInterval用法一模一样。
14.节点操作
14.1.节点添加，删除，替换操作
代码如下：
Title you can add sth here
效果：
添加a标签：
删除h1标签：
替换节点：
14.2.删除，编辑表格
14.2.1.删除操作
Title
| 姓名 | 年龄 | 收入 | 操作 |
| 郭兰英 | 68 | 1500 | |
| 刀郎 | 45 | 8000 |
效果：
删除刀郎：
15.事件
15.1.双击事件
Title
效果：
点击两次：
15.2.onload
页面加载完毕才会执行一个操作，用onload来实现：
Title 
效果：
15.3..submit
Title
效果：
没有提交，因为字符串少于5个
15.4.事件传播
Title
效果：
点击outer：
点击inner：
问题，点击黄色区域出现了两次alert，这是不合理的，这是因为事件传播的原因。阻止如下：
15.5.keydown
键盘事件：
Title
效果：
无响应，按下h：
15.6.onselect
Title
效果：
选中文字：
15.7.mouseover,mouseleave
Title
效果：
鼠标进入：
离开：
15.8.添加表格示例
Title
姓名 年龄 收入 操作 郭兰英 68 1500 刀郎 45 8000
效果：
添加表单：
结果：
一、sqlalchemy 普通创建
1.创建表
#!/usr/bin/env python# -*- coding: utf-8 -*-from sqlalchemy import create_engine,Table,Column,Integer,String,MetaData,ForeignKeymetadata = MetaData()user = Table('user',metadata, Column('id',Integer,primary_key=True), Column('name',String(20)),)color = Table('color',metadata, Column('id',Integer,primary_key=True), Column('name',String(20)),)engine = create_engine("mysql+pymysql://root:123456@192.168.161.129:3306/ckl", max_overflow=5)metadata.create_all(engine) 运行结果：
2.插入数据
conn = engine.connect()sql = user.insert().values(id=456,name='zld')conn.execute(sql)
查看结果：
3.删除数据
conn = engine.connect()sql = user.delete().where(user.c.id > 124)conn.execute(sql)
查看结果：
二、使用类方式操作
2.1.创建表
#!/usr/bin/env python#-*- coding:utf-8 -*-from sqlalchemy import create_engine,funcfrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy import Column,Integer,String,and_,or_,ForeignKeyfrom sqlalchemy.orm import sessionmaker,relationshipBase = declarative_base()engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True)class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22)if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() 运行结果：
2.2.插入数据
#!/usr/bin/env python#-*- coding:utf-8 -*-from sqlalchemy import create_engine,funcfrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy import Column,Integer,String,and_,or_,ForeignKeyfrom sqlalchemy.orm import sessionmaker,relationshipBase = declarative_base()engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True)class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22)if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() #add sql data h1 = Host(hostname='localhost',ip_addr='127.0.0.1') h2 = Host(hostname='Kali',ip_addr='8.9.0.3') session.add_all([h1,h2]) session.commit() 运行结果：
查看数据：
2.3.数据修改
#!/usr/bin/env python#-*- coding:utf-8 -*-from sqlalchemy import create_engine,funcfrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy import Column,Integer,String,and_,or_,ForeignKeyfrom sqlalchemy.orm import sessionmaker,relationshipBase = declarative_base()engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True)class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22)if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() obj = session.query(Host).filter(Host.hostname=='localhost').first() obj.hostname = "benji" session.commit() 查看结果：
2.4.数据删除
#!/usr/bin/env python#-*- coding:utf-8 -*-from sqlalchemy import create_engine,funcfrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy import Column,Integer,String,and_,or_,ForeignKeyfrom sqlalchemy.orm import sessionmaker,relationshipBase = declarative_base()engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True)class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22)if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() obj = session.query(Host).filter(Host.hostname=='benji').first() session.delete(obj) session.commit() 查看结果：
三、关于外键
3.1.创建外键关联表
#!/usr/bin/env python#-*- coding:utf-8 -*-from sqlalchemy import create_engine,funcfrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy import Column,Integer,String,and_,or_,ForeignKeyfrom sqlalchemy.orm import sessionmaker,relationshipBase = declarative_base()engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True)class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) group_id = Column(Integer,ForeignKey('groups.id')) #group = relationship('Group')class Group(Base): __tablename__ = 'groups' id = Column(Integer,primary_key=True) name = Column(String(64),unique=True,nullable=False) #hosts = relationship('Host')Base.metadata.create_all(engine)if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() 运行结果：
查看表：
3.2.插入数据
#!/usr/bin/env python#-*- coding:utf-8 -*-from sqlalchemy import create_engine,funcfrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy import Column,Integer,String,and_,or_,ForeignKeyfrom sqlalchemy.orm import sessionmaker,relationshipBase = declarative_base()engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True)class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) group_id = Column(Integer,ForeignKey('groups.id')) #group = relationship('Group')class Group(Base): __tablename__ = 'groups' id = Column(Integer,primary_key=True) name = Column(String(64),unique=True,nullable=False) #hosts = relationship('Host')#Base.metadata.create_all(engine)if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() g1 = Group(name='g1') g2 = Group(name='g2') g3 = Group(name='g3') session.add_all([g1,g2,g3,]) h1 = Host(hostname='lovezhang', ip_addr='2.4.5.6',group_id=g3.id) session.add_all([h1,]) session.commit() 运行结果：
关联外键字段为 NULL
更改表内容，执行如下：
....g3 = session.query(Group).filter(Group.name=='g3').first() h = session.query(Host).filter(Host.hostname=='lovezhang').update({ 'group_id':g3.id})session.commit().... 运行结果：
3.3.查询关联数据
通过关联互相查询数据
#!/usr/bin/env python#-*- coding:utf-8 -*-from sqlalchemy import create_engine,funcfrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy import Column,Integer,String,and_,or_,ForeignKeyfrom sqlalchemy.orm import sessionmaker,relationshipBase = declarative_base()engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True)class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) group_id = Column(Integer,ForeignKey('groups.id')) group = relationship('Group') class Group(Base): __tablename__ = 'groups' id = Column(Integer,primary_key=True) name = Column(String(64),unique=True,nullable=False) hosts = relationship('Host')if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() g3 = session.query(Group).filter(Group.name == 'g3').first() h = session.query(Host).filter(Host.hostname=='lovezhang').first() print("h1:",h.group_id) print('g:',g3.hosts) session.commit() 运行结果：
3.4.通过单方向关联互相查询数据
#!/usr/bin/env python#-*- coding:utf-8 -*-from sqlalchemy import create_engine,funcfrom sqlalchemy.ext.declarative import declarative_basefrom sqlalchemy import Column,Integer,String,and_,or_,ForeignKeyfrom sqlalchemy.orm import sessionmaker,relationshipBase = declarative_base()engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True)class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) group_id = Column(Integer,ForeignKey('groups.id')) group = relationship('Group',backref='host_list') class Group(Base): __tablename__ = 'groups' id = Column(Integer,primary_key=True) name = Column(String(64),unique=True,nullable=False)if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() g3 = session.query(Group).filter(Group.name == 'g3').first() h = session.query(Host).filter(Host.hostname=='lovezhang').first() print("h1:",h.group_id) print('g:',g3.host_list) session.commit() 运行结果：
