蓝桥杯Web组备赛笔记3

最新推荐文章于 2024-08-18 00:09:16 发布

五秒法则

最新推荐文章于 2024-08-18 00:09:16 发布

阅读量318

点赞数 1

分类专栏：蓝桥杯Web组文章标签：蓝桥杯 jquery ajax

本文链接：https://blog.csdn.net/qq_51478745/article/details/129507061

版权

蓝桥杯Web组专栏收录该内容

8 篇文章 22 订阅

订阅专栏

一、JQuery基础

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

一、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）获取下标、排他思想、链式编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery.js"></script>
    <style>
        div{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <script>
        console.log($('div').eq(0).siblings());//eq()获取下标，siblings()排他思想
        //$('div').eq(0).siblings()整句被称为链式
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            display: flex;
        }
        li{
            width: 40px;
            font-size: 30px;
            cursor: pointer;
            background-color: aqua;
            margin-right: 5px;
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
<script>
    $('li').click(function(params){
        $('li').eq($(this).index()).css({
            color:'red'
        }).siblings().css({
            color:'green'
        })
    })
</script>
</body>
</html>

（3）动画

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

二、原生xhr、ajax的使用

1、原生请求xhr详细步骤

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

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

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

（4）第四步：发送

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery.js"></script>
</head>
<body>
    <script>
        //第一步：new一个请求
        var xhr = new XMLHttpRequest()  
        // 第二步：开启地址，请求地址【请求不仅能请求接口，还能请求本地文件】
        xhr.open("get","./data.json",false)//"get"：请求方式，"./data.json"请求地址，false：同步/异步
        //第三步：设置监听事件
        xhr.onreadystatechange = function(){//当状态发生改变时
            //0未开始，1建立连接，2请求被接收，3请求处理，4请求成功
            if(xhr.readyState == 4){
                if(xhr.status == 200){//状态请求成功标识
                    console.log(JSON.parse(xhr.response));//响应
                }
            }
        }
        // 第四步：发送
        xhr.send(null)
    </script>
</body>
</html>

2、ajax请求步骤

var option = {
    url:'./data.json',
    method:'get',
    success:function(res){
        for(var i = 0;i<res.length;i++){
            console.log(res[i]);
        }
    }
}
$.ajax(option)

三、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）两个词

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

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

五秒法则

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
蓝桥杯Web组备赛笔记3

jq基础、原生xhr和ajax的使用、13届蓝桥真题（5）解答
复制链接

扫一扫

专栏目录