下面的性质和定义来自《用Python解决数据结构和算法》 树的性质 相关术语在“定义1”里面有解释，以分类树为例此处有图片 树是分层的，分层的意思是树的顶层部分更加宽泛一般而底层部分更加精细具体...如图1，对每一种动物，我们都可以从根节点（root）开始沿着一条特定的路径找到它对应的叶节点，并把它和其他动物区分开， 例如对于家猫 树下层的所有部分（子树Subtree）移动到树的另一位置而不影响更下层的情况...添加CSS的方法 行内样式表 为HTML应用CSS的一种方法是使用HTML属性style。...代码如下： CSS构造样式规则 样式表中包含了定义网页外观的规则，样式表中的每条规则都有两个主要部分...ajax Ajax是一种无需刷新页面即可从服务器（或客户端）上加载数据的手段，这里的刷新是指重新请求，重新下载页面。而Ajax却可以在不刷新的情况下加载数据，从而给人一种“流畅”的感觉。
在 Web 开发中，有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点。 开始 创建一个以下内容的 HTML 文件，并在浏览器中打开。...，保存，重新加载页面，看看会发生什么！...创建 URL 对象 很快就会看到，可以使用 URL 对象来了解 URL 的不同部分。如果你想对任何 URL 执行此操作，而不仅仅是当前页面的 URL，该怎么办？...如果你想把页面的 URL 作为字符串而不是 URL 对象，你可以写 window.location.href。...例如，如果你有一个 id 为 hello 的元素，则可以在 URL 中添加 #hello 就可以直接滚动到这个元素的位置上。
时，表明垂直滚动条滚动到底了 阅读知情同意书的小案例 onmousemove事件和事件对象 获取鼠标的坐标 页面滚动条的归属者 解决浏览器兼容性常使用以下写法 div跟随鼠标移动 事件的冒泡和事件对象event...JS修改元素样式的一些思考 JSON JSON字符串转化为JS对象 JS对象转换为JSON字符串 eval函数 ---- window.onload:事件 浏览器加载一个页面时，是按照自上而下的顺序加载的...，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载 window.onload事件会在整个页面加载完成之后，才会触发，将对应的script代码，写在里面，可以确保...script代码可以在页面加载完成之后，才会执行 ---- 获取鼠标的坐标 ---- 页面滚动条的归属者 ---- 解决浏览器兼容性常使用以下写法 //针对IE8以下浏览器不会将事件对象传入到事件函数的参数中 event=event||window.event
9.使用HTML而不是CSS @导入 @ import at-rule允许您在CSS中加载样式表： /* main.css */ @import url("reset.css"); @import...使用HTML标记效率更高，因为每个样式表都是并行加载的： <link rel="stylesheet" href...框架可以包含大量代码，但您可能只使用了可用样式中的一小部分。在可能的情况下，检查您是否包含所需的功能，而不是更多。 当框架样式不完全符合您的需要时，覆盖框架样式可能会很有挑战性。...该集装箱属性支持以空格分隔的列表形式显示以下一个或多个值： none：无包含（默认） layout：将元素与页面的其余部分隔离：其内容不会影响其他元素的布局 paint：将元素裁剪为特定大小而不出现任何可见溢出...更改任何子项的内容时，浏览器将不会重新计算该项目、列表中的其他项目或页面上的任何其他元素的大小或位置。渲染速度更快。 26.尝试渐进式渲染 渐进式呈现是一种为每个页面和组件定义单独样式表的技术。
1、返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画： // Back to top $('.top').click(function...2、预加载图像 如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0; i 标签来检查某个特定的图像是否被加载。...，也不想要重新加载页面——你可能希望链接做点别的事情，例如说触发一些其他脚本。...修复的时候要小心这个问题。 12、通过文本查找元素 通过使用jQuery中的contains() 选择器，你可以找到元素内容的文本。
其基本思路：将整个应用内容都在一个页面中实现并完全通过异步交互来根据用户操作加载不同的内容。在这期间，DOM操作和事件绑定将变得十分混乱，不便于管理，于是MV*框架运应而生。...数据变更检测： 方式 原理 说明 手动触发绑定 通过在数据对象上定义get()、set()方法（函数中包含View层的渲染），手动触发 需要主动调用重新扫描HTML页面上的所有节点的方法 脏检测机制 ViewModel...ES6方式，存在兼容性 Virtual DOM交互模式 MVVM的前端交互模式大大提高了编程效率，自动双向数据绑定让我们可以将页面逻辑实现的核心转移到数据层的修改操作上，而不再是在页面中直接操作DOM...: ''},{href: '', value: ''}] } } }) script> 在起初的MVVM框架中一般会重新渲染整个列表，包括列表中无需改变的部分也会重新渲染一次...Virtual DOM的差异化描述对象，然后把差异化的Virtual DOM根据特定的规则渲染到页面上。
在MPA中，渲染由服务器完成，服务器会重新加载以基于当前底层数据（通常来自数据库）生成新的HTML，以响应浏览器发出的每个请求。这意味着网站可以根据底层数据的变化而改变。...在这种情况下，渲染是在客户端（CSR）上执行的。使用JavaScript，这些SPA能够在不需要完整页面重新加载的情况下对单个页面上的内容进行大量操作。...，它结合了静态网站生成的优点，能够更新和重新生成网站的特定页面或部分，而无需重建整个网站。...使用这种技术，CSR框架将选择性地首先渲染和水合具有交互性的网页的最重要部分，而不是整个页面。最终，当满足特定条件时，较不重要的交互组件可以通过水合来实现其交互性。...在服务器上被划分为岛屿后，这些多个岛屿包被发送到浏览器，框架使用一种非常强大的部分加载形式，只有带有交互部分的组件由JavaScript接管并启用其交互性，而其他非交互式组件保持静态。
随着AJAX技术盛行，SPA（Single Page Application，单页面应用）开始广泛被认可。其基本思路：将整个应用内容都在一个页面中实现并完全通过异步交互来根据用户操作加载不同的内容。...数据变更检测： 方式 原理 说明 手动触发绑定 通过在数据对象上定义get()、set()方法（函数中包含View层的渲染），手动触发 需要主动调用重新扫描HTML页面上的所有节点的方法 脏检测机制 ViewModel...ES6方式，存在兼容性 Virtual DOM交互模式 MVVM的前端交互模式大大提高了编程效率，自动双向数据绑定让我们可以将页面逻辑实现的核心转移到数据层的修改操作上，而不再是在页面中直接操作DOM...'', value: ''},{href: '', value: ''}] } } }) 在起初的MVVM框架中一般会重新渲染整个列表，包括列表中无需改变的部分也会重新渲染一次...Virtual DOM的差异化描述对象，然后把差异化的Virtual DOM根据特定的规则渲染到页面上。
替代方案 标签：使用标签在HTML的部分直接引入外部CSS文件。这种方法不会阻塞页面加载，同时可以并行加载多个CSS文件。...「position: fixed」： 使用position: fixed将元素固定在视口中的特定位置，不会随页面滚动而移动。...将这些样式添加到HTML的元素中的元素中。 使用JavaScript异步加载主要的CSS文件（可以在页面加载后加载）。...通过渐进式渲染，页面的内容可以在加载过程中逐步呈现给用户，使用户能够更快地看到页面的部分内容，而不必等待整个页面完全加载和渲染。...「懒加载：」 对于一些不在首屏或不在用户视线范围内的内容，可以使用懒加载技术。这意味着只有当用户滚动到相应区域时才加载内容，从而减少初始加载时间。
一、前言 前端部分的搭建，需要考虑使用哪种模式进行页面之间的跳转交互， 而项目内的页面交互，不可避免的需要相互之间的数据共享。 ... Multi-page Application）： 多页面跳转需要刷新所有资源，每个公共资源(js、css等)需选择性重新加载 页面跳转：使用window.location.href.../index.html"进行页面间的跳转； 数据传递：可以使用path?...）： 只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次 页面跳转：使用js中的append/remove...和page1.htnl.js、page2.html.js等公共文件加载跳转页面前后，js/css/img等公用文件重新加载js/css/img等公用文件只在加载初始页面时加载，更换页面内容前后无需重新加载页面跳转
是针对DOM应用的所有CSS规则; 使用async和defer属性很容易使JavaScript无阻塞; CSS不容易异步; 所以要记住的一个好的经验法则是，您的页面会在你最慢的样式表加载完成之后才展示。...浏览器的主要解析器负责构建DOM，CSSOM，运行JavaScript等，并且随着文档的不同部分阻止它而不断停止和启动。...这意味着WebKit和Blink中的Preload Scanner存在错误。 简单地将@import包装在引号中将解决问题，您无需重新排序任何内容。...交换样式表和异步代码片段可以重新获得并行化。 现在您可以看到我们已经完全重新获得了并行化，并且页面加载速度提高了近2倍。...app.css中的一小部分样式：我们几乎肯定会下载比我们需要的更多的CSS。
方法/属性 描述 length 返回浏览器历史列表中的URL数量 back() 加载history列表中的前一个URL forward() 加载history列表中的下一个URL go() 加载history...列表中的某个具体的页面 3、location对象 location用于获取或设置窗体的URL，并且可以用于解析URL。...号开始的URL（查询部分） assign() 加载新的文档 reload() 重新加载当前文档 replace() 用心的文档替换当前文档 4、navigator对象 navigator对象包含有关浏览器的信息...6.2、文本节点：向用户展示的内容，入li中的JavaScript、DOM、CSS等文本。 6.3、属性节点：元素属性，如a标签的链接属性href="http:xxx.xxx.xxx"。...因为文档中的name属性可能不唯一，所有getElementsByName() 方法返回的是元素的数组，而不是一个元素。 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小。...这个方法可以接收 4 个参数: 要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。...location.hash //URL 中 hash 部分，没有则返回空字符串 location.href //完整的 URL location.host //返回服务器名和端口(如果有) location.hostname...另外，修改 location 对象的其他属性也可以改变当前加载的页面。每次修改 location 的属性(hash 除外)，页面都会以新 URL 重新加载。...与位置有关的最后一个方法是 reload()，作用是重新加载当前显示的页面。如果调用 reload() 时不传递任何参数，页面就会以最有效的方式重新加载。
建立简单的用户身份验证和注册系统后，你通过使用装饰器@login_required禁止未登录的用 户访问特定页面。...定义HTML头部 对base.html所做的第一项修改是，在这个文件中定义HTML头部，使得显示“学习笔记”的 每个页面时，浏览器标题栏都显示这个网站的名称。...接下来，我们将这个文件声明为使用 英语（见3）编写的HTML文档（见2）。HTML文件分为两个主要部分：头部（head）和主体（body）； 在这个文件中，头部始于4处。...HTML文件的主体包含用户将在页面上看到的内容。1处是 一个 元素，表示页面的导航链接部分。...定义页面的主要部分 base.html的剩余部分包含页面的主要部分： --snip-- 1 <div class="page-header
可以发现，页面主要更改的也就是 #page-main 部分，只需要实现动态刷新这部分的内容就可以了。 那怎么实现呢？...最小化的数据接口 现在生成的页面当中，有 部分声明大量样式与元信息， 之下重复的页脚、导航栏，还有每个页面下方都有的一些 。 很明显，我们不需要这些。...页面中还有一些 script，比如阅读进度、懒加载等。所以需要一个 extraJS 放置额外的 Script. {......page.css 或 search.css，为防止样式错乱，需要在加载过程中隐藏页面内容 if (!...= path; } } 如果使用 window.location.href 修改，那么页面就会刷新。
“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式： 利用URL中的hash（“#”） 利用History interface在 HTML5中新增的方法...；而hash只可添加短字符串 pushState可额外设置title属性供后续使用 history模式的一个问题 我们知道对于单页应用来讲，理想的使用场景是仅在进入应用时加载index.html，后续在的网络操作通过...Ajax完成，不会根据URL重新请求页面，但是难免遇到特殊情况，比如用户直接在地址栏中输入并回车，浏览器重启重新加载应用等。...hash模式仅改变hash部分的内容，而hash部分是不会包含在HTTP请求中的： http://oursite.com/#/user/id // 如重新请求只会发送http://oursite.com...故要想从文件系统直接加载Vue单页应用而不借助后端服务器，除了打包后的一些路径设置外，还需确保vue-router使用的是hash模式。
html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容） 1.4.2....图片懒加载插件 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据 // 3....(i, 1)方法 // 5.存储修改后的数据，然后存储给本地存储 // 6.重新渲染加载数据列表 // 7.因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作
因为ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...图片懒加载插件 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。（下载略） 代码演示 懒加载只需引入html 和 js操作 即可，此插件不涉及css。...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...1.7.2 案例：toDoList 分析 刷新页面不会丢失数据，因此需要用到本地存储 localStorage 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据...，然后存储给本地存储 重新渲染加载数据列表 因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表
举个例子，如果你的一个页面没有指定特定的标题，那么它就会使用default中的值。...DOM元素重建：模板中的DOM元素会在每次导航时被重新创建，而不是复用。 状态不保留：由于模板重新挂载，任何在模板中维持的状态都将丢失，每次导航都是从新的状态开始。...Next.js 通过文件系统层次结构中的 error.tsx 文件，为开发者提供了一种灵活而强大的方式来创建和管理错误UI，以及处理特定路由段的错误。...错误恢复功能 在 error.tsx 中，你可以提供恢复功能，如重试按钮，允许用户尝试从错误中恢复，而无需重新加载整个页面。...独立的路由处理 布局的每个插槽，例如用户分析或收入指标，都可以有自己的加载和错误状态。在不同页面部分以不同速度加载或遇到独特错误的场景中，这种细粒度的控制尤其有益。
javascript:void(0) 的一个常见用例是超链接。当需要在链接中调用 JavaScript 时，单击该链接通常会导致浏览器加载新页面或刷新当前页面或丢失当前滚动位置。...一种将 JavaScript 代码直接嵌入 HTML 文档的方法。它可以用作超链接的 href 属性的值或用作事件处理程序（如 onclick）的值。...例如，如果有一个链接需要在单击时执行特定的 JavaScript 功能，而不是导航到不同的页面，您可以使用javascript: Click...使用 javascript:void(0) 作为 href 值的目的是防止页面在点击链接时刷新和更改 URL。它通常在需要链接但不需要执行任何操作时使用。...# 符号经常被用作占位符 URL，点击链接跳转到页面顶部。它还用于在同一页面内创建内部链接，允许用户跳转到页面内的特定部分。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
