本文主要是介绍js学习Day2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
- 运算符
- 流程控制
- 三元运算符
- 函数
- 自定义对象
- 内置对象
- BOM操纵
- DOM操作
运算符
算法运算符
运算符 |
用法 |
+ |
加法 |
- |
减法 |
* |
乘法 |
/ |
除法 |
% |
取余数 |
++ |
自增,如果为x++先赋值后自增1,如果为++x先自增1后赋值 |
-- |
自减,如果为x--先赋值后自减1,如果为--x先自减1后赋值 |
|
|
比较运算符
符号 |
用法 |
> |
大于 |
< |
小于 |
>= |
大于等于 |
<= |
小于等于 |
== |
弱等于js会自动转换格式 |
!= |
弱不等于 |
=== |
强等于 |
!== |
强不等于 |
js逻辑运算符
流程控制
if判断
1.单if分支
if(条件){
条件成立时执行的分支代码模块
}
let a = 1
let b = 5
if(a<b){
console.log(a)
}
2. if else连用分支
if(条件){
条件成立时执行的代码模块
}else{
条件不成立时执行的代码块
}
let a = 1
let b = 11
if(a>b){
console.log(b)
}else{
console.log(b)
}
3.if...else if...else分支
if(条件1){
条件1成立执行的分支代码块
}else if(条件2){
条件1不成立条件2成立执行的分支代码块
}else{
条件1和2都不成立执行的分支代码块
}
4.switch语法
var n1 =2;
switch(n1){
case 0:
console.log('当case等于0的时候')
case 1:
console.log('当case等于1的时候')
case 2:
console.log('当case等于2的时候')
case 3:
console.log('当cased等于3的时候')
default:
console.log('当case没有明确赋值的时候')
}
VM4029:8 当case等于2的时候
VM4029:10 当cased等于3的时候
VM4029:12 当case没有明确赋值的时候
var n =2;
switch(n){
case 0:
console.log('当case等于0的时候')
break
case 1:
console.log('当case等于1的时候')
break
case 2:
console.log('当case等于2的时候')
break
case 3:
console.log('当cased等于3的时候')
default:
console.log('当n没有明确赋值的情况下')
}
VM4291:10 当case等于2的时候
4. while循环
while (循环条件){
循环体代码
}
5. for循环
for(初始值;循环条件;每次循环之后的操作){
循环体代码
}
# 循环打印0-9的数字
for (var q = 0;q < 10;q++){
console.log(q)
}
三元运算符
1. res = 判断条件?条件成立输出的值:条件不成立输出的值
函数
# 1.定义函数
function 函数名(参数){
函数体代码
return 返回值
}
# 2.函数解析
1.function:定义函数的关键字
2.函数的命名参考变量,js推荐使用驼峰体
3.参数可写可不写
4.return:返回值
5.调用方式:函数名加括号调用
# 3.无参函数
function 函数名(){
函数体代码
return 返回值
}
# 4.有参函数
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
调用有参函数的时候,不传参也可以调用,相当于传了两个undefined,也可以少传参数,其余的用undefined补上,也可以多传参数,
但是只会使用相应的参数
# 5.arguments关键字
用于接收所有的参数
function f1(){
console.log(arguments)
if (arguments.length === 0){
console.log('什么参数都没传')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
# 6.返回值参数
return不支持返回多个数据
# 7.匿名函数
var f3 = function (){return 222}
# 8.箭头函数
var f = v => p; #等同于v是形参,p是返回值
等同于:var f = function (v){
return p
}
function f3(){
console.log(arguments)
if(arguments.length === 0){
console.log('当单位长度为0的时候输出')
}else if(arguments.length === 0){
console.log('当单位长度为1的时候输出')
}else{
console.log('多个单位输出的时候返回')
}return '阿猫阿狗我认了'
}
f3()
VM6102:2 Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
VM6102:4 当单位长度为0的时候输出
自定义对象
# 自定义对象
js中的自定义对象相当于python里面的字典,并且js的自定义对象还可以加点取值。
自定义一个对象:var d1 = {'name':'jason','age':18},取值d1.name,也可以添加值d1.sex = meal,也支持for循环取值。
自定义对象还有一个标准格式:var d2 = new Object(),相当于生成了一个空对象
内置对象
Date对象
方法 |
作用 |
getDate |
日 |
getyear |
年 |
getDay |
星期 |
getMonth |
月(0-11) |
getFullYear |
完整年 |
getHours |
小时 |
getMinutes |
分钟 |
getSeonds |
秒 |
getMilliseconds |
毫秒 |
getTime |
时间戳 |
JSON对象
1.序列化
JSON.stringify()
2.反序列化
JSON.parse()
正则对象
1.创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用,简洁
2.全局匹配
在正则表达式的最后添加一个字母g,执行全局匹配,查找所有匹配结果,并不是在查找到第一个匹配之后就结束
var reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
3.正则表达式方法
test()方法就是一个正则表达式的方法,用于检测一个字符串是否匹配某个模式,如果匹配就返回true,否则就返回false
BOM操纵
BOM全称Browser Object Model,是指浏览器对象模型,他使js有能力与浏览器进行'对话'
# 1.打开子页面(父子联动)
window.open('https://www.baidu.com','','width=400,height=400')
# 2.关闭页面
window.close()
# 3.window方法
window.navigator.appVersion # 返回web浏览器厂商和版本的详细字符串
window.navigator.userAgent # 返回客户端绝大部分信息
window.history.forward() # 前进一页
window.history.back() # 后退一页
window.location.href # 获取页面的url地址
window.location.reload() # 刷新页面
window.location.href = url # 跳转到指定页面
'''window可以省略不写'''
-
弹框操作
1.警告框
alert()
2.用户选择框
confirm() # 用户点击确认返回true,点击取消返回flase
3.获取用户信息框
prompt() # 获取用户输入的内容,也可以通过第二个参数来设置默认的内容
-
计时器
1.单次定时
setTimeout()
2.取消定时器
clearTimeout()
3.循环定时
setInterval()
DOM操作
DOM全称Document Object Model,是指文档对象模型,通过它可以操作HTML文档的所有元素
1.通过标签名查找标签
document.getElementsByTagName('div') # 返回数组套标签对象
2.通过class值查找标签
document.getElementsByClassName('c1') # 返回数组套标签对象
3.通过id值查找标签
document.getElementById('d1') # 返回标签对象本身
间接查找
方法 |
关键字 |
parentElement |
父节点标签元素 |
children |
所有子标签 |
firstElementChild |
第一个子标签元素 |
lastElementChild |
最后一个子标签元素 |
nextElementChild |
下一个兄弟标签元素 |
previousElementSibling |
上一个兄弟标签元素 |
这篇关于js学习Day2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!