Jquery表单与表格的运用

1,表单的应用:

　　　　a. 单行文本框的应用多行文本框的应用

b.复选框的框的应用

c.下拉框的应用

d.表单验证

2,表格的应用:

a. 表格变色

b.表格展开关闭

d.表格内容筛选

3,多行文本框的放大与缩小

//得到多行文本框对象
var $tr = $("#tr");
//单击放大按钮，如果文本框高度小于450，则高度加30$("#btnBig").click(function() {if ($tr.height() < 450) {$tr.animate({height:"+=30"});};});
//单击缩小按钮，如果文本框高度大于100，则高度减30$("#btnSmall").click(function() {if ($tr.height() > 100) {$tr.animate({ height: “-=30" });
                }});

4,滚动条上升下降

$("#btnUp").click(function() { $("#  $tr.animate({ scrollTop: "-=30" });
            });
btnDown").click(function() {$tr.animate({ scrollTop: "+=30" });
});

5,全选

       //全选$("#CheckedAll").click(function() {//通过attr()方法设置属性checked的值，使之选中$('[name=items]:checkbox').attr('checked', true);});

6,全不选

//全不选$("#CheckedNo").click(function() {//通过attr()方法设置属性checked的值，使之不选中$('[name=items]:checkbox').attr('checked',false);});

7,下拉框

 //按钮事件$("#add").click(function() {//得到我们选中的值var seled = $('#select1 option:selected');//把选中的项给移除seled.appendTo("#select2");//var selremove = seled.remove();//把删除的值追加到select2中//selremove.appendTo("#select2");});

8,表单验证事件:

blur(): blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

click():元素点击的时候触发

dblclick(): dblclick事件会在元素的同一点双击时触发。

focus(): 当页面加载后将某个元素设置为焦点

keyup(fn):当键盘按下时触发

keyup():keyup事件会在按键释放时触发。

append():追加

remove():将当前元素以前的提醒元素删除

9,隔行变色

$(function() {$("tr:odd").addClass("odd"); /*给奇数行添加样式*/$("tr:even").addClass("even"); /*给偶数行添加样式*/});

$(function() {$("body>tr:odd").addClass("odd"); //给tbody中的奇数行添加样式$("body>tr:even").addClass("even"); //给tbody中的偶数行添加样式//将某一行变为高亮显示状态，可以使用contains选择器来实现$("tr:contains('王五')").addClass("selected");})

10,toggle()方法:toggle():切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

11,toggle(speed, [callback]) ):

•toggle(speed,[callback])：以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数。

•Speed:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

•Callback(可选)：在动画完成时执行的函数，每个元素执行一次。

•可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery1.3中，padding和margin也会有动画，效果更流畅。

12,Contrains选择器:匹配包含给定文本的元素
$(“div:contains(‘John’)”) ; //在当前页面中找到内容包含’John’的div

13,Filter筛选:筛选出与指定表达式匹配的元素集合。

$(“div”).filter(“表达式”)

14,网页换肤: 就是通过调用不同的样式表文件来实现不同皮肤的切换，并且需要将换好的皮肤记入Cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。

转载于:https://www.cnblogs.com/dclcc/p/3432852.html

Jquery表单与表格的运用相关推荐

php jq表格,如何用jQuery操作表单和表格
这次给大家带来如何用jQuery操作表单和表格以及一些其它应用,下面跟随小编,一起来看一下. 一.表单应用一个表单有三个基本组成部分: (1)表单标签:包含处理表单数据所用的服务器端程序URL以及数 ...
五、jQuery 对表单、表格的操作（走过路过瞅瞅吧）
文章目录前言一. 表单应用 1.1 单行文本框应用 1.2 多行文本框应用 1.3 复选框应用 1.3 下拉框应用 1.5 表单验证二. 表格应用 2.1 表格变色 2.1.1 普通的隔行变色 ...
30 个最好的jQuery表单插件
jQuery 的出现为我们的开发工作带来了极大的便利,而众多的基于jQuery插件的出现就犹如我们在 Firefox 中安装名目繁多的插件一样而乐此不疲,今天带给大家的是精心挑选的这30个最好的jQu ...
一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示本地下载功能强大的表单验证插件很多,以前我们介绍过validati ...
JQuery 表单验证--jquery validation
jquery validation,表单验证控件官方地址 :http://jqueryvalidation.org/ jquery表单验证默认值校验规则 jquery表单验证默认的提示 1 &l ...
jQuery对表单、表格的操作以及更多应用
表单和表格都是HTML的重要组成部分,分别用于采集.提交用户输入的信息和显示列表数据. 表单应用:一个表单有3个基本组成部分: ①表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器 ...
jQuery Form Plugin (jquery表单插件)
jQuery表单插件 jQuery.form 这是一个全面支持表单的jQuery插件,支持文件上传,包含以下一些方法: -ajaxForm -ajaxSubmit - formToArray - fo ...
jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
php表单确认密码,jQuery表单验证之密码确认实例详解
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框 ...

Jquery表单与表格的运用

Jquery表单与表格的运用相关推荐

最新文章

热门文章