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-表格以及表单

最新文章

热门文章