Jquery表单与表格的运用

1,表单的应用:

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

b.复选框的框的应用

c.下拉框的应用

d.表单验证

2,表格的应用:

a. 表格变色

b.表格展开关闭

d.表格内容筛选

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

//得到多行文本框对象

var $tr = $("#tr");

//单击放大按钮，如果文本框高度小于450，则高度加30

            $("#btnBig").click(function() {

                if ($tr.height() < ) {

                    $tr.animate({height:"+=30"});

                };

            });

//单击缩小按钮，如果文本框高度大于100，则高度减30

            $("#btnSmall").click(function() {

                if ($tr.height() > ) {

                    $tr.animate({ height: “-=" });

                }

            });

4,滚动条上升下降

$("#btnUp").click(function() {

            $("#  $tr.animate({ scrollTop: "-=" });

            });

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(可选)：在动画完成时执行的函数，每个元素执行一次。

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

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

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

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

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

秒客网

Jquery表单与表格的运用

相关文章