方法2：为要查找的元素添加了上下文，在这里变为查找id为nav的子元素，查找性能得到了很大提升。 方法3：使用了find方法，它的速度更快，所以方法三最好。...2.1、一些规则 CSS解析引擎将自右向左计算每一条规则，它从关键选择器开始，自右向左计算每一个选择器，直到发现一个匹配的选择器，如果没有找到匹配的选择器则放弃查找。 使用较低层的规则通常更有效率。...通常请情况下，请保持选择器简单明了（比如充分使用ID选择器），尽可能的使用关键选择器更具体，无论对JavaScript还是CSS，这都可以加块网站的速度。...时，它将遍历整个DOM，jQuery方法还具有一个未充分利用的参数，既可以将一个上下文参数传入jQuery，以限制它只搜索DOM中特定的一部分。...red').css('background', 'yellow');}); 6.1、合并函数 一般来说,最好尽可能合并函数。
方法2，为要查找的元素添加了上下文，在这里变为查找id为nav的子元素，查找性能得到了很大提升。 方法3，使用了find方法，它的速度更快，所以方法三最好。...2.1、一些规则 CSS解析引擎将自右向左计算每一条规则，它从关键选择器开始，自右向左计算每一个选择器，直到发现一个匹配的选择器，如果没有找到匹配的选择器则放弃查找。 使用较低层的规则通常更有效率。...通常请情况下，请保持选择器简单明了（比如充分使用ID选择器），尽可能的使用关键选择器更具体，无论对JavaScript还是CSS，这都可以加块网站的速度。...时，它将遍历整个DOM，jQuery方法还具有一个未充分利用的参数，既可以将一个上下文参数传入jQuery，以限制它只搜索DOM中特定的一部分。...12、不使用jQuery 原生函数总是最快的，这点不难理解，在代码书写中我们不应该忘记原生JS。 就先总结这几条吧，每条建议并不难理解，但总结全面的话还是要花费不少时间的。
最早的滑动门的技术，一般都是结合 onclick 或者 onmouseover 事件传递一个参数给 JS 函数，根据传递的参数来决定显示哪一个标签。...，就可以在tab的标题按钮中设置 onclick="showTabs(1)"来设置第二块内容显示，而其它块隐藏。...但是我在实际应用中遇到了一些问题，除了 jQuery UI 自带的 JS 脚本很大，CSS 不符合实际应用需求外，还有一个最大的问题，你可能已经注意到了，在作为导航的标签定义中，每个标签对应哪一个区域是用链接目标来定义的....find("li") 来找到要添加事件的元素，绑定事件的时候，我们可以通过该元素在 $(".tabs li") 集合中的索引值来明确是哪一个标签被激活，然后对应索引值的 panel 显示。...在实际使用中，会遇到一个问题，一般我们会给 tab 中的文字加链接，那么当鼠标滑过这个 tab 的时候，如果指到了文字，那么激发事件的对象有可能是 A 元素而不是 LI 元素，则事件就不能正确激发。
1.1 jquery 选择器 还记到大明湖畔（CSS）的夏雨荷（选择器）吗？选择器可以快速定位到元素并为其应用样式效果。jquery 选择器的选择规则与 CSS 相同，只是目的是为其添加操作。...2.3 属性操作 还记得昨天总结中 js 对象如何获取元素内容嘛？没错，是 innerHTML。...，它指的是改变html的标签结构，它有两种情况： 1、移动现有标签的位置 2、将新创建的标签插入到现有的标签中 创建新标签 var $div = $(''); //创建一个空的div var...，可以简单的理解为一个键值对的集合，也就是 python 中的字典，键就是调用每个值的名称，值就是变量、函数、对象这些。...接下来说一下 js 中如何创建一个对象，并对其进行操作。
浏览器的主要功能 如果非要用一句话来概括浏览器的功能，那么浏览器就是一个请求资源，然后显示资源的软件。 这里的资源主要就是我们经常提到的 html,css,js,还有图片等。...在创建解析器的时候，会创建文档对象，在解析树构造的时候，会向 dom 树添加元素。 标记法标记的节点会由解析树的构造函数进行处理。当元素被添加到 dom 树的时候，也会被添加到堆栈中。...每个 CSS 文件都被解析为一个样式表对象。每个对象都包含 CSS 规则。CSS 规则对象包含选择器和声明对象以及与 CSS 语法相对应的其他对象。...目前是一个线程进行解析，一个线程用来获取文档剩下需要加载的资源文件。 构建渲染树需要计算每个渲染对象的视觉特性。这是通过计算每个元素的样式特性来完成的。...布局是一个递归过程，它从根渲染器开始，根据层次结构递归的遍历每个渲染器，然后计算它们的集合信息，最后布局它们。 布局分为全量布局和增量布局。
CSS2.1中，一个框(box，就是元素形成的方块等)可以根据三种定位体系布局。 常规流(Normal flow) 常规流，是对 normal flow的直译。 流者，动也。...还有一种说法是，浏览器在解析HTML CSS JS 的时候的一个流式的过程，从html起始标签开始 到html结束标签截止。...浮动(Floats) 浮动，顾名思义，相对于常规流来讲，它漂浮在常规流的上方。 在浮动模型中，一个框(box)首先根据常规流布局，再将它从流中取出并尽可能地向左或向右偏移。...绝对定位(Absolute positioning) 在绝对定位模型中，一个框(box)整个地从常规流向中脱离（它对后续的兄弟元素没有影响），并根据它的包含块来分配其位置。...这些特性指定了框相对于它包含块(绝对元素包含块的判断包含块)的偏移量。绝对定位的框从常规流向中脱离。这意味着它们对其后的兄弟元素的定位没有影响。
作为一个热爱学习的三好青年，怎会允许此事发生？今天咱们就先来回顾一下这些基础知识。以下内容根据 HTML 、CSS 、JS 的顺序进行回顾，文章篇幅较长，可以跳读。...元素之间可以排开（设置宽高是无效的，它的宽和高是由内容撑开的）。这些老实人都有谁呢？图片标签 img 和通用内联容器标签 span 以及超链接标签 a 1.4 布局 不想做将军的士兵，不是好士兵。...div{color: red} 2.2.2 类选择器 类这个字从何而来呢？它其实是根据标签的一个 class 属性命名的。多个标签想要渲染同样的效果，可设置相同的类。然后根据类名来选择元素即可。...如果一个元素定义如下： 这是一个div元素 想要获取该元素： var oDiv = document.getElementById...封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全.
伪类与伪元素的区别 css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。...visibility 还有一些不常用的；speak，page，设置嵌套引用的引号类型 quotes 等属性 注意：当一个属性不是继承属性时，可以使用 inherit 关键字指定一个属性应从父元素继承它的值...elem:nth-of-type(n) 选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。 elem:first-of-type 选中父元素下第一个elem类型元素。...block 块类型，默认宽度为父元素宽度，可设置宽高，换行显示。 none 元素不显示，并从文档流中移除。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
用来限制在一个块元素显示的文本的行数。...不包括overflow样式属性导致的视图中不可见内容 2.2 代码 在前端开发中，有一个非常好用的工具，Visual Studio Code，简称...网上的我也看过一些，但是都比较零散，时间也久了一些，我结合最近的情况，总结一下 造福大家，才是我想做的。手动比心❤。... //js代码,获取元素的clientHeight、scrollHeight，当clientHeight < scrollHeight时，发生了溢出， 方法二，使用插件 1. ...实现 javascript超过容器后显示省略号效果的方法(兼容一行或者多行) 结尾 富文本溢出是一个坑，它里面有时会有多个段落等等。
如上图演示中的占位图片采用了低像素的图片，即大体配色和变化是和实际内容一致的。 如果无法生成这样的低像素图片，稍微降级的方案是通过算法获取图片的主体颜色，使用纯色块占位。...再退一级，还可以使用全站相同的站位图片，或者直接一个统一颜色的色块。虽说效果肯定不如上面两种，但也聊胜于无。 骨架屏完全是自定义的，想做成什么样全凭你的想象。...你想做圆形的，三角形的，立体的都可以，但“占位”决定了它的特性：它不能太复杂，必须第一时间，最快展现出来。...而前端 JS 除了绑定事件之外，还会多做一个事情叫做“激活”（hydration），这里就不再赘述了。 不论是传统模式还是 SSR，只要是后端渲染，就不需要骨架屏。...render.js 它负责创建 DOM 元素并添加到 上，渲染页面实际的内容，用来模拟常见的前端渲染模式。 index.css 页面实际内容的样式表，不包含骨架屏的样式。
DOM 规范中的 MutationObserver 构造函数，用于创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。..."> let greeting = "大家好，我是阿宝哥"; 另一个CSS代码段： <div...在以上示例中，当点击 跟踪元素生命周期 按钮时，一个新的 DIV 元素会被插入到 body 中，成功插入后，会在消息框显示相关的信息。...在 3S 之后，新增的 DIV 元素会从 DOM 中移除，成功移除后，会在消息框中显示 元素已从DOM中移除了 的信息。 下面我们来看一下具体实现： index.html <!...它是完全模块化的，由 “块” 组成，这意味着每个结构单元都是它自己的块（例如段落、标题、图像都是块），用户可以轻松地编写自己的插件来进一步扩展编辑器。
="3" />+ 区别2：没有根元素限制---// 包含多个元素的模板---无需将元素包装在单个容器元素中。...-- HTML 注释语法在.astro 文件中是有效的 -->{/* JS 注释语法也是有效的 */} 模板语法 定义变量---const name = "Astro";--- 你好...客户端指令默认情况下，UI 框架组件不会在客户端激活。如果没有 client:* 指令，它的 HTML 将被渲染到页面上，而无需 JavaScript。...JavaScript 并使其激活client:media 一旦满足一定的 CSS 媒体查询条件，就会加载并激活组件的 JavaScript。...❞下面是我添加的 react、vue 框架的 count 功能组件：图片 总结Astro 是一个以内容为中心的框架，默认服务端渲染，尽量没有JavaScript，所以速度很快。
谈起Wookmark我想做过前端的大侠都不会觉得陌生，它就是远近闻名的流布局jQuery插件，这个插件使用起来非常简单，需要引入两个js： 构建html 写入JS初始化 $('#tiles li').wookmark(); 参数 $('.myElements').wookmark({ align...container -装载动态网格的元素, 默认 "window"....默认为第一个项目的宽度。 fillEmptySpace – 如果为 "true",在每一列的底部会用一个空白的item填满对齐。
让我们设置一对帮助函数来解析响应并为我们找到标题。 列表2.19 添加用于解析响应和查找标题的函数: ....如果你还记得,localStorage是一个键/值存储。我们可以使用对象。获取对象的所有键。我们必须为自己提供另一个帮助函数来将所有链接从localStorage中取出。...我将把它作为练习留给读者来确保这个特性的安全性。 列表2.25 创建一个从链接数据创建DOM节点的函数: ....} ${link.url} `; }; 最后，我们创建一个renderLinks()函数，它调用getLinks...这里有一个我没有处理的异常情况:如果Fetch API不能建立网络连接，那么它返回的承诺将被完全拒绝。我把它作为练习留给读者来处理，因为我们在这本书中有很多内容要讲，而且页数有限。响应。
也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 状态性伪类 是基于元素当前状态进行选择的。...常见的伪元素选择器 div:first-child 选择属于其父元素的第一个子元素的每个div元素 div:last-child 选择属于其父元素最后一个子元素的每个div元素 div:nth-child...元素的每个div元素 div:nth-last-of-type(n) 同上，但是从最后一个子元素开始计数 div:first-of-type 选择属于其父元素的首个div元素的每个div元素 div:last-of-type...比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。 CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。
我可以识别到class="article-header-level-2"是一个副标题，但是机器不能。（如果可以的话，把它从我电脑中拿出来，可我也还没准备好进行AGI革命呢。）...我认为HTML5规范本身在元素定义下的一个注释中很好地总结了这个问题： 注释： 强烈建议作者将div元素视为最后采取的元素，在没有其它元素适合的（情况下）。...辅助技术可以使用这些元素和其它元素生成文档大纲，这可以帮助用户更轻松的访问它。在每个sectioning root/content中，你不应该使用超过一个的或。...或者更确切地说，它可以在文档中多次被使用，但是一次只能看到一个元素，所有其它的（ ）必须被使用隐藏属性隐藏，如CSS中的display:none。...整体： 元素用于表示完全独立的内容区域，这些内容可以从页面中提取出来并放入另一个内容中，并且仍然有意义。
它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。...由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。...与$(fn)等价 （3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。...使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。
定位方案的三种流 普通流：包括对块级框的块格式，对行级框的行格式，对块级框和行级框的相对定位； 浮动：在浮动模型中，一个框先按照正常排版来摆放，再将它从排版流中取出并尽可能地向左或向右偏移，其它内容可以排在一个浮动的周围...； 绝对定位：在绝对定位模型中，一个框会从排版流中完全脱离出来（它对后续的兄弟没有影响），并相对其包含块来指定其位置（包括 absolute, fixed ）。...块格式化上下文 BFC 全称为 Block Formatting Context（块格式化上下文），它是CSS2.1规范定义的页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域...简单来说，BFC建立了一个隔离的空间，隔断空间内外元素的相互作用，内部元素相互影响并按正常的布局来排列，同时BFC作为一个块级元素在其所在的文档流中被处理。...浮动的特性 浮动框可以左右浮动， 直到它的外边缘遇到包含框或者另一个浮动框的边缘； 浮动框脱离了文档的常规流，文档的常规流会忽略浮动框的存在； 浮动框不会影响到块级框的布局，但影响内联框的排列 ； 当浮动框高度超过包含框的时候
我可以识别到class="article-header-level-2"是一个副标题，但是机器不能。（如果可以的话，把它从我电脑中拿出来，可我也还没准备好进行AGI革命呢。）...我认为HTML5规范本身在元素定义下的一个注释中很好地总结了这个问题： 注释： 强烈建议作者将div元素视为最后采取的元素，在没有其它元素适合的（情况下）。... 我已经看过（并且使用过）这种模式很久了，以这种方式构造文档非常有意义，既可以读取HTML，又可以更加简单地在CSS中设置页面样式。...辅助技术可以使用这些元素和其它元素生成文档大纲，这可以帮助用户更轻松的访问它。在每个sectioning root/content中，你不应该使用超过一个的或。...整体： 元素用于表示完全独立的内容区域，这些内容可以从页面中提取出来并放入另一个内容中，并且仍然有意义。
用最简单的话来说就是，把每一个单一的作用样式定义一个 Class，确保整个样式表没有一条重复的样式，这样复用性是最高的，代码也最少，但是每个元素就需要一堆的 Class。...还是比较累的，不过好在有现成框架，像 Tailwind CSS[1] 就是一个基于 ACSS 的可定制的基础层 CSS 框架，它提供了构建定制化所需的构建块，无需重新覆盖内建于框架内中的风格。...使用 Tailwind CSS 后的代码就像下面这样，每个块元素上通过很多的 CSS 类来定义样式，基本不需要我们自己定义，即使有，也只需要写很少一部分额外的 CSS 代码，当然，也可以对 Tailwind...「缺点：」 就我个人而言，最大的感受就是这玩意儿解决方案太多了，每个解决方案的语法还都不一样，也没出来一个大一统方案，就会让我感觉用啥都不放心，生怕使用的方案突然停更了，这是其一。...当然这个是因为我着实不喜欢，所以带了点个人倾向，无伤大雅，无非就是打打嘴炮，喜欢 CSS in JS 的也不是少数，大家还是全凭个人喜好，不过它确实不太适合新手。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
