ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序...它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。...我通常会选择方案一，兼容性最好。5. 合并的结点包含链接时例如：您已阅读并同意《协议》。这种场景最好是打包阅读的，并且还要求点击《协议》后，能跳转至协议页面。...部分读屏软件可能无法打开链接将链接的onclick事件放在父结点触发，父节点设置role="button"或"link"只有1个链接，且整体内容与该链接强相关（如“您已阅读并同意《协议》”）打开链接很方便...管理焦点如果需要主动管理焦点（例如页面初始焦点放在大标题上、弹窗打开时切换焦点至弹窗标题、弹窗关闭时恢复之前的焦点位置），需要通过element.focus()方法来控制焦点，但只有、<
何时使用 Refs 下面是几个适合使用 refs 的情况： 管理焦点，文本选择或媒体播放。 触发强制动画。 集成第三方 DOM 库。 避免使用 refs 来做任何可以通过声明式实现来完成的事情。...> ); } } React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。...> ); } 将 DOM Refs 暴露给父组件 在极少数情况下，你可能希望在父组件中引用子节点的 DOM 节点。...通常不建议这样做，因为它会打破组件的封装，但它偶尔可用于触发焦点或测量子 DOM 节点的大小或位置。...Ref 转发使组件可以像暴露自己的 ref 一样暴露子组件的 ref。关于怎样对父组件暴露子组件的 DOM 节点，在 ref 转发文档中有一个详细的例子。
这些选择器将帮助您简化代码，提高可维护性，并使您的网站在视觉上更具吸引力。1. :nth-child() 选择器：选择器:nth-child()允许您根据特定元素在父元素中的位置来定位特定元素。...您可以对每个第 n 个元素应用不同的样式，这对于创建交替背景、编号列表甚至复杂的网格布局非常有用。...:选择器内的焦点：选择器:focus-within允许您在获得焦点时定位某个元素及其后代。...这对于具有动态属性值的样式元素是有益的：a[href^="https://"] { color: #4caf50;}此规则选择所有具有href以“https://”开头的属性的链接并将其样式设置为绿色...:焦点可见选择器：选择:focus-visible器是一个CSS伪类，当元素处于焦点并且用户使用键盘或其他非鼠标输入方法与页面交互时，它以元素为目标。
常用的 E:link 匹配E所有未被点击的链接 E:visited 匹配E所有已经被点击的链接 E:active 匹配鼠标已经其上按下，还没有释放的E元素...E:hover 匹配鼠标悬停其上的E元素 //a标签设置伪类时的顺序比较重要，会产生样式覆盖。...点击输入框等元素当光标闪烁可以输入内容时，就说明输入框处于焦点状态 E:enabled 匹配表单中可用的元素 E:disabled 匹配表单中禁用的E元素 E:checked...，再选择它父元素下面第n个元素 E:nth-of-type(n) 选择满足E选择器的元素的父元素内，满足E选择器条件的子元素中不同种类型（类型是指标签，如p标签和div标签是不同种类型）第N...小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再倒着选择这些元素同种类型的第N个 E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type
”，它允许检查父元素是否包含特定的子元素，并对父元素进行样式设置，或者扩展为复合选择器以对子元素进行样式设置。...当子元素处于焦点状态时，可以使用 :focus-within 选择器来为父元素设置样式，比如表单字段周围的容器。...:focus 选择器： 选择当前具有焦点的元素。 通常用于样式化或增强当前拥有焦点的元素，例如，更改输入框的边框颜色或文本区域的背景颜色。 不会选择包含有焦点元素的父元素。...id="password" /> 现在，我们可以使用 :focus 和 :focus-within 来添加一些样式： /* 当输入框具有焦点时，样式化输入框本身 */ input:focus...下面是一个示例，演示了如何使用 accent-color 属性： a { accent-color: blue; } 在这个示例中，accent-color 属性应用于所有链接元素 ()，并将链接的强调颜色设置为蓝色
{ background-color:gold; } 当input标签获取焦点的时候添加样式 input:focus{ background-color:cyan; } 给p标签的第一个字符添加样式...，只有一个p标签的情况下，添加样式 p:only-of-type{ color:white; } 同一父级中，给第2个div添加样式 div:nth-child(2){ color:...white; } 同一父级中，所有奇数div标签添加样式 div:nth-child(odd){ color:black; } 同一父级中，所有偶数元素添加样式 div:nth-child...(even){ color:black; } 同一父级中，第1,4,7,10,13…个元素添加样式 div:nth-child(3n+1){ color:red; } 同一父级中，第...{ box-shadow:5px 5px 5px gray; } 给被选中的部分添加样式 :not(span){ display:block; } 只能向 ::selection 选择器应用少量
超级链接的状态样式： 超级链接有四个状态的样式：1.从来没有被访问过的超级链接，2.已经被访问过的超级链接，3.鼠标移动到超级链接时的状态，4.鼠标点击超级链接时的状态。...设置鼠标点击超级链接时的样式 代码示例： ?...焦点获得时改变样式： input:focus 可以定义在组件获得焦点时改变样式 代码示例： ? 运行结果： ?...设置子标签样式： :last-child 设置父标签最后一个子标签的样式，例如：div p:last-child，设置div标签里最后一个p标签的样式 :first-child 则是相反，设置父标签最第一个子标签的样式...)，设置父标签从倒数第一个开始数的第n个子标签的样式，例如：div p:nth-of-type(1)，就是设置div标签里倒数第一个p标签的样式 代码示例： ?
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点： 实例 页面载入时，input 元素自动获取焦点： 我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用： 实例 页面载入时，input 元素自动获取焦点：...beforeMount : 指令第一次绑定到元素并且在挂载父组件之前调用。。 mounted : 在绑定元素的父组件被挂载后调用。...beforeUnmount: 当指令与元素解除绑定且父组件已卸载时，只调用一次。 unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。...oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。 arg：参数传递给指令 (如果有)。
背景通常用于传达内容在后面是不可用的，以作交互提示。它可以用作帮助用户集中注意力的一种方式。 ::backdrop 伪元素可以应用于最顶层图层元素，它允许你以任何您想要的方式设置背景样式。...对话框有一个名为“对话框”的role，当你使用 元素时，浏览器会自动为你分配。 您也可以通过 ARIA 创建对话框：将 role="dialog" 应用于元素 (例如)。...如果对话框是模态的，则在显示时添加 aria-modal="true"，并在对话框关闭时删除它。您需要自己完成所有模态工作 (焦点捕获、使其余内容无效等)。...它有链接文本和 URL 字段，关闭对话框或添加链接的按钮图片模态对话框：添加链接；当这个模态对话框打开时，它后面的任何东西都不能与之交互。...WAI-ARIA 规定，当使用 role="dialog" 时，应至少包含一个可聚焦的元素，并在对话框打开时将焦点移动到其中一个可聚焦的元素上。
| | E:focus | 匹配获得当前焦点的E元素| | E:lang(c) | 匹配lang属性等于c的E元素| | E:enabled| 匹配表单中可用的元素| | E:disabled...p id="child" class="class1"> Text 按照我们刚才的方法计算，两个的权值时相同的，这时候应该用那条规则呢？...a:link： 用来定义超链接被访问前的样式。 a:visited： 用来定义链接被访问后的样式。 a:hover: 用来定义鼠标放到链接上，但鼠标键未被按下时的样式。...正确的顺序为 a:link、a:visited、a:hover、a:active (其中，link和visited可以互换)； 原因： 鼠标经过的“未访问链接”可应用a:link、a:hover、a:...鼠标经过的“已访问链接”可应用a:visited、a:hover、a:active这三种类选择器来定义样式，因为后面的样式会覆盖前面的样式，所以a:hover应放在a:hovor的后面，a:active
相关实例：在引入bootstrap框架时，input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，这就是outline造成的影响，去掉只需要添加一个CSS样式即可，input:focus{outline...详情介绍可以查看之前的文章：实现输入框input在获得焦点时外边框不变蓝 点击打开链接 （5）CSS框类型，通过display属性来设定元素的框类型： 最常见的display...width:70%; max-width:1280px; min-width:480px; 然后，添加下句CSS使该容器在它的父容器内居中显示： margin:0 auto...; 那么最终呈现的效果是：当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。
可以在父元素上检测子元素获取焦点的情况。...•easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear” •fn:在动画完成时执行的函数，每个元素执行一次 基本：改变高和宽 show(速度...•easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" •fn:在动画完成时执行的函数，每个元素执行一次。...id="showMsg"> ---- 4 Ajax【掌握】 第一层，最原始层，$.ajax,一般不使用，完成更强大功能时需要使用。...应用场景：$.get serializeArray()方法 •该方法作用于一个jQuery对象，可以将DOM元素内容序列化为JSON数据格式。
这个方法在初始化render时不会被调用 } componentWillUnmount() { // 销毁长链接等本组件占用资源的操作 } render() { //...主要的用途： 父组件向子组件传递数据 父组件向子组件传递调用函数，用来通知父组件消息。 用来作为子组件逻辑判断的标示，渲染的样式等 children用来作为子组件的部分视图。...，并在文本的开头添加省略号，例如：…xyz。...middle ：从文本的中间进行截断，并在文本的中间添加省略号，例如：ab…yz。 tail：从文本的末尾进行截断，并在文本的末尾添加省略号，例如：abcd…。...onFocus 当文本框获得焦点的时候调用此回调函数。
相关实例：在引入bootstrap框架时，input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，这就是outline造成的影响，去掉只需要添加一个CSS样式即可，input:focus{outline...详情介绍可以查看之前的文章：实现输入框input在获得焦点时外边框不变蓝 点击打开链接 （5）CSS框类型，通过display属性来设定元素的框类型： 最常见的display...： margin:0 auto; 那么最终呈现的效果是：当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽...，并开始在可用空间内居中。...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。
选择器 示例 示例说明 :link a:link 选择所有未访问的链接 :visited a:visited 选择所有访问过的链接 :hover a:hover 选择鼠标悬空的链接 :active a:...active 选择正在活动的链接 :focus input:focus 选择获得焦点的输入框 3.2 结构化伪类 结构化伪类是 CSS3 新增选择器，利用 DOM 树进行元素过滤，通过文档结构的互相关系来匹配元素...，能够减少 class 和 id 属性的定义，使文档结构更简洁。...选择处于编辑状态的元素；input，textarea 和设置 contenteditable 的 HTML 元素获取焦点时即处于编辑状态 :checked input:checked 匹配勾选的input...目前，只有火狐浏览器支持 :dir 伪类，并在火狐浏览器中使用时需要添加前缀( -moz-dir() )(试验阶段)。
引言 应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。...注意 JavaScript 也可用于其他的编程环境（Node）。 客户端 API ：内置于浏览器的结构程序，位于 JavaScript 语言顶部，使您可以更容易的实现功能。...设备 API：访问设备位置数据的地理定位 API（Geolocation API） 、Notifications API允许浏览器发起系统通知、振动硬件（Vibration API）告诉用户 Web 应用程序有用的更新可用...当调用 setTimeout() 时，它将启动一个设置为给定延迟的计时器，当时间过期时，它就会调用给定的回调函数。...= window.innerHeight; div.style.width = WIDTH + 'px'; div.style.height = HEIGHT + 'px'; } 2.2 DOM
链接 链接 组件提供了对资源的交互索引。目标资源可以是外部的的，也可以是本地的，例如，当前页面内、页面外、应用。...与其他 WAI-ARIA 组件角色一样，应用link角色到一个元素，浏览器不会自动添加标准链接行为，例如导航到链接目标或上下文菜单操作。当使用 link 角色时，为元素提供这些特性是开发者的责任。...示例 链接举例: 用HTML标签 span 和 div 构建链接部件。 键盘交互 Enter: 执行链接并且将焦点移动到链接目标。 Shift + F10 (可选地): 打开链接的上下文菜单。...- 当焦点在菜单中一个项目的子菜单时，关闭子菜单并将焦点返回给父级menuitem。 - 焦点在 menubar 栏中的一个项目的子菜单时，执行以下3个操作： 1. 关闭子菜单。 2....当按钮被打开时，该状态属性的值为 true，当被关闭时，该状态属性的值为false。 示例 按钮示例：将可点击的HTML div 和 span 元素作为可访问命令和切换按钮的示例。
jQuery应用入门 jQuery是一个JavaScript库，极大的简化了JavaScript编程。...： 不分元素类型的 选择器 说明 :first-child 选择父元素的第一个子元素 :last-child 选择父元素的随后一个子元素 :nth-child(n) 选择父元素下的第n个或奇偶元素,n的值为...选择器 说明 :check 选择所有被选中的表单元素，一般用于 radio 和 CheckBox :option:selected 选择所有被选中的option元素 :enabled 选择所有的可用元素...input").css("background-color", "yellow"); }); }); 其他常用事件 方法 描述 blur() 有元素或者窗口失去焦点时触发...change() 文本框内容改变时触发 error() 加载错误时触发 focus() 有元素或者窗口获得焦点时触发 select() 文本框中的字符被选择之后触发 submit() 表单提交之后触发
> 需要注意以下几点： tabindex 属性使我们的组件能够得到焦点，从而使它变得模糊。...当用户在组件外部单击时，blur 事件将关闭我们的组件。 input 参数发出选定的选项，父组件可以轻松地对更改做出反应。...$emit('input', this.selected); } }; 另外，要注意的重要事项： 我们还会在 mount 上发出选定的值，以便父级不需要显式设置默认值。...我希望这可以帮助你创建自己的自定义选择组件，以下是完整组件要点的链接： 最后，在线演示的示例：https://codesandbox.io/s/custom-vuejs-select-component...-8nqgd 原文链接 https://hackernoon.com/how-to-make-a-custom-select-component-in-vuejs-8kt32pj
text-align: center 使子元素水平居中。 vertical-align: middle 使子元素垂直居中。 外部父级必须有固定的宽高。...使最后一项占满剩余高度 通过为最后一个元素提供当前视口中剩余的可用空间，即使在调整窗口大小时，也可以利用可用的视口空间。...父级必须具有视口高度。flex-grow：1可以应用于第一个或第二个元素，它将具有所有可用空间。 浏览器支持程度 99.5% 需要使用前缀 caniuse 11....，.popout-menu 显示 .reference:focus-within>.popout-menu 确保在焦点位于参考范围内时显示弹出窗口。....sibling-fade:hover span:not(:hover)当父级悬停时，选择当前未悬停的span子项并将其透明度更改为0.5。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
