一、Ajax

let xhr = new XMLHttpRequest;
            xhr.open("get", "./data.json", true);
            xhr.onreadystatechange = (function () {
                let {readyState,status,response}=xhr;
                if ( readyState === 4 && status === 200|304) {
                    let data = JSON.parse(response);
                    console.log(data);
                }
            });
            xhr.send();

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app {
      width: 300px;
      height: 50px;
      overflow: hidden;
      border: 1px solid #ccc;
    }
    p {
      white-space: nowrap;
      /* padding-left: 100%; */
    }
  </style>
</head>

<body>
  <div id="app">
    <p id='p'>
      是否更换法国活动分工和的符号广东富豪等富含淀粉发发的好地方
      发货的法国</p>
  </div>
</body>

</html>
<script>
  let n = 300;
  let max = p.scrollWidth;
  let timer = setInterval(() => {
    if (n <= -max) {
      n = 300
    }
    n -= 1
    p.style.transform = `translateX(${n}px)`

  }, 10);
</script>
<script src=''>
  let max = p.scrollWidth - app.offsetWidth;
  let timer = setInterval(() => {
    if (Math.round(app.scrollLeft) >= max) {
      app.scrollLeft = 0
    } else {
      app.scrollLeft += 1
    }

  }, 10);
</script>

二、jquery

JQ就是一个基于JS封装的一个用来操作DOM的一个库

1、JQ方法：

获取元素：$(css选择器)
隐藏元素：$(css选择器).hide()
显示元素：$(css选择器).show()
选择第一个子元素：$(css选择器).first()
选择兄弟元素：$(css选择器).siblings()
通过索引选择：$(css选择器).eq(索引)
增加类名：$(css选择器).addClass(属性名)
移除类名：$(css选择器).removeClass(属性名)
类名有则删/无则加：$(css选择器).toggleClass(属性名)
属性设置：
- 获取属性值：$(css选择器).attr(属性名)
- 设置属性值：$(css选择器).attr(属性名，新的属性值)
绑定事件
给页面上所有的button绑定点击事件，点谁this就是谁，this是原生的元素
- $(css选择器).on("事件名"，回调函数)
- $(css选择器).off() //解除绑定
- 点击事件绑定：$(css选择器).on("click"，function(){
  //具体代码
  })
事件加载绑定：$.ready(function(){}) //执行是在DOM树加载完成之后执行
获取数据：$.get("地址"，function(data){ console.log(data) }) //默认异步

2、原生方法

增加属性：document.classList.add()
移除属性：document.classList.remove()
有则删/无则加：doucment.classList.toggle()
属性设置\
- 获取属性值：getAttribute()
- 设置属性值：setAttribute()
- 移除属性值：removeAttribute()
事件加载绑定：window.onload = function(){} //执行是在整个页面加载完成之后执行

3、JQ链式写法

JQ执行的返回结果是一个类的实例，所以能够调用addCLass等方法
链式写法核心：上一个方法的返回结果要能调用后边方法，自己调用的时候一般用return this实现

 $("button").on("click", function () {
        //this--》button元素
        //把原生DOM 转成JQ实例--》$()
        if($('button').html()=='关灯'){
            let qq = $('body').removeClass("white").addClass("black")   //链式写法
            console.log(qq);
            $('button').html('开灯'); 
            //修改css格式
            $(this).css({
                color:'red',
                fontSize:'50px'
            })        
        }else{
            $('body').removeClass("black").addClass("white")
            $('button').html('关灯');          
        }
    })

let $head = $('.header>div'),
        $main = $('.main>div');
    //初始化
    $head.first().addClass('active').siblings().removeClass('active');
    $main.hide().eq(0).show()
    $head.on('click', function () {
        $head.removeClass('active');
        $(this).addClass('active');
        let n = $(this).index();    //获取的是 当前元素在兄弟们中的位置索引
        $main.hide().eq(n).show();
        
    });

第二十七章 Ajax & jquery

一、Ajax

二、jquery

1、JQ方法：

2、原生方法

3、JQ链式写法