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

前端必须知道的开发调试知识 - 笔记

-> link # Elements—DOM 树 动态修改元素与样式 点击.cls 开启动态修改元素的 class 输入字符串可以动态的给元素添加类名 勾选 / 取消类名可以动态的查看类名生效效果...点击具体的样式值（字号、颜色、宽度高度等) 可以进行编辑，浏览器内容区域实时预览 Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则 可以使用 2...另外，console 打印的日志还可以自定义 css 样式： 通过占位符给日志添加样式，突出重要的信息 % s：字符串占位符 % o：对象占位符 % c：样式占位符 % d：数字占位符 例如： console.log...，并可以查看与原文件的差异（类似 git） CORS (跨域) 问题：通过 Whistle 开启代理，使用代理对真实请求地址进行封装和转发，让浏览器请求同源地址，代理转发到真实地址 启用本地 SourceMap...，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。

1.6K20

js如何动态选择和操作 CSS 伪元素，例如 ::before 和 ::after

这些添加的内容不会出现在DOM中，仅仅是在css渲染层中加入。 它不存在于文档中，所以js无法直接操作它。而jQuery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。...哪些是伪元素 :first-letter：向文本的第一个字母添加特殊样式。　 :first-line:　向文本的首行添加特殊样式。　 :before：在元素之前添加内容。　...:after：在元素之后添加内容。　 ::placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。（只支持双冒号的形式）。...> //js代码，支持IE document.styleSheets[0].addRule('.red::before','content: "red";color: red;'); //支持非IE的现代浏览器...+ '"'); // 支持非IE的现代浏览器 document.styleSheets[0].insertRule('.jadeId::before { content: "' + latestContent

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

    jquery-1.4.2.min.js文件有什么用途？里面的代码都有什么用途？

    jQuery 为准确地获取需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。 2 、修改页面的外观。...CSS 虽然为影响文档呈现的方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时，单纯使用CSS 就会显得力不从心。jQuery 可以弥补这一不足，它提供了跨浏览器的标准解决方案。...可以改变文本、插入或翻转图像、对列表重新排序，甚至，对HTML 文档的整个结构都能重写和扩充——所有这些只需一个简单易用的API 。 4 、响应用户的页面操作。...此外，它的事件处理API 也消除了经常困扰Web 开发人员的浏览器不一 致性。 5 、为页面添加动态效果。为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈。...jQuery 通过消除这一过程中的浏览器特定的复 杂性，使开发人员得以专注于服务器端的功能设计。

    3.7K40

    awesome-javascript-cn

    官网 CodeMirror：浏览器端的代码编辑器。官网 esprima：用于综合分析的 ECMAScript 解析器。官网 quill：一个带有 API 的跨浏览器富文本编辑器。...官网 语音命令 annyang：向网站添加语音命令的语音识别库。官网 voix.js：向网站、app 或游戏添加语音命令的 JavaScript 库。...官网 hopscotch：让开发者更容易向其页面产品添加引导的框架。官网 joyride：基于 jQuery 的功能引导插件。...官网 At.js：向你的应用添加类似 Github 的自动完成提示功能。官网 Placeholders.js：JavaScript 补全 HTML5 占位符的属性。...官网 fancyInput：利用 CSS3 效果让输入更有趣。官网 jQuery-Tags-Input：利用这个 jQuery 插件，可奇妙地将一个简单的文本输入转换成一个酷酷的标签列表。

    12.5K80

    网页设计基础知识汇总——超链接

    如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。...行、单元格和表格标签的关系:标签对只有放在标签对之间才有效；                                        输入 的文本也只有放在... 标签对 之间才有效（即才能被显示出来） 创建跨多行、多列的表元: 跨越多列: 在或标签符里利用colspan属性，并在其后写上想要跨越的列数。                                  ...跨越多行：在或标签符里利用rowspan属性，并在其后写上想要跨越的列数。 div标签： 可定义文档中的分区或节（division/section）。...div标签作用：W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div： div 元素，通过与 id 、 class 及 role 属性配合，提供向文档添加额外结构的通用机制

    5.2K30

    2019年底前的web前端面试题初级-web标准应付HR大多面试问题

    类型： url 生成一个url输入框 tel 生成一个只能输入电话号码的文本框 search 生成一个专门用于输入搜索关键字的文本框 range 生成一个拖动条，通过拖动条 color 用来创建一个用户使用的颜色选择器...为文本框指定一个可用的选项列表，当用户在文本框中输入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择 pattern 用于验证表单输入的内容 novalidate 当提交表单的时候不会其进行验证...formtarget 带有两个提交按钮的表单，会提交到不同的目标窗口 multiple 一次上传多个文件 maxlength 用于规定文本区域的最大字符数 wrap 是否包含换号符 css选择器...空null null表示一个空对象，什么都没有，表示无值 通常用作一个空引用，或一个空对象，就像一个占位符 运算：算术运算符 强制转换： 字符串转数字： parseInt() parseFloat(...()方法把当前的数组和另一个数组连接起来，返回一个新的数组 push()向数组的末尾添加若干元素，pop()把数组的最后一个元素删除掉 unshift()向数组前添加若干元素 shift()则把数组的第一个元素删除掉

    3.2K50

    Mac屏幕录制软件：Camtasia 2022

    ，Camtasia 2022 for Mac此次更新添加了具有可配置模糊量和色调颜色的模糊区域视觉效果。...向时间轴媒体添加了光标图像关键帧指示器。一次显示当前光标图像。当前突出显示的当前光标图像关键帧。过渡为 72 个转换添加了用户可配置的属性。为所有具有属性的转换添加了恢复按钮。...媒体更换添加了在 Canvas 上拖放替换媒体的功能。可以使用拖放在 Canvas 上替换占位符。可以使用拖放在 Canvas 上替换 Quick Property Assets 中的指定媒体。...属性面板改进的文本输入字段数字输入字段仅限于数字字符输入。Esc 键将退出输入字段焦点。当输入字段具有焦点时，将忽略单字符快捷方式。...录音机添加了新的原生解决方案，用于在 macOS 13 及更高版本上录制系统音频。无需第三方插件即可录制系统音频。简化 macOS 权限并减少安全足迹。

    2K30

    移动端样式问题汇总

    1，去掉移动端苹果手机点击时阴影 div { -webkit-tap-highlight-color：rgba（0，0，0，0）; } 2，输入去掉边框，单击阴影，下划线 输入{ 边界：0; 大纲：无...; 溢出：隐藏； 文字溢出：省略号； } .line-2 { 宽度：100px； 溢出：隐藏； 文字溢出：省略号； 显示：-webkit-box; -webkit-line-clamp：2; //控制多行的行数...（安全区域插入权）; } 7，占位符样式设置 ::-webkit-input-placeholder {} / *使用webkit内核的浏览器* / ：-moz-placeholder {} / * Firefox...版本4-18 * / ::-moz-placeholder {} / * Firefox版本19+ * / ：-ms-input-placeholder {} / * IE浏览器* / //冒号前写input...或textarea等元素 // IE9和Opera12以下版本的CSS选择器均不支持占位文本 8，去掉图片底部至少边距 img { 边界：0; 垂直对齐：底部； } 9，去掉按钮点击高亮样式 按钮{ -

    1.3K20

    「沙里淘金」精选浏览器端JavaScript库资源推荐

    rivets - 轻量级和强大的数据绑定+模板解决方案。 derby - MVC框架，可以轻松编写在Node.js和浏览器中运行的实时协作应用程序。...CodeMirror - 浏览器内代码编辑器。 esprima - 用于多功能分析的ECMAScript解析基础设施。 quill - 带有API的跨浏览器的富文本编辑器。...Placeholders.js - HTML5占位符属性的JavaScript polyfill。 fancyInput - 使用CSS3效果在输入字段中输入乐趣。...jQuery-Tags-Input - 使用这个jQuery插件将一个简单的文本输入神奇地转换为一个很酷的标签列表。 vanilla-masker - 纯JavaScript掩码输入。...BigText - jQuery插件，计算将一行文本与特定宽度匹配所需的字体大小和字间距。 circletype - 一个jQuery插件，可以让你在网络上输入曲线。

    8.3K20

    前端面试实录CSS篇（最近一周）

    : 0;: 将元素的透明度设置为 0, 以此来达到隐藏元素的效果，会占位，能够响应绑定的监听事件 4. position: absolute;: 使用绝对定位将元素移除了可视区域外，不会占位，以此来实现元素的隐藏...• 使用 css3 的 transform 属性： transform: scale(0.5); • 内容固定不变的情况下，将文字内容做成图片，使用图片来解决 10. 单行/多行文本溢出？.../* 多行文本溢出 */ display: -webkit-box; /*作为弹性伸缩盒子模型显示。...• 预处理器：less, sass, styuls，它们增加了 css 代码的复用性，例如：变量，循环，方法等 • 后处理器：postcss，最常做的是给 css 代码添加浏览器前缀，实现跨浏览器兼容性的问题...• 常用布局单位：像素px,百分比%,em,rem,vw/vh • vmin: vw 和 vh 的较小值 • vmax: vw 和 vh 的较大值 • em：文本相对长度单位，浏览器默认的字体尺寸为 16px

    59910

    「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

    CodeMirror - 浏览器内代码编辑器。 esprima - 用于多功能分析的ECMAScript解析基础设施。 quill - 带有API的跨浏览器的富文本编辑器。...Placeholders.js - HTML5占位符属性的JavaScript polyfill。 fancyInput - 使用CSS3效果在输入字段中输入乐趣。...jQuery-Tags-Input - 使用这个jQuery插件将一个简单的文本输入神奇地转换为一个很酷的标签列表。 vanilla-masker - 纯JavaScript掩码输入。...Countable - 一个JavaScript函数，用于向HT添加实时段落，字和字符计数 模态和弹出窗口 Magnific-Popup - 轻巧且反应灵敏的灯箱脚本，专注于性能。...BigText - jQuery插件，计算将一行文本与特定宽度匹配所需的字体大小和字间距。 circletype - 一个jQuery插件，可以让你在网络上输入曲线。

    9.1K21

    HTML 基础

    或 表单控件，与用户进行交互的元素 (1). type 根据不同的type值，创建不同的输入控件， type省略不写或写错了，那么默认都是文本框(text) ①. type...="text" 文本框　 type="password" 密码框 A. maxlength 限制输入的字符数 B. readonly 只读(只能看，不能改，但允许被提交)，无值属性 C. name...占位符，一般给予用户提示 ②. type="radio" 单选按钮type="checkbox" 复选框 A. name 定义控件的名称，一组单选或复选框名称必须相同 B. value 控件的值 C.... 多行文本域，允许录入多行数据 (1). name 缩写：txt (2). cols 指定文本区域的列数 (3). rows 指定文本区域的行数 (4). readonly...文字 浮动框架，可以在一个浏览器窗口中同时显示多个页面文档的内容（在一个页面中引入另外一个页面)，内容可以为普通的文体描述，当浏览器不支持元素时，将显示该文本描述信息

    5.9K10

    学会前端调试技巧，提升排错效率

    Chrome 开发者工具 Element 面板，如下就是该面板的用途：点击 .cls 开启动态修改元素的 class输入字符串可以动态的给元素添加类名勾选/取消类名可以动态的查看类名生效效果点击具体的样式值...console.debug：调试信息console.info：console.log 别名，输出信息console.table：将复合类型的数据（JSON、数组）转为表格显示占位符：给日志添加样式，可以突出重要的信息...%s: 字符串占位符;%o: 对象占位符; %c:样式占位符;%d:数字占位符。...Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项 手机允许远程调试，并访问调试页面 电脑点击 inspect...WhistleWhistle: 基于 Node 实现的跨平台 Web 调试代理工具。?

    2.6K10

    个人永久性免费-Excel催化剂功能第110波-当前行占位符替换

    在过往的功能开发中，已经对查找替换功能做了一些增强，特别是引用了正则表达式的操作，但其替换的操作是批量性的替换，而非当前行的范围内替换，在大量的使用占位符替换某些内容时，多数是对当前行的替换，故重新开发一个对当前行的占位符的替换操作...回顾下Excel催化剂现有的查找替换功能增强 首先在文本处理的功能中，已经有批量替换的功能存在，详见 第25波-小白适用的文本处理功能 。...无比低效的普通字符串连接法实现占位符替换 在我们需要将某几个单元格的内容串起来成为一个单元格内容时，无论使用CONCATENATE还是用&连接符，都是非常低效的，特别是在非占位符中有英文双引号时，更为如此...经过抽象提取其逻辑后，其实我们更想要的效果是只需构造一个占位符的方式，然后有方法自动将占位符替换为对应的单元格内容即可，这将比使用公式的方式，不断地需要考虑双引号冲突了&符号两边都要加上双引号等操作方便得多...同样地我们无需多行内容都构造，只需将顶行给构造好，余下同样规则的自动按顶行的内容来操作，留下的步骤就是需要选定要操作的数据区域，让程序好知道要替换哪些行哪些单元格（人性化地自动将隐藏行的单元格忽略处理）

    1.6K20

    前端开发调试知识

    Chrome DevTools 2.1 动态修改元素和样式 点击.cls 开始动态修改元素的 class 输入类名即可给元素动态添加类名 勾选/取消类名查看类名生效效果 点击 Styles...下具体的样式值，可以进行编辑，且可以在浏览器中实时预览 Computed 下点击样式的箭头可以跳转到 Styles 下的 css 规则去 强制激活伪类 选中具有伪类的元素，点击:hov...Console console.log console.warn console.error console.debug console.info console.table：具象化地展示 JSON 和数组数据 占位符...：用于给日志添加样式，可以突出重要的信息 %s：字符串占位符 %o：对象占位符 %c：样式占位符 %d：数字占位符 console.log("log"); console.warn("warn"); console.error...利用代理解决跨域问题 原理：浏览器有同源策略策略的限制，会出现跨域问题。但是服务器之间不需要同源，所以，通过代理服务器接收浏览器的请求(代理服务器和浏览器同源)，代理服务器再转发请求给真实的服务器。

    69820
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券