开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在两个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。

相关搜索:如何在两个div之间绘制对角线在html div元素之间绘制一条线在两个svg矩形之间绘制动态线在限制线之间绘制背景颜色 Javascript + svg，在两个给定点之间绘制窦(波)线在r中绘制两个sf点要素之间的线 Jquery在随机div之间切换如何使用'ARKit‘在两个SCNNode之间绘制自定义线用一条线连接两个div 使div在两个div之间浮动如何使用普通的JavaScript (无JQuery)在两个div之间放置div ggplot2:在两个值之间绘制一条线在python中绘制点之间的网格线使用angularjs单击两个结果div后，在两个div之间画一条线在两个标记之间绘制路径在OpenLayers 4中的两个坐标之间绘制一条线为什么div没有在两个div之间居中用cartopy在北极立体投影上绘制等纬度线在两个弹性项之间绘制箭头在两个类Jquery之间切换

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript图表的数据可视化:比较D3和Kendo UI

D3和Kendo UI只是在web应用程序中创建图表的两种方式，选项范围从简单地在屏幕上绘制图形到使用复杂的图表组件。D3和Kendo UI都很受欢迎，两者都能完成工作。然而，相似之处到此为止，这两种方法代表了非常不同的方法，具有非常不同的特性。

03

Gulp构建实例

assets 项目资源目录，dev 开发目录，dist 编译输出目录，gulpfile.js 自动化工具 API

04

Canvas 基本绘制（下）

HTML5学堂：在前一篇文章《Canvas 基本绘制（上）》当中，我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘制、Canvas的一些基本方法。在今天的这篇文章当中，我们将为大家介绍Canvas的基本属性、快速路径的绘制方法等。 Canvas基本属性设置填充与描边颜色 strokeStyle、fillStyle 线条样式的设置 lineCap：设置线条末端线帽的样式（round、square）注释："round" 和 "square" 会使线条略微变长，

06

Chrome的First Paint触发的时机探究

前言 First paint 直译过来的意思就是浏览器第一次渲染(paint)，在First paint之前是白屏，在这个时间点之后用户就能看到（部分）页面内容。所以研究这个First Paint的触发时机对于优化浏览器页面的首屏渲染时间有很重要的作用。在正题开始之前，先说下浏览器的页面的加载流程（大体过程是这样，并不精确，只是为了帮助理解后面内容）：浏览器输入url，浏览器发送请求到服务器，服务器将请求的HTML返回给浏览器。浏览器下载完成HTML(Finish Loading HTML)之

09

Chrome的First Paint触发的时机探究

前言 First paint 直译过来的意思就是浏览器第一次渲染(paint)，在First paint之前是白屏，在这个时间点之后用户就能看到（部分）页面内容。所以研究这个First Paint的触发时机对于优化浏览器页面的首屏渲染时间有很重要的作用。在正题开始之前，先说下浏览器的页面的加载流程（大体过程是这样，并不精确，只是为了帮助理解后面内容）：浏览器输入url，浏览器发送请求到服务器，服务器将请求的HTML返回给浏览器。浏览器下载完成HTML(Finish Loading HTML)之

04

Hightcharts 在vue中实现多图联动

官网有一个例子关于Highcharts 多图联动，链接地址，但是例子不是在vue中实现的，如何在vue中实现多图联动呢？

01

HTML5游戏开发实战–当心

1.WebSocket它是HTML5该标准的一部分。Web页面可以用它来连接到持久socketserver在。该接口提供一个浏览器和server与事件驱动的连接。这意味着client每次需要时不再server发送一个新的数据请求。

01

看不完的那种！前端170面试题+答案学习整理（良心制作）

圆角border-radius，阴影box-shadow，对文字加特效text-shadow，线性渐变gradient，变化transform，伪元素::selection，媒体查询，多栏布局，图片边框border-image。

05

Django Ajax动态图形监控

Ajax轮询多个图形: 我们来实现一次性绘制多个图形的方法,代码只是在上方改进一下即可.

02

jQuery学习笔记——jQuery基础

什么是jQuery？jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”，倡导用更少的代码，做更多的事情。通过这段时间的学习，我感觉jQuery是一个“语法糖”，就像是包在糖果外面的包装，让js看起来更好看。

01

Flask框架：运用Ajax轮询动态绘图

Ajax是异步JavaScript和XML可用于前后端交互，在之前《Flask 框架：运用Ajax实现数据交互》简单实现了前后端交互，本章将通过Ajax轮询获取后端的数据，前台使用echart绘图库进行图形的生成与展示，后台通过render_template方法返回一串JSON数据集，前台收到后将其应用到绘图库上，实现动态监控内存利用率的这个功能。

01

【D3使用教程】(2) 绘制柱状图与散点图

这里，通过attr()给每个div添加bar类。使用style()修改每个div的高度。

02

绘制刻度尺

上面的代码，其实可以进一步提炼，比如 25 ，可以设置为 const OFFSET_NUMBER = 25。感兴趣的读者可以对其进行优化。

02

css经典布局——圣杯布局

圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。

01

《从案例中学习JavaScript》之实现网页版阅读器

序现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。再久远一些，小的时候，我也经常和小伙伴们组团去书店看白书，也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书，在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。岁月在流逝，时代在进步。愿放下所有的浮躁，在新的时代愉快地生活，无所谓明天怎

06

使用D3.JS进行坐标轴绘制和图绘制

前面已经说过D3的功能十分强大，但是往往实际使用时只需要用到一部分内容，在这里，就只用到了比例尺和布局两部分，外加核心的请求部分（请求数据），分别用来绘制Graph的显示坐标轴和图的顶点及边；

03

knockout + easyui = koeasyui

在做后台管理系统的同学们，是否有用easyui的经历。虽然现在都是vue、ng、react的时代。但easyui（也就是jquery为基础）还是占有一席之地的。因为他对后端开发者太友好了，太熟悉不过了。要让一个后端开发者来理解vue或者是react的VNode、状态器、组件等，都是有那么一点点的为难（反正我转型时，对这些都是很有困惑的）。今天我想试着解决这样一个问题，如：将knockout 与大家熟悉的easyui结合在一起。让easyui具有MVVM的能力，也有不使用easyui的特性，看大家

03

使用Raphael绘制流程图，自绘动态箭头，可拖动，有双击事件，纯前端，兼容各种浏览器

官方宣称兼容各种主流浏览器，据笔者测试在IE6下尚有一些问题（不过这些与本文无关）

03

我经常和面试者聊的一个题目

作为一个Web前端从业者，资深B/S架构的应用开发，通常我们负责的内容都是侧重的浏览器端比较多，即便目前Vue、React等各种框架库流行的年代，核心实现也依然是JS API操作DOM；如果资历更深一些的同学，还会熟知jQuery，更是因为各浏览器API不统一作为其解决的问题痛点。

02

可视化场景内任意绘制线段并测量距离

在数字孪生可视化场景中，可能会遇到这个问题，即需要测量数字孪生可视化场景中的不同目标之间的距离。通过这个测量，可以明确的知道可视化场景中各个目标的位置以及各个目标之间的距离，便于做出合理的规划。这个需求并不难，我们需要做的是确定需要测量的对象的坐标点起点和终点位置。

02

#grid：网页网格布局工具

如果你开始使用网格来进行网页设计，那么 #grid 是你必不可少的一个工具，#grid 就是一个使用 jQuery 和 CSS 构建的小工具，它会在网页上插入布局网格线，让你能够检测和调整页面上元素位置。

03

前端er必须掌握的数据可视化技术

又是一月结束，打工人准时准点的汇报工作如期和大家见面啦。提到汇报，必不可少的一部分就是数据的汇总、分析。

03

jQuery(一)

jquery为一种库，属于最基础的一个库，伴随着h5的到来，很多jquery的规则直接融入到了规则本身了，直接使用原生的js也能达到相同的目的。虽然如此，不过依旧要继续。

04

JavaWeb（八）JQuery

jQuery 市场用得比较多两个框架： jQuery 比较适合做一些互联网的应用（12306.com,蘑菇街，美丽说，聚美） extjs 比较适合做后台管理系统（电商（订单管理），银行，电信）核心：主要功能：javascript开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作。优势：(宗旨：write less ，do more 写更少的代码，做更多的事情) 1：轻量级（js 库非常小） 2：强大的选择器（获取页面上面的dom 元素 document.getElementByI

04

设计原则

好的代码永远是需要设计的。一名高级程序员，更应该有设计师的潜质，不只是关注怎么用代码实现业务，更关注的是代码的设计。而在设计之初，应当说服自己去接受不合理的代码带来的第一次愚弄。在频繁的变化面前，抽取不变的地方，健壮自身的设计。

02

Flask 框架：运用Echarts绘制图形

echarts是百度推出的一款开源的基于JavaScript的可视化图表库，该开发库目前发展非常不错，且支持各类图形的绘制可定制程度高，Echarts绘图库同样可以与Flask结合，前台使用echart绘图库进行图形的生成与展示，后台则是Flask通过render_template方法返回一串JSON数据集，前台收到后将其应用到绘图库上，实现动态展示Web服务日志状态功能。

03

告别繁琐的D3代码：这款可控、可自定义的D3图表库，更轻量、更简单！

大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。

01

【数据可视化】Echarts中的其它图表

上次提到了【数据可视化】Echarts最常用图表，其中还有一些图需要了解，这次来分享一下。

01

【数据可视化】Echarts最常用图表

在上一篇博客中提到了【数据可视化】数据可视化入门前的了解，这次来看看Echarts最常用图表有哪些，和作用是什么?

01

你被哪个后来知道很傻的BUG困扰过一天以上吗？

data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。

01

html css制作404页面,CSS3绘制404页面

transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

02

JQuery选择器和JQuery包装集

（本文年代久远，请谨慎阅读）今天学习了JQuery的一些基本用法，包括JQuery选择器和JQuery包装集；

02

【调试】ChromeDevTool高级调式

说道打断点，js编辑器中似乎听说的只有MS 的 Visual Studio，这傻X，MS从来没抛弃它~

02

Echarts隐藏背景的网格线

网格线未处理之前，默认是这样的，这个背景的网格线，我们现在如果不需要，就去掉吧。 Echarts隐藏背景的网格线属性 yAxis: { splitLine: {show: false}, }, 示例代

02

jquery 操作HTML data全局属性缓存的坑

data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。

02

表格技术七十二变|手把手教你用Canvas电子表格做电子签名

日常生活工作学习中，大家对电子表格必定不陌生。从工作数据汇总分析到出门收据各种电子发票，这些都是由电子表格制作出来的。

02

简单的canvas绘图

注意：默认情况下 <canvas> 元素没有边框和内容,width 和 height 属性定义的画布的大小.

02

简单实用的Canvas进度环返回按钮

具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮，并且具有Canvas绘制进度环的效果。

01

【数据可视化】Echarts的高级功能

为了使图表更具表现力，可以使用混搭图表对数据进行展现。当多个系列的数据存在极强的不可分离的关联意义时，为了避免在同一个直角系内同时展现时产生混乱，需要使用联动的多图表对其进行展现。

01

简单实用的Canvas进度环返回按钮

具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮，并且具有Canvas绘制进度环的效果。大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布，百分比数字是用data储存并使用css的 content属性实现。 Canvas进度环返回按钮实现方法：确保引入了jquery,下面的代码加入到你的js文件中： var bigfa_scroll = { drawCircle: function(id, percentage, color) { var

06

【一起来烧脑】读懂JQuery知识体系

在现在就业的过程中，会运用JQuery是你的加分项，那么什么是JQuery，嗯，jquery是JavaScript的函数库，是一种轻量级的JavaScript库，写得少，做的多，导致jQuery有很多技术人员在使用它做项目。

03

CSS flex 排版与动画 — 重学 CSS

上一部分我们讲到了盒、盒模型和整个正常流中的所有重要知识点和问题。这一部分我们来了解一下 Flex 排版的详细知识。

05

用flex布局实现一个流程设计器

支持添加、编辑和删除节点，节点只有四种类型：开始节点、普通节点、分支节点、结束节点。

03

如何使用 JavaScript 导入和导出 Excel

在现代的Web应用开发中，与Excel文件的导入和导出成为了一项常见而重要的任务。无论是数据交换、报告生成还是数据分析，与Excel文件的交互都扮演着至关重要的角色。本文小编将为大家介绍如何在熟悉的电子表格 UI 中轻松导入 Excel 文件，并以编程方式修改表格或允许用户进行编辑，最后使用葡萄城公司的纯前端表格控件SpreadJS组件它们导出回 Excel 文件。

02

jquery的html,text,val

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值。这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；

05

基于jsplumb构建的流程设计器

最近在准备开发工作流引擎相关模块，完成表结构设计后开始着手流程设计器的技术选型，调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发，保证定制化的便捷性，相关效果图及项目地址如下

02

Echarts设置背景的网格线为虚线

用Echarts写了一个折线图之后，现在不太喜欢背景网格线的实线需要改成虚线 Echarts设置背景的网格线为虚线的关键属性 yAxis: { splitLine: {

02

前端工程师面试题汇总

作者：@markyun markyun.github.io/2015/Front-end-Developer-Questions/ HTML Doctype作用？严格模式与混杂模式如何区分？它们有何意

08

2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

=============================================================

02

10.7 border-width边框粗细：outline与border有什么不同？

为什么线的粗细叫宽度？边框线像马路往前冲，马路的宽度就好比是线的宽度。此外，还有stroke-width，是以后学Canvas绘制时要接触到的，是绘制的线的粗细，它们的名字是类似的。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭