还有一个星期就比赛啦，做一下知识点整理

正则表达式

JS函数

regExp.test(target_Str) // 返回bool类型
target_Str.match(regExp) // 返回string类型找到匹配文本

正则表达式字符匹配

//大括号
/ab{2,5}c/
指代
/abbc/,/abbbc/,/abbbbc/,/abbbbbc/

//中括号
/a[bc]d/
指代
/abd/,/acd/

//范围表示法
/1-3a-cA-C/
指代
/123abcABC/

//常见的简写
\d就是[0-9]。表示是一位数字。记忆方式：其英文是digit（数字）。
\D就是[^0-9]。表示除数字外的任意字符。
\w就是[0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。
\W是[^0-9a-zA-Z_]。非单词字符。
\s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。
\S是[^ \t\v\n\r\f]。 非空白符。
.就是[^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外。记忆方式：想想省略号...中的每个点，都可以理解成占位符，表示任何类似的东西。
{m,} 表示至少出现m次。
{m} 等价于{m,m}，表示出现m次。
? 等价于{0,1}，表示出现或者不出现。记忆方式：问号的意思表示，有吗？
+ 等价于{1,}，表示出现至少一次。记忆方式：加号是追加的意思，得先有一个，然后才考虑追加。
* 等价于{0,}，表示出现任意次，有可能不出现。记忆方式：看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来。

贪婪匹配与惰性匹配

/d{2,5}/是尽可能多的匹配d
/d{2,5}?/是尽可能少的匹配d

对惰性匹配的记忆方式是：量词后面加个问号，问一问你知足了吗，你很贪婪吗？

分支匹配

/p1|p2|p3/
表示
/p1/,/p2/,/p3/

分支结构也是惰性的，即当前面的匹配上了，后面的就不再尝试了。

正则表达式位置匹配

^匹配开头
$匹配结尾

(?=p)，其中p是一个子模式，即p前面的位置。

比如(?=l)，表示'l'字符前面的位置，例如：

var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
// => "he#l#lo"

而(?!p)就是(?=p)的反面意思，比如：

var result = "hello".replace(/(?!l)/g, '#');

console.log(result);
// => "#h#ell#o#"

二者的学名分别是positive lookahead和negative lookahead。

比如(?=p)，一般都理解成：要求接下来的字符与p匹配，但不能包括p的那些字符。

Grid布局

简单介绍：网格布局，应用在父元素上，产生行和列组成的表格

使用Grid布局

//定义为flex布局
display: grid;

//定义每一列的宽度
grid-template-columns: ;

//定义每一行的高度
grid-template-rows: ;

以fr为单位的数据，作为分配可用空间的比例系数
repeat函数，用于创建重复的片段

grid-template-rows: repeat(3, 100px);
//第一个参数也可以选择 auto-fill ，这样浏览器会在容器大小可能的范围内重复片段
grid-template-rows: repeat(auto-fill, 100px);

[]用来命名网格线,grid-template-areas用来命名各个区域，使用字符串作为参数，一行字符串代表一行网格，不需要的用到的区域用.表示。

grid-template-rows: [r1] 1fr [r2] 2fr;

grid-template-areas: "a . c"
                     "d . f"
                     "g . i";

//设置网格列间距
grid-column-gap: 20px;

//设置网格行间距
grid-row-gap: 20px;

//简写，第一个参数是行,第二个是列
grid-gap: 20px 20px;

//指定网格自动排列的规则，row先行后列，column先列后行
grid-auto-flow: row;

minmax(min,max)产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

Grid布局的排列

justify-content、align-content和place-content justify-content 属性控制整个内容区域在容器里面的水平位置， align-content 属性控制整个内容区域的垂直位置。 place-content 是两者的复合属性，接收两个参数，第一个是align-content，第二个是justify-content，如果只写一个参数则表示两个属性相同。

start 紧靠起始位置（左或上）；
end 紧靠结束位置（右或下）；
center 居中；
stretch 项目大小没有指定时，拉伸占据整个网格容器；
space-around 行或列平均分布，首尾行或列与两端的距离等于行或列间距的一半；
space-between 行或列平均分布，首尾行或列与两端没有间距；
space-evenly 行或列平均分布，首尾行或列与两端的距离等于行或列间距；参考Flex布局

grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

//左边框是第二根垂直网格线，右边框是第四根垂直网格线
grid-column-start: 2;
grid-column-end: 4;

justify-self 属性，align-self 属性，place-self 属性 justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。 align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

JQuery

JQuery 最重要的部分就在于选择器的使用

选择器

基本选择器

元素选择器

$("div").css("color", "blue") //  后面的 css 是用来修改样式的方法，还可以同时传入多个css属性
$("div").css({
  color: "blue",
  height: "200px"
})

ID选择器和 Class选择器

$("#ID名")
$(".Class名")

群组选择器

群组选择器可以让我们同时定义多个选择器，多个选择器之间用 ,号隔开，最终返回一个 jQuery 对象，该对象中包含了这些选择器选中的全部元素。

$("span, div").css({
  color: "blue",
  height: "200px"
})

当然群组选择器中也可以使用其他任意的选择器，例如 ID 选择器、类选择器等，不一定只能使用元素选择器。

通配符选择器

通配符选择器就是可以设置全局样式的选择器，通俗来讲就是文档中的所有元素都要接受该规则。

$("*")

层次选择器

后代选择器

$("M N") // 其中 N 是 M 的后代元素

该选择器可以选择出某个元素下所有符合要求的后代元素（包含儿子、孙子、重孙子等）。

子代选择器

$("M > N") // 其中 N 是 M 的后代元素

兄弟选择器

$("M ~ N") // 选择 M 后面的所有元素 N
$().siblings() // 选择 M 的所有兄弟元素，比较常用

相邻选择器

$("M + N") // 选择 M 后面的邻居元素 N

属性选择器

选择器	说明
E[attr]	对带有 attr 属性的 E 元素进行操作。
E[attr="value"]	对 attr 值等于 value 的 E 元素进行操作。
E[attr !="value"]	对 attr 值不等于 value 的 E 元素进行操作。
E[attr ^="value"]	对带有 attr 属性，其属性值以 value 字符串开头的 E 元素进行操作。
E[attr $="value"]	对带有 attr 属性，其属性值以 value 字符串结尾的 E 元素进行操作。
E[attr *="value"]	对带有 attr 属性，其属性值包含 value 字符串的 E 元素进行操作。
E[attr ~="value"]	对带有 attr 属性，其属性值为 value 或者包含 value 的 E 元素进行操作。
E[attr ="value"]	对带有 attr 属性，其属性值为 value 和以 value- 开头的 E 元素进行操作。

// 示例代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>属性选择器</title>
    <script>
      $(function () {
        $("div[id]").css("font-size", "30px");
        $("div[id='item2']").css("color", "blue");
        $("div[id !='item2']").css("text-shadow", "2px 2px 2px #78c4d4");
        $("body[class ^='c']").css("text-align", "center");
      });
    </script>
  </head>
  <body class="content">
    <div id="item1">蓝桥云课</div>
    <div id="item2">蓝桥云课</div>
    <div class="test1">蓝桥云课</div>
    <div class="test2">蓝桥云课</div>
  </body>
</html>

JQuery 和 Ajax

get方法

$.get(url, data, callback(data, status, xhr), dataType)

举个栗子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("input").click(function () {
          $.get("food.html", function (data, status) {
            $("div").html(data);
            $("p").append(status);
          });
        });
      });
    </script>
  </head>
  <body>
    <input type="button" value="加载数据" />
    <p>请求状态为：</p>
    <div></div>
  </body>
</html>

JQuery 常用方法

html() 方法

html() 方法相当于原生 JS 中的 innerHTML 属性，用来获取或设置某个元素的内部内容。方法可以传递一个参数，自定义的字符串内容。如果传递了参数，会将元素内部的内容全部替换为传递的参数内容。如果不传递参数，会获取元素内部的内容。

// 获取元素
var $box = $(".box")
$box.html('这是新增加的子级<p>这是段落</p>')
console.log($box.html())

text() 方法

text() 方法相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字。

// 获取元素
var $box = $(".box")
console.log($box.text())
$box.text("普通文本<p>段落</p>")

val() 方法

val() 方法相当于原生 JS 中的 value 属性，用来获取或设置表单元素内容。

// 获取元素
var $box = $(".box")
var $input = $("input")
var $ta = $("textarea")
var $se = $("select")
var $opt = $("option")
console.log($box.val())
console.log($input.val())
console.log($ta.val())
console.log($se.val())
console.log($opt.val())

$input.val("haha")
$ta.val("haha")
$se.val("beijing")
$opt.val("guangzhou")

attr() 方法

attr：全称 attribute，属性的意思。

作用：用来获取或者设置标签的属性值。

设置标签的属性语法：jQuery对象.attr(name,value);

获取标签属性值语法：jQuery对象.attr(name);

removeAttr() 方法

作用：移除标签的属性

语法：removeAttr(name);

// 获取元素

    var $pic = $(".pic")

    // 标签属性设置：需要传 2 个参数
    // $pic.attr("src","images/cat2.jpg")    
    $pic.attr("hobby","sleep")    

    // 获取标签属性的值：需要 1 个参数
    console.log($pic.attr("alt"))
    console.log($pic.attr("hobby"))

    // 删除属性方法 removeAttr()
    $pic.removeAttr("hobby")

prop() 方法

针对：selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同。

获取语法：$('input').prop('属性名');

设置语法：$('input').prop('属性名',值);

// 获取元素

    var $btn = $(".btn")
    var $choose = $(".choose")
    var btn = document.querySelector(".btn")

    // 获取 disabled 的属性值
    // console.log(btn.disabled)
    // console.log($btn.attr("disabled"))
    // console.log($btn[0].disabled)

    // prop() 方法，直接操作的就是布尔值
    console.log($btn.prop("disabled"))
    console.log($choose.prop("checked"))

    // 设置
    $btn.prop("disabled",false)

css() 方法

jQuery 对象有一个 css() 的方法，用于调用 css 属性值或者更改 css 属性值。语法：jQuery对象.css(name,value); 参数1：字符串格式的 css 样式属性名参数2：设置或更改的属性值。注意一个参数：表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式。两个参数：表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。 css() 方法的第一个参数，复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法。可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，传给 css()的参数。

// 获取元素
    var $box = $(".box")

    // css() 传一个参数：获取对应的属性值
    console.log($box.css("width"))
    // 复合属性的单一属性写法，可以是横线写法，也可以是驼峰命名法
    console.log($box.css("background-color"))
    console.log($box.css("backgroundColor"))

    // css() 传入两个参数：设置或更改对应的属性值
    // $box.css("width","400px")
    // $box.css("width","400")
    // $box.css("width",500)
    // $box.css("width","+=100px")

    // 设置多条属性，可以使用对象形式的参数
    $box.css({
      "width": 200,
      "height": 300
    })

addClass() 添加类名

语法：jQuery对象.addClass('类名') 参数：字符串格式的类名。 removeClass() 移除类名

删除指定的类名语法：jQuery对象.removeClass(); 参数：字符串格式的类名。不传参数，表示删除所有的类名 toggleClass() 类名切换若这个类名存在，则会移除该类名。否则添加该类名语法：jQuery对象.toggleClass('类名'); 参数：字符串格式的类名。优点：三个方法只操作参数部分的类名，不影响原有的其他类名。 // 给 box 切换 demo 的类名，从而改变背景颜色 var $box =$ ("#box"); var $btn1 =$ ("#btn1"); var $btn2 =$ ("#btn2"); var $btn3 =$ ("#btn3");

    // jQuery 中的类名控制方法，只会操作指定的类名，不会影响其他类名
    // 点击按钮 添加，让元素增加一个类名
    $btn1.click(function () {
      $box.addClass("demo")
    })

    // 点击按钮 删除，让元素减少一个类名
    $btn2.click(function () {
      // $box.removeClass("demo")
      // 如果不传参数，会删除所有类名
      $box.removeClass()
    })

    // 点击按钮 切换，让元素在一个类名中进行添加和删除的自动切换
    $btn3.click(function () {
      $box.toggleClass("demo")
    })

hasClass() 检测类名是否存在

语法：jQuery对象.hasClass('类名'); 返回值：true 和 false // 给 box 切换 demo 的类名，从而改变背景颜色 var $box =$ ("#box"); var $btn1 =$ ("#btn1"); var $btn2 =$ ("#btn2"); var $btn3 =$ ("#btn3");

    // 判断一个类名在标签中是否加载
    console.log($box.hasClass("demo"))
    // 模拟一下 切换 类名的效果
    $btn3.click(function () {
      // 判断 box 是否有 demo 的类名
      if ($box.hasClass("demo")) {
        // 如果有 demo，就删除
        $box.removeClass("demo")
      } else {
        // 如果没有 demo，就添加一个
        $box.addClass("demo")
      }
    })

click() 方法

// 给 box 切换 demo 的类名，从而改变背景颜色
        var $box = $("#box");
        var $btn1 = $("#btn1");
        var $parents = $("#parents");

        // 添加事件，使用 自己对象的方法
        // $btn1.click(function () {
        //   $box.toggleClass("demo")
        // })

        // hover() 方法，对mouseenter 和 mouseleave 进行了合并书写
        $box.hover(function () {
          // 鼠标移入
          $box.addClass("demo")
        },function () {
          // 鼠标离开
          $box.removeClass("demo")
        })

        // jQuery 中增加了自己的事件类型：mouseenter 和 mouseleave
        // 没有事件冒泡
        // $box.mouseenter(function () {
        //   // 鼠标进入元素，触发事件
        //   console.log("box-mouse-in")
        // })

        // $box.mouseleave(function () {
        //   // 鼠标离开元素，触发事件
        //   console.log("box-mouse-out")
        // })
        // $parents.mouseenter(function () {
        //   // 鼠标进入元素，触发事件
        //   console.log("parents-mouse-in")
        // })

        // $parents.mouseleave(function () {
        //   // 鼠标离开元素，触发事件
        //   console.log("parents-mouse-out")
        // })

        // mouseover 和 mouseout ：有事件冒泡
        // $box.mouseover(function () {
        //   // 鼠标进入元素，触发事件
        //   console.log("box-mouse-in")
        // })

        // $box.mouseout(function () {
        //   // 鼠标离开元素，触发事件
        //   console.log("box-mouse-out")
        // })
        // $parents.mouseover(function () {
        //   // 鼠标进入元素，触发事件
        //   console.log("parents-mouse-in")
        // })

        // $parents.mouseout(function () {
        //   // 鼠标离开元素，触发事件
        //   console.log("parents-mouse-out")
        // })

mouseenter() 方法

jQuery 中自己的事件方法。鼠标进入一个元素触发的事件。

mouseleave() 方法

jQuery 中自己的事件方法。鼠标离开一个元素触发的事件。对比

注意：mouseenter 和 mouseleave 没有事件冒泡。

在使用时替换 mouseover 和 mouseout 更加合适。

hover() 方法

hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写。参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数。

$(this) 自己

语法： $(this) 返回值：jQuery对象常考点：在事件函数中，使用$ (this) 获取当前操作的元素。

$().siblings() 兄弟元素

常考点：获取兄弟元素，然后进行操作。语法：jQuery对象.siblings(); 返回值：jQuery对象参数：选择器

var $box = $("#box")
$box.css("background", "blue").siblings().css("background", "red")

蓝桥杯（Web应用开发）复习（一）