蓝桥杯web赛道备战之jquery

最新推荐文章于 2025-03-02 19:22:38 发布

Humanideal

最新推荐文章于 2025-03-02 19:22:38 发布

阅读量351

点赞数 1

文章标签：蓝桥杯 jquery web 前端

本文链接：https://blog.youkuaiyun.com/Humanideal/article/details/131051963

版权

该文总结了备战蓝桥杯Web赛道所需的jQuery关键知识点，包括文档就绪函数的三种写法，元素的显示与隐藏，文本、HTML和值的操作，CSS类的添加与删除，以及Ajax的基本使用。特别强调了在比赛中这些知识点的重要性，适合时间紧张或对jQuery不熟悉的同学参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

蓝桥杯国赛就要到了，刷题的时候通过看官方讲解和发布的各种题解，针对于jquery这个考点做出了一些总结，包括常用方法和出题方法。总的来说下面总结的知识点应对比赛是完全可以的。备战蓝桥杯web赛道的同学们，如果在备战的时候时间紧张或者对jquery的知识点不清楚或者把握不扎实的，希望这个总结可以帮到你们。

文档就绪函数

（为了防止文档在完全加载之前运行jquery代码）

一般考试时题目会给出，但是对于整个index.js文件都需要自己写的可能就不会给

$(document).ready(function(){})
$().ready(function(){})
$(function(){})//推荐使用第三种，比较简洁好记

元素的显示与隐藏（经常用到）

一般到下面简单写法即可，此外这两种写法是带参数的，hide(speed,callback) speed规定显示或隐藏的速度，一般使用以下值：slow fast 或者毫秒，例如$("button").hide(1000)。callback是显示或隐藏完执行的函数名称。

题目有考过在实现显示隐藏的过渡的时候加个speed参数

$("button").hide()//元素隐藏
$("button").show()//元素显示

文档操作

text()——设置或返回所选元素的文本内容，括号里面可以写设置的文本内容（通常用于设置或修改页面上文字的内容）

html()——设置或返回匹配的元素集合中的 HTML 内容

通常用于设置遍历后数据后页面的渲染结构，会搭配模板字符串使用

括号内写标签结构可以设置HTML内容，一般设置和返回都会用到

题目出现过替换html结构时，之前有的结构还保留所以为 $(selector).html( $(selector).html() +` `)

val()——设置或返回表单字段的值

用于获取标签中属性value的对应的值（如input标签，select标签）

attr()——设置或返回匹配元素的属性和值。如：$("a").attr('href')

操作css

addClass() ——向匹配的元素添加指定的类名。

removeClass() —— 从所有匹配的元素中删除全部或者指定的类。

题目中最常见的就是给元素添加和删除指定类（一般是active）

一个元素两个方法都用到可以进行链式调用

常用来实现点击元素给对应元素添加类名，先使用排他思想，将所有兄弟节点的相应类名清空，再给点击的元素设置类名

css() —— 设置或返回样式属性。（没上面两个常用）

$("p").css("background-color");//将返回首个匹配元素的 background-color 值：
$("p").css("background-color","yellow");//为所有匹配元素设置 background-color 值

添加新的html内容

append() ——在被选元素的结尾插入内容

 $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

prepend() ——在被选元素的开头插入内容

删除元素和内容

remove() ——删除被选元素（及其子元素）

empty() —— 从被选元素中删除子元素

遍历函数

（包括用于筛选、查找和串联元素的方法）

children() ——获得匹配元素集合中每个元素的所有子元素。

each() —— 对 jQuery 对象进行迭代，为每个匹配元素执行函数。（常用遍历方法）

$(selector).each(function(index,element))//和其他方法不同，index在前，item在后

eq() —— 将匹配元素集合缩减为位于指定索引的新元素。（在遍历时，对索引元素进行操作）

.eq(index)//整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。

is() —— 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。（用于对特殊状态的元素进行操作）

题目可能会要求被选中状态的元素进行操作，或则对显示或隐藏的元素进行操作

    $('#test').is(':visible');// 是否是显示的
    $('#test').is(':hide')// 是否是隐藏的
    $('input').is(':checked')；// 判断input元素是否被选中
    $(this).is(":first-child");// 是否是第一个子元素
    $("p").parent().is("div");//父层是否为div标签
    $(this).is(".blue,.red");// 是否包含.blue,.red的class，相当于hasClass(‘classname’)
    $(this).is(":contains('LiLy')"); // 文本中是否包含LiLy这个词

parent()—— 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。

silblings()—— 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。（通常用于排他清除别的兄弟节点的指定类名）

ajax方法

（常使用get方法获取到本地数据）

//如果是get请求，使用以下简写方法即可
$.ajax("url地址").then(res=>{
  console.log(res);
})
//原始写法设置配置项
$.ajax({
            url:'',
            type:'get',  // type：请求方式 
            data: {},//携带参数
            success:function(data){ // success：成功时的回调函数
               console.log(data);
            },
            error:function(xhr){// 失败时的回调函数 
                console.log(xhr.status);
            }
        })