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"