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

    目录

    jQuery树遍历

    jQuery动画(一)

    jQuery动画(二)

    jQuery树遍历

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9. head>
    10. <body>
    11.     <ul class="first">
    12.         <li>item 1li>
    13.         <li>
    14.             <ul class="secode">
    15.                 <li>child item 1li>
    16.                 <li>child item 2li>
    17.                 <span>child spanspan>
    18.             ul>
    19.         li>
    20.         <li>item 3li>
    21.     ul>
    22.     <script>
    23.       $(".first").children().css("border","1px solid red")
    24.       $(".first").children("li").css("border","1px solid red")
    25.     script>
    26. body>
    27. html>

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9. head>
    10. <body>
    11.     <ul class="first">
    12.         <li>item 1li>
    13.      <li>
    14.             <ul class="secode">
    15.                 <li>child item 1li>
    16.                 <li>child item 2li>
    17.                 <span>child spanspan>
    18.             ul>
    19.         li>
    20.         <li>item 3li>
    21.     ul>
    22.     <script>
    23.       $(".first").find("li").css("border","1px solid red")
    24.     script>
    25. body>
    26. html>

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.    <script src="./js/jquery-3.6.0.min.js">script>
    9. head>
    10. <body>
    11.     <div>Hellodiv>
    12.     <p>内容p>
    13.     <span>元素span>
    14.     <script>
    15.         $("div").next().css("border","2px solid red")
    16.     script>
    17. body>
    18. html>

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9. head>
    10. <body>
    11.     <div>
    12.         <p>Hellop>
    13.     div>
    14.     <script>
    15.        $("p").parent().css("border","2px solid red")
    16.     script>
    17. body>
    18. html>

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">
    9. script>
    10. head>
    11. <body>
    12.     <div>
    13.         <p>Hello1p>
    14.         <p>Hello2p>
    15.         <span>Worldspan>
    16.         <p class="text">Hello3p>
    17.         <p>Hello4p>
    18.         <p>Hello5p>
    19.     div>
    20.     <script>
    21.        $(".text").siblings().css("border","2px solid red")
    22.        $(".text").siblings("p").css("border","2px solid red")
    23.     script>
    24. body>
    25. html>

    jQuery动画(一)

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 100px;
    12.             height: 100px;
    13.             background-color: red;
    14.             display: none;
    15.        }
    16.     style>
    17. head>
    18. <body>
    19.     <button>动画button>
    20.     <div>div>
    21.     <script>
    22.        $("button").click(function(){
    23.            $("div").show(1000)
    24.        })
    25.     script>
    26. body>
    27. html>

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

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

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

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

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

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

    jQuery动画(二)

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

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

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

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

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

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

    1. $("button").click(function () {
    2.     $("div").animate({
    3.         width: "200px",
    4.         opacity: 0.5
    5.    }, 1500);
    6. });

  • 相关阅读:
    vue基础知识
    鸿蒙原生应用开发-DevEco Studio超级终端模拟器的使用
    c# PDFSharp 给已有的pdf文件添加文字页脚（文字水印）
    ffmpeg推流+NGINX(RTMP)+VLC-QT拉流（Win7）
    左旋氧氟沙星/载纳米雄黄磁性/As2O3磁性Fe3O4/三氧化二砷白蛋白纳米球
    【水文模型】10 新安江模型C++实现
    CNN-generated images are surprisingly easy to spot... for now
    网络安全—综合渗透测试-CVE-2010-2883-PDF漏洞分析
    MicroPython ESP32 RTC功能使用介绍
    商品子系统设计
  • 原文地址：https://blog.csdn.net/m0_58719994/article/details/134401148