JQ速通

速通背景

学Ajax的时候发现自己漏学了JQ
蓝桥杯web前端组第一个题就是JQ操作

速通内容

document.ready

1
2
3

$(document).ready(function() {
    // 浏览器加载页面后，放入此func执行
});

选择器selector

多个元素可以用,分隔

标签选择器 $("button")
class选择器 $(".btn")
id选择器 $("#target1")
*, :first, :last, :eq(index), :gt(no), :lt(no), :not(selector), 还有很多↓
https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 去这里查

操作方法

添加类 .addClass("")
删除类 .removeClass("")
有则删，无则添 .toggleClass("")
更改元素CSS .css("元素名", "元素属性值")
调整标签属性 .prop("属性键", 属性值)
更改元素内部文本 .text("文本内容")
替换元素内部内容 .html("<标签>内容<标签/>")
删除元素 .remove("元素名")
移动元素 .appenTo("目标地址")
克隆元素 .clone() 可与上者搭配使用作为复制一个元素到另一个地方
选择元素的父元素 .parent() 可搭配上几个使用
选择元素的子元素 .children()可搭配上几个使用
选择元素的特定子元素 $(元素:nth-child(数))
选择奇偶元素-这里的奇偶是索引，索引从0开始 $(元素:odd/even)
修改整个页面 $("body") 可搭配上几个使用
https://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp

事件

https://www.w3school.com.cn/jquery/jquery_ref_events.asp

效果函数

https://www.w3school.com.cn/jquery/jquery_ref_effects.asp

Ajax

一个噗通栗子

$.ajax({
    url:'https://labfile.oss.aliyuncs.com/courses/4450/userlist.json',
    type: 'get',
    dataType: 'JSON',
    success(res){
        console.log(res)
        var flag = res.userlist.some(value=>value.username == username&&value.password == password);
        if(flag){
            $("#tip1").removeClass("fade").addClass("show")
            $("#tip2").removeClass("show").addClass("fade")
        }else{
            $("#tip1").removeClass("show").addClass("fade")
            $("#tip2").removeClass("fade").addClass("show")
        }
     }  
})