jQuery - 小鸟系列之表单、表格的操作

多行文本框应用(滚动条高度变化)

<textarea id="comment" rows="20" cols="60">
内容...
</textarea>

//向上滚动
$("#comment").animate({ scrollTop:"-=50"},400);
//向下滚动
$("#comment").animate({ scrollTop:"+=50"},400);

复选框
//全选
$("#CheckedAll").click(function(){
$("[name=items]:checkbox").attr("checked",true);
});

//全不选
$("#CheckedNo").click(function(){
$("[name=items]:checkbox").attr("checked",false);
});

//反选(循环每一个复选框进行操作，取它们值的反值)
$("#CheckedRev").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked")); //jQuery写法
//this.checked = !this.checked; //原生JavaScript
});
});

//获取复选框选中的框
$("#btnCheck").click(function(){
var str="你选中的是:\r\n";
$("[name=items]:checkbox:checked").each(function(){
str += $(this).val() + "\r\n";
});
alert(str);
});下拉框
<select multiple id="select1" sytle="width:150px;height:200px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<select multiple id="select2" sytle="width:150px;height:200px;">
var options=$("#select1 option:selected"); //获取选中的选项
options.appendTo("#select2"); //删除选中项并追加到select2下拉框中

var options_all=$("#select1 option"); //获取所有的选项
options.appendTo("#select2"); //删除所有的选项并追加到select2下拉框中表格验证
//隔行变色
$("tr:odd").addClass("odd"); //奇数行添加样式
$("tr:even").addClass("even"); //偶数行添加样式

$("tr:contains('王五')").addClass("heighlight"); //将包含'王五'的行添加样式
$("body table tr").hide()
.filter(":contains('李')").show(); //筛选出含有文本"李"的表格行

//单选框控制表格行高亮(单击某一行后，此行被选中高亮显示，并且单选框被选中。)
$("tbody>tr").click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected")
.end() //使当前对象变成 $(this)
.find(":radio").attr("checked",true);
});
//复选框控制表格行高度
$("tbody>tr").click(function(){
if ($(this).hasClass("selected")) //判断是否含有selected高亮样式
{
$(this).removeClass("selected")
.find(":checkbox").attr("checked",false);
}
else
{
$(this).addClass("selected")
.find(":checkbox").attr("checked",true);
}

//简化代码(可上面效果一样)
var hasSelected = $(this).hasClass("selected");
//如果选中，则移除selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"]("selected")
//查找内部的checkbox,设置对应的属性
.find(":checkbox").attr("checked",!hasSelected);

});网页字体大小
<div>
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<p id="para">
网页字体大小
</p>
</div>

$("span").click(function(){
var thisEle=$("#para").css("font-size");	//16px
var textFontSize=parseFloat(thisEle,10);	//16
var unit=thisEle.slice(-2);					//px(从倒数第二个开始计数到最后)
var cName=$(this).attr("class");

if(cName == "bigger") {
textFontSize +=2;
}else if(cName == "smaller"){
textFontSize -=2;
}
$("#para").css("font-size",textFontSize+unit);
});

序列化元素
serialize()/serializeArray()/$.param()
<form>
<input id="txtusername" type="text" name="name" />
<input id="txtuserpwd" type="text" name="pwd" />
<input id="btnsubmit" type="submit">
</form>

$("form").serialize(); //输出:"username=1&userpwd=2"
JSON.stringify($("form").serializeArray()); //输出:"[{"name":"name","value":"1"},{"name":"pwd","value":"2"}]"
$.param({name:1,pwd:2}); //输出:"name=1&pwd=2"