表单应用:
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中,用户刷新后,仍然是当前选择的皮肤