JS数据类型与方法

JS数据类型之布尔值
JS数据类型之对象
JS数据类型之数组
JS数据类型之自定义对象
JS常见运算符
JS流程控制之分支结构
JS流程控制之循环结构
JS函数分类
JS函数名称空间与作用域
JS内置对象
BOM操作
HTML DOM树
DOM操作之标签查找
DOM操作之节点操作

JS数据类型与方法

Top

JS数据类型之布尔值

python布尔值（bool）
- True
- False: 0, None, 空字符(""), 空列表([])，空字典({})，空元组()
JS布尔值（boolean）
- true(不需要首字母大写)
- false(不需要首字母大写)：0, 空（NULL）,空字符串（""）没有定义（undefined）,不是一个数字（NaN）
- null与undefined的区别
  - null就是曾经拥有过数据，但是现在没有了，所以是内部是空，一般是在需要指定或清空一个变量时才会使用
  - nudefined可以理解为从来没有拥有过一开始就没有东西

Top

JS数据类型之对象

JavaScript中的所有事物都是对象和python一样：字符串，数值，数组，函数等，JavaScript也允许自定义对象
JavaScript提供多个内建对象，比如，String，Date，Array等
对象只是带有属性和方法的特殊数据类型

Top

JS数据类型之数组

数组相当于python中的列表可以存储多个数据，并且数据可以使任意数据类型
- let l1 = [11, "aa", 22, "bb", 33]
- var l2 = [99, "zz", 88, "yy", 77]
查看我们所定义的数组内的数据
- console.log(l1);

方法	说明	实践
.length	数组的大小，也就是我们python的长度	l1.length;
.push()	尾部追加元素	l1.push(666);
.pop()	将尾部元素弹出	l1.pop(5);不管你填多少他都只弹出最后一个数值
.unshift()	头部插入元素	l1.unshift(999);
.shift()	头部移除元素	l1.shift();和pop一样默认只弹出第一个和你填多少没什么太大关系
.slice(start,end)	切片	l1.slice(1,2);切片处理，第一个是起始位置，第二个是终止为止
.reverse()	反转	l1.reverse();前后颠倒
.join()	将数组元素连接成字符串	l1.join("");
.concat()	连接数组	var l2=l1.concat(5555512356155215,665266,66516);
.sort()	排序	l1.sort
.forEach()	将数组的每个元素传递给回调函数	l1.forEach(function(a){console.log(a)});
.splice()	删除元素，并向数组添加新的元素	l1.splice(1,2,22,33,44,55);第一位开始位置，第二位删除个数，第三位到之后的都是删除后添加的数据
.map()	返回一个数组元素调用函数处理后的值新数组	l1.map(function(a){return a + 1});

Top

JS数据类型之自定义对象

查看数据类型的方法
- typeof（是一个运算符，查看一个变量的数据类型）
声明变量
- new（关键字，变量均为对象，当生命一个变量时，那么就相当于创建了一个新的对象）
基本数据类型
- 字符串（string）
- 数值（Number）
- 布尔值（Boolean）
- 数组（cars）
- 自定义对象（object）也就是我们python中的字典
- 没有定义（undefined）
- 空（null）
- symbol(独一无二值，ES6中新增)
- bigint（谷歌67版本中出现，是指安全存储、操作大整数）

Top

JS常见运算符

运算符	类型	功能
+	算术运算符	A=10+20;
-	算术运算符	A=10-20;
*	算术运算符	A=10*20;
/	算术运算符	A=10/20
%	算术运算符	A=10 % 3;//A = 1,A 10 % 2;//A = 0(区域运算符，两个数相除，取余数)
++	算术运算符	加一运算符、自加一（++可以做前缀“++1”，也可以做后缀“1++”），如果不赋值的话结果一样，赋值的话结果就不一样了
--	算术运算符	减一运算符，自减一（--可以做前缀也可以做后缀，如果不赋值的话结果一样，赋值的话结果就不一样了）
=	赋值运算符	赋值
+=	赋值运算符	先加后赋值
-=	赋值运算符	先减后赋值
*=	赋值运算符	先乘后赋值
/=	赋值运算符	先除后等
+	字符串运算符	字符串只能进行连接运算不能进行其他运算
+=	字符串运算符	加后赋值
>	比较运算符	A=10>20返回为布尔值
<	比较运算符	A = 20>=20
>=	比较运算符	大于或等于
<=	比较运算符	小于或等于
==	比较运算符	是否相等，弱等于
!=	比较运算符	A = 10%3 != 0
===	比较运算符	A = 10%2 === “0”，强等于
!==	比较运算符	强不等
&&	逻辑运算符	返回值只有布尔值（与）
\|\|	逻辑运算符	（或）
!	逻辑运算符	（非）
?	三元运算符	条件表达式？结果1 ：结果2

总结运算符优先级：
1、小括号（）
2、一元运算符 ++ – ！比如：num++ num–
3、算数运算符先* / %后+ -
4、关系运算符 > >= < <=
5、相等运算符 ==、 !=、 =、 !
6、逻辑运算符先&& 后||
7、赋值运算符 =
8、逗号运算符 , 声明多个变量的时候
注意：一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

Top

JS流程控制之分支结构

if语句

 1.单if分支
	if（条件）条件成立后执行的代码
2.if else分支，其实就相当于把python中的：换成了{大括号}
	if(条件){
        条件成立后执行的代码
    }else {
        条件不成立后执行的代码
    }
3.if (else if) else分支
	if（条件1）{
        条件1成立后执行的代码
    }else if(条件2) {
        条件2成立后执行的代码
    }else {
        上方条件都不成立执行的代码
    }

三元运算符
- 是对if...else语句的一种简化写法
  - 把表达式1 ？表达式2 ：表达式3
switch语句

 let day = new Date().getDay():
switch （day）{
    case 0:
    	console.log("sunday");
    	break
    case 1:
    	console.log(Monday);
    	break
    default:
    	console.log("...")
}

Top

JS流程控制之循环结构

 1.for语句
for (let i=1;i<101;i++){
    console.log(i)
}
 
2.do...while语句
do {
    //循环体；
}while （循环条件）；
 
3.while语句
while （循环语句）{
    //循环体
}
 
4.for循环多个变量的判断原理，逗号表达式
for(i=0,j=0,i<10,j<6;i++,j++){
    k = i + j;
    console.log(i+"+"+j+"="+k);
}

Top

JS函数分类

 1.js普通函数
function 函数名 (形参){
    函数体代码
    return 返回值
}
2.在JS中的函数有个小知识点（bug）我们在传参的时候无论有没有形参，我们穿不穿实参和穿多少实参都可以运行，（牢记）不过我们可以通过关键字来限制传参个数arguments 
funvtion func(a, b) {
    if(arguments.length===2){
        console.log(a, b)
    }else {
        console.log('我只需要两个参数，阁下是否在愚弄本人')
    }
}
3.匿名函数
	function(a, b){
        return a + b;
    }
4.箭头函数（由于像箭头所以叫箭头函数）
	let f = function(v){
        return a + b;
    }
	let f = v => v;
    
	let f = () => 5;
	// 等同于
	let f function(){return 5};
	
	let sum = (num1, num2) => num1 + num2
	// 等同于
	let sum = function(num1,num2){
        return num1 + num2;  //返回的return 只能返回一个值，如果想要多返回需要自己手动给他们报一个数组或对象中
    }

Top

JS函数名称空间与作用域

局部变量
- 在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问他（该变量的作用域是函数内部）只要函数运行完毕，本地变量就会被删除
全局变量
- 在函数外声明的变量时全局变量，网页上所有的脚本和函数都能访问他
变量生存周期
- JavaScript变量的生命期从他们被声明的时间开始
- 局部变量会在函数运行以后被删除
- 全局变量会在页面关闭后被删除
作用域
- 首先在函数内部寻找变量，找不到则外层函数查找，逐步找到最外层，与python作用域关系查找一模一样

Top

JS内置对象

js内置对象分为三种
- 自定义对象
- 内置对象
- 浏览器对象
- 前两种是JS的基础内容，第三个则是JS独有的
- JavaScript提供了多个内置对象math、date、array、string等

类型	内置对象	介绍
数据类型	Number	数字对象
	String	字符串对象
	Boolean	布尔值对象
组合对象	Array	数组对象
	Math	数学对象
	Date	时间对象
高级对象	Object	自定义对象
	Error	错误对象
	Function	函数对象
	RegExp	正则表达式对象
	Global	全局对象

查文档
- 学习一个内置对象的使用，只要会器常用成员的使用即可，我们可以通过查文档学习，可以Mozilla开发者网络（MDN）提供了有关开放网络技术（open web）的信息，包括HTML、CSS和万维网HTML
- MDN：https://developer.mozilla.org/zh-CN/
创建对象
- var person=new object(); 创建一个person对象
- person.name="jsoeph" person对象的name属性
- person.age=21 person对象的age属性
Math对象
- Math对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整，最大值等）可以使用Math中的成员

属性、方法名	功能
Math.PI()	圆周率
Math.floor()	向下取整
Math.cell()	向上取整
Math.round()	四舍五入版就近取整，注意-3.5结果是-3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在0.1内的随机值

日期对象
- Date对象和Math对象不一样，Date是一个结构函数，所以使用时需要实例化后磁能使用其中具体的方法和属性。Date实力用来处理日期和时间
  - 获取当前时间必须实例化
  - let now = new Date();
  - 获取指定使时期对象
  - let future = new Date('2022/02/22');

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几（周日0周六6）	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前分钟	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.getSeconds()

JSON序列化对象
- 回顾python序列化
  - import json
  - json.dumps()
  - json.loads()
- JS中的序列化
  - JSON.stringify()
  - JSON.parse()
RegExp正则对象
- var reg1 = new RegExp("^[1] [a-zA-z0-9] [5,11]");
- var reg2 = /^[2] [a-zA-Z0-9] [5,9]$/;

Top

BOM操作

JavaScript分类
- ECMAScript也就是JavaScript
- DOM（Browser Object Model）是指浏览器对象模型，他使JavaScript有能力与浏览器进行"对话"
- BOM(Document Object Model)是指文档对象模型，通过他，可以访问HTML文档的所有元素
window对象
- window对象是一个全局对象，声明的所有的全局变量，全局方法函数最终都是window对象属性或者方法
- window.innerHeight 浏览器窗口内部高度
- window.innerWidth 浏览器窗口内部宽度
- window.open() 打开新的窗口
- window.close() 关闭当前窗口，只能关闭我们使用代码打开的窗口
- window.moveTo() 移动当前窗口
- window.resizeTo() 调整当前窗口的尺寸
- window.navigator.userAgent() 通过userAgent可以判断用户浏览器类型
- window.history.forward() 在于浏览器中点击按钮向前相同，前进
- window.history.back() 在于浏览器点击按钮向后相同，后退
- window.location.href = 新网址返回当前页面完整的url，修改这个属性，即跳转新页面
- window.location.reload() 重新加载页面
定时器相关操作

 1.clearTimeout(t)  取消定时任务
2.定时弹窗
function func1(){
    alter('腰酸背痛脑子疼，浑身难受,是该去做个按摩了')
}
s1 = setInterval(func1,5000)
 
 
3.循环定时弹窗，加定时取消弹窗
let s1 = null
function showMsg(){  
    function func1(){  
        alter('腰酸背痛脑子疼，浑身难受,是该去做个按摩了')
    }
    s1 = setInterval(funv1,3000)
}
funvtion clermission(){
    clearInterval(s1)
}
setTimeout(clearMission,9000)
showMsg()

Top

HTML DOM树

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法
当网页被加载时，浏览器会创建页面的文档对象模型
HTML DOM模型被构造成对象的树
DOM标准规定HTML文档中的每个成分都是一个节点（node）：
- 文档节点（document对象）:代表整个文档
- 元素节点（element对象）：代表一个元素（标签）
- 文本节点（text对象）：代表元素（标签）中的文本
- 属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
- 注释是注释节点（comment对象）
JavaScript可以通过DOM差UN根据爱你动态的HTML
- JavaScript能够改变页面中的所有HTML元素
- JavaScript能够改变页面中的s偶有HTML属性
- JavaScript能够改变页面中的所有CSS样式
- JavaScript能够对页面中的所有时间做出反应

Top

DOM操作之标签查找

直接查找标签
- document.getElementById 根据ID获取一个标签
- document.getElementsByClassName 根据class属性获取
- document.getElementsByTagName 根据标签名获取标签合集
涉及到DOM操作的JS代码应该放在文档的哪个位置
间接查找
- parentElement 父节点标签元素
- children 所有子标签
- firstElementChild 第一个子标签元素
- lastElementChild 最后一个子标签元素
- nextElementSobling 下一个兄弟标签元素
- previousElementSibling 上一个兄弟标签元素

Top

DOM操作之节点操作

 1.节点操作
let XXXEle = document.cerateElement('标签名')  创建元素节点对象
XXXEle.id = 'id值'  创建id节点对象
XXXEle.innerText = '内部文本'  创建文本节点对象
divEle.append(XXXEle)  增加节点
 
2.属性操作
XXXEle.属性       		只能是默认属性
divEle.setAttribute			默认属性、自定义属性都可
3.文本操作
divEle.innerHTML
divEle.innerText
divEle.innerHTML = '<h1>就这？<h1>'
 
divEle.innerText = '<h1>纵使背负天渊，一手托着原始帝城，我安澜照样无敌于世间<h1>'

a-zA-Z ↩︎
a-zA-Z ↩︎

posted @ 2022-08-25 22:26 Joseph-bright 阅读(172) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JS操作补充与jQuery的基本使用

· CSS补充与JavaScript简介

· JS数据类型、流程控制、函数与BOM与DOM操作

· 前端 JS

· 今日内容JS基本数据类型，流程控制，函数与面向对象 JS的BOM与DOM操作

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

昵称： Joseph-bright
园龄： 2年8个月
粉丝： 0
关注： 31

+加关注

2025年3月

日

一

二

三

四

五

六

joseph-bright

JS数据类型与方法

JS数据类型与方法

JS数据类型之布尔值

JS数据类型之对象

JS数据类型之数组

JS数据类型之自定义对象

JS常见运算符

JS流程控制之分支结构

JS流程控制之循环结构

JS函数分类

JS函数名称空间与作用域

JS内置对象

BOM操作

HTML DOM树

DOM操作之标签查找

DOM操作之节点操作

公告

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

目录导航

	1.单if分支
	if（条件）条件成立后执行的代码
	2.if else分支，其实就相当于把python中的：换成了{大括号}
	if(条件){
	条件成立后执行的代码
	}else {
	条件不成立后执行的代码
	}
	3.if (else if) else分支
	if（条件1）{
	条件1成立后执行的代码
	}else if(条件2) {
	条件2成立后执行的代码
	}else {
	上方条件都不成立执行的代码
	}

	let day = new Date().getDay():
	switch （day）{
	case 0:
	console.log("sunday");
	break
	case 1:
	console.log(Monday);
	break
	default:
	console.log("...")
	}

	1.for语句
	for (let i=1;i<101;i++){
	console.log(i)
	}

	2.do...while语句
	do {
	//循环体；
	}while （循环条件）；

	3.while语句
	while （循环语句）{
	//循环体
	}

	4.for循环多个变量的判断原理，逗号表达式
	for(i=0,j=0,i<10,j<6;i++,j++){
	k = i + j;
	console.log(i+"+"+j+"="+k);
	}

	1.js普通函数
	function 函数名 (形参){
	函数体代码
	return 返回值
	}
	2.在JS中的函数有个小知识点（bug）我们在传参的时候无论有没有形参，我们穿不穿实参和穿多少实参都可以运行，（牢记）不过我们可以通过关键字来限制传参个数arguments
	funvtion func(a, b) {
	if(arguments.length===2){
	console.log(a, b)
	}else {
	console.log('我只需要两个参数，阁下是否在愚弄本人')
	}
	}
	3.匿名函数
	function(a, b){
	return a + b;
	}
	4.箭头函数（由于像箭头所以叫箭头函数）
	let f = function(v){
	return a + b;
	}
	let f = v => v;

	let f = () => 5;
	// 等同于
	let f function(){return 5};

	let sum = (num1, num2) => num1 + num2
	// 等同于
	let sum = function(num1,num2){
	return num1 + num2; //返回的return 只能返回一个值，如果想要多返回需要自己手动给他们报一个数组或对象中
	}

	1.clearTimeout(t) 取消定时任务
	2.定时弹窗
	function func1(){
	alter('腰酸背痛脑子疼，浑身难受,是该去做个按摩了')
	}
	s1 = setInterval(func1,5000)


	3.循环定时弹窗，加定时取消弹窗
	let s1 = null
	function showMsg(){
	function func1(){
	alter('腰酸背痛脑子疼，浑身难受,是该去做个按摩了')
	}
	s1 = setInterval(funv1,3000)
	}
	funvtion clermission(){
	clearInterval(s1)
	}
	setTimeout(clearMission,9000)
	showMsg()

	1.节点操作
	let XXXEle = document.cerateElement('标签名') 创建元素节点对象
	XXXEle.id = 'id值' 创建id节点对象
	XXXEle.innerText = '内部文本' 创建文本节点对象
	divEle.append(XXXEle) 增加节点

	2.属性操作
	XXXEle.属性只能是默认属性
	divEle.setAttribute 默认属性、自定义属性都可
	3.文本操作
	divEle.innerHTML
	divEle.innerText
	divEle.innerHTML = '<h1>就这？<h1>'

	divEle.innerText = '<h1>纵使背负天渊，一手托着原始帝城，我安澜照样无敌于世间<h1>'