在两个div之间用jquery绘制线

在两个div之间使用jQuery绘制线条，可以通过以下步骤实现：

引入jQuery库，并在页面中创建两个div元素，用于显示绘制出的线条。<!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>jQuery Draw Line</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="line1" class="line"></div> <div id="line2" class="line"></div> <script> // 在两个div元素中绘制线条 $('.line').each(function () { $(this).css('width', $(this).parent().width()); }); $('.line').each(function () { $(this).css('height', $(this).parent().height()); }); $('.line').each(function () { $(this).css('position', 'absolute'); }); $('.line').each(function () { $(this).css('top', '0'); }); $('.line').each(function () { $(this).css('left', '0'); }); $('.line').each(function () { $(this).css('border', '1px solid black'); }); $('.line').each(function () { $(this).css('pointer-events', 'all'); }); $('.line').each(function () { $(this).css('cursor', 'pointer'); }); $('.line').click(function () { $(this).css('border', '1px solid red'); }); </script> </body> </html>.line { position: absolute; width: 100%; height: 100%; border: 1px solid black; pointer-events: all; cursor: pointer; }$(document).ready(function () { $('.line').each(function () { $(this).css('width', $(this).parent().width()); }); $('.line').each(function () { $(this).css('height', $(this).parent().height()); }); $('.line').each(function () { $(this).css('position', 'absolute'); }); $('.line').each(function () { $(this).css('top', '0'); }); $('.line').each(function () { $(this).css('left', '0'); }); $('.line').each(function () { $(this).css('border', '1px solid black'); }); $('.line').each(function () { $(this).css('pointer-events', 'all'); }); $('.line').each(function () { $(this).css('cursor', 'pointer'); }); $('.line').click(function () { $(this).css('border', '1px solid red'); }); });$(document).ready(function () { $('.line').each(function () { $(this).css('width', $(this).parent().width()); }); $('.line').each(function () { $(this).css('height', $(this).parent().height()); }); $('.line').each(function () { $(this).css('position', 'absolute'); }); $('.line').each(function () { $(this).css('top', '0'); }); $('.line').each(function () { $(this).css('left', '0'); }); $('.line').each(function () { $(this).css('border', '1px solid
在CSS文件中，为每个div元素添加一些样式，以使其看起来像一条线。
在JavaScript文件中，使用jQuery库，为每个div元素添加一些事件，以使其具有交互性。
在JavaScript文件中，使用jQuery库，为每个div元素添加一个点击事件，当点击该元素时，将border属性设置为1px solid red。