js操作

一、数据类型之布尔值

# 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识别标签语法