JavaScript常规使用

目录

• 一. Js运算符
  • 1.运算符
  • 2.比较运算符
  • 3.逻辑运算符
• 二.Js流程控制
  • 1.if分支
  • 2.if.else分支
  • 3.switch语法
  • 4.while循环
  • 5.for循环
• 三.JS三元运算符
• 四.Js函数
  • 1.普通函数
  • 2.匿名函数
  • 3.箭头函数
• 五.自定义对象
• 六.内置对象
  • 1.Json对象
  • 2. 正则对象
• 七.BOM操作
  • 弹框界面
  • 弹窗计时器
• 八.DOM操作

一. Js运算符

1.运算符

2.比较运算符

3.逻辑运算符

# 1.算数符
var x = 10;   定义 全局 X = 10
var q = x++   ++在后 先赋值后自增1  结果10
var q = ++x   ++在前 先自增1后赋值  结果12

其他的 + - * % 和python统一

# 2.比较运算符
'5' == 5      ==在JS中自动转换类型   结果true
'5' === 5     ===在JS中属于不转换类型 结果false

# 3.逻辑运算符
逻辑运算符python 
and   or   not
对应的JS语言中的是
&&    ||    !

二.Js流程控制

1.if分支

2.if.else分支

3.switch语法

4.while循环

5.for循环

# 1.JS语言中if分支
if（判断的条件6>5）{条件成立执行的子代码}

# 2.JS语言中if.else分支
if(条件){条件成立的子代码块}else{条件不成立的代码块}
JS语言中是没有leif的子分支的加判断就else

# 3.JS语言中switch语法 英文意思是(开关)
var  q = 1;
switch (q) {case:0
console.log('case等于0打印')
case:1 
console.log('case等于1打印')}
default:
console.log
('两者都不成立打印')

和if slse 意思基本一致

# 4.while循环
while(循环条件){循环体代码}
break;

# 5.for循环
for(初始值;循环条件;每次魂环之后的操作){循环体代码}
比如打印0~9
for(var q=0;q<10;q++){console.log(q);}

打印数组内所有元素
var q = [11,22,33,44,55]
for(var i=0;i<q.length;i++){console.log(q[]i)}

三.JS三元运算符

python中三元运算:

q = (11 if 1 > 2 else 22)
print(q)

JS中的三元运算:
q = q=1>2 ? 11:22
结果22

'三元运算符不推荐嵌套'

四.Js函数

1.普通函数

function '定义函数' 函数名 (参数)
{函数体代码 
return返回值}

'Js函数名推荐使用驼峰体'
参数的不同
'Js函数不一致的地方是实参与传参 定义实参
在传参的时候可以不传 或传多个'
'Js中函数提供内置关键字arguments 接受了所有参数'
return返回值的不同
'Js中返回值return不支持返回多个数据'

2.匿名函数

var q = function '定义函数'(参数)
{函数体代码}

'看似无函数名 但赋予了变量名q'

3.箭头函数

var q = w => w;
'函数名q' w是形参=>w是返回值
同等于
var q = function(w){return w}；

五.自定义对象

自定义对象相当于字典
var q = {'name': 'thn','age':18}
'js字典可以用过句点符取值 接近与一个对象'
q.name   #  thn
q.age    # 18
'循环取值'
for(var i in q){console.log(q[i])}
# thn
# 18
for(var i in q){console.log(i)}
# name
# age

六.内置对象

# 1.Date对象
内置对象内包含了一些内置方法与模块并直接调用好的

var d1 = new Date()    # new生成一个空字典  # Date 时间内置模块
undefined
d1.toLocaleDateString()
'2022/4/28'
d1.toLocaleTimeString()
'下午6:31:20'
d1.toLocaleString()
'2022/4/28 下午6:31:20'

名称	方法
获取日	getDate
获取星期	getDay
获取月（0-11）	getMonth
获取完整年份	getFullYear
获取年	getYear
获取小时	getHours
获取分钟	getMinutes
获取秒	getSeconds
获取毫秒	getMilliseconds
返回累计毫秒数(从1970/1/1午夜)	getTime

1.Json对象

  # python中如何序列化反序列
import json
json.dumps()
json.loads()
# js中如何序列化反序列化
JSON.stringify()   
JSON.parse()

2. 正则对象

# 1.js创建正则两种方式（内部有re模块）
car res = new RegExg("^[a-zA-Z][a-zA-Z0-9]{5,11}")
'开头第一位必须是字母其他的是字母或者数字可以是5~11位'

car res1 = /^[a-zA-Z][a-zA-Z0-9]{5,11};
'开头第一位必须是字母其他的是字母或者数字可以是5~11位'

'第二种是简化版本'

# 2.使用正则(已上方简化为例)
res1.test('qqq')
res1.test()
'返回值都是true'
'js自动返回undefined符合条件返回true'
res1.test('qqqqqq1231231321qqqqq')
'返回false'
'不符合，只会校验一次超出范围返回false'

# 3.全局匹配
car res1 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g;
'加g的话 会出现 校验一次 重置一次'

七.BOM操作

# 什么是BOM操作：
Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行'对话'

# 通过js方式打开一个子页面
window.open('https://www.baidu.com','','width=400,height=400')

# 通过js方式其他操作网页的方法
window.close()                  # 关闭网页
window.navigator.appVersion     # 查看浏览器版本
window.navigator.userAgent      # 查看客户端
'navigator'相当于导航

window.history.forward()        # 前进 一页 
window.history.back             # 后退 一页
'history'同等于历史

window.location.herf            # 获取网页url(超链接)地址
window.location.reload()        # 刷新页面
window.location.herf = url      # 跳转到指定的页面
'location'同等于位置地点

弹框界面

alert('上图就是弹出的窗口弹框')      # 弹窗警告

confirm('请你说出我爱你')
获取用户是点击取消还是确认 返回false和true
'可以通过用户输入进行判断'

prompt('那就这样吧')               # 提示
获取用户输入的内容 也可以通过第二个参数添加默认内容

弹窗计时器

'单次定时'
function Show(){alert('你还好么')}  # 函数定义弹框
setTimeout(Show,3000)              # 设置3秒弹框

'循环定时'
var s = setInterval(Show,3000)     #  循环弹框
'setInterval'设置间隔
clearInterval(s)                   #  结束循环
'clearinterval'清除间隔

"""
因为: DOM操作是操作页面上的HTML代码 但HTML的加载顺序是从上到下的
所以: 代码征程执行需等待HTML代码加载完毕
措施: 将script标签写在body内最下方
"""

八.DOM操作

1.什么是DOM操作：
Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素

如何查找Js标签
# 1.通过标签名查找标签
document.getElementsByTagName('div') (范围查找)
'通过文件 获取 基本元素 标签名字'
[div, div#q1, div.q2, q1: div#q1] 获得数组套标签

# 2.通过class值查找标签
document.getElementsByClassName('q2') （范围查找）
[div.q2]  获得数组套标签

# 3.通过id值查找标签
document.getElementById('q1') （精确查找）
<div id="q1">div2</div>  获得的是标签对象

'以上属于直接查找 以下输入简介查找'

parentElement            父标签

children                 所有子标签

firstElementChild        第一个子标签

lastElementChild         最后一个子标签

nextElementSibling       下一个兄弟标签

previousElementSibling   上一个兄弟标签

'可以通过点的方式 找到其他标签'