频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
jQuery对表单、表格的操作及更多的应用
2011-10-15 17:02:33           
收藏   我要投稿

jQuery对表单、表格的操作及更多的应用
1 表单应用
 一个表单有3个基本组成部分。
 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法
 (2) 表单域:包含文本框、密码框、隐藏框、多行文本框、复选框、单选框、下拉选择框和
 文件上传框等
 (3) 表单按钮:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上或者取消
 传送,还可以用来控制其他定义处理脚本的处理工作。
 1 单行文本框应用
 jQuery代码如下:6.1.1.html
 2 多行文本框应用
 1. 高度变化
    jQuery代码如下:6.1.2.1.html
 2. 滚动条高度变化
    在多行文本中,还有另外一个应用,就是通过控制多行文本框的滚动条的变化,使
    文本框里的内容滚动。
    jQuery代码如下:6.1.2.2.html
 3 复选框应用
 对复选框最基本的应用,就是对复选框进行全选、反选和全不选等操作。
 jQuery代码如下:6.1.3.html
 4 下拉框的应用
 jQuery代码如下:6.1.4.html
 5 表单验证
 jQuery代码如下:6.1.5.html
2 表格应用
 1 表格变色
 1. 普通的各行变色
    jQuery代码如下:6.2.1.1.html
 2. 单选框控制表格行高亮
    jQuery代码如下:6.2.1.2.html
    代码中的$('table :radio:checked').parent().parent().addClass('selected');
    是通过parent()方法逐步向父节点获取相应的元素的,也可以使用parents()方法
    直接获取。
    $('table :radio:checked').parents('tr').addClass('selected');
    此外,如果通过has选择器也可以进一步简化,表示含有选中的单选框的<tr>行将
    被高亮显示:$('tbody>tr:has(:checked)').addClass('selected');
 3. 复选框控制表格行高亮
    jQuery代码如下:6.2.1.3.html
    在代码$(this)[hasSelected ? "removeClass" : "addClass"]('selected')中:
    [hasSelected ? "removeClass" : "addClass"]这是一个三元运算符,结果为:
    "removeClass"或者是"addClass"。因此
    $(this)[hasSelected ? "removeClass" : "addClass"]('selected')其实代表这
    两种情况
    $(this)["removeClass"]('selected');
    或者是$(this)["addClass"]('selected');
    它等价于:
    $(this).removeClass('selected');
    或者是$(this).addClass('selected');
 2 表格展开关闭
 jQuery代码如下:6.2.2.html
 3 表格内容筛选
 jQuery代码如下:6.2.3.html
3 其他应用
 1 网页字体大小
 jQuery代码如下:6.3.1.html
 2 网页选项卡
 jQuery代码如下:6.3.2.html
 3 网页换肤
 jQuery代码如下:6.3.2.html

摘自:zhangda89的博客

点击复制链接 与好友分享!回本站首页
相关TAG标签 表单 表格 更多
上一篇:JS 面向对象的小杂碎
下一篇:jQuery 如何获取浏览器所在的IP地址
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站