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

高级 Vue 组件模式 (6)

06 通过 Directive 增强组件内容 目标 之前的五篇文章中，switch 组件一直是被视为内部组件存在的，细心的读者应该会发现，这个组件除了帮我们提供开关的交互以外，还会根据当前 toggle...我们期望能够显示地声明当前的元素是一个 toggler 职能的组件或者元素，这个组件或者元素，可以根据当前 toggle 组件的开关状态，动态地更新它本身的 aria-expanded 属性，以便针对无障碍访问提供适配...指令函数的第三个参数即为当前所绑定组件的虚拟 dom 节点实例，其 componentInstance 属性指向当前组件实例，所以可以将之前的指令改版如下： export default function...> 提供更多灵活性 指令函数的第二个参数除了可以获取传入指令内部的表达式的值以外，还有其他若干属性，比如 name、arg、modifiers等，详细说明可以去参考官方文档。...binding.arg || "expanded"; const on = binding.value || comp.on; if (on) { el.setAttribute(`aria

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

    企鹅 FM H5 无障碍优化总结

    基本流程 FM 页面是一个高度组件化的页面，而且内容导向，没有特别多复杂动画承载视觉效果，按照以下步骤优化页面： 保证语义化的 html 标签 加 role、加 aria-* 辅助 voiceover...或者 talkback 朗读 通过 accessibility 测试工具 根据测试结构优化无障碍 展开说 html 标签的语义化 简单地来说就是，使用的 html 标签需要表达它的实际用途，如果是按钮那就应该用...加 role 和各种 aria-* 辅助属性 这个大概是踏出无障碍优化最高的一个门槛，可能内心怀抱着“这些属性值要去哪里查？”、“什么时候用什么 role？”诸如此类的忐忑不安。.../ Legacy Audits： 01.png 02.png 这两个面板使用下来差别不大： 能检查背景色和文字的对比色 能检查 lang 有没有定义 但无法检查 role 的合法性，以及对应的 aria...-* 属性的使用 Chrome 插件 ChromeLens ChromeLens 曾被 Google 的无障碍优化工程师推荐过，除了常规的（已经被整合到开发者工具的 Audits 面板）Run accessibility

    1.9K21

    Bootstrap HTML编码规范

    实例： 语言属性 根据 HTML5 规范： 强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。...引入 CSS 和 JavaScript 文件 根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript...Example link 布尔（boolean）型属性 布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。...更多信息请参考 WhatWG section on boolean attributes： 元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。...如果一定要为其赋值的话，请参考 WhatWG 规范： 如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。 简单来说，就是不用赋值。

    1.8K90

    react新手教程

    . ---- 意思就是jsx语句既不是一个字符串，同时也不是HTML，它是javascript的扩展。没错，它是一个js文件，只是可以在js文件中直接写html标签，不用加任何标签。...来获取这个值。...PropTypes 【PropTypes】提供了一种验证机制，来提醒用户使用组件时应该要传一些什么值，如果传的值不符合规范，只会得到一个warnning的提示，不会报错。...此时已可以使用其他类库来操作这个DOM 运行中阶段 componentWillReceiveProps() 组件接收到属性的时候调用，当组件的属性发生变化的时候，并将其作为参数nextProps使用，此时可以更改组件...在React中，所有的属性都必须采用驼峰式写法。例外就是aria-*和data-*之类的，必须采用小写。

    2.4K60

    聊一聊跨浏览器测试验证点梳理

    响应式图片（srcset, sizes属性）是否根据设备选择正确的图片源？打印样式打印预览和实际打印输出是否符合预期？是否应用了专门的打印样式表？...需要评估其影响。浏览器特定行为浏览器自动填充表单字段是否干扰了自定义样式或逻辑？内置的密码管理器是否工作正常？浏览器缩放功能（Ctrl+滚轮/Cmd+滚轮）是否导致布局错乱？...第三方库/插件使用的JavaScript库（jQuery, React, Vue, Angular等）和版本是否与目标浏览器兼容？使用的插件或Polyfill是否在所有目标环境中有效工作？...（虽然深度A11Y测试更全面，但基础检查很有必要）是否有使用role、aria-*属性增强语义（如果应用了）？六、 特定场景不同用户状态登录用户与访客用户看到的内容和功能是否正确？...浏览器扩展/插件常见的广告拦截器或其他扩展是否会意外阻断网站功能或样式？七、跨浏览器测试策略关键点明确目标环境根据用户统计数据确定优先级最高的浏览器、操作系统、设备（桌面/移动）组合及其版本。

    65820

    HTML5 自定义属性 data-* 和 jQuery.data 详解

    所做出的任何更改，都是可以实时反映到元素data属性上的。 但是这种方法比较低端，如果遇到多个data-*自定义字段，想要一次全部获取所有的data属性并包装成对象的话，还必须做一个循环，很麻烦。...所做出的任何更改，都是可以实时反映到元素data属性上的。...); 这与jQuery.attr运用在其他属性上时的情况完全一样，并且所做出的任何更改，都是可以实时反映到元素data属性上的。...，但是需要注意，jQuery.data对data数据做出的更改，不会反映到HTML元素data属性上。...也就是说，jQuery现在认为#food-pkd元素的data-en为"Beijing Stuffed Duck"，但是在HTML元素上，其值还是没有改变，仍为"Peking Duck"： window.jQuery

    1.8K50

    jquery中attr()和prop()的区别

    毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。...3、用于设置的属性值类型不同 由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。...并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。...因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值...outerHTML的内容； 值得注意的是jQuery的attr是获取不到这个属性值的。

    2.6K20

    jQuery 快速入门教程

    不过我们需要根据jQuery对象来筛选指定的元素。...如果没有为其传入表示值的参数，则表示获取操作，将返回获取到的数据；如果为其传入了表示值的参数，则表示设置操作，它将设置DOM元素指定属性的值。...", true ] //$.grep()用于遍历数组元素，并根据函数的返回值(true/false)来过滤数组元素 var array2 = [ "Hello", 12, "jQuery", true...( ); // 不传入任何参数，将以数组形式返回包含的所有p元素 jQuery 核心：扩展jQuery对象的属性和方法 如果我们要开发基于jQuery的插件，我们一般需要在jQuery对象上添加自定义的属性和方法...jQuery为我们提供了两个主要的方法，以分别为全局jQuery对象或实例jQuery对象扩展自定义的属性和方法。

    15.2K30

    jQuery源码研究：为jQ对象扩展的一些工具方法(上)

    上一章，讨论的是jQuery对象及其原型上的extend()方法，在源码中，实现了支持开发者自行扩展新方法的功能，但其实jQuery也通过对extend()传入一个对象参数来添加官方扩展方法，这些工具方法都是扩展在...变量是 {}.hasOwnProperty() 方法的引用 // hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否有指定的值 Ctor =...3、isEmptyObject()方法，看命名即知其作用是检测一个对象是否为空对象，即不包含任何可枚举属性。...这里复习下for...in...作用，其是用来遍历对象的可枚举属性的，包括对象原型上的可枚举属性。...，传入回调函数中的参数标识出属性名和属性值的先后顺序，并且还添加false来为回调函数增加了手动停止遍历循环的功能。

    84330

    06-老马jQuery教程-jQuery高级

    转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。 参数 array:待转换数组。...n + 1 : null; }); // 结果: // [2, 3] // 原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。...类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。 参数： obj:类型Object，类数组对象。...4.jQuery的插件封装 4.1 给jQuery包装对象扩展方法属性 直接给$.fn添加方法和属性 (function(jQuery) { jQuery.fn.logText = function...() { console.log(this.text()); }; })(jQuery); 4.2 给构造函数扩展方法和属性 通过$.extend()来扩展jQuery构造函数 $.extend

    2.7K90

    时隔一年多jQuery发布3.6.1新版本，你还在用JQ吗？

    在今年8月26日 jQuery 终于是更新了一个 3.6.1 维护版本，距离上一个版本发布时间已过去一年零五个月之久，其维护者表示接下来主要考虑修复聚焦与失焦(focus & blur)的问题以及一些难以捉摸的边缘情况...，可能是历史原因，jQuery 中与焦点有关的地方都很难改变，团队从未完全正确地修复，所以他们暂时保留这些内容，并将在未来解决，特别是因为这些更改最终可能需要发布一个新的主要版本。...所谓维护版本是指在不更改任何核心组件或添加新功能的情况下纠正安全漏洞或小错误的软件版本。...与自定义 CSS 属性值的规范保持一致现在为自定义 CSS 属性值 trimmed，以前类似的东西--prop: value ;会保留值中的前导和尾随空格，返回“value”。.../jquery-3.6.1.min.js还可以从 npm 获取此版本：npm install jquery@3.6.1写在最后在单页面应用大行其道，各种新鲜框架层出不穷的时代，或许已经很少有人会再关注

    2.6K20

    这 5 个前端组件库，可以让你放弃 jQuery UI

    目前正在广泛使用的框架之一就是jQuery UI。这是一组扩展的使用jQuery构建的部件、效果和主题，分为一组一组的形式。...这些组件的建立考虑到了移动设备，根据组件被设置的位置，提供了响应式的和自适应的布局。根据是否在移动设备上显示，大多数小部件都会进行相应的调整和更改，这是一个很好的功能。...每个控件都允许调整其显示方式，并为自定义功能提供回调以便根据需要对其进行调整。 Wijmo为产品提供了免费试用期，如果用于商业目的，则需要购买授权。如果想单独购买Wijmo5，也是可以的。...虽然这个框架与jQuery UI共享一些组件，但Webix扩展了jQuery UI并提供了一些不同于jQuery UI中常用的组件。 Webix文档具有很好的帮助作用。...EasyUI是一个扩展jQuery部件的集合，用于创建新式的，交互式网站和web app的交互。使用EasyUI，你可以使用HTML标记或者JavaScript来创建常用的UI元素。

    6.9K20

    jQuery源码研究：jQuery对象及原型上的extend()方法

    jQuery.extend( [deep ], target, object1 [, objectN ] )： 其中deep是布尔类型，如为true，则执行深拷贝，即合并成为递归； target是一个对象扩展...，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间； 后面的object1到objectN同样作为对象，包含额外的属性合并到第一个参数。...对象上添加extend属性，并且在jQuery.fn上面也添加同样的extend属性，还记得前面jQuery.fn = jQuery.prototype不？...接下来就是extend方法的主要逻辑块了，其只处理值为非null和非undefined的情况，具体代码解释下看注释： for ( ; i < length; i++ ) { // 只处理非null...jQuery.fn即原型对象上添加extend()方法的代码解释，再复习下：jQuery对象和其原型上都具有extend()方法，区别在于一个是类方法，一个是成员方法，在使用场景上请注意。

    1.4K30

    jQuery框架安装及jQuery特点介绍

    jQuery框架特点：jQuery是一个轻量级的脚本，其代码非常小巧；语法简洁易懂，学习速度快，文档丰富；支持CSS1~css3定义的属性和选择器；跨浏览器，支持的浏览器包括IE、FireFox、Chrome...等；实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护；插件丰富可以通过插件扩展更多功能。...如果需要下载其他版本的jQuery，只需要更改上述地址中的版本号，并使用IE浏览器即可快速下载。...jQuery使用非常简单，只要在HTML(或JSP)中引入一个外部JavaScript文件即可，其引入代码如下所示： image.png 上述代码表示引入当前目录下的“jquery-3.5.1.min.js...本质上是一个函数，该函数根据其参数的不同可以实现不同的功能，如作为选择器使用、作为功能函数的前缀、创建页面的DOM节点等。

    1.5K10

    JQuery选择器和JQuery包装集

    JQuery选择器 编写任何javascript程序都需要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如”拥有title属性并且值中包含test...属性过滤器 $("div[id]")匹配包含给定属性的元素 $("input[name='...']") 匹配给定的属性是某个特定值的元素 name='...' $("input[name!...='...']")匹配给定的属性是不包含某个特定值的元素 name='...' $("input[name^='...']")匹配给定的属性是以某些值开始的元素 name^='...'...$("input[name$='...']")匹配给定的属性是以某些值结尾的元素 name$='...'...n + 1 : null;}); 结果:[2, 3] 原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组：$.map( [0,1,2], function(n){ return

    4.4K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券