蓝桥杯Web组备赛笔记3

目录

一、JQuery基础

1、详细的JQ介绍，小伙伴们可以参考小编的文章

2、常用功能

二、原生xhr、ajax的使用

1、原生请求xhr详细步骤

2、ajax请求步骤

三、13届蓝桥真题（5）

1、题解

2、拓展

---

一、JQuery基础

1、详细的JQ介绍，小伙伴们可以参考小编的文章

JS基础第四课、JQ基础第一课（BOM、JQuery框架）_申小兮IU的博客-CSDN博客三个对象（location、navigator、history），本地存储，JQ概念，入口函数，顶级对象$，常用API（选择器、隐式迭代、排他思想、链式编程、样式操作、动画）https://blog.csdn.net/qq_51478745/article/details/125949735

2、常用功能

（1）获取下标、排他思想、链式编程

    
    
    
    
    
    


    
1
    
2
    
3
    
4
    
5
    

（2）实现被点击切换效果

    
    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    

 （3）动画

$('li').hide()    //隐藏
$('li').show(3000)    //3s动画显示

---

二、原生xhr、ajax的使用

1、原生请求xhr详细步骤

（1）第一步：new一个请求

（2）第二步：开启地址，请求地址

（3）第三步：设置监听事件

（4）第四步：发送

2、ajax请求步骤

var option = {
    url:'./data.json',
    method:'get',
    success:function(res){
        for(var i = 0;i

---

三、13届蓝桥真题（5）

1、题解

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    var className = '.li' + (time % 8)//获取当前转到的元素
    if(time%8===0){
      className = '.li8'
    }
    $(`${className}`).addClass('active').siblings().removeClass('active')//对当前元素加上active类，并清除除了当前元素的其他元素的active类
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    var text = $('.active').text()//获取当前选中元素的文字内容
    $('#award').text(`恭喜您抽中了${text}！！！`)
    time = 0;
    return;
  }
}

2、拓展

window.requestAnimationFrame(rolling); // 进行递归动画

（1）动画帧：解决动画流畅，但用多了性能也会不好

（2）递归：通俗的理解就是，自己调用自己【注意递归函数一定要有结束条件！】

（3）两个词

①重绘：页面样式发生改变【字体，背景颜色等等】

②回流（重排）：页面布局发生改变【容器大小】

（4）想要了解更多的小伙伴可以看mdn文档window.requestAnimationFrame - Web API 接口参考 | MDNwindow.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame