-
Javascript知识【jQuery：查找元素操作&案例：模拟用户分组】
目录
jQuery查找元素操作【阶段重点】
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../js/jquery-3.3.1.min.js">script>
<script>
$(function(){
//1、获取 id="b" 元素 下所有的子元素
var arr1 = $("#b").children();
/*arr1.each(function () {
alert(this.innerHTML);
});*/
//2、获取 id="b" 元素 上面的兄弟
var d2 = $("#b").prev();
//alert(d2.html());
//3、获取 id="b" 元素 下面的兄弟
var arr3 = $("#b").nextAll();
/*arr3.each(function () {
alert(this.innerHTML);
});*/
//4、获取 id="b" 元素 的父元素
var d4 = $("#b").parent();
//alert(d4.html());
//5、获取 id="b" 元素 的所有兄弟
var arr5 = $("#b").siblings();
/*arr5.each(function () {
alert(this.innerHTML);
});*/
//6、获取 id="main" 元素 下所有的font元素
var arr6 = $("#main").find("font");
alert(arr6.length);
});
script>
head>
<body>
<div id="main">
<div>
<font>a-111111111111font>
<font>a-222222222222font>
<font>a-333333333333font>
div>
<div id="b">
<font>b-111111111111font>
<font>b-222222222222font>
<font>b-333333333333font>
div>
<div>
<font>c-111111111111font>
<font>c-222222222222font>
<font>c-333333333333font>
div>
div>
body>
html>案例：模拟用户分组
使用：jQuery模拟用户分组，要求如下：
1.页面加载时显示所有分组的列表项。
2.点击某分组名称时，仅显示当前分组列表，并隐藏其他分组的列表项
- 分析：
关键点：
1、滑动特效：
滑出：slideDown
滑回：slideUp
2、获取其他兄弟节点
siblings
3、进行子元素查找操作
find("表达式");
步骤：- 页面加载完成时，为三个大DIV添加点击事件
- 点击事件中：将当前div样式由灰色变为高亮蓝色
- 将当前div中最后一个span滑动展示出来
- 获取当前div其他的兄弟节点，把兄弟节点由高亮蓝色变为灰色
- 当兄弟节点中最后一个span进行滑动收起
- 代码实现：
html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style>
/*收起的div需要加此样式*/
.unSelectedDiv{
background-color: #EDEDED;
}
/*展开的div需要加此样式*/
.selectedDiv{
background-color: #6186E8;
}
div{
border: 1px solid #CECECE;
width: 250px;
text-align: center;
font-size: 25px;
cursor: pointer;
}
div>span,div>span>a{
display: block;
}
div>span>a{
border: 1px solid #CECECE;
font-size: 15px;
background-color: #C7D5FB;
}
style>
<script src="../js/jquery-3.3.1.min.js">script>
<script>
//1、页面加载完成时，为三个大DIV添加点击事件
$(function () {
$(".selectedDiv").click(function () {
//2、点击事件中：将当前div样式由灰色变为高亮蓝色
$(this).removeClass("unSelectedDiv");
$(this).addClass("selectedDiv");
//3、将当前div中最后一个span滑动展示出来
$(this).find("span:last").slideDown(500);
//4、获取当前div其他的兄弟节点，把兄弟节点由高亮蓝色变为灰色
var arr = $(this).siblings();
arr.removeClass("selectedDiv");
arr.addClass("unSelectedDiv");
//5、当兄弟节点中最后一个span进行滑动收起
arr.find("span:last").slideUp(500);
});
});
script>
head>
<body>
<div class="selectedDiv">
<span>JavaEE组span>
<span>
<a>张三a>
<a>李四a>
span>
div>
<div class="selectedDiv">
<span>Android组span>
<span>
<a>王五a>
<a>赵六a>
span>
div>
<div class="selectedDiv">
<span>UI组span>
<span>
<a>钱七a>
<a>钢头a>
span>
div>
body>
html>关键点：
1，滑动特效：滑出：slideDown 滑回slideUp
2，获取其他兄弟节点siblings
3，进行子元素查找操作find（“表达式”）；
-
相关阅读:
Linux下zip压缩的解压
论文精读:SimGNN: A Neural Network Approachto Fast Graph Similarity Computation
前端学习C语言 - 数组和字节序
农业信息化技术导论886笔记复习
Python中安装hnswlib包出错的解决方法
JAVA基于的测试项目管理平台计算机毕业设计Mybatis+系统+数据库+调试部署
Cpolar+Emlog搭建指南—在Ubuntu上轻松创建个人博客，无需专业技能
JDK与JRE的关系
如何用 GPTs 构建自己的知识分身？（进阶篇）
解锁ESP32-C3 精简版的 GPIO11
- 原文地址：https://blog.csdn.net/m0_64550837/article/details/126310001