前言
蓝桥杯国赛就要到了,刷题的时候通过看官方讲解和发布的各种题解,针对于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);
}
})