js-字符串的方法，时间对象，获取Dom对象，绑定事件，删除事件

字符串的方法

操作字符串是可以通过下标的形式来操作的
 var str = "大家好，我是字符串";

可以用通过类似于数组的形式去操作串
    console.log(str[1])
1.通过下标去获取指定位置的字符串
    var s = str.charAt(2)
    console.log(s)

2.获取字符串的长度
    console.log(str.length)

3.可以拼接多个字符串
    var s = str.concat("我很好","abc")
    var s = str + '我很好' + 'abc'
    console.log(s)
    console.dir(String)

4.截取字符串 包含起始位置  不包含结束位置
    var str = "大家好，我是字符串";
     var s = str.slice(1)
     console.log(s)

5.判断是否包含某个字符串
     var str = "大家好，我是字符串";
     console.log(str.includes('abc'))

  6.返回指定字符串所在的下标  没有就返回-1
      var str = "大家好，我好是字符串";
      console.log(str.indexOf("好"))

   7.返回指定字符串的下标  后往前找
      console.log(str.lastIndexOf("abc"))

   8.字符串前面填充 padStart(长度,以什么填充)
       var str = "你好"
       var s = str.padStart(4,"哈")
       console.log(s)

   9.字符串后面填充
       var str = "你好"
       var s = str.padEnd(5,'x')
       console.log(s)

  10.转换成小写字母
       var str = "Haha HEHE"
       console.log(str.toLowerCase())

   11.转换成大写字母
       var str = "Haha HEHE"
       console.log(str.toUpperCase())

  12.字符串重复
       var str = "Haha HEHE"
       console.log(str.repeat(3))

   13.替换指定字符串 默认只能替换最前面那一个
       var str = "Haha HEHE"
       console.log(str.replace('H',"m"))

   14.替换整个字符串指定内容
        console.log(str.replaceAll("H","m"))

   15.将字符串转换成数组 参数是指定通过什么字符来进行分割
        var str = "你好_我好_大家好"
        console.log(str.split("_"))

   trim() 去除两边空格
        var str = "       woshi      "
        console.log(str.trim())
   去除前面的空格
        console.log(str.trimStart())
   去除后边的空格
       console.log(str.trimEnd())

数学方法

获取一个0-1的随机数包含0 不包含1
    Math.random()
    向上取整
    console.log(Math.ceil(1.4))
    向下取整
    console.log(Math.floor(1.9))
    四舍五入
    console.log(Math.round(1.3))
    取绝对值
    console.log(Math.abs(-3))

    判断多个数字的最大值
    console.log(Math.max(5,2,10,99))

    判断多个数的最小值
    console.log(Math.min(5,2,10,99))
    几的几次方
    console.log(Math.pow(3,3))

时间对象

日期对象
   创建一个日期对象 默认会返回一个当前时间的对象
    var dt = new Date();
    console.log(dt);
    创建一个指定时间的对象
    var dt = new Date("2023-5-1 0:0:0")
    var dt = new Date("2023/5/1 0:0:0")
     console.log(dt)

    // var dt = new Date();
    // 年
    // console.log(dt.getFullYear())
    // 月 月份是需要+1 0-11
    // console.log(dt.getMonth())
    // 日
    // console.log(dt.getDate())
    // 星期几 0-6 0表示星期日
    // console.log(dt.getDay())
    // 小时
    // console.log(dt.getHours())
    // 分钟
    // console.log(dt.getMinutes())
    // 秒
    // console.log(dt.getSeconds())
    // 时间戳 表示的是1970-1-1 0:0:0 离当前时间对象的毫秒数
    // 1秒等于1000毫秒
    // console.log(dt.getTime())
    // 将时间转换成世界标准时间对象
    // console.log(dt.toUTCString())

    // 获取到未来时间的时间戳
    // console.log(dt2.getTime())

    // 当前的时间戳
    // console.log(dt1.getTime())

    // 计算两个时间戳的差距
    // console.log(dt2.getTime() - dt1.getTime())
    // var time = dt2.getTime() - dt1.getTime()
    // console.log(time / 1000 / 60 / 60 /24)

获取DOM对象
      DOM:Document Object Module 文档对象模型
     document：整个文档
    /*
      方案1：document.getElementsByTagName(标签名)
        根据标签名来获取DOM对象
        -返回的是一个类似于数组的对象（集合）
    */
    // var btn = document.getElementsByTagName("button")
    // console.log(btn[0])
    // for(var i = 0; i < btn.length; i++){
    //   console.log(btn[i])
    // }

    /*
      方案2:document.getElementById(id名)
        根据id获取DOM对象
        -返回的是一个获取到的DOM对象
        
    */
    // var btn = document.getElementById("btn2")
    // console.log(btn)

    /*
      方案3：document.getElementByClass(类名)
        根据类名来获取dom对象
        -返回的是根据类名获取到的一个DOM集合
    */
    //  var btns = document.getElementsByClassName("btn1")
    //  console.log(btns)

    /*
      方案4:document.getElementByName(name值)
        根据name属性值来获取dom元素
          返回的是一个匹配上name属性值的集合对象
    */
    // var btns = document.getElementsByName("b1")
    // console.log(btns)

    /*
      方案5：document.querySelector(选择器)
        根据选择器获取dom元素 css怎么写的这里就可以怎么写
        找到第一个匹配的dom元素
          -返回的就是选择器匹配到的dom元素

    */
    // var btn = document.querySelector("button:nth-of-type(2)")
    // console.log(btn)
    /*
      方案6：：document.querySelectorAll(选择器)
          根据选择器获取dom元素 css怎么写的这里就可以怎么写
            -返回的是一个匹配到的元素集合
     */
    // var btns = document.querySelectorAll("#btn2")
    // console.log(btns)

绑定事件

  /*
      事件:
        用户和DOM进行一个互动 就需要事件绑定
    */
    var btn = document.querySelector("button")
    //必须是一个函数体 这个函数当事件被触发的时候会执行这个函数
    // btn.onclick = fn
    // btn.onclick = function (){
    //   alert("我是函数")
    // }

    // 后面的事件会覆盖掉前面的事件
    // btn.onclick = function(){
    //   alert("我是第二个事件")
    // }

    /* 事件监听
        btn.addEventListener("事件名不带on",回调函数,事件机制(true/false))
          可以监听多次的
    */
    // btn.addEventListener("click",function(){
    //   alert("我是点击事件")
    // },false)

    // btn.addEventListener("click",function(){
    //   alert("我是点击事件222")
    // },false)

删除事件

 var btn = document.querySelector("button")
    // 怎么绑的怎么删
    // btn.onclick = function () {
    //   alert("我是按钮的点击事件")
    //   /* 删除事件 */
    //   btn.onclick = null
    // }

   /*
      你绑定的是哪个函数 删出的时候就要哪个函数
    */
    function fn() {
      alert("点击事件")
      /*
      删除事件监听
       btn.removeEventListener(事件名,回调函数)
    */
      btn.removeEventListener("click", fn)
    }
    btn.addEventListener("click", fn)

  处理兼容

var btn = document.getElementById('btn')

    // btn.addEventListener("click",function(){
    //   alert("我是点击事件")
    // })
    /*
       ie监听事件
        btn.attachEvent("事件名并且需要带on",回调函数)
    */
    //   console.log(btn)
    //   btn.attachEvent("onclick",function(){
    //     alert("我是点击事件")
    //   })
    function fn() {
      alert("我是点击事件")
    }
    if (btn.addEventListener) {
      // 正常浏览器
      btn.addEventListener("click", fn)
    } else {
      // ie浏览器
      btn.attachEvent("onclick", fn)
    }

innerHTML和innerText

 var btn = document.querySelector("button")
    // 获取h1的dom对象
    var hh = document.querySelector("h1");
    btn.onclick = function () {
      // 获取dom种的内容(包含标签) 解析标签
      // console.log(hh.innerHTML)
      // 获取dom种的内容(只获取文本)  不会解析标签
      // console.log(hh.innerText)
      
      // hh.innerHTML = "<a href=''>百度</a>"
      // hh.innerText = "<a href=''>百度</a>"

    }

操作DOM属性

 // 标签中属性 其实也可以当做dom对象的的属性来使用
    // 操作dom属性基本上的情况都能拿到 除非一些特殊的属性
    var btn = document.querySelector("button")
    var aDom = document.querySelector("a")
    btn.onclick = function(){
      // console.dir(aDom)
      // 获取属性
      // console.log(aDom.href)
      // console.log(aDom.title)
      // 修改属性
      // aDom.href = "http://www.jd.com"
      // aDom.title = "京东"
    }

操作表单属性

var btn1 = document.querySelectorAll("button")[0]
    // 获取文本框表单
    var inputText = document.querySelector("[type=text]")
    var inputCheckbox = document.querySelector("[type=checkbox]")
    var inputRadio = document.querySelector("[type=radio]")
    btn1.onclick = function(){

      // 默认选中
      inputCheckbox.checked = true
      inputRadio.checked = true
 
      // 操作这些属性的时候是boolean
      // inputText.disabled = true

      // 获取表单中的value值
      // console.log(inputText.value)
      // 赋值
      // inputText.value = "呵呵"

    }
    var btn2 = document.querySelectorAll("button")[1]
    btn2.onclick = function(){
      // inputText.disabled = false
      inputCheckbox.checked = false
      inputRadio.checked = false
    }