运算符
1.算数运算符
运算符 |
描述 |
+ |
加 |
- |
减 |
* |
乘 |
/ |
除 |
% |
取余(保留整数) |
++ |
递加 |
- - |
递减 |
** |
幂 |
var x=10;
var res1=x++; '先赋值后自增1' 10
var res2=++x; '先自增1后赋值' 12
2.赋值运算符
运算符 |
例子 |
等同于 |
= |
x = y |
x = y |
+= |
x += y |
x = x + y |
-= |
x -= y |
x = x - y |
*= |
x *= y |
x = x * y |
/= |
x /= y |
x = x / y |
%= |
x %= y |
x = x % y |
3、比较运算符
运算符 |
描述 |
== |
等于 |
=== |
等值等型 |
!= |
不相等 |
!== |
不等值或不等型 |
> |
大于 |
< |
小于 |
>= |
大于或等于 |
<= |
小于或等于 |
? |
三元运算符 |
弱等于:自动转换类型
'5' == 5 '结果是true js会自动转换成相同数据类型比较值是否一样'
强等于:不转换类型
'5' === 5 '结果是false'
4、逻辑运算符
运算符 |
描述 |
&& |
逻辑与 |
|| |
逻辑或 |
! |
逻辑非 |
5、类型运算符
运算符 |
描述 |
typeof |
返回变量的类型 |
instanceof |
返回 true,如果对象是对象类型的实例 |
流程控制
if语句
JS语言提供了俩种分支结构语句1.if语句 2.switch语句
if 语法结构
<script>
// 1.if的语法结构 if如果的意思
if (条件表达式 返回的值是布尔值 ) {
// 执行语句
}
2.执行思路:如果if条件表达式为 真 则执行大括号里面的语句 如果if条件表达式为 假 则不
执行里面语句直接跳过,执行if下面语句。这里的语句可以理解为一个行为把就是做了什么事情,可以做很多很多行为
</script>
if else (双分支语句)语法结构
<script>
// 1.语法结构 if 如果 else 否则
if (条件表达式) {
// 满足条件时,执行的语句
} else {
// 不满足条件时,执行的语句
}
// 2.执行思路 如果 if 条件表达式为真则执行语句1 否则语句2
// if里面的语句1 和else里面的语句2 最终只能执行一个语句
// 3.注意else后面不跟小括号
</script>
if else if else(多分支语句)语法结构
<script>
// 1.多分支语句 就是用来利用多个条件来选择不同的z语句执行 得到的结果不同 实现多选一的过程
// if else if 语法结构
if (条件表达式1) {
// 执行语句1
} else if (条件表达式2) {
// 执行语句2
} else if (条件表达式3) {
// 执行语句3
} else {
// 最后的语句
}
// 2.执行思路 如果条件表达式 1 满足条件 就执行 语句1 执行完毕后,退出整个if语句
// 如果条件表达式1 不满足条件 就执行条件表达式2 满足的话 就执行语句2.然后退出整个if语句
// 如果都不满足则执行最后else的语句
// 注意点 里面的表达式条件可为多个 是多选一的过程
</script>
分支流程控制switch语句
switch也是多分支语句 它用于基于不同的条件来执行不同的代码,当要针对变量设置一系列特定值的选项
时,就可以使用switch。
<script>
// 1.switch 语句 也是实现多选一的过程
// 语法结构
switch (表达式) {
case value1:
// 执行语句1
break;
case value2:
// 执行语句2
break;
case value3:
// 执行语句3
break;
default:
// 执行最后的语句
}
// 2.执行思路 利用我们表达式的值 和case 后面的选项值相匹配 如果匹配上,就执行case里面的语句 如果都没有匹配上 就执行default里面的语句
// 注意:最后的双逗号别忘记写了
// 3.举个例子
var num = 3
switch (num) {
case 1:
break;
case 2:
break;
case 3:
break;
default:
// 如果都没有执行这里面的
}
// 4.switch注意点
// 我们经常吧switch里面的表达式写出变量形式
// num里面的值和case后面的值必须是全等关系 也包括数据类型也要一致 如num===3 严格判断的
// break(结束的意思) 如果当前的case里面没有break 则不会退出 switch继续执行下一个case 直到遇见了break才会退出
</script>
switch语句和if else if语句区别
一般情况下他们俩是可以互相替换的
switch…case语句通常处理case比较确定值得情况下,而if…else…语句更加灵活一些,常用于范围判断(大于、等与蒙个范围)
switch语句进行条件判断后是直接跳到相对应执行语句上的效率高一些,而if…else是一条一条进行判断的
当分支比较少时,if…else语句的执行效率比switch语句高
当分支比较多时,switch语句的执行效率比较高,而且结果更清晰
for循环
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
//比如:输出10句“我想吃泡面”
// 基本写法
for(var i = 1; i <= 10; i++){
console.log('我想吃泡面~');
}
// 用户输入次数
var num = prompt('请输入次数:');
for ( var i = 1 ; i <= num; i++) {
console.log('我想吃泡面~');
}
双重for循环
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
//打印五行五列星星
var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
star += '☆'
}
// 每次满 3个星星 就 加一次换行
star += '\n'
}
console.log(star);
//核心逻辑:
//1.内层循环负责一行打印五个星星
//2.外层循环负责打印五行
for 循环小结
1.for 循环可以重复执行某些相同代码
2.for 循环可以重复执行些许不同的代码,因为我们有计数器
3.for 循环可以重复执行某些操作,比如算术运算符加法操作
4.随着需求增加,双重for循环可以做更多、更好看的效果
5.双重 for 循环,外层循环一次,内层 for 循环全部执行
6.for 循环是循环条件和数字直接相关的循环
while循环
while (条件表达式) {
// 循环体代码
}
//使用while循环,完成从盒子里取球的动作,每次取一个,共6个球。
var i=1 ;
while(i<=6){
console.log('这是去除的第'+i+'球');
i++;
}
do...while
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
//使用do…while语句,输出1-6这6个数字。
var i=1 ;
do{
console.log('这是去除的第'+i+'球');
i++;
}while(i<=6)
三元表达式
python中的三元运算
res = 11 if 1 > 2 else 22
'''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
res = 1 > 2 ? 11 : 22
'''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!
函数
function 函数名 () {
函数体..
}
1.无参函数
function f1(){console.log(111)}
f1()
2.有参函数
function f2(a, b){console.log(a,b)}
f2() # 可以调用 相当于传了两个undefined
f2(1) # 可以调用
f2(1,2) # 可以调用
f2(1,2,3,4,5) # 可以调用
'''js中的函数提供了有个内置关键字arguments:接收所有参数'''
function f2(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
3.返回值参数
function f3(){return 111}
f3()
return不支持返回多个数据
4.匿名函数
使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数
function (a, b) {
console.log(a + b);
}
函数表达式
使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式。
函数也是一种数据类型, 属于Object对象类型中的一种
var fun = function(a, b) { // 匿名函数
console.log(a + b);
};
fun(12, 13);
5.箭头函数
箭头函数是ES6新增的语法,提供了一种更加简洁的函数书写方式,类似于匿名函数,并且简化了函数定义。
完整写法
完整写法类似于匿名函数,省略了function关键字。
var s = (a,b) => {
console.log(a, b); // 1 2
return a + b;
}
s(1,2);
// 相当于
var s = function(a,b) {
console.log(a, b); // 1 2
return a + b;
}
s(1,2);
省略小括号
当参数只有1个时,可以省略小括号,当没有参数或者两个以上的参时不能省略小括号。
var s = a => {
console.log(a); // 1
return a + a;
}
s(1);
// 相当于
var s = function(a) {
console.log(a); // 1
return a + a;
}
s(1);
省略大括号
当函数体只有一行语句时,可以省略{},并且会自动return这条语句的返回值。
var cmp = (a, b) => a - b;
// 相当于
var cmp = function(a, b) { return a - b; };
省略小括号与大括号
当满足上述两个条件时,小括号与大括号可以全部省略。
var s = a => a * 2;
console.log(s(1)); // 2
// 相当于
var s = function(a) { return a * 2; }
console.log(s(1)); // 2
自定义对象
方式1:定义了person对象(有参)
function Person(name,age){//this代表person对象
//追加属性
this.name = name;
this.age = age;
//追加方法
this.say = function(){
alert("调用了say方法");
}
}
//创建对象
var p = new Person( "eric",20);
方式2:定义了person对象(无参)
function Person(){
}
//创建对象
var p =new Person();
//追加属性
p.name ="张三";
p.age = 20;
//追加方法
p.say = function(){
alert("调用了张三的say功能");
}
方式3:创建Object对象:在js中object对象代表了所有对象,是一个模板对象
var p = new Object();
//追加属性
p.name ="李四";
p.age=20;
//追加方法
p.say = function(){
alert("调用了李四的say功能");
}
json方式
var p = {
//追加属性
"name" :"王五",
"age": 25,
//追加方法
"say" :function(){
alert("调用了王五的say方法");
}
};
内置对象
Date对象
var date1 = new Date()
date1.toLocaleString() '2022/4/28 下午4:18:13'
date1.toLocaleDateString() '2022/4/28'
date1.toLocaleTimeString() '下午4:18:13'
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月(0-11)
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
JSON对象
JSON.parse()
JSON.parse()方法
作用:用于将一个 JSON 字符串转换为JavaScript 对象。
要求:字符串满足JSON字符串,否则就会转换失败。
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
JSON.stringify()
JSON.stringify()方法
作用:将 JavaScript 值转换为 JSON 字符串。
var test = {"nihao":"123"};
JSON.stringify(test);
正则对象
# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用(简化)
reg2.test('abc123') true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() true
全局匹配
在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
修饰符 |
含义 |
g |
表示全文搜索匹配,不添加,搜索到第一个匹配停止 |
i |
表示忽略大小写进行匹配,默认大小写敏感 |
m |
表示进行多行搜索匹配 |
常用正则表达式
验证字母:/^[a-zA-Z]+$/
验证长度为3的字符:/^.{3}$/
验证由26个英文字母组成的字符串:/^[A-Za-z]+$/
验证日期YYYY-MM-DD:/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/
验证邮编:/^\d{6}$/
验证日期格式YYYY-MM-DD hh:mm:ss:/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
验证整数:/^[-+]?\d*$/
验证小数:/^[-\+]?\d+(\.\d+)?$/
验证中文:/^[\u0391-\uFFE5]+$/
验证邮箱:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
验证手机号:/^1[3456789]\d{9}$/
验证身份证:/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/
BOM操作
BOM对象
window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性:
document 对象,文档对象;
location 对象,浏览器当前URL信息;
navigator 对象,浏览器本身信息;
screen 对象,客户端屏幕信息;
history 对象,浏览器访问历史信息;
window对象常用的方法
弹框类的方法。前面省略window
alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址",“打开的方式(可以是-self或-black)”,“新窗口的大小”)注:如果url为空,则默认打开一个空白页面,如果打开方式为空,则默认为新窗口方式打开页面。返回值为:返回新打开窗口的window对象
window.open('https://www.baidu.com','','width=400,height=400')
close() 关闭当前的网页。 注:存在兼容性问题 FF:禁止设置关闭浏览器的代码
Chrome:默认直接关闭
IE:询问用户
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
定时器,清除定时器。
setTimeout(函数,时间) 只执行一次
setInterval(函数,时间) 无限执行
clearTimeout/clearInterval(定时器名称) 清除定时器
location对象
window.location对象:用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。
window.location.href 获取页面的url地址
window.location.href = url # 跳转到指定页面
window.location.reload() # 刷新页面
hash 返回#号后面的字符串,不包含散列,则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回?号后面的所有值。
port 返回URL中的指定的端口号,如URL中不包含端口号返回空字符串
portocol 返回页面使用的协议。 http:或https:
navigator对象
window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。
navigator.platform:操作系统类型;
navigator.userAgent:浏览器设定的User-Agent字符串。
navigator.appName:浏览器名称;
navigator.appVersion:浏览器版本;
navigator.language:浏览器设置的语言;
userAgent是最常用的属性,用来完成浏览器判断。
screen对象
window.screen 对象包含有关用户屏幕的信息。
screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和
history对象
window.history 对象包含浏览器的历史。为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
history.back() - 加载历史列表中的前一个 URL。返回上一页。
history.forward() - 加载历史列表中的下一个 URL。返回下一页。
history.go(“参数”) -1表示上一页,1表示下一页。
window.history.forward():返回下一页
window.history.back():返回上一页
window.history.go(-1/1):返回上一页或下一页、
window.history.go("www.baidu.com");
DOM操作
Document Object Model是指文档对象模型,通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)
'''直接查找'''
# 通过标签名查找标签
document.getElementsByTagName('div') # 数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1') # 数组套标签对象
# 通过id值查找标签
document.getElementById('d1') # 标签对象本身
'''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法