当我们找到标签之后，就要学习jQuery对这个标签都能做哪些操作？
1、样式操作：也就是操作标签的css样式
添加样式：addClass
删除样式：removeClass
判断是否有该样式：hasClass
有则移除，无则添加：toggleClass
<!DOCTYPE html>
<html>
<head>
<title>初识：JavaScript</title>
<meta charset="UTF-8">
<style>
.test_style{
background: red;
}
</style>
</head>
<body>
<div id="v1">
<div id ='v2'>
<h1 id="info1"></h1>
</div>
</div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
// 添加test_style样式
$(".v1").addClass('.test_style');
// 删除test_style样式
$(".v1").removeClass('.test_style');
// 判断当前标签是否有test_style样式
$(".v1").hasClass('.test_style');
// 有test_style样式的话给你移除， 没有的话给你添加上
$(".v1").toggleClass('.test_style');
</script>
</body>
</html>
练习：在之前使用DOM和BOM时写了一个关于菜单的展开和收缩功能，如下，这是使用DOM和BOM来完成的
<!DOCTYPE html>
<html>
<head>
<title>初识：JavaScript</title>
<meta charset="UTF-8">
<style>
.group{
/*宽度*/
width: 300px;
/*边框的边距和颜色*/
border: 1px solid #ddd;
}
.group .father_menu{
/*背景颜色*/
background-color: gold;
/*内边距*/
padding: 8px 5px;
}
.group .son_menu a{
/*将（子菜单）变成块级标签，让它各占一行*/
display: block;
}
.hied{
/*给（子菜单）加上这个样式， 标签就隐藏，去掉就显示*/
display: none;
}
</style>
</head>
<body>
<!--首先定义一个菜单模块-->
<div class="group">
<!--然后定义一个（父级菜单）-->
<div class="father_menu" onclick="clickMe(this);">父级菜单</div>
<!--然后定义模块，这个模块下定义两个（子菜单）-->
<div class="son_menu">
<a href="https://www.baidu.com">子菜单1</a>
<a href="https://www.baidu.com">子菜单2</a>
</div>
</div>
<script>
function clickMe(ths){
//获取到（父级菜单）
var tag = ths.nextElementSibling;
console.log(tag.className)
// tag.className获取（父级菜单）的类名，因为点击（父级菜单）时， 类名会发生变化,可以通过F12查看
if (tag.className == "son_menu"){
// classList意思操作样式，add添加
tag.classList.add("hied")
} else {
// classList意思操作样式，remove删除
tag.classList.remove("hied")
}
}
</script>
</body>
</html>
效果：
接下来要使用jQuery看怎么实现：
练习二：如下，假如有这么一个双层菜单， 我点击一个展开， 第二个就自动关闭，点击第二个展开，第一个就自动关闭，如何实现？
2、 值和文本的操作
标签（值）操作：.val()
<!--定义输入框-->
<input type="test" id="v1"/>
// 获取输入值
$("#v1").val()
// 设置输入值
$("#v1").val('xxx')
标签（文本）操作：.text()
<div id='v2'>xxxx</div>
// 获取文本
$("#v2").text()
// 设置文本
$("#v2").test('xxx')
创造标签：意思是创建了a标签， 并往a标签里面设置xxxx内容
$('<a>').text('xxxx');
练习：如下， 假如现在要设置个聊天室功能， 输入内容点击（发送），就将输入的内容显示在下面的聊天框中，如何实现？
思路：
1. 给（发送）按钮添加一个绑定事件
2. 获取输入框的输入内容
3. 优化：如果输入的内容为空，则弹框提示
4. 创建一个新的div，并将输入内容写入新div中
5. 将新的div加入到我们想要的位置中
<!DOCTYPE html>
<html>
<head>
<title>初识：JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<input type="text" placeholder="请输入内容" id="input_area">
<input type="button" value="发送" id = "click_but">
</div>
<div id="chat">
<div id="info_area" style="width: 800px; background-color: #dddddd; border: 1px solid #333333;height: 500px"></div>
</div>
<script src="../file/jquery-3.7.1.min.js"></script>
<script>
// 1. 给（发送）按钮添加一个绑定事件
$('#click_but').click(function (){
// 2、获取输入框的输入内容
var texts = $("#input_area").val();
///3、优化：如果输入的内容为空，则弹框提示，弹窗提示“输入的内容不能为空”
if (texts.length < 1){
// 设置弹窗
alert('输入内容不能为空');
// 因为是个函数， 所以需要return
return;
}
// 4. 创建一个新的div，并将输入内容写入新div中
var New_div = $('<div>').text(texts);
// 5. 将新的div加入到我们想要的位置中。append：意思是在id=info_area的内部，添加一个标签
$('#info_area').append(New_div);
})
</script>
</body>
</html>
效果：
标签：jQuery,style,菜单,python,标签,样式,015,test,div From： https://www.cnblogs.com/FBGG/p/17925058.html