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

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

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

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

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

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