文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

在没有DOM操作的日子里，我是怎么熬过来的（上）

前言 在我动笔写这篇文章的时候，我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做，请听闰土娓娓道来。前几年我还在想，假如有一天，前端世界里不能再直接操作dom了，我该怎么办？...那么接下来，正文从这开始~ 熟悉闰土的朋友都知道，我是从JQ时代过来的前端，在刚接触react和vue这类MVVM框架的时候，完全可以用一脸懵逼来形容我，最为贴切。...在写完了这个demo后，我感觉到了Vue的确有它的魅力所在。它的MVVM让业务逻辑变得更加清晰和简单。...那么，在弃用JQ的日子里，Vue是否能承担起操作dom的重任呢？ 尤雨溪说，我们Vue 官方是不建议直接操作 DOM 的，Vue 的用途在于视图和数据的绑定。...jQuery本质上只是一个简化了的操作函数库而已，代表的是优化过的JavaScript dom操作。

3K120

Shopify主题Editions模板修改

干净和现代 Editions通过简洁的线条和整洁的设计来展示您的图像，从而帮助您的产品大放异彩。 轻松导航和过滤 高级产品过滤，多列导航和无限滚动等功能使购买此主题变得有趣且毫不费力。...高级产品过滤 允许客户按类型筛选产品，并在产品系列页面上按畅销书和价格进行排序。 多列菜单 允许客户使用大型多列下拉菜单浏览您的商店。 快速商店 通过简化的添加到购物车弹出窗口让客户更快地结账。...产品图片缩放 当客户将鼠标悬停在产品页面上的图片上时，让客户仔细查看产品详细信息。 无限滚动 通过在产品页面之间连续滚动来提高产品的可发现性。.../ https://www.southwoodhome.com.au/ https://lafablight.com/ 用户怎么说 我喜欢Pixel Union的主题，他们极简主义的吸引力和不寻常的外观...这是一个不错的主题来开始我的网上精品店。它是完美的高度视觉产品与现代/经典的外观。在我发展产品线的时候非常多才多艺。我建议所有没有数百种产品，但想要超级干净和“昂贵”的东西的商店。

1.8K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    基于 Claude Code 与 BrowserCat MCP 的浏览器自动化全链路构建实践

    填写你的正确信息登录到界面 在主界面的导航栏上，我们点击MCP广场 进入到广场的主界面，可以看到几乎有上千款mcp，总会找到适合你的那一款mcp的 在广场主界面，在搜索框中输入browsercat...正常来说，在claude code中添加mcp是可以直接使用命令claude mcp add进行添加，因为我也是刚入手的不是很会操作，所以只能将代码放到 文件中，让claude code自行进行添加操作了...`browsercat_hover` **功能**：模拟鼠标悬停在页面元素上的操作，触发元素的 hover 事件（如 CSS hover 样式变化、悬浮提示框显示 ）。...比如测试导航菜单的悬浮效果、验证元素悬浮后的动态加载内容，还原用户浏览时 “悬停查看” 的操作场景。 14....mcp怎么玩 接下来我让他进行网页内容的获取 我让他进入到百度，点击搜素如何减肥，下面就是他的反馈，还是很准确的 在日常的学习生活中，可以使用这款mcp进行网页内容的获取。

    2.3K20

    用 CodeBuddy 搭建我的个人博客：技术小白的零门槛建站实践指南

    第二次迭代：添加网站声明，完善合规性 初始版本在视觉与交互方面达到了预期效果，但作为一个公开博客，合规性是不可忽视的细节。因此，我提出了第一个修改需求：“添加网站声明”。...工具的实现既兼顾了规范要求，又保持了整体风格： 入口设计：在页脚添加了网站声明链接，文字颜色与整体风格一致，链接悬停时添加了渐变效果，保持了交互的一致性。...在博客列表下方新增 “博客专栏” 板块，将分散的文章按主题聚合，直接对接 CSDN 专栏页面： 板块定位：用渐变标题与页面其他板块呼应，标题下方添加渐变下划线，强化了视觉区隔。...） 入场动画区：进度条加载 个人展示区：上侧为文字介绍，包含阿里云专家博主等认证信息；底部的技能标签，在鼠标悬停时会上浮变色。...我的个人博客的实践证明，在合适的工具支持下，技术小白也能高效完成从想法到上线的全流程建站。这种零门槛的创作方式，或将成为未来个人内容发布的主流模式。

    89721

    让人一见钟情的网站header设计攻略

    如何才能设计出让人眼前一亮的网站header呢?...据统计，当一位新访客来到你的网站，你只有大约6秒钟的时间来展示你是谁以及你的品牌是什么。这6秒的时间，就是用户看你的那一眼，没有把握住，就是非常大的浪费。 要怎么做呢？网站header需要怎么设计呢？...它的header设计是我最爱的header设计之一，使用了很多的现代设计来创造更好的用户体验。 分享一下我最喜欢的三点： 第一：导航栏。...网站的header设计不一定非要静态，动态的设计更加出彩，该模板的header就是动态的，如果你将鼠标悬停在CTA上，会有微交互响应，此外，它的右侧还有很多社交媒体连接可供选择。 18....当悬停鼠标在图片上时，家具图片会响应显示其详细信息。

    2.4K00

    御用导航提示提醒页面_PowerBI 个性化定制你的报告导航

    大家好，又见面了，我是你们的朋友全栈君。 “页导航”是PowerBI在2020年5月的更新中一个非常关键的功能。...我也写过一篇文章，如何在书签和页导航中进行选择： PowerBI中的书签和导航页，如何选择呢？ 而通过页导航的自定义参数链接可以实现给最终用户提供个性化定制的页面。...但是在本案例中，我们期望的是，每一个大区的负责人都能够看到其他大区的数据。所以呢，不能使用行级别筛选器去筛选数据集。但是，我们还是要使用行级别安全筛选，当然，是在其他位置。...动态页面导航设置 想要实现不同人导航的页面不同，可以使用页面URL+用户ID匹配的方式来搞定。...Page Navigation Destination = SELECTEDVALUE( ReportPages[PageName] ) 5.设置页面导航 以上三个度量值分别对应在三个不同的参数位置上

    12.7K10

    PowerBI 个性化定制你的报告导航

    “页导航”是PowerBI在2020年5月的更新中一个非常关键的功能。我也写过一篇文章，如何在书签和页导航中进行选择： PowerBI中的书签和导航页，如何选择呢？...而通过页导航的自定义参数链接可以实现给最终用户提供个性化定制的页面。 那么问题来了，为什么要给最终用户提供个性化的页面呢？...所以呢，不能使用行级别筛选器去筛选数据集。但是，我们还是要使用行级别安全筛选，当然，是在其他位置。 动态页面导航设置 想要实现不同人导航的页面不同，可以使用页面URL+用户ID匹配的方式来搞定。...创建动态页面导航 在上图这个表中，我不仅输入了包含PageName的信息，同时也包含Page Description和Short Text这两列信息，所以说，目的自然不仅仅是单一地导航，做戏要做全套的，...Page Navigation Destination = SELECTEDVALUE( ReportPages[PageName] ) 5.设置页面导航 以上三个度量值分别对应在三个不同的参数位置上

    2.2K20

    前端如何提高用户体验：增强可点击区域的大小

    举个例子，在WCAG准则2.3.2中规定：网页不包含任何闪光超过3次/秒的内容。 用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。...我把鼠标悬停在按钮上，光标仍然是一个指针，这很好。不过，我也可以选择文本和悬停时，有一个文本光标!如果使用了正确的元素，就不会发生这种情况。 ?...正确的方法是在a 标签本身上添加padding。...真实案例 在最近的Twitter更新中，导航设计在可点击区域大小方面存在问题。 最初，它仅与文本相关，如下面的屏幕截图所示，但他们在收到反馈后将其修复。 ?...章节标题 在某些情况下，需要在章节标题的远端添加“查看更多”按钮或箭头。 在下面的示例中，我将箭头放置在假圆中，以便可以正确地使箭头居中。

    6.6K20

    扒个知名项目的 Bug！

    分享一个不错的 Bug 排查思路 ~ 大家好，我是鱼皮。我们在学编程时难免会遇到各种各样的 Bug，这种时候你一般会怎么处理呢？...正好我自己的这个项目很久很久没更新依赖了，于是我就考虑升级一下 Ant Design 组件的版本号。 在企业级项目中，升级版本号可不是小事，说不定新的版本就淘汰了一些语法，导致你的项目报错呢？...于是，我在升级之后，先用工具整体扫描了一遍代码，还好没报错。 然后呢，还要再人工确认，每个页面都要仔细检查一遍，点一点关键的按钮等。...缺失代码如下： .ant-menu-item-active { color: #1890ff; } 原本当鼠标悬停到菜单项时，会自动为该元素添加 xx-active 类名，然后触发上述样式代码变蓝色...其实当时我看到这里，就觉得大概率是这次改动的问题了，但还不确定，所以还要点进本次改动详情看看。 一进去看代码，就发现惊喜了！果然，本次改动移除了导航条菜单的悬停样式： ?

    90030

    【编程入门】互联网的本质技术

    类比一下，大家在论坛上经常会用一些代码来添加富文本内容，举一些栗子： [img]图片地址[/img] 用来贴图 [url]超链接[/url] 用来贴地址 [del]呵呵[/del] 表示标签里的文字应该被删掉...还是可以有一些动画的，不过这个跑题了），按 F5 才会刷新数据，都 21世纪了，这么呆板单调的网页怎么能展现我大智人种族的创造性口胡！...人家服务器怎么知道按协议要写什么东西进去呢，这就是 Web Server 干活的时候了。 形象化一下HTTP响应，大概就长这样： ?...比如我的主页，导航栏右边的头像和名字跟别人看到的不一样，就是因为这块地方有一个放图片的标签和一个写名字的标签，服务器脚本在查询本地的数据之后给我返回的页面里的标签填了我头像的图片链接...，JS 代码也可能会对外观进行一定的处理； 用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画； 交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知

    1.3K110

    简单两步，在Figma中制作动态交互效果按钮（附源文件）

    因此，如果原型中有4个按钮，并且都希望它们都是交互式的，那么总共需要12个按钮才能正常工作（每个按钮1个默认状态，1个悬停状态和1个按下状态）。...第二，必须将悬停状态和按下状态放置在原型框架的外面，一遍可以随时调用它们。（这也是Figma中的“Overlays”功能的实现方式） 第三，保持Smart Animate图层名称一致。...第2步-按下时 第二步：设置“While Pressing（按下）”状态 在第一步中，我们已经设置好了悬停状态，接下来创建交互的第二步。...第3步-单击状态 第三步：制作按钮链接（可选步骤） 为了让你的按钮点击后真正有效果，我们可以在按下状态的按钮上添加一个“On Click（单击时）”交互效果，以便可以跳转到新的页面，或者打开一个弹层以及你想要的其它效果...最后总结一下，过程中需要注意以下三点： 第一.按钮必须是唯一的组件实例或者Frame 第二.悬停状态和按下状态必须位于原型框架之外才能起作用 第三.保持Smart Animate图层名称一致。

    27.8K30

    VS Code常用快捷键

    前言对于开发者而言，熟悉快捷键的使用，能够起到事半功倍的作用，提高工作效率。以下是我整理的一份VS Code常用快捷键清单，希望能够帮助到你，欢迎在评论区留下你的常用快捷键。...设置VS Code中的键盘快捷方式Ctrl + K + S常用快捷键快捷键描述Ctrl + Shift + P /F1显示命令面板Ctrl + Shift +U显示输出面板Ctrl + P按名称搜索文件...，快速打开Ctrl + Shift + N新建窗口实例Ctrl + Shift + W关闭窗口实例Ctrl + ,用户设置Ctrl + K Ctrl + S键盘快捷方式Ctrl + `打开终端Ctrl...、搜索和替换操作快捷键描述Ctrl + F查找Ctrl + H替换Ctrl + G转到行F12转到定义Ctrl + F12转到声明Ctrl + Shift + O转到符号Ctrl + P按名称搜索文件，...F10单步执行F9切换断点Shift + F11跳过当前函数( 下一步/上一步)Ctrl + Shift + D显示调试Ctrl + K Ctrl + I显示悬停（显示光标悬停的内容）官方VS Code

    59020

    VS Code常用快捷键

    前言 对于开发者而言，熟悉快捷键的使用，能够起到事半功倍的作用，提高工作效率。以下是我整理的一份VS Code常用快捷键清单，希望能够帮助到你，欢迎在评论区留下你的常用快捷键。...设置VS Code中的键盘快捷方式 Ctrl + K + S 常用快捷键 快捷键 描述 Ctrl + Shift + P /F1 显示命令面板 Ctrl + Shift +U 显示输出面板 Ctrl...+ P 按名称搜索文件，快速打开 Ctrl + Shift + N 新建窗口实例 Ctrl + Shift + W 关闭窗口实例 Ctrl + , 用户设置 Ctrl + K Ctrl + S 键盘快捷方式...Shift + F5 停止调试 F10 单步执行 F9 切换断点 Shift + F11 跳过当前函数( 下一步/上一步) Ctrl + Shift + D 显示调试 Ctrl + K Ctrl +...I 显示悬停（显示光标悬停的内容） 官方VS Code快捷键图 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

    55730

    从0开始部署个人博客——原以为又要烂尾，结果CodeBuddy带我嘎嘎乱杀

    实战场景： 在调试博客移动端适配时，我通过以下步骤快速完成： 1.点击 "Preview"，切换到 "手机 - 375px" 视图； 2.发现文章标题在小屏上换行混乱，预览区自动标注 "文本溢出，建议缩短标题长度或减小字体...于是提出第二个需求："主页面改成：个人介绍 + 不同社区的方式 + 友情链接，剩余两个成为第三方页面，链接到导航栏"。...专栏导航的无缝接入 在博客列表下方新增 "博客专栏" 板块，将分散的文章按主题聚合，直接对接 CSDN 专栏页面： 板块定位：用金色标题（class="section-title"）与页面其他板块呼应，...响应式与交互动效优化 屏幕适配：在小屏设备上，项目卡片的布局转变为单列布局，通过 grid-template-columns: 1fr 设置，宽度自适应屏幕。...每当有读者惊叹 "这个功能好酷" 时，我都会告诉他们：这不是因为我技术多牛，而是因为我站在了工具进化的肩膀上。

    77510

    Power BI 按钮导航添加鼠标动画

    Power BI 可以插入页面导航器，类似目录，以便跳转到不同页面。 导航器可以针对不同的鼠标动作设置样式，以产生动画交互效果： 但是，导航器不支持添加图标，按钮支持。...以下GIF动画实现了按钮导航，左侧鼠标悬停时，出现勾选图标，右侧悬停时空心方块添加了勾选： 如何实现呢？...接着，对鼠标悬停动作添加图标，如需产生默认无图标，悬停出现图标，则选择将设置应用于悬停时: 图标进行自定义，然后选择本地的图标文件: 图标文件推荐SVG类型，体积小，放大无损。...可以在字节跳动的图标库下载： http://iconpark.oceanengine.com/official 至于下图这种图标添加勾选，是一种障眼法。...其实是默认状态添加方框图标，悬停状态添加方框+对勾图标，两个图标的方框大小正好相同，从而产生了错觉。 这个方案的不便之处在于，需要对所有页面挨个添加按钮，并相同设置。

    84230

    CSS 下拉菜单与 focus

    hover 算是比较熟悉的了，在 PC 上鼠标悬停于此时 :hover 伪类生效，比如 链接 的样式正是采用 :hover 实现鼠标经过时反馈，以提示用户这是可点击的。...导航栏之所以不直接显示而是放进下拉菜单，也是为了在移动端等小尺寸设备中显示得优雅一点，因此这个单击判定其实是优势。...桌面端 移动端 focus 持续到失去焦点 松开时进入，持续到失去焦点 hover 悬停期间 按下时进入，持续到失去焦点 active 单击按下期间 触摸按下期间 综合来看，focus 是最合适的。...首先，第一个坑——iOS Sasfari 浏览器中点击 与 button 的时候是不会有 :focus 状态的，倒是原本在 PC 上表示悬停的 :hover 可以在点击（触摸）后被激活。...其次，当一个元素被聚焦时，点击一般的空白处无法使它失焦。这个问题很迷，在 iOS Safari 上 100% 复现而在 iOS Chrome 上完全无法复现。

    7.7K20

    提高生产力的10个必备VS Code技巧和窍门

    /home 1.时光轴功能：源代码掌控新纬度 谁不知道Git和各种源代码控制工具的威力呢？...展开此视图以查看与当前文件相关的事件快照列表。这里包括文件保存以及文件被暂存的Git提交。 将鼠标悬停在快照项目上，即可查看 VS Code 创建快照的日期和时间。...一键删除：告别繁琐操作 你现在已经到了这一行，如果你想删除它怎么办？你会拖拽并选中文本然后按下删除键吗？你会不知疲倦地按下退格键直到每个字符都消失吗？...或者，你会使用 Ctrl + Shift + K 快捷方式在几秒钟内快速删除那些行和其他几十行吗？ 7....所以我把它改成了 Ctrl + D, Ctrl + D - 一个更容易按下和记住的键盘快捷键组合，并且没有冲突的按键绑定。我建议你也这样做。 9.

    85720

    15个能使你工作效率翻倍的Jupyter Notebook的小技巧

    技巧1-使用常用快捷键快速导航 了解这些快捷方式可以帮助你节省时间。我已经用黄色强调了我常用的那些，并且发现它们非常有用。如果忘记了快捷方式，则始终可以转到命令模式并按H键查看完整列表。...Jupyter Notebook还允许您创建自己的快捷方式，如果你想。单击“编辑快捷方式”按钮设计自己的热键。 ? ? 技巧2-在输出中显示多个项目 Jupyter笔记本一次只显示一个输出，如下所示。...在本例中，只显示最后一个变量的输出。 ? 我们可以在下面添加此代码以显示单元格中的所有输出。现在注意，两个变量都显示出来了。 ?...按左箭头，您将看到现在有光标（下面代码片段中的黑线），每行一个。从这里，你可以删除所有的数字在一次点击删除键。如果要将光标移到末尾，请使用右箭头键 ?...技巧8-在代码完成时创建提示 如果有需要一段时间才能运行的代码，可以在下面添加代码，让Python告诉您何时完成运行。

    3.5K20

    从0开始部署个人博客——原以为又要烂尾，结果CodeBuddy带我嘎嘎乱杀

    实战场景：在调试博客移动端适配时，我通过以下步骤快速完成：1.点击 "Preview"，切换到 "手机 - 375px" 视图；2.发现文章标题在小屏上换行混乱，预览区自动标注 "文本溢出，建议缩短标题长度或减小字体...于是提出第二个需求："主页面改成：个人介绍 + 不同社区的方式 + 友情链接，剩余两个成为第三方页面，链接到导航栏"。...专栏导航的无缝接入在博客列表下方新增 "博客专栏" 板块，将分散的文章按主题聚合，直接对接 CSDN 专栏页面：板块定位：用金色标题（class="section-title"）与页面其他板块呼应，标题下方添加...响应式与交互动效优化屏幕适配：在小屏设备上，项目卡片的布局转变为单列布局，通过 grid-template-columns: 1fr 设置，宽度自适应屏幕。...每当有读者惊叹 "这个功能好酷" 时，我都会告诉他们：这不是因为我技术多牛，而是因为我站在了工具进化的肩膀上。​

    95610

    BuildAdmin17：一个按钮实现网页全屏，vue是如何做到的

    前言在之前的十几篇文章中，整个BuildAdmin后台管理系统完成了layout布局、菜单栏、tabs标签栏的设计，那么后端管理系统整体框架的最后一个部分就是导航菜单栏。...tab栏在左侧，导航菜单栏在右侧，在BuilderAdmin中，一个设计了7个功能模块。7个按钮分别对应的是：回到首页、中英文切换、浏览器全屏、运行终端命令、清除缓存、个人信息、系统设置。...菜单栏实现先定义一个navMenus.vue，渲染导航菜单栏的各个按钮。这里只是单纯的定义了按钮，没有添加样式，先看看效果。添加css样之后，整体布局如下。...“按ESC即可退出全屏模式”。...，具体实现可以参考之前的文章：BuildAdmin16：边栏隐藏、页面全屏，我用vue是如何实现的全屏组件设计在上面全屏的组件上添加需要的功能：<div @click="onFullScreen" class

    2.3K21
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券