一、数据类型之布尔值
# js中布尔值的关键字为boolean
在js中布尔值的写法为: true,false js中不用大写
而在python中为；True,False 首字母要大写
python中表示为False的有:0,None,'',[],{}..
而在js中表示为false的有:0,null,undefined,NaN
'''
在js中null表示:
曾经定义过有值 后来被删除了 就没有值了 空了
而undefined是就没有被定义过 一开始就没有
'''
二、数据类型之对象(object)
# js中的对象 相当于是python中的列表
'''在js中也是一切皆是对象'''
let l1 = [1, 2, 3, 4, 5]
# 常见的内置方法
# 1.追加元素
js中使用的push() python中使用append()
# 2.弹出元素
js和python都是pop()
# 3.头部插入元素
js中使用unshift() python使用insert()
# 4.头部移除元素
js中使用shift() python可以使用pop(0) remove()
# 5.扩展列表
js中使用concat() python中可以使用ectend()
'''但是js对象有自己独有的内置方法'''
# 6.forEach(相当于for循环取值 不过是对象独有的方法)
var l2 = ['jason','tony','kevin','jerry','oscar','jerry']
'''function就是定义一个函数 arg1就是参数 {}就是在里面写函数体代码'''
l2.forEach(function(arg1){console.log(arg1)}) # 第一个参数就是for循环提取的值
VM1691:1 jason
VM1691:1 tony
VM1691:1 kevin
VM1691:1 jerry
VM1691:1 oscar
VM1691:1 jerry
l2.forEach(function(arg1,arg2){console.log(arg1,arg2)}) # 第二个参数就是值的索引
VM1742:1 jason 0
VM1742:1 tony 1
VM1742:1 kevin 2
VM1742:1 jerry 3
VM1742:1 oscar 4
VM1742:1 jerry 5
l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)}) # 第三个就是值的来源
VM1803:1 jason 0 ['jason', 'tony', 'kevin', 'jerry', 'oscar', 'jerry']
VM1803:1 tony 1 ['jason', 'tony', 'kevin', 'jerry', 'oscar', 'jerry']
VM1803:1 kevin 2 ['jason', 'tony', 'kevin', 'jerry', 'oscar', 'jerry']
VM1803:1 jerry 3 ['jason', 'tony', 'kevin', 'jerry', 'oscar', 'jerry']
VM1803:1 oscar 4 ['jason', 'tony', 'kevin', 'jerry', 'oscar', 'jerry']
VM1803:1 jerry 5 ['jason', 'tony', 'kevin', 'jerry', 'oscar', 'jerry']
# 7.splice
splice(起始位置,删除个数,新增的值)
l2.splice(2,1,'哈哈哈')
['kevin']
l2
['jason', 'tony', '哈哈哈', 'jerry', 'oscar', 'jerry']
第一个参数就是第几个索引
第二个参数就是删除几个数据
第三个参数就是把删除的值给替换
# 8.map
就是映射
三、数据类型之自定义对象
#相当于是python中的字典
# 两种定义方式
1.
let d1 = {'name':'jason', 'age':18}
2.
let d2 new Object() 这个时候d2是没有值的 就是一个空字典
自定义对象可以直接通过句点符的方式取值
d1.name
jason
d1['name']
jason
python中如果想要句点符取值 那么需要自己定义一个类然后继承dict
在使用双下setattr和双下getattr方法
四、运算符
# 1.算数运算符
+ - * / % ++ --
普通的加减乘除是跟python用法是一样的
++和--要看数字要在哪边
var x=10;
var res1=x++; 先赋值后自增
var res2=++x; 先自增后赋值
res1
10
res2
12
# 2.比较远算符
> >= < <= != == === !==
弱等于:自动转换类型
'5' == 5 '结果是true js会自动转换成相同数据类型 再比较值是否一样'
强等于:不转换类型
'5'===5 '结果是false'
# 3.逻辑运算符
&& 等价于python中的and
|| 等价于python中的or
! 等价于python中的not
五、流程控制
# 1.if判断
python:
1.单if分支
2.if...else分支
3.if...elif...else分支
js：相当于把大括号换成了冒号
1.单if分支
if(判断条件){
条件成立执行的分支代码块
}
2.if...else分支
if(条件){
条件成立执行的分支代码块
}else{
条件不成立执行的分支代码块
}
3.if...else if ...else分支
if(条件1){
条件1成立执行的分支代码块
}else if(条件2){
条件1不成立条件2成立执行的分支代码块
}
else{
条件1和2都不成立执行的分支代码块
}
# js还有一个python没有的一个流程控制
switch case语法
var day = new Date().getDay(); # 获取当前时间
switch (day) {
case 0:
console.log("Sunday");
break; # 如果不加break会给予当前位置一直往下运行
case 1:
console.log("Monday");
break;
default: # 如果上面都没有对应 就会执行default
console.log("...")
}
# 2.循环结构
for(let i=1;i<101;i++){
console.log(i)
}
# 语法结构:
for(起始位置,循环条件,循环一次之后做的事) {循环体代码}
eg:打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
# 3.while循环
while(条件){
循环体代码
}
六、三元运算符
python中的三元运算符
res = 11 if 1 > 2 else 22
'''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算符
res = 1 === 2 ? 11 : 22
'''?前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 不管是什么编程语言 都不推荐嵌套使用
七、函数
# 1.函数的定义
'''
语法结构:
function 函数名(参数1, 参数2){
函数体代码
reutrn 返回值
}
1.function 定义函数的关键字 相当于python中的def
2.函数名的命名参考变量名 并且js推荐使用驼峰体
3.参数可写可不写
4.return 返回值 与python一样
'''
# 2.函数调用:
# 函数名加括号 有参则传参即可!!!
# 3.无参函数
function f1(){console.log(111)}
# 直接函数名加括号即可
# 4.有参函数
function f2 (a,b){console.log(a,b)}
f2() # 可以调用 相当于传了两个undefined
undefined undefined
f2(1) # 可以调用 只用一个值另一个用undefined顶替
1 undefined1
f2(1,2) # 这个就跟python一样了
1 2
f2(1,2,3,4,5) # 可以调用 只接收前两个值
1 2
'''js中的函数提供了 有个内置关键字arguments'''
function f2(){
console.log(arguments)
}
# arguments关键字可以知道传了几个参数
# 5.返回值
function f3(){
return 123
}
# js中return不支持返回多个数据 如果想返回多个值需要自己手动给他们包一个数组或对象中
# 6.匿名函数
var ff = function (){
console.log(123)
}
# 匿名函数就是不用写函数名即可 也是要配合其他函数使用
# 7.箭头函数
var f = function(v){
return v;
}
可以简写为 var f = v => v;
var f = () => 5;
# 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
# 等同于
var sum = function(num1, num2){
return num1 + num2; # 这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
八、内置对象
# js的内置对象 相当于python的内置函数和内置模块(提前写好了 直接调用即可)
# 固定语法:
var 变量名 = new 内置对象名();
# 1.日期对象 Date
var d1 = new Date()
d1.toLocaleString() '2022/8/11 17:58:41'
d1.toLocaleDateString() '2022/8/11'
d1.toLocaleTimeString() '17:58:41'
# 2.json对象
python的序列化和反序列化
import json
json.dumps()
json.loads()
js中因为json很重要所以json不需要new直接点即可
JSON.stringify()
JSON.parse()
var d1 = {name: 'jason', age: 18}
{name: 'jason', age: 18}
var d1Json = JSON.stringify(d1)
d1Json
'{"name":"jason","age":18}'
JSON.parse(d1Json)
{name: 'jason', age: 18}
# 3.RegExp(正则)
# python中想要使用正则的话需要使用 re模块
import re
# js创建正则表达式的两种方式
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('jason123') true
'''括号内什么都不写 就相当于写undefined'''
reg2.test() true
var reg3 = /undefined/
reg3.test('jason123') false
reg3.test() true
reg3.test('undefined') true
# 全局匹配
在正则表达式的最后加一个g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg2.test('jason666')
true
# 匹配完之后光标就会在最后面
reg2.test('jason666')
false
# 再次匹配就没有东西匹配所以就是false 这次匹配完光标又会回到最前面 之后匹配就是true false交替
九、BOM和DOM操作
# BOM:浏览器对象模型
就是通过js代码可以跟浏览器交互
# DOM:文档对象模型
就是通过js代码可以跟html交互
1.BOM操作
# 打开子页面
window.open('http://www.baidu.com','', 'width=200px,height=200px')
会打开一个子页面 子页面的操作可以通过一些手段传递给父页面(父子联动)
# 关闭子页面
window.close()
window.navigator.appVersion # 获取当前浏览器的厂商和版本
window.navigator.userAgent # 客户端绝大部分信息
window.history.forward() # 前进一页
window.history.back() # 后退一页
window.location.href # 获取页面的URl地址
window.location.reload() # 刷新页面
window.location.href = url # 跳转到指定的页面
window.location.reload() # 刷新页面
'''
window可以省略不写
eg:window.location.href 可以简写为 location.href
'''
# 弹框
alter() # 警告框
confirm # 确认框
获取用户点击确认或则取消 返回true或false
prompt # 提示框
获取用户输入信息 也可以通过第二个参数添加默认信息
# 定时
关键字:
setInterval:发起定时任务
clearInterval:取消定时任务
eg：
var s1 = null
function showMsg() {
function func1(){
alert('终于要干饭了') # 弹出框
}
s1 = setInterval(func1, 3000) # 每隔三秒执行func1函数
}
function clearMission(){
clearInterval(s1) # 取消s1定时任务
}
setTimeout(clearMission, 9000) # 九秒后执行clearMission函数
showMsg() # 执行showMsg函数
2.DOM操作
# JS操作html和CSS操作html学习套路一致 都是先学如何查找标签
'''直接查找'''
document.getElementById() # 根据id值查找标签 结果直接是标签对象本身
# <div id="d1">div2</div>
document.getElementsByClassName() # 根据class值查找标签 结果是数组类型
# [div.c1]
document.getElementsByTagName() # 根据标签名查找标签 结果是数组类型
# [div, div#d1, div.c1, d1: div#d1]
''''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
eg:
let divEle = document.getElementById('d1')
# 这个时候我们就可以通过divEle点上面的方法查找标签 一直点都可以
'''节点操作'''
# 动态创建一个a标签并添加到页面的指定位置
var aEle = document.createElement('a') # 创建一个a标签
aEle.href = 'http://www.sogo.com/' # 设置href属性
aEle.innerText = '点击去搜狗' # 设置文本内容
var divEle = document.getElementById('d1') # 查找标签
divEle.append(aEle) # 内部追加标签
# 就是在div标签中添加了一个a标签
'''属性操作'''
标签可以有默认属性
eg:id class ...
也可以有自定义属性
eg:username password ...
XXXEle.属性 # 只能是默认属性
XXXEle.setAttribute() # 既可以设置自定义属性也可以设置默认属性
divEle.getAttribute("age") # 获取指定属性
divEle.removeAttribute("age") # 移除指定属性
'''文本操作'''
inner.HTml
inner.Text
# 获取值的时候
innerText只会获取文本内容
innerHTML获取文本和标签
# 设置值的时候
innerText不识别标签语法
innerHTML识别标签语法
