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.webp" alt=""></li>
<li><img src="../image/img2.webp" alt=""></li>
<li><img src="../image/img3.webp" 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>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注易知道(ezd.cc)的更多内容!
