1.jQuery基本选择器有哪些，语法
jQuery(选择器).action()
- 元素选择器
$('p');
- iD选择器
$("#myElement")
- 类选择器
$(".myClass")
- 属性选择器
$('a[href^="https://"]'
2.如何操作类属性
//添加类名
a.classList.add("类1", "类2");
a.classList.remove("类1", "类2")3.如何操作css属性
//添加css的类名
$("#a").addClass("myClass");
// 删除类名
$("#a").removeClass("myClass");
4.把开关灯案例写出来（js或jq都可以，用pycharm或者webstorm写）
<!DOCTYPE html>
<html>
<head><style>.light {width: 100px;height: 100px;background-color: yellow;border-radius: 50%;}.on {background-color: green;}.off {background-color: red;}</style>
</head>
<body><div id="lightBulb" class="light"></div><button onclick="toggleLight()">开</button><script>function toggleLight() {// 获取具有 ID "lightBulb" 的元素，并将其存储在变量 lightBulb 中var lightBulb = document.getElementById('lightBulb');// 类列表中是否包含名为 "on" 的类。if (lightBulb.classList.contains('on')) {lightBulb.classList.remove('on');lightBulb.classList.add('off');} else {lightBulb.classList.remove('off');lightBulb.classList.add('on');}}</script>
</body>
</html>JQuery是将原生的js封装起来的框架
特点就是写的更少做的更多
【二】引入jQuery文件的方式
【1】直接写一个
<head>标签里面引用
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
【2】语法
- 元素选择器：通过元素名称选取元素。
$("p") // 选取所有 <p> 元素
$("div") // 选取所有 <div> 元素
- ID选择器：通过元素的ID属性选取元素。
$("#myElement") // 选取ID为 "myElement" 的元素
- 类选择器：通过元素的class属性选取元素。
$(".myClass") // 选取class为 "myClass" 的元素
- 属性选择器：通过元素的属性选取元素。
$("[name='email']") // 选取name属性为 "email" 的元素
$("[data-id]") // 选取具有 data-id 属性的元素
- 后代选择器：选取指定元素的后代元素。
$("ul li") // 选取所有 <ul> 元素下的 <li> 元素
- 子元素选择器：选取指定元素的直接子元素。
$("ul > li") // 选取所有 <ul> 元素的直接子元素 <li> 元素
- 兄弟元素选择器：选取指定元素的相邻兄弟元素。
$("h1 + p") // 选取紧接在 <h1> 元素后的 <p> 元素
【3】过滤选择器
$("li:first") // 选取第一个 <li> 元素
$("ul li:first")// 选取ul标签里面的第一个 <li> 元素
$("li:last") // 选取最后一个 <li> 元素
$("li:even") // 选取偶数索引的 <li> 元素
$("li:odd") // 选取奇数索引的 <li> 元素
函数)
