变量与常量
在JS中声明变量需要使用关键字
老版本 var(全部都是全局变量)
新版本 let(可以声明局部变量)
# 推荐使用let(其实问题不大)
在JS中声明常量也需要使用关键字
const # 声明一个真正意义上的常量
如何创建变量
var name = 'jason'
let name = 'jason01'
如何创建常量
const pi = 3.14
"""
可以编写js代码的地方
1.pycharm提供的js文件
2.直接使用浏览器提供的编程环境
"""
ps:pycharm在使用上述关键字的时候如果出现了报错说明js版本没有选择6
需要我们自定义设置 settings>>>l f>>>js
基本数据类型
python基本数据类型
int、float、str、list、dict、bool、tuple、set
js基本数据类型
number、string、boolean、undefined、object()
查看数据类型
python中使用type()
js中使用typeof
number类型
# 数值类型:包含了整型与浮点型
parseInt、parseFloat
NaN:Not A Number
"""NaN属于数值类型 表示的意思是 不是一个数字"""
string类型
# 定义字符类型的方式
1.单引号
2.双引号
3.小波浪号
var s1 = `
jason老师
tony老师
kevin老师
`
# 在js中字符串的拼接推荐使用+号
# 格式化输出(模板字符串的功能)
var name1 = 'jason'
var age = 18
`my name is ${name1} my age is ${age} `
boolean类型
在python中布尔值类型首字母大写
True False
在js中布尔值类型全部小写
true false
null与undefined类型
null 表示的意思是空
undefined 表示的意思是未定义
eg:null 意思是厕纸用完了 undefined 意思是厕纸都没装
对象之数组类型
# 对应到python中就是列表list
l2.splice(2,1) # 第一个参数是起始位置 第二个参数是删除元素的个数
运算符
1.比较运算符
== 弱等于 # 会自动转换数据类型至相同状态
=== 强等于 # 不会自动转换数据类型
2.逻辑运算符
python中
and or not
js中
&& || !
流程控制
'''if判断'''
python中
if 条件:
条件成立之后执行的代码
else:
条件不成立执行的代码
js中
if(条件){
条件成立之后执行的代码
}else{
条件不成立执行的代码
}
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件2成立之后执行的代码
}else{
条件都不成立执行的代码
}
'''switch'''
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
"""for循环"""
for(起始值;循环条件;每次循环后执行的操作){
for循环体代码
}
for (var i=0;i<10;i++) {
console.log(i);
}
# 练习:如何使用for循环取出数组内的每个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
"""while循环"""
while(循环条件){
循环体代码
}
三元运算符
在python中
res = '吃饭' if 18 > 10 else '喝水'
在js中
res = 18 > 10 ? '吃饭':'喝水'
函数
在python中
def 函数名(参数1,参数2,...):
'''函数注释'''
函数体代码
return 返回值
在js中
function 函数名(参数1,参数2,...){
// 函数注释
函数体代码
return 返回值
}
"""
arguments参数 可以获取传入的所有数据
也支持return和匿名函数
"""
var f = v => v;
// 等同于
var f = function(v){
return v;
}
自定义对象
# 相当于python中的字典类型
方式1: var d = {'name':'jason','age':18}
方式2: var d = Object({'name':'jason','age':18})
class MyDict(dict):
def __getattr__(self, item):
return self.get(item)
def __setattr__(self, key, value):
self[key] = value
res = MyDict(name='jason',age=18)
print(res.name)
print(res.age)
res.xxx = 123
print(res.xxx)
print(res)
内置对象
# 如果需要使用内置对象 需要关键字 new
在python中
import date
date()
在js中
new date()
##########################################################
序列化
python中
import json
json.dumps() # 序列化
json.loads() # 反序列化
js中
JSON.stringify() # 序列化
JSON.parse() # 反序列化
"""
如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作
1.在js中使用JSON.stringify()序列化成json格式字符串
2.基于网络发送给python程序(自动编码)
3.python接收 解码并反序列化
"""
##########################################################
regexp对象
方式1:var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
方式2:var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}/;
全局匹配
正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
# 全局匹配会有一个lastindex属性
reg2
/^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('jason666')
true
reg2.test('jason666')
false
reg2.lastIndex
0
reg2.test('jason666')
true
reg2.lastIndex
8
校验时不传参数默认传的是undefined
BOM与DOM操作
BOM 浏览器对象模型>>>:使用js操作浏览器
DOM 文档对象模型>>>:使用js操作前端页面
BOM操作
window.open() - 打开新窗口
window.close() - 关闭当前窗口
history.forward() // 前进一页
history.back() // 后退一页
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
setTimeout()
clearTimeout()
setInterval()
clearInterval()
DOM操作之查找标签
前缀关键字>>>:document
# 基本查找(核心)
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
"""
如果我们的js代码需要页面上某个标签加载完毕
那么该js代码应该写在body内部最下方或者引入外部js文件
"""
# 间接查找(重要)
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
var aEle = document.createElement('a'); # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/') # 设置属性
aEle.innerText = '好不好看?' # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle) # 动态添加
"""一定要明确当前手上是什么对象"""
imgEle.getAttribute('title') # 获取标签属性
innerText
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
# 不可以识别HTML标签
innerHTML
不加赋值符号是获取内部标签+文本
加了赋值符号是设置内置标签+文本
# 可以识别HTML标签
获取值操作
# 普通的文本数据获取
标签对象.value
# 特殊的文件数据获取
标签对象.value '''仅仅获取一个文件地址而已'''
标签对象.files[0] '''获取单个文件数据'''
标签对象.files '''获取所有文件数据'''
class操作
classList 查看所有的类
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
样式操作
标签对象.style.属性名 = 属性值
事件
# 就是给HTML元素添加自定义的功能
绑定事件的方式1
<button onclick="func()">点我</button>
<script>
function func() {
alert(123)
}
</script>
绑定事件的方式2
<button id="d1">选我</button>
<script>
// 1.先查找标签
var btnEle = document.getElementById('d1')
// 2.绑定事件
btnEle.onclick = function () {
alert(456)
}
</script>
内置参数this
# this指代的就是当前被操作对象本身
在事件的函数体代码内部使用
btnEle.onclick = function () {
alert(456)
console.log(this)
}
事件练习
onclick单击事件
onfocus聚焦事件
onblur失去焦点事件
onchange文本域变化事件
onload等待...加载完毕后执行的事件
# 定时器
<body>
<input type="text" id="a1">
<button id="a2">显示</button>
<button id="a3">暂停</button>
<script>
// 1. 首先查找对应标签
var btnEle = document.getElementById('a2')
var btn1Ele = document.getElementById('a3')
// 4. 定义一个储存定时器的全局变量
var t = null
// 3. 单独写一个函数用于展示时间
function showtime(){
// 3.1 获取当前时间
var ctime = new Date().toLocaleString()
// 3.2 将时间添加到input文本框中
var iEle = document.getElementById('a1')
iEle.value = ctime
}
// 2. 绑定点击事件
btnEle.onclick = function (){
if (!t){
t = setInterval(showtime,1000) // 每间隔1秒显示一次
}
}
// 5. 绑定点击事件
btn1Ele.onclick = function (){
clearInterval(t)
// 5.1 把t清空
t = null
}
</script>
</body>
// setInterval的语法格式：单位是毫秒
setInterval(function（函数名）,interval[,arg1,arg2,......argn])
# 数据校验
<body>
<div>
<p>username:
<input type="text" id="a1">
<span id="name"></span>
</p>
<p>password:
<input type="text" id="a2">
<span id="pwd"></span>
</p>
<button id="a3" style="color: pink">登录
</button>
</div>
<script>
// 查找标签按钮
var btnEle = document.getElementById('a3')
// 绑定事件
btnEle.onclick = function (){
// 获取到input框输入的数据
var usernameEle = document.getElementById('a1').value
var passwordEle = document.getElementById('a2').value
// 检验获取的数据是否符合要求
if (!usernameEle){
var splEle = document.getElementById('name')
splEle.innerText = '输入无法为空'
}
if (!passwordEle){
var spl1Ele = document.getElementById('pwd')
spl1Ele.innerText = '输入无法为空'
}
}
</script>
</body>
# 聚焦失焦事件
// 聚焦演示
var ipEle = document.getElementById('a1')
ipEle.onfocus = function (){
this.style.backgroundColor = 'pink'
}
// 失去焦点
ipEle.onblur = function (){
alert('溜了溜了')
}
# 省市联动
<body>
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
var p = document.getElementById("province");
var c = document.getElementById("city");
for (var i in data) {
var optionP = document.createElement("option");
optionP.innerHTML = i;
p.appendChild(optionP);
}
p.onchange = function () {
var pro = (this.options[this.selectedIndex]).innerHTML;
var citys = data[pro];
// 清空option
c.innerHTML = "";
for (var i=0;i<citys.length;i++) {
var option_city = document.createElement("option");
option_city.innerHTML = citys[i];
c.appendChild(option_city);
}
}
</script>
</body>
