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

news2025/1/12 21:42:24

目录

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.coloradmin.cn/o/1216695.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Effective C++ 笔记】(四)设计与声明

【四】设计与声明 条款18 &#xff1a; 让接口容易被正确使用&#xff0c;不易被误用 Item 18: 让接口容易被正确使用&#xff0c;不易被误用 Make interfaces easy to use correctly and hard to use incorrectly. “让接口容易被正确使用&#xff0c;不易被误用”&#xff0…

OpenCV基础应用(3)— 把.png图像保存为.jpg图像

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。本节课就手把手教你如何把.png图像保存为.jpg图像&#xff0c;希望大家学习之后能够有所收获~&#xff01;&#x1f308; 目录 &#x1f680;1.技术介绍 &#x1f680;2.实现代码 &#x1f680;1.技术介绍 如果在电脑某…

web缓存-----squid代理服务

squid相关知识 1 squid的概念 Squid服务器缓存频繁要求网页、媒体文件和其它加速回答时间并减少带宽堵塞的内容。 Squid代理服务器&#xff08;Squid proxy server&#xff09;一般和原始文件一起安装在单独服务器而不是网络服务器上。Squid通过追踪网络中的对象运用起作用。…

渗透测试--实战若依ruoyi框架

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

YOLOv3 学习记录

文章目录 简介整体介绍整体架构图 网络架构的改进Backbone 的改进FPNAnchor 机制 坐标表示与样本匹配目标边界框的预测正负样本匹配 损失函数 简介 关注目标在哪里 目标是什么 目标检测的发展路径&#xff1a; proposal 两阶段 --> anchor-base/ anchor-free --> nms f…

SpringCloud微服务:Nacos的集群、负载均衡、环境隔离

目录 集群 在user-service的yml文件配置集群 启动服务 负载均衡 order-service配置集群 设置负载均衡 当本地集群的服务挂掉时 访问权重 环境隔离 1、Nacos服务分级存储模型 一级是服务&#xff0c;例如userservice 二级是集群&#xff0c;例如杭州或上海 …

计算机网络的发展

目录 一、计算机网络发展的四个阶段 1、第一阶段&#xff1a;面向终端的计算机网络&#xff08;20世纪50年代&#xff09; 2、第二阶段&#xff1a;计算机—计算机网络&#xff08;20世纪60年代&#xff09; 3、第三阶段&#xff1a;开放式标准化网络&#xff08;20世纪70年…

【2023最全教程】python+appium自动化测试元素定位(建议收藏)

关于app自动化测试&#xff0c;元素定位工具有三个&#xff1a; appium自带的Appium Inspector工具 Android ADT原生的工具 python版uiautomator2中的weditor 由于我常用的是前两个&#xff0c;所以下面只介绍前面两种元素定位工具&#xff08;以下内容中均以微博为例子&am…

idea中把spring boot项目打成jar包

打jar包 打开项目&#xff0c;右击项目选中Open Module Settings进入project Structure 选中Artifacts&#xff0c;点击中间的加号&#xff08;Project Settings->Artifacts->JAR->From modules with dependencies &#xff09; 弹出Create JAR from Modules&#…

OpenCV基础应用(4)— 如何改变图像的透明度

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。本节课就手把手教你如何改变图像的透明度&#xff0c;希望大家学习之后能够有所收获~&#xff01;&#x1f308; 目录 &#x1f680;1.技术介绍 &#x1f680;2.实现代码 &#x1f680;1.技术介绍 改变图像透明度的实…

从内网到公网:使用Axure RP和内网穿透技术发布静态web页面的完整指南

文章目录 前言1.在AxureRP中生成HTML文件2.配置IIS服务3.添加防火墙安全策略4.使用cpolar内网穿透实现公网访问4.1 登录cpolar web ui管理界面4.2 启动website隧道4.3 获取公网URL地址4.4. 公网远程访问内网web站点4.5 配置固定二级子域名公网访问内网web站点4.5.1创建一条固定…

振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(1)

注解目录 1、倾斜传感器的那些基础干货 1.1 典型应用场景 &#xff08;危楼、边坡、古建筑都是对倾斜敏感的。&#xff09; 1.2 倾斜传感器的原理 1.2.1 滚珠式倾斜开关 1.2.2 加速度式倾斜传感器 1)直接输出倾角 2)加速度计算倾角 3)倾角精度的提高 &#xff08;如果…

JS-项目实战-新增水果库存功能实现

1、fruit.js function $(name) {if (name) {//假设name是 #fruit_tblif (name.startsWith("#")) {name name.substring(1); //fruit_tblreturn document.getElementById(name);} else {return document.getElementsByName(name); //返回的是NodeList类型}} }//当…

一言成文大模型:大模型实践落地之路

百度CEO&#xff0c;李彦宏指出、深度学习技术&#xff0c;大语言模型具备了理解、生成、逻辑、记忆等人工智能的核心基础能力&#xff0c;为通用人工智能带来曙光。 元宇宙_一言成文大模型 一言成文大模型&#xff1a;大模型实践落地之路

光伏含氟废水吸附处理

#光伏含氟废水吸附处理 氟的来源是冰晶石、萤石、氟磷灰等矿物&#xff0c;在钢铁、有色金属冶炼、铝、玻璃、化肥等工业领域得到广泛应用。 目前&#xff0c;在太阳能板生产中&#xff0c;一项关键工艺就是将氟化氢溶液浸泡在硅片上&#xff0c;以除去表面的磷硅玻璃&#xf…

小程序action-sheet结合自定义tabbar显示

要实现此效果&#xff0c;遇到的问题&#xff1a;背景在电脑端调试的情况正常的情况下&#xff0c;手机端点击事件工单&#xff0c;返回回来的时候action-sheet卡住在屏幕上&#xff0c;点击遮罩层都不消失。更奇怪的是 这种情况并不是每次发生&#xff0c;而是有时候发生&…

LeetCode34-34. 在排序数组中查找元素的第一个和最后一个位置

&#x1f517;:代码随想录:二分查找的算法讲解:有关left<right和left<right的区别 class Solution {public int[] searchRange(int[] nums, int target) {int nnums.length;int l0,hn-1;if(numsnull){return null; }if(n0){return new int[]{-1,-1}; }if(target&l…

ROS 学习应用篇(七)ROS中的坐标变换管理之tf初探

坐标变化是机器人中很重要的内容&#xff0c;但是要是概括下来无非就是旋转和平移矩阵。 小海龟跟随实验 做的是两个小海龟之间的跟随&#xff0c;其实就相当于视觉设备和本体设备见有一定的位置差在ros平台下tf坐标变化的实验 首先安装海龟tf变换包 新开终端输入 sudo apt…

杨辉三角00

题目链接 杨辉三角 题目描述 注意点 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和 解答思路 从第一行开始&#xff0c;根据前一行计算该行的值 代码 class Solution {public List<List<Integer>> generate(int numRows) {List<List<…

Mybatis的Mapper接口传递多个参数的时候必须要加@Param注解吗?

答案是&#xff1a;不一定&#xff0c;取决于mybatis的版本、jdk的版本和javac的编译选项。 测试代码 Maven依赖&#xff1a; <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId>…