day54 Pyhton 前端JS06
内容回顾
- ECMAScript5.0 基础语法
- var 声明变量
- 五种基本数据类型
- string
- number NaN number
1 number
- boolean
- undefined
- null
- 引用数据类型
- Array
var arr = [];
- push
- pop
- unshift
- shift - splice()
- forEach(function(item,index){}) - function
//1 普通函数
// function add(a, b) {
// return a + b;
// }
//
// var ret = add(3, 5);
// console.log(ret); var oDiv = document.getElementById('box'); oDiv.onclick = function () { }
console.dir(oDiv); //2.函数对象 // var add = function () {
// alert('111');
// }
//
// add(); //3. 自执行函数 (function (a,b) {
alert(22222)
})(1,2) - Date
- Math.random() min+ Math.random()*(max-min)
- object
var person = {
name:'alex',
age:18,
fav: function(){
console.log(this.name)
},
onclick:function(){
} }
person.name
person.fav() class Person(): def __init__(self,name,age):
self.name = name
self.age = age def fav():
print(self.name)
p = Person()
p.fav() def add(a,b):
return a+b ret = add(1,2) - DOM 文档对象模型
- 获取DOM的三种方式
1 通过id获取
var oDiv = document.getElementById('box');
2 class获取
var oDiv = document.getElementsByClassName('box')[0];
3 标签获取
var oDiv = document.getElementsByClassName('box')[0];
- 事件
onclick
onmouseenter
onmouseleave
onload - 业务逻辑
- 对DOM对象的样式属性操作
# 点语法
get和set
console.log(oDiv.style.display); # 获取属性值 get readyonly
oDiv.style.display = 'none' # 设置属性值 set
- 对DOM对象的类属性操作
oDiv.className
- 对DOM对象值的操作
oDiv.innerText dl
dt
dd
table
tr
td
form
action 提交的服务器地址
method
enctype... input
type
text 文本输入框
password 密码框
radio 单选框 产生互斥效果： 让两个radio的name值一样。默认选中：checked
checkbox 多选框 默认值：checked
submit 提交按钮
file 文件上传 必须为post form表单上的属性必须：enctype="multipart/form-data"
select name multiple 表示多选 摁着ctrl键选中
option value selected 默认选中 - BOM 浏览器对象模型
回顾pymysql
import pymysql conn = pymysql.connect(
host='127.0.0.1',
user='root',
password="123",
database='db1',
port=3306,
charset='utf8'
) # 创建游标
cur = conn.cursor(pymysql.cursors.DictCursor) sql = 'insert into t7 value (%(name)s,%(sex)s)'
# cur.execute(sql,('wusir','female'))
cur.execute(sql,{"name":'wusir','sex':'female'}) rets = cur.fetchall() print(rets)
conn.commit()
cur.close()
conn.close() 数据库的数据类型
char varchar
int
float double decimal
year date time datetime
set 多选一或多选多
enum 多选一
tinyint(1) 表示数据库的true和false 自己查询
今日内容
业务逻辑
对DOM对象的样式属性操作
#点语法
get和set
console.log(oDiv.style.display);#获取属性值 get readyonly
oDiv.style.display = 'none' # 设置属性值 set
对DOM对象的类属性操作
oDiv.className
对DOM对象值的操作
oDiv.innerText
oDiv.innerHTML
<input value='123'/>
oInput.value
对标签属性操作
oA.href
oA.title
oImg.src
选项卡实现
# 排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
display: none;
}
p.active{
display: block;
}
</style> </head>
<body> <button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button> <p>哭加为</p>
<p>七轸堂</p>
<p>王家辉</p>
<p>任希桐</p> <script> var oBtns = document.getElementsByTagName('button');
var oPs = document.getElementsByTagName('p');
var i;
for (i = 0; i < oBtns.length; i++) { //为什么要for循环 获取事件对象+ 事件 oBtns[i].index = i; oBtns[i].onclick = function () {
console.log(this); // 把所有的变灰
for (var j = 0; j < oBtns.length; j++){
oBtns[j].style.color = '#000'; oPs[j].className = '';
}
// 业务逻辑 点的当前盒子变色
this.style.color = '#ff6700';
console.log(i);
oPs[this.index].className +='active'; } }
</script> </body>
</html>
- 选项卡 使用let 解决变量提升的问题
变量提升:
<body>
<script>
console.log(a);
a = 3;
console.log(a);
//
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
//
// console.log(a);
//
console.log(a[9]());//i=9 ,如果是var 则i=10
//let 声明的变量不存在变量提升，是块级作用域
console.log(c);
let c = 5;//let 报错不能变量提升,var可以变量提升
</script>
</body>
let控制选项卡操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
display: none;
}
p.active{
display: block;
}
</style> </head>
<body> <button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button> <p>哭加为</p>
<p>七轸堂</p>
<p>王家辉</p>
<p>任希桐</p> <script> var oBtns = document.getElementsByTagName('button');
var oPs = document.getElementsByTagName('p'); for (let i = 0; i < oBtns.length; i++) { //为什么要for循环 获取事件对象+ 事件 oBtns[i].onclick = function () { // 把所有的变灰
for (var j = 0; j < oBtns.length; j++){
oBtns[j].style.color = '#000'; oPs[j].className = '';
}
// 业务逻辑 点的当前盒子变色
this.style.color = '#ff6700';
console.log(i);
oPs[i].className +='active'; } }
</script> </body>
DOM操作:
<body>
<input type="text" id="username">
<button id="add">添加</button> <div>
<p id="box2"></p>
<p>alex</p>
</div>
<ul id="box">
<!--<li></li>-->
</ul> <script> var oP = document.getElementById('box2');
// console.log(oP.nextElementSibling.innerText);
var oP2 = oP.nextElementSibling || oP.nextSibling;//兼容不同版本浏览器
console.log(oP2.innerText); var oBtnAdd = document.getElementById('add');
var oUl = document.getElementById('box');
var oInput = document.getElementById('username');
//1.创建DOM oBtnAdd.onclick = function () {
var oLi = document.createElement('li');
var oA = document.createElement('a');
var oDelete = document.createElement('button');
var abc = document.createElement('abc');
var oUpdate = document.createElement('button'); if (oInput.value === '') {
return;
} else {
oA.innerText = oInput.value;
oA.href = 'http://www.baidu.com';
oDelete.innerText = '删除';
oDelete.id = 'delete';
oUpdate.innerText = '更改'; abc.innerText = 'alex'; abc.setAttribute('abc_name','哈哈哈');
abc.ABC = 'xxxxxx'; console.dir(abc);
//2 修改DOM DOM操作
// oLi.innerHTML = '<a href="">哭加为</a>'
oLi.appendChild(oA);
oLi.appendChild(oDelete);
oLi.appendChild(abc);
//inserBefore(添加的DOM,参考的节点)
oLi.insertBefore(oUpdate,oDelete);
//2.追加DOM
oUl.appendChild(oLi); //清空操作
oInput.value = ''
}
oDelete.onclick = function () {
console.log(this.parentNode);
oUl.removeChild(this.parentNode)
} } </script>
</body>
publish
<body> <table border="1" style="border-collapse: collapse;" width="100%">
<h2>我的出版社</h2>
<thead>
<tr>
<td>编号</td>
<td>名字</td>
<td>邮箱</td>
<td>操作</td>
</tr>
</thead>
<tbody id="publish_content"> </tbody>
</table> <script> // JSON.parse()
// JSON.stringify()
//JSON "{"status":"ok","data":[]}"
var publish_data = {
status: 'ok',
data: [
{
'id': 1,
'name': '沙河出版社',
'email': '131313@qq.com'
},
{
'id': 2,
'name': '昌平出版社',
'email': 'adad@qq.com'
},
{
'id': 3,
'name': '老男孩出版社',
'email': 'oldboy@qq.com'
},
{
'id': 4,
'name': '路飞出版社',
'email': 'luffycity@126.com'
},
{
'id': 5,
'name': '路飞出版社',
'email': 'luffycityXXXX@126.com'
} ] } var oPublish_con = document.getElementById('publish_content'); setTimeout(function () { if (publish_data.status == 'ok') { function $(ele) { return document.createElement(ele);
} publish_data.data.forEach(function (item, index) { //创建元素
var oTr = $('tr');
var oIndex = $('td');
var oName = $('td');
var oEmail = $('td');
var oOpeart = $('td');
var oUpdate = $('a');
var oDelete = $('a');
oUpdate.innerText = '更改';
oDelete.innerText = '删除';
oUpdate.href = 'javascript:void(0);';
oDelete.href = 'javascript:void(0);';
//更改内容
oIndex.innerText = index + 1;
oName.innerText = item.name;
oEmail.innerText = item.email; //追加元素
oTr.appendChild(oIndex);
oTr.appendChild(oName);
oTr.appendChild(oEmail);
oTr.appendChild(oOpeart); oOpeart.appendChild(oUpdate);
oOpeart.appendChild(oDelete);
oPublish_con.appendChild(oTr); }
)
} },
1000
) </script> </body>
day54 Pyhton 前端JS06的更多相关文章
- day54 Pyhton 前端JS05
今日内容: 1.数组Array var colors = ['red','color','yellow']; 使用new 关键词对构造函数进行创建对象 var colors2 = new Array( ...
- day56 Pyhton 前端Jquery08
前端 内容回顾: -BOM -jquery介绍 -jquery下载和引入方式 npm install jquery -jquery的选择器 -基本选择器 -通配符选择器 - id选择器 - 类选择器 ...
- day50 Pyhton 前端01
文档结构: <!-- 定义文档类型 --> <!DOCTYPE html> <!-- 文档 --> <html lang='en'> <!-- 仅 ...
- day57 Pyhton 前端Jquery09
内容回顾: - 筛选选择器 $('li:eq(1)') 查找匹配的元素 $('li:first') $('li:last') - 属性选择器 - 筛选的方法 - find() 查找后代的元素 - ...
- day55 Pyhton 前端Jquery07
昨日回顾: 表单,点击submit提交以后,服务端受到信息 import socket import pymysql from urllib.parse import unquote def run( ...
- day53 Pyhton 前端04
内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加 外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值 边框:border border-c ...
- day52 Pyhton 前端03
内容回顾 块级标签: div p h 列表:ol;ul;dl 表格:table 行内标签: span a i/em b/strong u/del 行内块: input textarea img 其他: ...
- day51 Pyhton 前端02
内容回顾: 1.h1~h6:加粗,数字越大级别越小,自动换行 2.br:换行;hr:分割线; (特殊符号,空格) 3.p:与前边和后边内容之间有间距 4.a标签的href:本地文件连接;网络连接;锚链 ...
- Pyhton学习——Day54
#Django内容回顾# -请求响应HTTP协议(有.无状态)默认传递的是字符串# 传递字符串分为两个部分:1.http1.1 GET /url /index + 请求头# Provisional h ...
随机推荐
- pwnable.kr之leg
查看原题代码: #include <stdio.h> #include <fcntl.h> int key1(){ asm("mov r3, pc\n"); ...
- Spring IoC 到底是什么
前言 「上一篇文章」我们对 Spring 有了初步的认识,而 Spring 全家桶中几乎所有组件都是依赖于 IoC 的. 刚开始听到 IoC,会觉得特别高大上,但其实掰开了很简单. 跟着我的脚步,一文 ...
- IOC 原理
SpringIOC实现原理 1. 依赖倒置 假设我们设计一辆汽车:先设计轮子,然后根据轮子大小设计底盘,接着根据底盘设计车身,最后根据车身设计好整个汽车.这里就出现了一个“依赖”关系:汽车依赖车身,车 ...
- HotSpot VM执行引擎的实现
Java代码的执行分类: 第一种是将源代码编译成字节码文件,然后再运行时通过解释器将字节码文件转为机器码执行 第二种是编译执行(直接编译成机器码).现代虚拟机为了提高执行效率,会使用即时编译技术(JI ...
- Java基础一篇过（三）I/O流总结
一.啥是I/O 概念:I/O为输入,输出流的统称,流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象. 本质:本质是数据传输,即数据在两设备间的传输称为流,根据数据传输特性将流抽象为各 ...
- 刷题[FBCTF2019]Event
解题思路 信息收集 打开发现是这样的登陆框,信息泄露,弱口令什么的尝试一下,无果,正常注册登陆 发现需要通过admin用户登陆,并且发现有/flag这样的路由,猜测后台为python编写 抓包发现有看 ...
- Java环境变量配置 新手必备
第一步:安装JDK,无脑下一步 建议修改安装路径 这里以jdk1.7为例子(之前帮机房安装软件,五六十台电脑都要用1.7); 2.安装完了之后右击此电脑,打开属性 打开系统高级设置 打开环境变量 这里 ...
- Unity Shader学习笔记-1
本篇文章是对Unity Shader入门精要的学习笔记,插图大部分来自冯乐乐女神的github 如果有什么说的不正确的请批评指正 目录 渲染流水线 流程图 Shader作用 屏幕映射 三角形遍历 两大 ...
- springboot+websocket实现简单的在线聊天功能
效果如下: java实现逻辑: 1.引入maven依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...
- 关于VS编译报错，但是错误信息未提示问题解决方案
可能代码中引用了别的类库中的函数,然后未编译被引用库导致编译报错,重新编译被引用库然后再编译当前库即可解决问题