day48
目录
知识点补充
print(bin(10))
# print(oct(10))
# print(hex(10))
# """
# 0b1010
# 0o12
# 0xa
# """
# print(int('0b1010',2))
# print(int('0o12',8))
# print(int('0xa',16))
res = """
print('hello world')
for i in range(10):
print(i)
"""
# eval(res)
exec(res)
callable()
window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div</div>
<script>
// window.close()
</script>
</body>
</html>
计时器相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// function func() {
// alert('hello baby~')
// }
//
// function show() {
// var t = setTimeout(func,3000) // 设置定时器
// function inner() {
// clearTimeout(t)
// }
// setTimeout(inner,9000)
// }
// show()
function func() {
alert(123)
}
function show() {
var t = setInterval(func,3000); // 每隔三秒钟执行一次
function inner() {
clearInterval(t)
}
setTimeout(inner,9000)
}
show()
</script>
</body>
</html>
直接查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="d1">div上面的span</span>
<div class="c1">div
<span>div>span</span>
<p>div>p</p>
<span>div>span</span>
</div>
<span>span</span>
</body>
</html>
间接查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="d1">div上面的span</span>
<div class="c1">div
<span>div>span</span>
<p id="p1">div>p</p>
<span>div>span</span>
</div>
<span>span</span>
</body>
</html>
节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">div
<span>div>span</span>
<p id="d1">div>p</p>
</div>
</body>
</html>
获取值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
username:<input type="text" id="d1">
<select name="" id="d2">
<option value="111">1</option>
<option value="222">2</option>
<option value="333">3</option>
</select>
<select name="" id="d3" multiple>
<option value="111">1</option>
<option value="222">2</option>
<option value="333">3</option>
</select>
<input type="checkbox" value="6666" id="dd">
file: <input type="file" id="d4">
</body>
</html>
操作标签类属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div class="c1 bg_red bg_green"></div>
</body>
</html>
js操作标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>天将降大任于斯人也 必先苦其心志 劳其筋骨 饿其体肤 空乏其身 行拂乱其所为</p>
</body>
</html>
js绑定事件的两种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
function func() {
alert('我被点击了')
}
var i1Ele = document.getElementById('d1');
i1Ele.onclick = function () {
// i1Ele标签被点击之后 你能做的事
func()
}
// var pEle = document.getElementsByTagName('p')[0];
// pEle.onclick = function () {
// alert('p标签被点击了')
// }
}
</script>
</head>
<body>
<button onclick="func()">按钮</button>
<input type="button" value="按钮2" id="d1">
<!--<p>1</p>-->
<!--<p>2</p>-->
<!--<p>3</p>-->
<!--<p>4</p>-->
<!--<p>5</p>-->
<!--<p>6</p>-->
<!--<p>7</p>-->
<!--<p>8</p>-->
<!--<p>9</p>-->
<!--<p>10</p>-->
<!--<!–<script>–>-->
<!--function func() {-->
<!--alert('我被点击了')-->
<!--}-->
<!--var i1Ele = document.getElementById('d1');-->
<!--i1Ele.onclick = function () {-->
<!--// i1Ele标签被点击之后 你能做的事-->
<!--func()-->
<!--}-->
<!--<!–</script>–>-->
</body>
</html>
开关灯示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
width: 400px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div class="c1 bg_green bg_red"></div>
<button id="d1">变色</button>
<script>
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
// 找到div标签
var divEle = document.getElementsByClassName('c1')[0];
// 修改类属性 有在删除 无则添加
divEle.classList.toggle('bg_red')
}
</script>
</body>
</html>
input框获取焦点示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="linux运维" id="d1">
<script>
var iEle = document.getElementById('d1');
// input获取焦点
iEle.onfocus = function () {
// 将input框中的文本值清除
iEle.value = ''
};
// input框失去焦点
iEle.onblur = function () {
iEle.value = '欢迎老板下次光临~'
}
</script>
</body>
</html>
展示当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
// 先定义一个全局变量 用来存储定时器
var t = null;
var b1Ele = document.getElementById('b1');
var b2Ele = document.getElementById('b2');
var iEle = document.getElementById('d1');
function showTime() {
var currentTime = new Date();
var ctime = currentTime.toLocaleString();
iEle.value = ctime
}
// 开始按钮
b1Ele.onclick = function () {
if(!t){
t = setInterval(showTime,1000)
}
};
// 结束
b2Ele.onclick = function () {
clearInterval(t);
// 手动将t清空
t = null
}
</script>
</body>
</html>
省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="d1">省:
</select>
<select name="" id="d2">市:</select>
<script>
var s1Ele = document.getElementById('d1');
var s2Ele = document.getElementById('d2');
var data = {
"河北省": ["廊坊", "邯郸",'石家庄'],
"北京": ["朝阳区", "海淀区",'昌平区'],
"山东": ["威海市", "烟台市",'青岛'],
"上海":["静安区",'黄浦区','徐汇区']
};
// 循环自定义对象中的key 动态创建option标签 添加到第一个选择框中
for (let province in data){
// 创建一个个的option标签
var optEle = document.createElement('option');
// 给创建的option标签设置文本和属性
optEle.innerText = province;
optEle.value = province;
// 将创建好的option标签添加到select框中
s1Ele.appendChild(optEle)
}
s1Ele.onchange = function () {
// console.log(this.value) // this指代的就是当前操作对象本身 有点类似于你python后端的self
// 获取用户选择的省 根据省 取到对应的市
var currentPro = this.value;
var cityList = data[currentPro];
// 先将第二个select框中的所有内容清空
s2Ele.innerHTML = '';
// 循环市的数组 创建option标签 操作属性 添加到第二个select框中
for (let i=0;i<cityList.length;i++){
var optEle = document.createElement('option');
optEle.innerText = cityList[i];
optEle.value = cityList[i];
s2Ele.appendChild(optEle)
}
}
</script>
</body>
</html>
JQuery初始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery3.4.1.js"></script>
</head>
<body>
<p>ppp</p>
</body>
</html>
JQuery选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="jQuery3.4.1.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span class="c1">span</span>
<div id="d1">div
<span>div>span</span>
<p>div>p
<a href="">div>p>a</a>
</p>
<span>div>span</span>
</div>
<span>div+span</span>
</body>
</html>
今日笔记内容
本周课程安排
1.BOM与DOM操作
2.JQuery开头
明天
jQuery结束
后天
Bootstrap
周三结束前端的学习
周四
django(*****)
周五
整体介绍
上周内容回顾
HTML
<!---->
仅仅是一门标记语言
div span 布局用的
a
img
table表格标签
form表单
input
CSS
查找标签
一堆选择器
基本选择器
组合选择器
分组与嵌套
属性选择器
伪元素
伪类
样式操作
长宽 字体大小 颜色
red
#4e4e4e
rgb()
rgba()
背景图片
边框
border
圆形头像
盒子模型
margin
border
padding
content
浮动
页面布局
clear属性
清除浮动带来的负面影响
.clearfix:after {
content:''
clear:both
display:block
}
.clearfix
定位
relative
absolute
fixed
z-index
模态框
JS
js这一门语言逻辑性不是很强 内部自带很多无法解决的bug
node.js
js面向对象的编程语言
注释
//
/**/
js默认是以分号结束
引入方式
1.script标签内直接写
2.script src属性引入外部js文件
变量
需要用关键字声明变量
var
let
js中是有真正意义上的常量
const
数据类型
数值类型
NaN
parseInt
parseFloat
字符类型
es6新语法
模板字符串
res = `
sadad
asdsa
sadsa
`
res1 = `
adlda ${res}
`
布尔值
null与undefined
厕所卷纸
对象
数组
[]
对象
{}
内置对象
声明对象两种方式
第一种 直接写[] {}
第二种 使用关键字 new
Date
js逻辑
Math
RegExp
1.正则表达式里面不要用空格
2.全局匹配的时候 有一个lastIndex属性
3.正则表达式不写匹配的内容 默认匹配的是undefined
父子页面通信(了解)
BOM操作中
window关键字 可以不写
DOM操作
学习如何查找节点 如何查找标签 选择器
事件
当符合某个条件下 自动触发的动作/响应
js绑定事件的方式
方式1 不推荐使用
<button onclick="func()">按钮</button>
方式2 推荐使用 标签查找动态绑定的方式
function func() {
alert('我被点击了')
}
var i1Ele = document.getElementById('d1');
i1Ele.onclick = function () {
// i1Ele标签被点击之后 你能做的事
func()
}
如何解决 js代码体现运行报错的情况
方式1
利用onload等待某个对象加载完毕之后再执行
xxx.onload = function (){
}
方式2
直接将你的js代码写在body最下方
onlick
onfocus
onblur
onchange
JQuery有点类似于python后端的模块 帮你封装了一些简易的操作
(有点像ORM)
jQuery语法结构
jQuery('选择器').action(属性)
$('选择器').action(属性)
如何使用JQuery
必须先导入才能使用
CDN
VMware
centos7
xshell6
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<!--<span id="d1">div上面的sapn</span>-->
<!--<div class="c1">div-->
<!--<span>div>span</span>-->
<!--<p id="p1">div>p</p>-->
<!--<span>div>span</span>-->
<!--</div>-->
<!--<span></span>-->
<!--<div class="c1">div-->
<!--<span>div>span</span>-->
<!--<p id="d1">div>p</p>-->
<!--</div>-->
<!--username:<input type="text" id="d1">-->
<!--<select name="" id="d2">-->
<!--<option value="111">1</option>-->
<!--<option value="222">2</option>-->
<!--<option value="333">3</option>-->
<!--</select>-->
<!--<select name="" id="d3" multiple>-->
<!--<option value="111">1</option>-->
<!--<option value="222">2</option>-->
<!--<option value="333">3</option>-->
<!--</select>-->
<!--file:<input type="file" id="d4">-->
<!--<div class="c1 bg_green bg_red"></div>-->
<!--<p>天将降大任于斯人也</p>-->
<!--<button onclick="func()">按钮</button>-->
<!--<input type="button" value="按钮2" id="d1">-->
<!--<div class="c1 bg_green bg_red"></div>-->
<!--<button id="d1">变色</button>-->
<!--<input type="text" value="linux运维" id="d1">-->
<!--<input type="text" id="d1">-->
<!--<button id="b1">开始</button>-->
<!--<button id="b2">结束</button>-->
<select name="" id="d1">省:</select>
<select name="" id="d2">市:</select>
<script>
var s1Ele=document.getElementById('d1')
var s2Ele=document.getElementById('d2')
var data={
'河北省':['廊坊','邯郸','石家庄'],
'北京':['朝阳区','海淀区','昌平区'],
'山东':['威海市','烟台市','青岛'],
'上海':['静安区','黄浦区','徐汇区']
}
for (let provience in data){
var optEle=document.createElement('option');
optEle.innerText=provience;
optEle.value=provience;
s1Ele.appendChild(optEle)
}
s1Ele.onchange=function () {
// console.log('我的内容编花篮')
var currentPro=this.value;
var cityList=data[currentPro];
s2Ele.innerHTML='';
for(let i=0;i<cityList.length;i++){
var optEle=document.createElement('option');
optEle.innerText=cityList[i];
optEle.value=cityList[i];
s2Ele.appendChild(optEle)
}
}
// var t=null;
//
// var b1Ele=document.getElementById('b1');
// var b2Ele=document.getElementById('b2');
//
//
// var iEle=document.getElementById('d1');
// function showTime() {
// var currentTime = new Date();
// var ctime = currentTime.toLocaleString();
// iEle.value =ctime
// }
// // setInterval(showTime,1000)
// b1Ele.onclick=function () {
// if(!t){
// t=setInterval(showTime,1000)
// }
//
// };
// b2Ele.onclick=function () {
// clearInterval(t);
// t=null
//
// }
// var iEle=document.getElementById('d1')
// iEle.onfocus=function () {
// iEle.value=''
// };
// iEle.onblur=function () {
// iEle.value='欢迎下次再来'
// };
// let btnEle=document.getElementById('d1')
// btnEle.onclick=function () {
// var divEle=document.getElementsByClassName('c1')[0]
// divEle.classList.toggle('bg_red')
// }
// function func() {
// alert('我被点击了')
// }
// var ilEle=document.getElementById('d1')
// ilEle.onclick=function () {
// alert('我被点击了')
// }
// function func() {
// alert('输入错误')
// }
// function show() {
// var t=setTimeout(func,3000)
// function inner() {
// clearTimeout(t)
// }
// setTimeout(inner,9000)
// }
// show()
// function func() {
// alert(123)
// }
// function show() {
// var t=setInterval(func,3000);
// function inner() {
// clearInterval(t)
// }
// setTimeout(inner,9000)
// }
// show()
</script>
</body>
</html>
