Python全栈之学习JS(2)
作者：熬夜泡枸杞
这篇文章主要为大家介绍了Python全栈之JS，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!