jQuery【jQuery树遍历、jQuery动画(一)、jQuery动画(二)】(四)-全面详解(学习总结---从入门到深化)

目录

jQuery树遍历

jQuery动画(一)

jQuery动画(二)


jQuery树遍历

1、 .children()
获得子元素,可以传递一个选择器参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul class="first"><li>item 1</li><li><ul class="secode"><li>child item 1</li><li>child item 2</li><span>child span</span></ul></li><li>item 3</li></ul><script>$(".first").children().css("border","1px solid red")$(".first").children("li").css("border","1px solid red")</script>
</body>
</html>

2、.find()
寻找后代元素
 

温馨提示
.find() .children() 方法是相似的,但后者只是再DOM树中向下遍历一个层级(注:就是只查找子元素,而不是后代元素)。
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul class="first"><li>item 1</li><li><ul class="secode"><li>child item 1</li><li>child item 2</li><span>child span</span></ul></li><li>item 3</li></ul><script>$(".first").find("li").css("border","1px solid red")</script>
</body>
</html>

3、.next()
取得元素紧邻的后面同辈元素
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div>Hello</div><p>内容</p><span>元素</span><script>$("div").next().css("border","2px solid red")</script>
</body>
</html>

4、.parent()
取得元素的父元素
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div><p>Hello</p></div><script>$("p").parent().css("border","2px solid red")</script>
</body>
</html>

5、.siblings()
获得元素的兄弟元素,可以传递一个选择器参数
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><div><p>Hello1</p><p>Hello2</p><span>World</span><p class="text">Hello3</p><p>Hello4</p><p>Hello5</p></div><script>$(".text").siblings().css("border","2px solid red")$(".text").siblings("p").css("border","2px solid red")</script>
</body>
</html>

jQuery动画(一)

1、 .show()
执行显示动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>div{width: 100px;height: 100px;background-color: red;display: none;}</style>
</head>
<body><button>动画</button><div></div><script>$("button").click(function(){$("div").show(1000)})</script>
</body>
</html>

2、.hide()
执行隐藏动画
 

$("button").click(function(){$("div").hide(1000)
})

3、.fadeIn()
通过淡入的方式显示匹配元素。
 

$("button").click(function () {$("div").fadeIn(1000);
});

4、.fadeOut()
通过淡出的方式显示匹配元素
 

$("button").click(function () {$("div").fadeOut(1000);
});

jQuery动画(二)

 jQuery提供了一系列的动画基本方法,同时也提供了自定动画方案 .animate()

1、 .slideDown()
用滑动动画显示一个元素

$("button").click(function () {$("div").slideDown(1000);
});

2、.slideUp()
用滑动动画隐藏一个元素

$("button").click(function () {$("div").slideUp(1000);
});

3、.animate()
执行自定义动画

$("button").click(function () {$("div").animate({width: "200px",opacity: 0.5}, 1500);
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/194163.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

单脉冲测角-和差比幅法

和差比幅法单脉冲测角 单脉冲测角的类型阵列接收模型和差波束构造方法和差比幅测角仿真 单脉冲测角的类型 传统的单脉冲测向方法主要有3种&#xff0c;分别是半阵法、加权法和和差比幅法。其实这3种方法都需要形成和波束和差波束&#xff0c;只是波束形成的方法不同&#xff0…

109. 有序链表转化为二叉搜索树

题目 题解 分治。 class Solution:def getMedian(self, left: ListNode, right: ListNode) -> ListNode:找到链表的中间节点slow fast leftwhile fast ! right and fast.next ! right:slow slow.nextfast fast.next.nextreturn slowdef buildTree(self, left: ListNod…

基于python+django的美食餐厅点餐订餐网站

运行环境 开发语言&#xff1a;Python python框架&#xff1a;django 软件版本&#xff1a;python3.7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;PyCharm/vscode 前端框架:vue.js 项目介绍 本论文主要论述了如何使用python语言开发…

【NLP】理解 Llama2:KV 缓存、分组查询注意力、旋转嵌入等

LLaMA 2.0是 Meta AI 的开创性作品&#xff0c;作为首批高性能开源预训练语言模型之一闯入了 AI 场景。值得注意的是&#xff0c;LLaMA-13B 的性能优于巨大的 GPT-3(175B)&#xff0c;尽管其尺寸只是其一小部分。您无疑听说过 LLaMA 令人印象深刻的性能&#xff0c;但您是否想知…

hadoop 大数据环境配置 ssh免密登录 centos配置免密登录 hadoop(四)

1. 找到.ssh文件夹 cd ~ # 在.ssh文件夹下生成 # cd .ssh 2. 生成私钥公钥命令&#xff1a; ssh-keygen -t rsa3. 发送到需要免密机器&#xff1a; # hadoop23 是我做了配置。在host配置得机器ip和名称得映射 ssh-copy-id hadoop23 4. 成功

微服务nacos实战入门

注册中心 在微服务架构中&#xff0c;注册中心是最核心的基础服务之一 主要涉及到三大角色&#xff1a; 服务提供者 ---生产者 服务消费者 服务发现与注册 它们之间的关系大致如下&#xff1a; 1.各个微服务在启动时&#xff0c;将自己的网络地址等信息注册到注册中心&#x…

leetcode:链表的中间结点

1.题目描述 题目链接&#xff1a;876. 链表的中间结点 - 力扣&#xff08;LeetCode&#xff09; 我们先看题目描述&#xff1a; 2.解题思路 我们用画图用快慢指针来解决这个问题 定义一个快指针fast&#xff0c;一个慢指针slow 快指针一次走两个结点&#xff0c;慢指针一次…

ceph 14.2.10 aarch64 非集群内 客户端 挂载块设备

集群上的机器测试 706 ceph pool create block-pool 64 64 707 ceph osd pool create block-pool 64 64 708 ceph osd pool application enable block-pool rbd 709 rbd create vdisk1 --size 4G --pool block-pool --image-format 2 --image-feature layering 7…

你知道如何科学的学习吗?-关于个人成长的思考

背景 最近在翻看自己工作后的笔记&#xff0c;从有道云笔记到印象笔记&#xff0c;到本地笔记&#xff0c;到自己使用github搭建的博客&#xff0c;到语雀笔记&#xff0c;使用了不同的平台工具&#xff1b;零零总总记录了许多学习笔记、个人成长笔记、职业规划等内容。现在看…

4. 【自动驾驶与机器人中的SLAM技术】点云中的拟合问题和K近邻

目录 1.在三维体素中定义 NEARBY14&#xff0c;实现 14 格最近邻的查找。2.推导arg max||Ad||22的解为ATA的最大特征向量或者奇异向量。3. 将本节的最近邻算法与一些常见的近似最近邻算法进行对比&#xff0c;比如nanoflann&#xff0c;给出精度指标和时间效率指标。4. 也欢迎大…

【性能】如何计算 Web 页面的 FP 指标

什么是 FP 指标 FP (First Paint) 为首次渲染的时间点&#xff0c;在性能统计指标中&#xff0c;从用户开始访问 Web 页面的时间点到 FP 的时间点这段时间可以被视为 白屏时间&#xff0c;也就是说在用户访问 Web 网页的过程中&#xff0c;FP 时间点之前&#xff0c;用户看到的…

深度学习_13_YOLO_图片切片及维度复原

需求&#xff1a; 在对获取的图片进行识别的时候&#xff0c;如果想减少不必要因素的干扰&#xff0c;将图片切割只对有更多特征信息的部分带入模型识别&#xff0c;而剩余有较多干扰因素的部分舍弃&#xff0c;这就是图片切割的目的&#xff0c;但是又由于模型对图片的维度有较…

lxml基本使用

lxml是python的一个解析库&#xff0c;支持HTML和XML的解析&#xff0c;支持XPath解析方式&#xff0c;而且解析效率非常高 XPath&#xff0c;全称XML Path Language&#xff0c;即XML路径语言&#xff0c;它是一门在XML文档中查找信息的语言&#xff0c;它最初是用来搜寻XML文…

线程的面试八股

Callable接口 Callable是一个interface,相当于给线程封装了一个返回值,方便程序猿借助多线程的方式计算结果. 代码示例: 使用 Callable 版本,创建线程计算 1 2 3 ... 1000, 1. 创建一个匿名内部类, 实现 Callable 接口. Callable 带有泛型参数. 泛型参数表示返回值的类型…

多标签页文件管理器 - Win系统

多标签页文件管理器 - Win系统 前言My Files-X Free360文件夹升级Win11 前言 Win10系统自带的文件管理器不支持多标签页功能&#xff0c;本文推荐几款多标签页文件管理器&#xff0c;可以在一个文件管理器窗口中打开多个标签页。 My Files-X Free 此文件管理器支持多标签页&…

一文解码语言模型:语言模型的原理、实战与评估

在本文中&#xff0c;我们深入探讨了语言模型的内部工作机制&#xff0c;从基础模型到大规模的变种&#xff0c;并分析了各种评价指标的优缺点。文章通过代码示例、算法细节和最新研究&#xff0c;提供了一份全面而深入的视角&#xff0c;旨在帮助读者更准确地理解和评估语言模…

unity shaderGraph实例-扫描效果

文章目录 效果展示整体结构各区域内容区域1区域2区域3区域4区域5区域6GraphSetttings注意事项使用方法 效果展示 整体结构 各区域内容 区域1 用场景深度减去顶点的View空间的视野深度&#xff08;Z值&#xff09;&#xff0c;这里Z值需要乘-1是因为从相机看到的物体顶点的视野…

sqlmap requires ‘python-pymysql‘ third-party library

使用sqlmap进行udf提权报错&#xff1a; [14:06:04] [CRITICAL] sqlmap requires python-pymysql third-party library in order to directly connect to the DBMS MySQL. You can download it from https://github.com/PyMySQL/PyMySQL. Alternative is to use a package pyt…

Figma语言设置教程:简易切换至中文,提高操作便捷性!

Figma是世界领先的在线协作UI设计工具。它摆脱了Sketch等传统设计软件对设备的依赖&#xff0c;使设计师可以随时随地使用任何设备打开网页浏览器&#xff0c;轻松实现跨平台、跨时空的设计合作。那么&#xff0c;Figma如何改变中文&#xff0c;以提高国内设计师的使用体验呢&a…

【C++】【Opencv】cv::GaussianBlur、cv::filter2D()函数详解和示例

本文通过函数详解和运行示例对cv::GaussianBlur和cv::filter2D()两个函数进行解读&#xff0c;最后综合了两个函数的关系和区别&#xff0c;以帮助大家理解和使用。 目录 cv::GaussianBlur&#xff08;&#xff09;函数详解运行示例 filter2D()函数详解运行示例 总结两个函数联…