jQuery-表格以及表单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery-表格以及表单相关的知识,希望对你有一定的参考价值。

表单应用:

1、设置高度:

$comment.height($comment.height() + 50);

$comment.animate({height : "+=50"},400);

2、滚动条高度变化,是利用scrollTop属性;eg:文本域的滚动条

3、复选框的全选以及全不选以及反选

全选:

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

   $(‘[name=items] :checkbox‘).attr("checked",true);

})

反选:

//each循环

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

      $(‘[name=items] :checkbox‘).each(function(){

           this.checked = ! this.checked;

      })

})

4、删除以及追加这两个按钮可以在appendTo()中直接完成

就是说当我将一侧中的元素选取出来添加到另一侧的时候,会导致一侧中的元素消失,会出现在另一侧中

5、$("#select1").dbclick(function(){

      //当双击鼠标的时候,会获取被点击的选中的项

      var $options = $("option:selected",this);

      $options.appendTo("select2");

})

表格应用:

1、当对象发生改变的时候,我们又需要使用原来的对象,可以使用end()函数

$(‘tbody > tr‘).click(function(){

      $(this).addClass(‘selected‘)

             .sibiling().removeClass(‘selected‘)

             //对象发生了改变

             .end()

             //返回到this对象

             .find(‘:radio‘).attr(‘checked‘,true);

})

2、使用hasClass()判断是否含有某class类

3、var hasSelected = $(this).hasClass(‘selected‘);

//3元表达式

$(this)[hasSelected ? "removeClass" : "addClass"]("selected");

4、

//当点击分类行的时候,分类的内容会显示或隐藏

$(function(){

      $(‘tr .parent‘).click(function(){

           $(this).toggleClass("selected")

                  .sibiling(‘.child_‘ + this.id).toggle();

      })

})

//当用户刚进入页面的时候,默认是收缩起来的

$(‘tr .parent‘).click(function(){

           $(this).toggleClass("selected")

                  .sibiling(‘.child_‘ + this.id).toggle();

}).click();

5、$(function(){

      $("#filterName").keyup(function(){

           $("table tbody tr").hide()

                         .filter(":contains(‘"+( $(this).val() )+"‘)").show();   

    }).keyup();  //DOM加载完后,绑定事件完成之后会立即触发

})

当输入一个字符的时候,筛选出来的选项在刷新后,字符存在,项不存在,以上代码,会使其保存一致

6、对当前皮肤换肤:

function switchSkin(skinName){

      $("#"+skinName).addClass("selected")

      .sibiling().removeClass("selected");

      $("#cssfile").attr("href","css/"+skinName+".css");

      $.cookie("MyCssSkin" , skinName , { path: ‘/‘ , expires : 10});

}

 

$(function(){

      var $li = $("#skin li");

      $li.click(function(){

           switchSkin(this.id);

      });

 

      var cookie_skin = $.cookie("MyCssSkin");

      if(cookie_skin){

           switchSkin(cookie_skin);

      }

})

网页换肤功能不仅能正常切换,而且也能保存到Cookie中,用户刷新后,仍然是当前选择的皮肤

以上是关于jQuery-表格以及表单的主要内容,如果未能解决你的问题,请参考以下文章

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

《锋利的JQuery》读书要点笔记4

如何使子表单行项目在 zoho creator 片段页面的 HTML 表格中仅出现一次?

jQuery第五章

如何使用jquery获取html表单的每个客户端控件的名称name和value值?以json格式返回

联系表格 7 条件值基于不带 jquery 的下拉列表