Flink cdc3.0动态变更表结构——源码解析

40dba2f2a596

 关注

阅读 23

2024-02-09

文章目录

前言

一、操作DOM

1.1. 文档对象模型DOM

可以将html文档中的每个成分视为一个节点，节点的特点如下：

  1. 整个文档是一个文档节点
  2. 每个HTML标签是一个元素节点
  3. 包含在HTML元素中的文本是文本节点
  4. 每个HTML属性是一个属性节点
  5. 注释属于注释节点
  6. HTML文档中的节点彼此间都存在关系，如一张族谱。

节点可以有子节点。 同一棵树级别的节点称为兄弟姐妹。

下图展示了一个家族树。通过​ jQuery 遍历​，能够从被选​（当前的）元素​开始，轻松地在家族树中​向上移动（祖先）​，​向下移动（子孙）​，​水平移动（同胞）​。这种移动被称为对 DOM 进行遍历。

在这里插入图片描述

摘要:
祖先是指父母，祖父母，曾祖父母等等。
后代是一个孩子，孙子，曾孙等等。
兄弟姐妹同享同一个父母。

1.2. DOM遍历

  1. 向上遍历​ DOM 树：
    ​parent()​方法返回被选元素的​直接父元素​。
    ​parents()​方法返回被选元素的​所有祖先元素​。

下面的代码选择了段落的父元素，并为其设置了一个红色边框。

HTML：

<div> div 元素
  <p>段落</p> 
</div>

JS:

var e = $("p").parent();
e.css("border", "2px solid red");
  1. ​向下遍历​ DOM 树：
    children()​方法返回被选元素的​所有直接子元素​。
    ​find()​方法返回被选元素的​后代元素​，一路向下​直到​最后一个​后代。

例如下面的例子返回每个 < div > 元素的所有直接子元素：

HTML:

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

CSS： 

.descendants *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}

JS：

$(document).ready(function(){
	$("div").children().css({"color":"red","border":"2px solid red"});
});

  1. DOM 树进行​水平遍历​：
    ​siblings()​方法返回被选元素的​所有同胞元素​。
    ​next()​方法返回被选元素的​下一个​同胞元素，该方法​只​返回​一个​元素。
    ​nextAll()​方法返回被选元素的​下面​的​所有同胞元素​。
    ​prev()​方法返回被选元素的​上一个​同胞元素，该方法​只​返回​一个​元素。
    ​prevAll()​方法返回被选元素的​上面​的​所有同胞元素​。

  2. eq()方法
    eq() 方法返回被选元素中带有指定索引号的元素。
    例如，如果页面包含多个div元素，并且我们要选择第三个元素：

$("div").eq(2);

1.3. 删除元素

  1. remove() - 删除被选元素（及其子元素）
  2. empty() - 从被选元素中删除子元素

HTML：

<p style="color:red">Red</p>
<p style="color:green">Green</p>
<p style="color:blue">Blue</p>

JS:

$("p").eq(1).remove();

HTML：

<div>

   <p style="color:red">红</p>

   <p style="color:green">绿</p>

   <p style="color:blue">蓝</p>

</div>

JS:

$("div").empty();

二、事件

2.1. 事件处理

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 < head >部分的事件处理方法中。

例如，假设我们要处理id="demo"的元素上的点击事件，并在点击按钮时显示当前日期。 使用纯JavaScript，代码如下：

var x= document.getElementById("demo");
x.onclick = function(){
	document.body.innerHTML = Data();
}

可以使用jQuery与以下代码来处理相同的事件：

$("#demo").click(function() {
	$("body").html(Date());
});

在这里插入图片描述
下面的代码处理 id="name"的元素的keydown事件，并将id="name"获取到的值赋给 id ="msg"的元素中。

HTML：

<input type="text" id="name" />
<div id="msg"></div>

JS:

$("#name").keydown(function() {
  $("#msg").html($("#name").val());
});

on()方法用于将相同的处理函数绑定到多个事件中的时候很有用。 可以使用空格分隔多个事件名称, 例如 可以为点击和dblclick事件使用相同的事件处理程序。

$("p").on( "click dblclick", function() {
  alert("clicked");
});

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

$("div").on("click", function() { 
  alert('Hi there!'); 
}); 
$("div").off("click");

2.2. 事件对象

  1. event.type：获取事件的类型
  2. event.pageX和event.pageY：获取鼠标当前相对于页面的坐标（X和Y坐标）
  3. event.preventDefault()方法： 阻止默认行为
  4. event.stopPropagation()方法： 阻止事件冒泡。
  5. event.which： 获取在鼠标单击时，单击的是鼠标的哪个键
  6. event.data 数据绑定事件时传入的任何数据。
  7. event.currentTarget： 在事件冒泡过程中的当前DOM元素
  8. event.result： 包含由被指定事件触发的事件处理器返回的最后一个值。

下面的代码在点击时提醒鼠标位置，并阻止打开链接。

HTML:

<a href="https://www.baidu.cn" id="a1">点击我</a>

JS:

$("a#a1").click(function(event) {
        alert(event.pageX);
        event.preventDefault();
    });

例如，可以触发一个点击事件，而不需要用户实际点击一个元素：

$("div").click(function() {
   alert("点击了div!");
});
$("div").trigger("click");

2.3. 创建待办事件列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我的To-Do列表</h1>
<input type="text" placeholder="新项目"/>
<button id="add">添加</button>
<ol id="mylist"></ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<h1>我的To-Do列表</h1>
<input type="text" placeholder="新项目"/>
<button id="add">添加</button>
<ol id="mylist"></ol>
<script>
    $(function() {


    $("#add").on("click", function() {
        var val = $("input").val();
        if(val !== '') {
         var elem = $("<li></li>").text(val);
         $(elem).append("<button class='rem'>X</button>");
         $("#mylist").append(elem);
         $("input").val("");
         $(".rem").on("click", function() {
          $(this).parent().remove();
         });
        }
    });

    $(".rem").on("click", function() {
      $(this).parent().remove();
    });


});
</script>
</body>
</html>

三、效果

3.1. 显示/隐藏，淡入，淡出

toggle()方法用于在隐藏和显示元素之间切换。
hide / show / toggle方法可以带一个速度参数,以毫秒为单位指定动画速度。

HTML：

<p>点击我能切换显示div中的内容哟!</p>
<div>我是div中的内容</div>

JS：

 $(function () {
        $("p").click(function () {
            $("div").toggle(1000);
        });
    });

HTML：

<p id="demo">点击我能切换显示div中的内容哟!</p>
<div id="demo2">我是div中的内容</div>

JS:

 $(function (){
        $("p#demo").click( function (){
            $("div#demo2").fadeToggle(1000);
        });
    });

HTML：

<p id="demo5">点击我能切换显示div中的内容哟!</p>
<div id="demo6">我是div中的内容</div>

JS:

 $(function () {
        $("p#demo5").click(function () {
            $("div#demo6").slideToggle(500);
        });
    });

3.2. 动画

//语法：
$(selector).animate({params},speed,callback);

params–必需，定义形成动画的 CSS 属性。属性定义为JSON格式的参数（“key”:“value”）
speed–规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒
callback --动画完成后所执行的函数名称

$("div").click(function() {
  $("div").animate({width: '250px'}, 1000);
});

可以使用上述语法对任何CSS属性进行动画处理，但有一个重要的事情要记住：当与animate() 方法一起使用时，所有属性名称都必须是camel-cased（camelCase是写复合词或短语的做法， 每个单词或缩写以大写字母开头，第一个单词以小写形式显示）。
您将需要编写paddingLeft而不是padding-left，marginRight，而不是margin-right等等。

$("div").animate({
  width: '+=250px',
  height: '+=250px'
}, 1000);

stop() ​方法用于在​动画​或​效果完成前​对它们进行​停止​。适用于所有 jQuery 效果函数，包括​滑动、淡入淡出​和​自定义动画​。

//语法：
$(selector).stop(stopAll,goToEnd);
  1. stopAll ​–​可选​，规定是否应该​清除动画队列​。默认是 ​false​，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  2. ​goToEnd​ --规定是否立即完成​当前动画​。默认是 false。

HTML：

<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

CSS

#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}

JS：

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

这意味着如果你写了多个animate()，则jQuery会为这些方法创建一个“内部”队列。然后逐个运行动画。

3.3. callback

例子：$(“p”).hide(“slow”)
​speed ​或 ​duration ​参数可以设置许多​不同的值​，比如​ “slow”, “fast”, "normal"​ 或​毫秒​。

HTML：

<button>隐藏</button>
<p>我们段落内容，点击“隐藏”按钮我就会消失</p>

JS：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了");
    });
  });
});

3.4. 创建下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        a{
            text-decoration: none;
            color: black;
            font-size: 20px;
        }
        #item {
        display: inline-flex;
        padding: 2px;
        border: 1px solid #666;
        border-radius: 2px;
        cursor: pointer;
        background: #efefef;
    }
    </style>
</head>

<body>
<div class="menu">
  <div id="item">下拉菜单</div>
  <div id="submenu">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>
<script>
$("#item").click(function() {
  $("#submenu").slideToggle(500);
}); 
</script>

</body>
</html>

总结

–2023-12-9

相关推荐

Flink cdc debug调试动态变更表结构

晚熟的猫 17 0 0

Flink CDC 3.0 表结构变更时导致webUI接口无反应原因

以沫的窝 12 0 0

Flink CDC 源码解析--整体流程

静悠 53 0 0

Flink CDC 系列（2）—— Flink CDC 源码编译

王小沫 198 0 0

使用Flink CDC实时监控MySQL数据库变更

伽马星系 37 0 0

MySQL到Doris的StreamingETL实现（Flink CDC 3.0）

杨沐涵 34 0 0

Flink-CDC解析（第47天）

Android开发指南 17 0 0

【Flink小试】Flink CDC DataStream API监听MySQL动态发往Kafka Topic

RockYoungTalk 61 0 0

深入解析 Flink CDC 增量快照读取机制

fbd4ffd0717b 20 0 0

Mysql 表结构变更方案对比及分析

我是小小懒 85 0 0

精彩评论（0）

0 0 举报