【jQuery 对表单、表格的操作及更多应用】

jquery对表单及表格的操作是实际应用中相当广泛。

对于表单的操作,可以实现

(1)获取和失去焦点改变样式;

(2)在多行文本框中可以实现网站评论框的缩小及放大(高度变化)等功能;(也可以利用滚动条实现高度变化:利用scrollTop)

(3)在复选框中可以实现对复选框进行全选、反选、和全不选等操作;

(4)在下拉框中可以实现左边的内容添加到右边等典型 的操作;

(5)还可以实现网页中的表单验证操作。

以上是利用jQuery对网页的典型操作,具体实现都是利用前面学习的知识,需要自己动手操作。

对于表格的操作,可以实现:

(1)表格的变色:普通的隔行变色,单选框控制表格行高亮、复选框控制表格行高亮等操作;

(2)对表格进行展开及关闭操作,通过绑定click事件来实现;

(3)对表格内容进行筛选操作,可以使用contains选择器来完成,也可以利用jquery的filter筛选方法对表格内容进行过滤;

其他操作及应用

通过jquery还可以对网页进行字体大小变化;网页选项卡实现;网页换肤等操作

表格和表单都是html的重要组成部分,分别用于采集用户输入的信息和显示列表数据,通过jquery更方便的实现了这些功能。

相关实战锻炼自行动手完成!

jQuery 对表单、表格的操作及更多应用-简略笔记的更多相关文章

  1. jQurey对表单表格的操作及更多应用(方法型)

  2. jQuery(6)——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  3. (十)jQuery对表单、表格的操作

    一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

  4. 第5章 jQuery对表单、表格的操作及更多应用

    本章主要是对前面4章的小结和应用. 一. 表单form应用 表单分为3个组成部分 (1)form标签 表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 - ...

  5. jQuery对表单、表格的操作以及更多应用

    表单和表格都是HTML的重要组成部分,分别用于采集.提交用户输入的信息和显示列表数据. 表单应用:一个表单有3个基本组成部分: ①表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器 ...

  6. jQuery对表单、表格的操作及更多应用(上:表单应用)

    内容摘录自锋利的JQuery一书 一.表单应用 1 获取和失去焦点改变样式(P142) $(function(){ $(":input").focus(function(){ // ...

  7. jQuery对表单、表格的操作及更多应用(中:表格应用)

    内容摘录自锋利的JQuery一书 二.表格应用 1 表格隔行变色(:odd和:even选择器 P157) $(function(){ $("tr:odd").addClass(&q ...

  8. jQuery对表单、表格的操作及更多应用

    <head> <style type="text/css"> .even {     background-color: #fff38f;/*偶数行样式*/ ...

  9. jQuery对表单、表格的操作及更多应用(下:其他应用)

    内容摘录自锋利的JQuery一书 三.其他应用  1 网页字体大小控制(P164) <span class="bigger">放大</span> <s ...

随机推荐

  1. Monkey源代码分析之事件源

    上一篇文章<Monkey源代码分析之执行流程>给出了monkey执行的整个流程.让我们有一个概貌,那么往后的文章我们会尝试进一步的阐述相关的一些知识点. 这里先把整个monkey类的结构图 ...

  2. 《TomCat与Java Web开发技术详解》(第二版) 第一章节的学习总结--HTTP组成+基本访问方式

    1.需要看懂HTML文件中的组成元素的基本含义.不同的组成元素,可以使得HTML支持文本,图片(img,将图片发给客户端),静态音频/视频(embed src,将音频视频发给客户端),超链接(href ...

  3. eclipse配置jp.gr.java_conf.ussiy.app.propedit_5.3.3

    配置PropertiesEditor插件 jp.gr.java_conf.ussiy.app.propedit_5.3.3   1.下载PropertiesEditor插件 http://pan.ba ...

  4. MUI 清除缓存

    mui 清除但是在ios和安卓稍微有点区别, ios可以清除的很彻底,下载文件也能删除: 安卓能清理缓存,但是不能删除下载的文件: plus.cache.calculate(function(size ...

  5. PHPUnit_Framework_Assert单元测试

    先发下简书的干货: 教你一步一步写一个phpunit testcase:https://www.jianshu.com/p/ba6829a6f3ec 程序地址 https://github.com/y ...

  6. 虚拟化构建二分图(BZOJ2080 题解+浅谈几道双栈排序思想的题)

    虚拟化构建二分图 ------BZOJ2080 题解+浅谈几道双栈排序思想的题 本题的题解在最下面↓↓↓ 不得不说,第一次接触类似于双栈排序的这种题,是在BZOJ的五月月赛上. [BZOJ4881][ ...

  7. 9.接口BeanPostProcessor

    package org.springframework.beans.factory.config; import org.springframework.beans.BeansException; p ...

  8. window.scrollTo(0,document.body.scrollHeight)

    滑轮到页面底部 左下角window.scrollTo(0,document.body.scrollHeight) 右下角window.scrollTo(document.body.scrollWidt ...

  9. 我的Android进阶之旅------>Android自定义窗口标题实例

    该实例的功能比较简单,但是通过该实例的扩展可以在自定义标题中做出菜单导航等实用的功能,为了实现自定义窗口标题,需要做以下几个步骤: 1.给自定义标题提供一个界面 2.将自定义标题应用给Activity ...

  10. node.js版本升级

      node有一个模块叫n(这名字可够短的...),是专门用来管理node.js的版本的. 首先安装n模块: npm install -g n 第二步: 升级node.js到最新稳定版 n stabl ...