`

JQuery 表单插件——高亮表单插件

 
阅读更多

1.概述

  当你和页面交互的时候通过高亮选择元素能增加页面的交互性和易用性,它主要用于表单,但是它也可以用于表格(table)、列表(lists)、或者你指定的任何元素。、

  使用案例

 

  • 当制表到一个表单时,通过在高亮元素周围,使得表单填充更清晰。
  • 当鼠标经过或者单击表格中的行时,高亮使它看起来更明显
  • 元素会被切换当你单击他们时。

 2.基本用法

高亮插件的用法是:$(selector).highlight(parentSelector, highlightClass, startEvent, endEvent)

高亮原理的工作原理是通过给目标的父元素添加一个class属性。

举例来说,当一个text field被一个li元素所包含时,li元素会为text field添加'highlight'class属性当它获得焦点时,同时当text field失去焦点时会移除highlight的class属性。

通过默认, 高亮为一般的用法选择默认值,因此对于目标元素使用基本的语法是很容易的,举例来说:$('form').highlight()

  3。默认的标签和class属性

高亮插件对于一些通用的HTML元素设置了一些默认值,示例如下:

 

selector parentSelector highlightClass startEvent endEvent
form li 'highlight' focus blur
table tr 'highlight' mouseover mouseout
ul, ol li 'highlight' mouseover mouseout

翻译地址:http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html

 

分享到:
评论
1 楼 hehongwei44 2012-04-03  
parentSelector觉得不怎么正确  因该为子选择器差不多

相关推荐

    jQuery formalize (jQuery 表单插件)

    2. **表单元素聚焦和失去焦点的处理**:当用户点击输入框时,插件会自动添加高亮效果,提示用户当前的输入状态;失去焦点后,又能恢复原状,提高用户交互体验。 3. **错误提示**:Formalize支持自定义错误提示样式...

    jquery聚焦表单高亮.zip

    "jQuery聚焦表单高亮"这个主题关注的就是如何利用jQuery库来优化表单元素的交互体验,尤其是当用户焦点切换到表单字段时,通过视觉上的高亮提示,提升用户的感知度和操作效率。jQuery是一个强大的JavaScript库,它...

    jQuery表单验证插件

    jQuery 表单验证插件是...通过熟练掌握和运用jQuery表单验证插件,你可以创建出用户友好且功能强大的表单,提升网站或应用的用户体验。在开发过程中,记得根据项目需求灵活调整插件的配置,确保验证机制既严谨又高效。

    jQuery表单验证插件应用

    ### jQuery表单验证插件应用知识点详解 #### 一、简介 jQuery表单验证插件是一种基于jQuery的强大前端校验工具,它可以帮助开发者快速实现网页表单的数据校验功能。这款插件支持多种校验规则,包括但不限于必填项、...

    jQuery表单验证插件Validation的应用

    **jQuery表单验证插件Validation的应用** jQuery Validation插件是一款非常强大的前端表单验证工具,它可以帮助开发者轻松地实现对用户输入数据的有效性检查,确保数据的准确性和完整性。这个插件是基于jQuery库...

    jquery 日历插件源码

    《jQuery日历插件Calendar深度解析》 在网页开发中,日期选择功能是不可或缺的一部分,尤其是在处理表单、事件预订或时间安排等场景。jQuery日历插件Calendar因其易用性和美观的界面,成为了开发者们的首选。这款...

    jquery-highlight:jQuery高亮插件,支持多样式

    **jQuery高亮插件——jquery-highlight详解** 在Web开发中,常常需要实现文本搜索结果的高亮显示,以便用户能够快速定位到搜索的关键字。jQuery作为一款广泛使用的JavaScript库,提供了许多方便的插件来扩展其功能...

    jquery 表单验证 菜单 分页插件

    标题中的“jquery 表单验证 菜单 分页插件”揭示了本文将要讨论的是关于使用jQuery库进行表单验证、创建菜单以及实现分页功能的技术知识点。在Web开发中,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、...

    jquery插件制作 表单验证实现代码

    本文将详细讲解如何使用jQuery来制作一个表单验证插件,并通过具体的代码示例来展示如何实现这一功能。 首先,了解什么是表单验证非常关键。表单验证就是指在用户提交表单之前,对用户输入的数据进行检查,确保数据...

    7款jQuery常用插件

    3. **SyntaxHighlighter代码高亮插件**:SyntaxHighlighter是一款用于网页中展示代码的插件,能够自动识别并美化各种编程语言的代码块,使代码更易于阅读和理解。这对于技术博客、教程网站或者开源项目文档来说非常...

    商业编程-源码-jQuery formValidator表单验证插件示例源码.zip

    《jQuery formValidator表单验证插件深度解析及应用实践》 在Web开发中,表单验证是不可或缺的一环,它确保用户输入的数据符合预设的规则,从而避免因无效数据导致的问题。jQuery formValidator插件是一款强大的...

    jquery.validate.js jquery表单验证

    2. **jQuery Validate 插件**:`jquery.validate.js` 文件是这个插件的核心,它扩展了 jQuery 的功能,允许开发者添加自定义验证规则和错误消息,为表单字段创建验证逻辑。该插件默认包含了一些常见的验证方法,如...

    jquery表单点击滑动下拉框美化.zip

    总结来说,"jquery表单点击滑动下拉框美化.zip"是一个用于改善表单下拉框用户体验的jQuery插件,结合CSS3的动画特性,提供了点击滑动展开的效果,提升了表单的美观度和交互性。通过合理的CSS设计和jQuery的事件处理...

    jquery注册表验证插件

    1. 绑定事件:插件通常通过jQuery的`$(document).ready()`函数在页面加载完成后启动,然后绑定到表单的`submit`事件或其他相关事件。 2. 遍历字段:插件会遍历表单中的所有输入元素,根据预设的规则进行验证。 3. ...

    jquery基础实例002——可编辑的表格

    5. **表单元素处理**:虽然表格单元格不直接作为表单元素,但为了实现编辑功能,可能会临时将单元格转换为`<input>`或`<textarea>`,利用jQuery处理这些表单元素的值。 6. **CSS操作**:通过`addClass()`, `...

    jquery表单验证的详细解析

    **jQuery表单验证详解** 在Web开发中,表单验证是一项至关重要的任务,它能确保用户输入的数据符合预设的规则,从而防止无效数据的提交,提高用户体验,并减轻服务器端的处理负担。jQuery,作为一款广泛使用的...

    表单当前行高亮的实现

    标题“表单当前行高亮的实现”涉及的是在网页设计和开发中,如何通过编程技术使得用户在操作表单时能够清晰地看到当前正在交互的行。这通常是为了提高用户体验,使用户更容易跟踪和理解他们的操作。在这个场景中,...

    nice-form jquery 表单验证

    Nice-Form是基于jQuery的一个强大的表单验证插件,它为开发者提供了丰富的自定义选项和便捷的API,使得创建具有交互性、用户友好的表单验证变得更加简单。 jQuery是一个轻量级的JavaScript库,它极大地简化了...

    50个最好的JQuery插件大全

    2. **表单验证插件**:例如Validation Engine或jQuery Form Validation Plugin,确保用户输入的数据符合预设规则,防止无效数据提交。 3. **弹出窗口插件**:如jQuery UI的Dialog或Bootstrap的Modal,用于创建模态...

Global site tag (gtag.js) - Google Analytics