首页
学习
活动
专区
圈层
工具
发布

JavaScript集锦

defaultChecked 反映(CHECKED)属性的布尔值(缺省状态).? 方法? click() 选定复选框,并使之状态为"on".? 事件处理器?...onClick 当用户单击Checkbox时执行.? 单选按钮(radio)对象? 属性? name NAME属性的字符串值.? length radio对象中单选按钮的个数.?...defaultChecked 反映CHECKED属性值的布尔值.? 方法? click() 选定单选按钮.? 事件处理器? onClick 当单选按钮被选定时执行. select对象? 属性?...defaultSelected 反映标记的SELECTED属性的布尔值.? selected 反映option的当前选择状态的布尔值.? 事件处理器? onFocus 当输入焦点进入域时执行.?...事件处理器? onClick 当按钮被单击时执行.? submit和reset对象? 属性? value VALUE=属性的内容.? name NAME=属性的内容.? 方法?

2.9K20

CSS实现最简洁的单选折叠菜单

不到万不得已的时候千万别引入前端UI框架,因为HTML5和CSS3已经能实现绝大多数的功能,比如上期的《CSS实现最简洁的开关》只用了不到50行css就实现了带动画的material design风格的开关...: 而很多人的思维还停留在web2.0时代,用各种库来做UI,导致网页臃肿。...今天教大家用纯css实现一个单选的折叠菜单,不需要JavaScript就能用。折叠菜单和标签页差不多,逻辑上都是一种单选面板,只不过折叠菜单一般是垂直堆叠的,标签页是横着排列。...首先这些单选按钮组的父元素用,因为可以监听按钮组的变化,同时还能通过name属性直接得到RadioNodeList列表和变化值,非常方便,不用设置其他的css选择器了。...菜单展开后想要折叠只能点别的菜单项,当然这也没什么,如果非要实现反选菜单的功能,需要记录上次展开的菜单项,每次发生点击事件时,判断是否重复点击: // for every radio.onclick

5.8K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    OneCode List 组件技术解析:设计理念、子类体系与扩展实践

    一、基类设计:xui.UI.List 的核心能力1.1 数据管理与状态控制xui.UI.List 基类通过 _setCtrlValue 方法实现了单选/多选模式的统一处理,支持 valueSeparator...value : (value + '').split(separator), changed = false; // 清除之前选中状态 xui.arr.each...,包括:鼠标事件:点击、双击、悬停、右键菜单键盘导航:上下键切换焦点、回车键选中选择模式:支持单选、多选(含 Shift/Ctrl 辅助)命令按钮:内置 OPT 选项按钮和 CMD 命令按钮处理二、子类继承体系与功能解析...其他状态 ...}// ... existing code ...2.2.4 单选/多选框组件:RadioBox功能定位:表单选择控件核心特性:支持单选按钮(默认)和复选框模式(checkBox: true...Appearances 中定义新元素样式数据模型扩展:在 DataModel 中添加自定义属性及动作交互增强:在 Behaviors 中添加新事件处理数据处理:重写 _prepareData/_prepareItem

    8910

    React学习记录

    content 1、React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。...onClick={activateLasers}> Activate Lasers 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为...// 为了在回调中使用 `this`,这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); // or 在模板中 onClick...14、React ref 引用 15、错误边界 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 —— 错误边界。...错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。

    1.7K20

    遥遥领先,HarmonyOS的ArkTS应用入门实操

    UI:就是就是用户操作界面,开发者可以设计多个页面,通过路由进行对应的跳转 组件:就是我们常见的组件库 UI,如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合,构建完整界面。...类Web开发范式:采用经典的HML、CSS、JavaScript三段式开发方式,即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。...事件方法:组件可以通过链式调用设置多个事件的响应逻辑,如跟随在Button后面的onClick()。 系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。...在“Project”窗口,打开“entry > src > main > ets ”,右键点击“pages”文件夹,选择“New > ArkTS File”,命名为“Face”,点击“Finish” 和...在“Project”窗口,打开“entry > src > main > resources > base > profile”,在main_pages.json文件中的“src”下配置第二个页面的路由

    2.2K123

    【Vue.js——ElementUi】element-ui 组件二次封装(蓝桥杯真题-2276)【合集】

    背景介绍 在使用 element-ui 开发的过程中,对表格的使用比较多,且在同一个系统中表格的样式基本上是固定的,功能也基本一样。...在浏览器中预览 index.html 页面效果显示如下所示: 目标效果 element-ui 官网上具有单选功能的表格 demo 为:点击表格下方的按钮可以选中指定的某行数据。.../element-ui-2.15.10/index.js":引入 Element - UI 的 JavaScript 组件库,使页面可以使用 Element - UI 提供的各种组件。...设计模板:在 中使用 Element - UI 的 el - table 组件,并根据需求添加单选按钮和操作按钮。...编写方法:在 的 methods 中编写处理逻辑,如设置选中行、处理单选按钮状态改变等。

    73010

    【Android从零单排系列十五】《Android视图控件——AlertDialog》

    一 AlertDialog基本介绍 AlertDialog是Android平台上的一个UI组件,用于显示对话框并与用户进行交互。...listener):设置单选列表项,传入选项数组、默认选中项的索引以及选中项改变的监听器。...对话框按钮的点击监听器: DialogInterface.OnClickListener:用于处理对话框按钮的点击事件。通过重写onClick方法来实现相应的逻辑处理。...show():展示对话框,将AlertDialog显示在屏幕上。 四 总结 AlertDialog是一种常用的对话框,可用于提示信息、确认操作或让用户做出选择。...根据需求,在构建器中设置对话框的标题、消息内容、图标等属性,并通过按钮点击监听器处理用户的响应。最后通过create方法创建并显示AlertDialog实例。

    45910

    OneCode3.0 Gallery 组件前后端映射机制:从注解配置到前端渲染的完整链路

    这种映射机制的核心价值在于:将 Java 开发者熟悉的注解配置直接转换为高性能的前端画廊组件,无需编写 JavaScript 代码即可实现复杂的多媒体展示功能。...1.1 技术架构总览注解层:开发者通过 Java 注解声明画廊配置处理层:OneCode 框架解析注解生成元数据传输层:元数据序列化为 JSON 格式传递到前端渲染层:xui.UI.Gallery 组件解析配置并渲染...关键属性映射详解注解属性前端对应实现映射说明bgimg_bgimg样式转换为background-image: url(/{bgimg})borderTypeCSS border 属性枚举值映射为对应的边框样式dock布局算法控制画廊在父容器中的停靠方式...columns/rows网格布局计算width: 100/columns%样式autoImgSize图片加载逻辑对应前端onLoad事件中的尺寸调整selMode选择状态管理映射为单选 / 多选的交互逻辑...ProductGallery { ... }前端事件绑定:// xui.UI.Gallery中的事件映射Behaviors: { ITEM: { onClick: function

    13100

    【Vue.js——ECharts图表】学海无涯(蓝桥杯真题-2280)【合集】

    /data.json),data.json 中存放的数据为对应月份中小蓝每天的学习时长,单位为分钟(在项目目录下已经提供了 axios,考生可自行选择是否使用)。 页面加载完成后,默认显示周统计数据。...,name 属性相同表示它们是一组,只能选择一个,checked 属性表示默认选中 “周”。...选项卡切换事件处理 let tabs = document.getElementsByName('tabs'):获取所有 name 属性为 tabs 的单选框。...使用 for 循环为每个单选框添加 onclick 事件监听器。 当单选框被点击且被选中时,根据单选框的 id 决定显示周数据还是月数据,并更新图表。...处理数据,计算每月和每周的学习时长,并存储到相应的数组中。 更新图表 根据处理后的数据更新图表的配置项。 应用更新后的配置项,刷新图表显示。 选项卡切换 为选项卡的单选框添加点击事件监听器。

    24410

    ASP.NET AJAX(12)__浏览器兼容功能判断浏览器的类型和版本Sys.Browser针对DOM元素的兼容操作针对DOM事件的兼容操作

    " value="Show Bound" onclick="showBounds()" /> 在页面的代码注释里,我自认为已经写的足够的清楚,所以我在这里就不多做解释...,UI,Key枚举的项找到对应关系 Sys.UI.DomEvent.clientX/clientY:鼠标在document可视范围内的位置(和滚动条状态无关) Sys.UI.DomEvent.screenX.../screenY:鼠标在屏幕中的位置 Sys.UI.DomEvent.offsetX/offsetY:鼠标在触发事件的对象中的相对位置 Sys.UI.DomEvent.rawEvent:浏览器原生事件对象...一个针对DOM事件的兼容操作的示例 创建一个asp页面,我们如果没有这个浏览器兼容层的情况下,我们如果为一个按钮在javascript中为一个按钮添加一个事件, 则需要如下代码来兼容不同的浏览器 反映到下面的DIV的信息里

    1.3K90

    全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

    $("#id,.class,标签名") jQuery基础知识总结 10.表单选择器 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单,均可做出相应选择。...表单选择器是为了能更加容易地操作表单, 表单选择器是根据元素类型来定义的 注意:无论是否存在表单,表单选择器都会根据相应的type属性值做出选择。...表单选择器主要是根据 type值进行定位的 只有type属性的标签才具有 表单选择器 <input type="radio...该方法给 API 带来很多便利,推荐使用该方法 语法 :$("选择器").on( "事件名称" ,事件的处理函数) 事件名称 : 就是js事件中去掉on的部分 (js中onclick on事件中 click...没有jQuery之前,使用XMLHttpRequest做Ajax,有四个步骤,很麻烦。jQuery简化了ajax请求的处理。使用三个函数就可以实现ajax的请求处理。

    7.3K10

    JavaScript 的语法(网摘)

    当然要注意的是,如果用户从Options菜单选择Network Preferences项关闭 JavaScript,Navigator将显示lt;NOSCRIPT>标记里的代码。...事件处理器在"描述事件处理器"中介绍。    一般地,你应该在一个文档的HEAD部分给页面定义函数。这样,所有函数都在显示的内容之前定义。...打印输出    Navigator 3.0能打印JavaScript产生的输出结果。从File菜单选择Print就可以打印输出结果。   ...如用户从View菜单选择 Document Source或者Frame Source,显示的内容是所见即所得(wysiwyg)的URL。...还有,由于作为 HTML属性的事件处理器是字面量函数体,在HTML中你不能用onClick=fun1>使fun1作为输入的onClick处理器,而必须用fun1 如上例所示。

    71910

    jQuery中的常用内容总结(二)

    (上一节) 选择器的扩展方法(上一节) 节点的CSS操作及节点其他操作(上一节) Ajax同步与异步(本节) 事件(本节) 弹窗(本节) 参数序列化(第三节) 遍历(第三节) 其他(第三节) ajax...,一般在插入dom时会使用到 blur():匹配的dom失去焦点事件,一般用于绑定input输入框 change():用于匹配的dom的值改变事件,常用于表单中select下拉框或者单选按钮 click...上图中 id为p2的dom是用jQuery插入的,然后绑定的一个点击事件和一个鼠标移开事件,当然(•‾̑⌣‾̑•)✧˖°只有在dom存在的时候才会执行绑定的事件,也就是将这两个事件归一(用统一的函数处理这些事件...5>jQuery UI弹窗(需要引入jquery UI) ? ?    ...onclick="popUp(5)">5.jQuery UI弹窗 11 <!

    1.8K110

    文档和元素的几何滚动

    (通过回车也能触发该事件)如果直接调用表单的submit()方法将不会触发onsubmit事件处理程序。onreset事件处理程序和onsubmit是类似的。也是会在表单重置之前触发该事件。...单选框和复选框也具有click事件。 通过定义onclick事件处理程序能达到处理click事件。...超链接与按钮一样提供了onclick事件处理程序。当onclick事件处理程序能概念化为跟随此链接时用一个链接,否则用按钮。 提交和重置元素本就是按钮,不同的是它们有与之相关联的默认动作。...当用户单击按钮,会触发onclick事件,由于改变状态会触发onchange事件,但是,当用户单击其他单选按钮而导致这个单选按钮状态的改变,后者不触发onchange事件。...对于该元素,依旧可以使用value和onchange事件处理程序。 选择框和选项元素 当用户选取或取消选择一个选项时,select元素将会触发onchange事件处理程序。

    6.9K00

    JavaScript(十二)

    事件捕获的用意在于在事件到达预定目标之前捕获它。 建议使用事件冒泡,在有特殊需要时再使用事件捕获。...)时触发 文本事件,当在文档中输入文本时触发 键盘事件,当用户通过键盘在页面上执行操作时触发 UI 事件 UI 事件指的是那些不一定与用户操作有关的事件。...现有的 UI 事件如下: load: 当页面完全加载后在 window 上面触发,当图像加载完毕时在 img 元素上面触发 unload: 当页面完全卸载后在 window 上面触发 error: 当发生...window 上面触发 select: 当用户选择文本框(input 或 texterea)中的一或多个字符时触发 load 事件 JavaScript 中最常用的一个事件就是 load。...在文本插入文本框之前会触发 textInput 事件 内存和性能 ---- 在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。 导致这一问题的原因是多方面的。

    4K20

    【Web APIs】JavaScript 操作元素 ③ ( 修改表单元素属性 | 表单常用属性 | 表单常用属性修改示例 )

    JavaScript 中 可以通过 DOM ( 文档对象模型 ) 操作 来 修改网页的 内容 , 结构 , 样式 , 属性 ; 在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容...通过 DOM 操作 修改元素属性 ; 一、修改表单元素属性 1、表单简介 HTML 表单 是 网页中用于 收集用户输入 的重要组件 , 表单可以 包含多种类型的输入元素 , 如 : 文本字段 密码字段 单选按钮...复选框 下拉列表 文件选择框 这些输入元素允许用户输入数据 , 然后可以将这些数据提交到服务器进行处理 ; 2、表单常用属性 HTML 中 表单元素比较特殊 , 有很多属性和样式需要特殊处理 ; 如...: 设置 select 下拉菜单 中的 option 选项 元素 , 该属性指示默认情况下应该选择哪个选项 ; <option value="paris"...var input = document.querySelector('input'); button.onclick = function() {

    94910
    领券