方法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元无门槛券
手把手带您无忧上云