jquery学习笔记
首先是如何在Html中引入jQuery库
<script src="jquery-3.5.1.js"></script>1:基础选择器
基础选择器分为三类：1、基本选择器 2、层次选择器 3、属性选择器
1.1基本选择器
基本选择器又分为四类:
1、元素选择去 2、id选择器 3、class选择器 4、群组选择器
1.1.1元素选择器
语法:
$(“元素名”)
例子：
1.1.2 id选择器
语法:
$("#id名")
1.1.3 calss选择器
语法:
$(".类名")
1.1.4 群组选择器
语法:
$ (“选择器1，选择器2，……，选择器n”)
举例：
$(“span,div,#btn”).css(“color”,“red”)
分析:
表示选中所有的span,div,#btn，然后定义这些颜色为红色
1.2层次选择器
层次选择器共有四种：
1.2.1：后代选择器
语法 ：M N
说明 ：后代选择器，选择M中 所有后代N元素（包括子元素，孙元素等）
1.2.2：子代选择器
语法 ：M >N
说明：子代选择器，选择M元素内部的 子代N元素（所有第一级N元素）
1.2.3：兄弟选择器
语法： M~N
说明：兄弟选择器，选择M元素后面 所有的同级N元素。
1.2.4：相邻选择器
语法：M+N
说明：相邻选择器，选择M元素 相邻的（下一个）元素（M、N是同级元素）
经验技巧：
相邻选择器在实际开发中如果我们想要在两两元素中实现某种效果，会经常使用这个技巧。
1.3属性选择器
在实际开发中，属性选择器在表单操作用的比较多。常见的属性选择器有以下几种：
1：
语法：E[attr]
说明：选择元素E，E必须要有attr属性
举例：选取含有class属性的li
2：
语法：E[attr=“value”]
说明：选择元素E，E元素的attr属性取值为value
举例：选取class属性为12341的li
$("li[class='12341']")3：
语法：E[attr!=“value”]
说明：选择元素E，E元素的attr属性取值不为value
举例：选取class属性不为12341的li
$("li[class!='12341']")4：
语法：E[attr^=“value”]
说明：选择元素E，E元素的属性值为”value“开头
举例：选取class属性为12开头的li
$("li[class^='12']")5：
语法：E[attr$=“value”]
说明：选择元素E，E元素是以"value"结尾的任何字符
举例：选取class属性以1结尾的li
$("li[class$='1']")6：
语法：E[attr*=“value”]
说明：选择元素E，E元素是包含"value"的任何字符
举例：选取class属性包含4的li
$("li[class*='4']")7：
语法：E[attr|=“value”]
说明：选择元素E，E元素的属性值等于"value"或以"value-"（有 -连接符）开头的任何字符
举例：选取class属性等于或以1开头的li
8：
语法：E[attr~=“value”]
说明：选择元素E，E元素的的属性值等于或以空格作为分隔符时包含"value"的任何字符
举例：选取class属性等于或包含1的li
2：伪类选择器
伪类选择器都是以：号开头的，常用的有6种：
1、“位置”伪类 2、“子元素”伪类 3、“可见性”伪类
4、“内容”伪类 5、“表单”伪类 6、“表单属性”伪类
2.1 "位置"伪类选择器
根据元素在页面中的位置来选取元素。常见的有以下几种：
1：
语法：：first
说明：选取某种元素的第一个元素
2：
语法：last
说明：选取某种元素的最后一个元素
3：
语法：odd
说明：选取某种元素的序号为奇数的所有元素，序号从0开始
4：
语法：even
说明：选取某种元素的序号为偶数的所有元素，序号从0开始
5：
语法：eq（n）
说明：选取某种元素的第n个元素，序号从0开始
6：
语法：lt(n)
说明：选取某种元素的序号小于n的所有元素，序号从0开始
7：
语法：gt(n)
说明：选取某种元素的序号大于n的所有元素，序号从0开始
2.2"子元素"伪类选择器
指的是选择在某一个元素下的子元素的一种伪类选择器。有两个大类：
1、：first-child 、：last-child、：nth-child(n)、：only-child
2、：first-of-child、：last-of-child、：nth-of-child(n)、：only-of-child(不要求掌握)
第一类：
1：
语法：：M N：first-child
说明：选择父元素M下的第一个N元素。
2：
语法：：M N：last-child
说明：选择父元素M下的最后一个子元素。
3：
语法：：M N：nth-child(n)
说明：选择父元素M下的第n个或奇偶子元素，n的取值有三种：数字，odd，even（n从一开始）。
4：
语法：：M N：only-child
说明：选择父元素M下的唯一元素。
经验技巧：在jQuery中，只有：nth-child、：nth-of-type这两个选择器的下表是从一开始的，其他所有选择器和jQuery方法都是从0开始的。
2.3 "可见性"伪类选择器
指的是根据元素的可见与不可见这两种状态来选取元素。
1：
语法： ：visible
说明： 选取所有可见元素
2：
语法: :hidden
说明：选取所有不可见元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.5.1.js"></script>
<style type="text/css">
.select{
display:none;
}
</style>
<script>
$(function(){
$("#btn").click(function(){
$("li:hidden").css("display","block");
})
});
</script>
</head>
<body>
<ul>
<li >aaaa</li>
<li >bbb</li>
<li >ccc</li>
<li class="select">ddd</li>
<li >eee</li>
<li >fff</li>
<ul>
<li>ggg</li>
</ul>
</ul>
<button id="btn">显示</button>
</body>
</html>2.4"内容"伪类选择器
指的是根据元素的内部文字或者子元素来选取元素，常用的有以下几种：
1：
语法 ：contains(text)
说明：选取包含指定文本的元素
2：
语法 ：has（selector）
说明：选取包含指定选择器的元素
3：
语法 ：empty
说明：选取不包含文本或子元素的元素（空元素）
4：
语法 ：parent
说明：选取包含文本或子元素的元素
2.5:表单选择器
指的是专门操作表单元素的一种伪类选择器。有以下几种
1：
语法： ：input
说明：选取所有input元素
2：
语法： input：button
说明：选取所有普通按钮，即< input type=“button”>
3：
语法： input：submit
说明：选取所有提交按钮，即< input type=“submit”>
4：
语法：input ：reset
说明：选取所有重置按钮，即< input type=“reset”>
5：
语法：input ：text
说明：选取所有单行文本框
6：
语法： input：textarea
说明：选取所有多行文本框
7：
语法：input ：password
说明：选取所有密码文本框
8：
语法： input：radio
说明：选取所有单选框
9：
语法： input：checkbox
说明：选取所有复选框
10：
语法： ：image
说明：选取所有图片
2.6表单属性选择器
1:
语法： input:checked
说明：选取所有被选中的表单元素
2:
语法： :selected
说明：选取所有
3:
语法：:enabled
说明：选取所有可用的元素
4:
语法：focus
说明：选取所有获得焦点的元素
