·单选文本框应用(获得焦点时,加了个特殊的样式,失去焦点时还原,兼容所有浏览器)
$(":input").focus(function(){ this.addClass("inputFocus"); })
.blur(function(){ this.removeClass("inputFocus"); });
·多行文本框的应用(放大、缩小多行文本框的高度,限制最大500px,兼容所有浏览器)
var $txt = $("#textArea");
$(".bigger").click(function(){
if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
//if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
});
$(".smaller").click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
//if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
});
·复选框的应用(实现全选、全不选、反选)
$("#btnCheckedAll").click(function(){ //全选
$("[name=items]:checkbox").attr("checked", true);
});
$("#btnCheckedNone").click(function(){ //全不选
$("[name=items]:checkbox").attr("checked", false);
});
$("#btnCheckedRev").click(function(){ //反选
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
//this.checked = !this.checked;
}
});
·下拉框的应用(将一个下拉列表的选中项搬至另一个下拉列表)
$("#btnAdd").click(function(){ //将选中选项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
});
$("#btnAddAll").click(function(){ //将全部选项搬过去
$("#mySelect1 option").appendTo("#mySelect2");
});
$("#mySelect1").dblclick(function()[ //双击项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
}
·表单验证
<form>
<div>
<label>用户名:</label>
<input type="text" id="txtUid" class="required" value="" />
</div>
</form>
$("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
$(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //失去焦点时验证域
if( this.value == "" ){
$(this).parent().append( $("<span class='error'>必填字段</span>") );
}
else{
$(this).parent().append( $("<span class='success'>验证正确</span>") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //用户每点一个键触发
$(this).triggerHandler("blur");
}).focus(function(){ //控制有焦点时触发
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
var errNum = $("form .error").length;
if( errNum ){
alert("有验证字段失败,请重新填写");
return false;
}
});
·表格应用
$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式
$("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行,添加highlightTr样式
$("tr").click(function(){
$(this).addClass("selectedTr") //给当前行添加选中样式
.siblings().removeClass("selectedTr") //反选移除选中样式
.end() //结束,返回$(this),否则则是反选的行
.find(':radio").attr("checked",true); //在当前行查找单选框,选中它
});
$(":input").focus(function(){ this.addClass("inputFocus"); })
.blur(function(){ this.removeClass("inputFocus"); });
·多行文本框的应用(放大、缩小多行文本框的高度,限制最大500px,兼容所有浏览器)
var $txt = $("#textArea");
$(".bigger").click(function(){
if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
//if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
});
$(".smaller").click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
//if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
});
·复选框的应用(实现全选、全不选、反选)
$("#btnCheckedAll").click(function(){ //全选
$("[name=items]:checkbox").attr("checked", true);
});
$("#btnCheckedNone").click(function(){ //全不选
$("[name=items]:checkbox").attr("checked", false);
});
$("#btnCheckedRev").click(function(){ //反选
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
//this.checked = !this.checked;
}
});
·下拉框的应用(将一个下拉列表的选中项搬至另一个下拉列表)
$("#btnAdd").click(function(){ //将选中选项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
});
$("#btnAddAll").click(function(){ //将全部选项搬过去
$("#mySelect1 option").appendTo("#mySelect2");
});
$("#mySelect1").dblclick(function()[ //双击项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
}
·表单验证
<form>
<div>
<label>用户名:</label>
<input type="text" id="txtUid" class="required" value="" />
</div>
</form>
$("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
$(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //失去焦点时验证域
if( this.value == "" ){
$(this).parent().append( $("<span class='error'>必填字段</span>") );
}
else{
$(this).parent().append( $("<span class='success'>验证正确</span>") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //用户每点一个键触发
$(this).triggerHandler("blur");
}).focus(function(){ //控制有焦点时触发
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
var errNum = $("form .error").length;
if( errNum ){
alert("有验证字段失败,请重新填写");
return false;
}
});
·表格应用
$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式
$("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行,添加highlightTr样式
$("tr").click(function(){
$(this).addClass("selectedTr") //给当前行添加选中样式
.siblings().removeClass("selectedTr") //反选移除选中样式
.end() //结束,返回$(this),否则则是反选的行
.find(':radio").attr("checked",true); //在当前行查找单选框,选中它
});