标签：function python 标签 数据类型 JS BOM func var
今日内容
JS数据类型之布尔值(boolean)
boolean相当于python里的bool
python中布尔值首字母是大写的
True
False # 0 None '' [] {} ...为False
js中布尔值首字母是不需要大写的
true
false # (空字符串) 0 null undefined NaN(Not A Null)
null与undefined的区别
null可以理解为曾经拥有的 现在暂时用完了
undefined可以理解为从未拥有过
JS数据类型之对象(object)
在JS中也是一切皆对象
1.对象之数组(相当于python中的列表)
let l1 = [11, 22 ,33, 44]
2.常用内置方法
1.push()尾部追加元素 python中用的是appeend()
2.pop()获取尾部元素 跟python一致
3.unshift()头部插入元素 python中用的insert()
4.shift() 头部移除元素 python中可以使用pop(0) remove()
5.sliceq() 切片操作 python中用的是[:]
6.concat() 连接数组 python中用的是extend
7.forEach() 列出数组的每个元素
name.forEach(function(valus,index){console.log(value,index)})
8.splice() 删除元素 并向数组添加新的元素
splice(起始位,删除的个数,新增的元素)
JS数据类型之自定义对象(object)
自定义对象(相当于python中的字典)
定义方式1:
let d1 = {'name':'jason','age':'18'}
定义方式2:
let d2 = new Object()
自定义对象操作数据值的方式更加简单 直接使用句点符
eg:d1.name
JS运算符
一、算术运行符
var x=10;
var res1=x++; # 先赋值后自增 10
var res2=++x; # 先自增后赋值 12
二、比较运算符
== # 弱等于(自动转换成相同的数据类型)
eg:
5=='5' # ture
=== # 强等于(不知道转换)
eg:
5==='5' # false
三、逻辑运算法
&& # 等价于python中的and
|| # 等价于python中的or
! # 等价于python中的not
JS流程控制
一、if分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if...else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
3.if...else if...else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件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("...")
}
'switch中的case子句通常都会加break语句否则程序会继续执行后续case中的语句'
三、for循环结构
1.循环打印1-100
for (let i=1;i<101;i++){
console.log(i)};
i=1是起始位 i<101是结束条件
2.课堂小练习
打印数组内所有的数据值
var l1 = [11, 22, 33, 44, 55, 66, 77, 'jason']
for (let i=0;i<l1.length;i++){
console.log(l1[i])};
四、while循环结构
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
JS函数
一、JS函数语法结构
function 函数名(形参){
函数体代码
return 返回值
};
"""
1.function 是定义函数的关键字
2.函数名参考变量名 尽量做到见名知意 JS推荐使用驼峰体
3.形参可写可不写
4.return 返回值
"""
二、无参函数
function func(){
console.log(666)
};
func()
三、有参函数
function func(a,b){
console.log(666)
};
func()
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字
关键字:arguments
function func(name,age){
if(arguments.length===2){
console.log(name,age)
}else{
console.log('参数必须要保持相同个数')
}
};
func('jason',18)
四、匿名函数
let f1 = function(){
console.log('你好鸭')
};
f1()
五、箭头函数
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中的内置函数或者内置模块
1.固定语法
var 变量名 = new 内置对象名();
2.Date日期对象
var Obj = new Date();
Obj.getDay # 4 表示星期几
Obj.toLocaleString() # '2022/8/25 20:19:00' 表示当地时间
| 关键字 | 表示 |
|---|---|
| getDate() | 获取日 |
| getDay() | 获取星期 |
| getMonth() | 获取月(0-11) |
| getFullYear() | 获取完整年份 |
| getYear() | 获取年 |
| getHours() | 获取小时 |
| getMinutes() | 获取分钟 |
| getSeconds() | 获取秒 |
| getMilliseconds() | 获取毫秒 |
| getTime() | 返回累计毫秒数(从1970/1/1午夜) |
JS JSON序列化对象
1.回顾python序列化
import json
json.dupms
json.loads
2.js中如何实现序列化反序列化
JSON.stringify()
JSON.parse()
'js中可以直接用JSON.的方式使用'
JS RegExp正则对象
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.使用正则
reg2.test('jason666') # true
reg2.test() # ture 括号内什么都不写 相当于默认写了undefined
car reg3 = /undefined/
reg3.test('jason666') # false
reg3.test() # ture
reg3.test('undefined') # true
3.全局匹配
在正则表达式后面加个g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg2.test('jason666') # true 第一次匹配完会停留在最后面
reg2.test('jason666') # false 再次匹配没有东西就是false了
BOM与DOM操作
BOM:浏览器对象模型
通过写js代码可以跟浏览器交互
DOM:文档对象模型
通过写js代码可以跟html交互
BOM操作
1.window.innerHeight 浏览器窗口的内部高度
2.window.innerWidth 浏览器窗口的内部宽度
3.window.open() 打开新窗口
4.window.close() 关闭当前窗口
5.window.navigator.userAgent 标识是否是一个浏览器
6.window.history.forward() 前进
7.window.history.back() 后退
8.window.location.href 当前页面的网页地址
9.window.location.href = '新网址' 跳转到新网址
10.window.location.reload() 刷新页面
弹出框
1.alter() 警告框
2.confirm 确认框
3.prompt 提示框
定时器相关操作(重要)
1.单次定时
<script>
function func(){
alert('哈哈哈')
}
let t = setTimeout(func,3000) // 3秒中之后自动执行func函数
clearTimeout(t) // 取消上面的定时任务
</script>
2.循环定时
<script>
var s1 = null
function showMsg() {
function func() {
alert('哈哈哈')
}
s1 = setInterval(func, 3000) //每隔三秒就执行一次func函数
}
function clearMission() {
clearInterval(s1)
}
setTimeout(clearMission, 10000) // 10后取消上面的定时任务
showMsg()
</script>
DOM操作
JS操作html和CSS操作html学习套路一致 都是先学如何查找标签
一、直接查找
1.根据id值查找标签 结果直接是标签对象本身
document.getElementById('id值')
2.根据class值查找标签 结果是数组类型
document.getElementsByClassName('class值')
3.根据标签名查找标签 结果是数组类型
document.getElementsByTagName('标签名')
二、间接查找
1.parentElement
父节点标签元素
2.children
所有子标签
3.firstElementChild
第一个子标签元素
4.lastElementChild
最后一个子标签元素
5.nextElementSibling
下一个兄弟标签元素
6.previousElementSibling
上一个兄弟标签元素
'
如果有标签对象需要反复使用 可以是变量储存
eg:
let divEle = document.getElementById('d1')
这个时候就可以通过divEle.上面的方法查找标签了 可以反复使用
'
三、节点操作
var aEle = document.createElement('a') # 创建一个a标签
aEle.id = 'd1' # 设置id值
aEle.href = 'https://www.baidu.com' # 设置href属性
aEle.innerText = '点我去百度' # 设置文本内容
divEle.append(aEle) # div内部追加a标签
ps:动态创建 临时有效 非永久
四、属性操作
属性操作的两种方式
xxxEle.属性 只能操作默认的属性
xxxEle.setAttribule() 默认属性、自定义属性
""""
标签默认属性
id、class...
自定义属性值
name = '123',pwd = 123...
"""
五、文本操作
1.获取属性值
innerHTML # 获取这个标签内部所有的内容(包括文本、标签)
innerText # 只能这个标签内的文本
2.修改属性值
innerHTML = '<h1>嘿嘿嘿</h1>' # 识别标签语法
innerText = '<h1>哈哈哈</h1>' # 不识别标签语法
'没有赋值符号就是获取 有赋值符号就是修改'
标签：function,python,标签,数据类型,JS,BOM,func,var 来源： https://www.cnblogs.com/lisony/p/16626130.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。