Python全栈之学习JS(2)
目录
- 1. js对象
- 1.1 object对象
- 1.2 json对象
- 2. js字符串函数
- 3. js数组相关方法
- 4. js数学对象相关方法
- 5. BOM对象
- 5.1 定时器
- 5.2 获取年月日时分秒
- 5.3 Navigator
- 5.4 历史对象
- 6. BOM对象location
- 7. 小提示
- ceshi.html：
- 总结
1. js对象
1.1 object对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object对象</title>
</head>
<body>
<script>
// 1.定义对象方法一
var obj = new Object();
console.log(obj , typeof(obj))
obj.name = "孙坚";
obj.age = 18;
obj.weight = "200斤";
obj.eat = function(){
alert("我会吃竹子");
}
console.log(obj.name)
// obj.eat();
//2.定义对象方法二
/* 对象中的成员不要使用单引号,在特殊场景中,比如json格式字符串的转换中会报错; */
var obj = {
name:"张三",
"age" : 20,
sex : "男性",
drink : function(something){
console.log("我会喝牛栏山",something);
}
}
//调用方式一
console.log(obj.sex)
obj.drink("老白干")
//调用方式二
console.log(obj["age"])
obj["drink"](1)
// 注意点
var str = "name"
console.log(obj.str , "<==========================>") //error
console.log(obj.name)
console.log(obj[str]) // obj["name"]
// eval 可以把字符串当成代码执行
eval("console.log(333)")
//3.定义对象方法三
/* 类比python中定义类的写法 , this等价于self */
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.func = function(){
console.log("我是func");
return this.sex;
}
}
var obj1 = new Person("刘一风",30,"男性");
var obj2 = new Person("张三风",90,"女性");
console.log(obj1.name);
var res = obj1.func();
console.log(res);
console.log(obj2.name)
var res = obj2.func();
console.log(res);
//4.遍历对象
for(var i in obj1){
console.log(i)
}
//5. with(对象) 语法可以直接获取对象成员的值
with(obj1){
console.log(name);
console.log(sex);
console.log(age);
res = func();
console.log(res);
}
console.log("<===================================>")
//将4和5结合,遍历对象中的数据;
for(var i in obj1){
//console.log(i , typeof(i)) // name age sex func ... string
with(obj1){
console.log(eval(i))
}
}
</script>
</body>
</html>
1.2 json对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json对象</title>
</head>
<body>
<script>
var data = {
'name':"文东",
age:20,
"sleep":function(){
alert("文东一天睡23小时,还有一个小时上厕所.");
}
}
// js对象 => json格式的字符串
var res = JSON.stringify(data);
console.log(res , typeof(res)); // {"name":"文东","age":20}
// json格式的字符串 => js对象
res = '{"name":"东东","age":30}'; // success
// res = "{'name':90,'age':40}"; error 引号必须是双引号
var res2 = JSON.parse(res);
console.log(res2,typeof(res2));
</script>
</body>
</html>
2. js字符串函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串对象的相关方法</title>
</head>
<body>
<script>
var string = "to be or not to be";
//获取字符串长度 length
var res = string.length
var res = string[-1]
console.log(res)
//1.清除两侧的空白 trim [ python的strip ]
var res = string.trim()
console.log(string)
console.log(res)
//2.获取首次出现的位置 indexOf [ python的find ]
/*找不到返回-1*/
var string = "to be or not to be";
var res = string.indexOf("z")
console.log(res)
//3/最后一次出现的位置 lastIndexOf
/*找不到返回-1*/
var res = string.lastIndexOf("zzz")
console.log(res);
//4.连接字符串 concat [ python的 os.path.join + ]
var res = string.concat("d:\\","python32\\","day42");
console.log(res);
//5.截取字符串 slice
/* string.slice(开始值,结束值) 字符串的切片 留头舍尾 [支持逆向下标]*/
var string = "11122233e or not to be";
var res = string.slice(1,7);
var res = string.slice(-5,-1); // to b
// var res = string.slice(-5,-10); //截取不到返回空
console.log(res,"<==1==>")
//6.截取字符串 substr
/* string.substr(开始值,截取几个) */
var string = "11122233e or not to be";
var res = string.substr(3,4)
console.log(res,"<==2==>")
//7.拆分字符串 split [ python的 split ]
var string = "11122233e or not to be";
var res = string.split(" ")
console.log(res,"<==3==>")
//8.大小写 toUpperCase toLowerCase
var string = "11122233e Or noT tO be";
res = string.toUpperCase();
res = string.toLowerCase();
console.log(res,"<==4==>")
//9.search 匹配第一次找到的索引位置,找不到返回-1
var string = "aaabbb oldaoy ccc"
var res = string.search(/oldboy/)
console.log(res,"<==5==>")
//10.match 返回匹配的数据
/* /正则表达式/修饰符 g:全局匹配 i:不区分大小写 m:多行匹配 */
var string = "我的电话是 : 13838384388 你的电话是: 13854381438"
var res = string.match(/\d{11}/); // 匹配一个
var res = string.match(/\d{11}/g); // 匹配多个,(需要修饰符加上g)
console.log(res)
console.log(res[0])
console.log(res[1])
//11.字符串替换 replace
/* replace默认只替换一次 */
var string = "to be or not to be";
var res = string.replace("to","two")
console.log(res,"<==6==>")
// 方法一:
function myreplace(string,a,b){
/*
找最后一个to,如果找不到返回-1
如果能找到就不停的进行替换,直到-1为止,循环终止;
*/
while(string.lastIndexOf(a) != -1){
console.log(1)
string = string.replace(a,b);
}
return string;
}
var string = "to be or not to be";
var res = myreplace(string,"to","two")
console.log(res) // two be or not two be
// 方法二
var string = "to be or not to be";
var res = string.replace(/to/g,"two");
console.log(res)
</script>
</body>
</html>
3. js数组相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组对象的相关方法</title>
</head>
<body>
<script>
// 1.定义一个数组
var arr = Array();
var arr = Array(10,11,12);
var arr = [15,16,17]
console.log(arr , typeof(arr))
// ### 1.增
var arr = [];
arr[0] = 10;
arr[1] = 11;
arr[2] = 12;
// js特征:允许在一个临时的索引值上插入数据; ok
arr[10] = 50;
console.log(arr)
console.log(arr[5])
// (1)push 从数组的最后插入元素 相当于python的append
var arr = [];
var res = arr.push(111);
var res = arr.push(222);
var res = arr.push(333);
console.log(res,arr)
// (2)unshift 从数组的前面插入元素 相当于python的insert
var arr = [100,101];
var res = arr.unshift(1);
var res = arr.unshift(333);
console.log(res , arr);
// (3)concat 迭代追加数据 相当于python的extend
var arr1 = [1,2,3]
var arr2 = ["你好","我好","她也好"]
var res = arr1.concat(arr2)
console.log(res, typeof(res));
// ###2删
// (1) delete 删除
/* 把值删掉了,原位置用空来取代,返回undifined */
var arr = [1, 2, 3, "你好", "我好", "她也好"];
delete arr[1];
console.log(arr);
console.log(arr[1])
// (2)pop 从后面删除;
var arr = [1, 2, 3, "你好", "我好", "她也好"];
var res = arr.pop();
console.log(res ,arr);
// (3)shift 从前面删除
var arr = [1, 2, 3, "你好", "我好", "她也好"];
var res = arr.shift()
console.log(res , arr)
// ### 特别splice 从指定位置往后进行删除或者添加
/* arr.splice(从第几个位置开始,删除几个,[可选的是添加的元素]) */
var arr = [1, 2, 3, "你好", "我好", "她也好"];
// 从第二个2位置开始,删除2个
var res = arr.splice(2,2)
console.log(res , arr)
// 从第二个2位置开始,删除0个,添加,"hello","world"
var arr = [1, 2, 3, "你好", "我好", "她也好"];
var res = arr.splice(2,0,"hello","world")
console.log(res , arr)
// ###3改查
var arr = [1, 2, 3, "你好", "我好", "她也好"];
//修改元素
arr[3] = "你不好";
//获取元素
console.log(arr[3]);
console.log(arr);
// ###4 其他方法
// 拼接字符串 join
/* split 和 join 是一对;*/
var arr = ["you","can","you","up"];
var res = arr.join("#")
console.log(res)
// 数组元素反转 reverse
var arr = [100,200,3,150];
var res = arr.reverse();
console.log(res);
// 截取数组的一部分 slice
/* arr.slice(开始值,结束值) 数组的切片 留头舍尾 [支持逆向下标]*/
var arr = ["宋健","何旭彤","刘利伟","高雪峰","戈隆","王致和","马生平"]
var res = arr.slice(2)
// var res = arr.slice(2,4)
var res = arr.slice(-3,-1)
console.log(res);
// 排序 默认升序 sort
var arr = [1,2,3,4,9,22,21];
var arr = ["1","2","3","4","9","22","21"];
var res = arr.sort()
console.log(res)
var arr = [100,1,2,3,4,9,22,21];
// sorted 里面的参数是一个函数,通过函数进行升序或者降序排序;
/* return 1代表交换位置,如果return -1 代表不交换位置 */
var res = arr.sort(function(a,b){
if(a>b){
return -1;
}else{
return 1;
}
});
console.log(res)
</script>
<!--
python : 冒泡排序
nums = [1,22,3,2,4,9,21];
def bubble_sort(nums):
for i in range(len(nums) - 1): # 这个循环负责设置冒泡排序进行的次数
for j in range(len(nums) - i - 1): # j为列表下标
if nums[j] > nums[j + 1]:
nums[j], nums[j + 1] = nums[j + 1], nums[j]
break;
return nums
res = bubble_sort(nums)
print(res) -->
</body>
</html>
4. js数学对象相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数学对象中的相关方法</title>
</head>
<body>
<script>
//四舍五入round
var res = Math.round(3.5)
var res = Math.round(2.5)
var res = Math.round(2.31)
console.log(res)
//最大值 max
var res = Math.max(1,2,3,4,34343);
//最小值 min
var res = Math.min(1,2,3,4,34343);
//绝对值 abs
var res = Math.abs(-90);
console.log(res)
//向下取整 floor 地板
var res = Math.floor(3.001)
//向上取整 ceil 天花板
var res = Math.ceil(3.990)
//幂运算 pow
var res = Math.pow(2,3)
//开方运算 sqrt
var res = Math.sqrt(9)
console.log(res)
// ### 随机值推导公式
//获取从0到1随机值 0<x<1
var res = Math.random()
console.log(res)
//获取1~10的随机值 1 <= x <= 10
var res = Math.ceil(Math.random() * 10 )
console.log(res)
// 1.获取从 m 到 n 的随机值 5,14 m=5 , n=14
// 1 <= x <= 10 => 1+4 <= x <= 10+4 < 5 <= x <= 14
var res = Math.ceil(Math.random() * 10 ) + 4
// m = 5 , n = 14
// 2.拆解数字,把对应的m和n进行替换;
var res = Math.ceil(Math.random() * (14-5+1) ) + (5 - 1)
// 3.推出最后结果
var res = Math.ceil(Math.random() * (n-m+1) ) + (m - 1)
// 4.封装函数:终极版:随机值;
function randrange(m,n){
return Math.ceil(Math.random() * (n-m+1) ) + (m - 1);
}
</script>
</body>
</html>
5. BOM对象
5.1 定时器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM对象 </title></head><body> <script> /*### BOMjs BOM对象 : 针对于浏览器的控制 browser object model js 中最大的对象 window 整个浏览器窗口出现的所有内容行为都是window对象中的成员; */ console.log(window) // 1.弹出警告框 // window.alert('你好') // 2.确认弹窗 // var res = window.confirm("确认弹窗") // console.log(res); // true / false // 3.等待输入弹窗 // var res = window.prompt("请输入您的银行密码:") // console.log(res); // 4.关闭浏览器窗口 // window.close(); // innerHeight innerWidth 获取浏览器窗口内部的宽和高 console.log(`浏览器窗口内部的宽度${window.innerWidth}`) console.log(`浏览器窗口内部的高度${window.innerHeight}`) // window.open("http://www.baidu.com","_self"); // 在当前页面跳转 // window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口页面跳转 // ###定时器 /* # 定时器种类(两种):基于单线程的异步并发程序; window.setInterval(函数名,间隔时间(毫秒)) // 定时执行多次任务 window.setTimeout(函数名,间隔时间(毫秒)) // 定时执行一次任务 window.clearInterval(id号) // 清除定时器 setInterval window.clearTimeout(id号) // 清除定时器 setTimeout */ var num = 1 function func(){ console.log(`我执行了${num}`); num++; } var id1 = window.setInterval(func,1000); var id2 = window.setTimeout(func,2000); console.log(id1,"id1") console.log(id2,"id2") console.log("我执行完了....") window.clearInterval(id1) </script> </body></html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM对象 </title>
</head>
<body>
<script>
/*
### BOM
js BOM对象 : 针对于浏览器的控制 browser object model
js 中最大的对象 window 整个浏览器窗口出现的所有内容行为都是window对象中的成员;
*/
console.log(window)
// 1.弹出警告框
// window.alert('你好')
// 2.确认弹窗
// var res = window.confirm("确认弹窗")
// console.log(res); // true / false
// 3.等待输入弹窗
// var res = window.prompt("请输入您的银行密码:")
// console.log(res);
// 4.关闭浏览器窗口
// window.close();
// innerHeight innerWidth 获取浏览器窗口内部的宽和高
console.log(`浏览器窗口内部的宽度${window.innerWidth}`)
console.log(`浏览器窗口内部的高度${window.innerHeight}`)
// window.open("http://www.baidu.com","_self"); // 在当前页面跳转
// window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口页面跳转
// ###定时器
/*
# 定时器种类(两种):基于单线程的异步并发程序;
window.setInterval(函数名,间隔时间(毫秒)) // 定时执行多次任务
window.setTimeout(函数名,间隔时间(毫秒)) // 定时执行一次任务
window.clearInterval(id号) // 清除定时器 setInterval
window.clearTimeout(id号) // 清除定时器 setTimeout
*/
var num = 1
function func(){
console.log(`我执行了${num}`);
num++;
}
var id1 = window.setInterval(func,1000);
var id2 = window.setTimeout(func,2000);
console.log(id1,"id1")
console.log(id2,"id2")
console.log("我执行完了....")
window.clearInterval(id1)
</script>
</body>
</html>
5.2 获取年月日时分秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取年月日时分秒</title>
<style>
#clock
{
width:500px;
height:50px;
border:solid 1px red;
border-radius: 25px;
text-align: center;
line-height: 50px;
background-color: chartreuse;
color:red;
}
</style>
</head>
<body>
<div id="clock"> </div>
<script>
var obj = document.getElementById("clock");
console.log(obj)
function func(){
var d = new Date();
console.log(d);
// 获取年份
var year = d.getFullYear()
// 获取月份 月份范围 0 ~ 11 0代表1月份
var month = d.getMonth()
// 获取日期
var date = d.getDate()
// 获取小时
var hour = d.getHours()
// 获取分钟
var minutes = d.getMinutes()
// 获取秒数
var seconds = d.getSeconds()
strvar= `现在的时间是: ${year}年-${month+1}月-${date}日 ${hour}:${minutes}:${seconds}`;
console.log(strvar);
obj.innerHTML = strvar
console.log(minutes, typeof(minutes));
// 清除定时器的效果
if(minutes == 8){
clearInterval(id);
}
}
var id = window.setInterval(func,1000)
</script>
</body>
</html>
5.3 Navigator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM模型中 Navigator 对象 </title>
</head>
<body>
<script>
console.log(navigator);
console.log(navigator.platform) // 判断是pc端还是移动端
console.log(navigator.userAgent) // 在爬虫程序中,可以伪造成浏览器进行数据爬取,绕开服务端的反爬机制;
</script>
</body>
</html>
5.4 历史对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="func1()">查看历史对象</button>
<button onclick="func2()">跳转到上一页</button>
<button onclick="func3()">跳转到下一页</button>
<button onclick="func4()">当前页面刷新</button>
<script>
function func1(){
console.log(history);
}
function func2(){
history.go(-1);
}
function func3(){
// history.go(1);
history.go(2);
}
function func4(){
history.go(0);
}
</script>
</body>
</html>
6. BOM对象location
location作用： 负责刷新页面，跳转页面用的，可以获取地址栏上面的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM对象 location</title>
</head>
<body>
<button onclick="func1()">查看location对象</button>
<button onclick="func2()">跳转其他页面</button>
<button onclick="func3()">刷新页面</button>
<button onclick="func4()">过一秒在刷新页面</button>
<script>
function func1(){
/* 链接地址: http://ip + 端口号 + 路径 + 参数 + 锚点 */
console.log(location);
console.log(`协议:${location.protocol}`);
console.log(`ip端口号:${location.host}`);
console.log(`端口号:${location.port}`);
console.log(`路径:${location.pathname}`);
console.log(`获取锚点:${location.hash}`);
console.log(`获取地址栏参数:${location.search}`);
console.log(`完全地址:${location.href}`)
}
//跳转页面
function func2(){
// location.href = "http://www.baidu.com";方法一
location.assign("http://www.jd.com");
}
//刷新页面
function func3(){
location.reload();
}
// 过一秒在刷新页面
function func4(){
setTimeout(func3,1000);
console.log("我执行了...")
}
// 每过一秒刷新一下页面
/* 等待所有页面图片文字全部加载完毕之后,再去执行对应的代码 */
window.onload = function(){
func4()
}
</script>
</body>
</html>
7. 小提示
js三大对象 1. 本地对象：js语法 2. bom对象：浏览器相关的成员（针对于浏览器的控制）brower object model 3. dom文档对象：关于html文件节点相关的数据、相关的值（针对于html的控制） document object model js是单线程的异步程序 定时器是单线程的异步程序（例子）
ceshi.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;
padding:0;
list-style:none;}
.wrap{height:170px;
width:490px;
margin:60px auto;
overflow: hidden;
position: relative;
margin:100px auto;}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
.wrap ol{position:absolute;
right:5px;
bottom:10px;}
.wrap ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.wrap ol .on{background:#E97305;
color:#fff;}
</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic').getElementsByTagName("li"),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
// 定义并调用自动播放函数
timer = setInterval(autoPlay, 2000);
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function () {
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
clearInterval(timer);
index = this.innerText - 1;
changePic(index);
};
};
function autoPlay () {
if (++index >= pic.length) index = 0;
changePic(index);
}
// 定义图片切换函数
function changePic (curIndex) {
for (var i = 0; i < pic.length; ++i) {
pic[i].style.display = "none";
list[i].className = "";
}
pic[curIndex].style.display = "block";
list[curIndex].className = "on";
}
};
</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="../image/img1.png" alt=""></li>
<li><img src="../image/img2.png" alt=""></li>
<li><img src="../image/img3.png" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
赞 (0)
相关推荐
-
Python全栈之队列详解
目录 1. lock互斥锁 2. 事件_红绿灯效果 2.1 信号量_semaphore 2.2 事件_红绿灯效果 3. queue进程队列 4. 生产者消费者模型 5. joinablequeue队列使用 6. 总结 1. lock互斥锁 知识点: lock.acquire()# 上锁 lock.release()# 解锁 #同一时间允许一个进程上一把锁 就是Lock 加锁可以保证多个进程修改同一块数据时,同一时间只能有一个任务可以进行修改,即串行的修改,没错,速度是慢了,但牺牲速度却保证了数据
-
Python全栈之学习JS(1)
目录 1. js的数据类型 1.1 js引入方式 1.2 注释变量 1.3 数据类型 2. js类型转换_运算符 2.1 强制转换_Number 2.2 强制转换_String 2.3 强制转换_Boolean 2.4 自动类型转换_Number_Boolean_String三者之间转换 2.5 js运算符 3. js流程控制 3.1 分支结构 3.2 分支结构_switch_case 3.3 循环结构 4. js函数 4.1 函数 4.2 函数的调用 总结 1. js的数据类型 1.1 js引
-
Python全栈之线程详解
目录 1. 线程的概念 1.1 Manager_进程通信 1.2 线程的概念 2. 线程的基本使用 3. 自定义线程_守护线程 3.1 自定义线程 3.2 守护线程 4. 线程安全问题 4.1 线程安全问题 4.2 Semaphore_信号量 5. 死锁_互斥锁_递归锁 6. 线程事件 总结 1. 线程的概念 1.1 Manager_进程通信 # ### Manager ( list 列表 , dict 字典 ) 进程之间共享数据 from multiprocessing import Proc
-
Python全栈之协程详解
目录 1. 线程队列 2. 进程池_线程池 3. 回调函数 4. 协程 总结: 1. 线程队列 # ### 线程队列 from queue import Queue """ put 存放 超出队列长度阻塞 get 获取 超出队列长度阻塞 put_nowait 存放,超出队列长度报错 get_nowait 获取,超出队列长度报错 """ # (1) Queue """先进先出,后进先出"""
-
Python全栈之作用域和闭包
目录 1. return返回值 2. 全局变量_局部变量 3. 函数名的使用 4. 函数的嵌套 4.1 函数的嵌套 4.2 nonlocal的使用 5. 闭包函数的定义 6. 闭包的特点_意义 小提示: 7. 小练习 总结 1. return返回值 # ### return 自定义函数的返回值 """ 概念:return 把函数内部的数据返回到函数的外面,返回到函数的调用处 1.return + 六大标准数据类型 , 除此之外还可以返回函数 或者 是类对象 2.return
-
Python全栈之学习JS(3)
目录 1. dom节点 1.1 dom节点获取 1.2 节点元素层级关系 1.3 修改_清空内容 1.4 隐藏显示密码效果 2. 全选_反选_不选 2.1 全选_反选_不选 2.2 js控制css的相关属性 2.3 js事件 3. 模态框 1. dom节点 1.1 dom节点获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
-
Python全栈之学习JS(2)
目录 1. js对象 1.1 object对象 1.2 json对象 2. js字符串函数 3. js数组相关方法 4. js数学对象相关方法 5. BOM对象 5.1 定时器 5.2 获取年月日时分秒 5.3 Navigator 5.4 历史对象 6. BOM对象location 7. 小提示 ceshi.html: 总结 1. js对象 1.1 object对象 <!DOCTYPE html> <html lang="en"> <head> &l
-
Python全栈之学习HTML
目录 1. vscode相关配置 2. html认识 2.1 html认识 2.2 html结构 2.3 html语法特征 3. 标签种类_列表 3.1 常见标签 3.2 标签种类 3.3 列表 3.4 超链接标签 3.5 a链接跳锚点 3.6 img图片标签 3.7 table表格标签 3.8 iframe子窗口 4. 音视频_表单 4.1 音视频标签 4.2 form标签 5. 小练习 总结 1. vscode相关配置 w3c school 手册: https://www.w3school.
-
Python全栈之学习JQuery
目录 1. lable标签补充 2. jquery引入和简单使用 3. 选择器 3.1 基础选择器 3.2 组合选择 3.3 层级选择器 3.4 属性选择器 3.5 表单对象属性选择器 3.6 表单选择器 3.7 筛选器方法 4. 文本操作 4.1 选择器优先级和类值操作 4.2 值操作 4.3 创建标签 4.4 文档操作 4.5 删除和清空标签 4.6 字符串占位符 总结 1. lable标签补充 <!DOCTYPE html> <html lang="en">
-
Python全栈之学习CSS(1)
目录 1. 表单框类型 文件上传: 2. 表单属性 3. css引入 my.css 4. 选择器 4.1 常用选择器 4.2 选择器的优先级 4.3 关系选择器 4.4 属性选择器 4.5 伪类选择器_颜色设置 4.6 伪对象选择器 5. 字体属性设置 cursor属性: 6. 文本属性 7. 盒子模型 order-style: 8. 学习工具 总结 1. 表单框类型 <!DOCTYPE html> <html lang="en"> <head> &
-
Python全栈之学习MySQL(3)
目录 1. pymysql的基本操作 2. sql注入攻击 3. sql增删改查 4. mysql的数据恢复 5. sql语句优化 总结 1. pymysql的基本操作 # ### python 操作mysql import pymysql # ### 1.基本语法 """ # (1) 创建连接对象 host user password database 这四个参数必写 conn = pymysql.connect( host="127.0.0.1" ,
-
Python全栈之学习MySQL(2)
目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 (1)表结构: (2)黏贴如下sql,直接建表 (3)练习题目 总结 1. mysql_where子句_聚合函数 # ### part 单表查询 """ select ... from ... where ... group by ... having ... order by ... limit ... &
-
Python全栈之学习MySQL(1)
目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 总结 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varchar 字符长度 21845个 # ### part1 时间类型 date YYYY-MM-DD 年月日 (节假日,纪念日) time HH:MM:SS 时分秒 (体育竞赛,记录时间) year YYYY 年份 (历史,酒的年份) datetime YYYY-MM-DD HH:MM:SS 年月日 时分
-
Python全栈之学习CSS(2)
目录 1. css背景图 1.1 背景属性 1.2 背景图片引入 2. 相对_绝对_固定 2.1 相对定位 2.2 绝对定位 2.3 固定定位 3. float浮动 3.1 display转换元素 3.2 float浮动 4. html里面的bug 4.1 float内容塌陷问题 4.2 margin-top失效问题 4.3 overflow 总结 1. css背景图 1.1 背景属性 <!DOCTYPE html> <html lang="en"> <h