JS的学习

let声明变量，const声明常量

``:为模板字符串

函数：

1.具名函数

<script>
    //1.具名函数
      /* function add(a,b){
        return a+b;
      }
      let result = add(10,20)
      console.log(result); */
    //2.函数表达式匿名函数 
    /* let add = function(a,b){
      return a+b;
    }
    let result1 = add(10,5)
    console.log(result1); */
    //3.箭头函数匿名函数
    let add = (a,b)=> {
      return a+b;
    }
    let result2 = add(20,5)
    console.log(result2);
  </script>

自定义对象：

json格式:

   //3.JSON-JS对象标记法
   let person = {
    name:"itcast",
    age:18,
    gender:'男'
   }
   alert(JSON.stringify(person))

   let student = '{"name":"chen","age":15}'
   alert(JSON.parse(student).name);

json只是字符串,用parse获取对象，用stringify获取json格式

DOM:

<script>
    //可以利用DOM,修改html中的数据
    //用document.querySelectorAll('h1')为数组
    let h1 = document.querySelectorAll('h1');
    h1[2].innerHTML = '修改后的文本 ';
    //可以利用DOM,修改html中的数据,此方法为id选择器，选择一个数据
    let h1 = document.querySelector('#title1');
    h1.innerHTML = '修改后的文本 ';
  </script>

事件监听：

第一种方法可以多次绑定同一元素，早期版本如果多次绑定同一事件，会进行覆盖

<script>
    //现在的方法（不会覆盖）
    document.querySelector("#btn1").addEventListener('click',()=>{
      console.log("hahahah");})
    document.querySelector("#btn1").addEventListener('click',()=>{
      console.log("hahahah22");})
    //早期版本的方法 (多次引用一个方法会覆盖)
    document.querySelector('#btn2').onclick = () =>{
      console.log('哈哈哈1')
    } 
    document.querySelector('#btn2').onclick = () =>{
      console.log('哈哈哈12332  ')
    } 
  </script>

实现：

常见的事件：