最近使用jquery比较多，网上搜了很多有用的东西，先记下来！
1.动态添加表格行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<title>demo about table</title>
<script>
$(document).ready(function(){
for(var i=0;i<5;i++){//默认是5个文本框
var $table=$("#tab tr");
var len=$table.length;
$("#tab").append("<tr id="+(len+1)+"><td>工程师 "+(len+1)+": <input type='text' class='required' name='eng"+len+"' id='"+len+"'><a href='#' οnclick='deltr("+(len+1)+")'>删除</a></td></tr>");
}
$("#but").click(function(){//点击add按钮，可以添加输入框
var $table=$("#tab tr");
var len=$table.length;
$("#tab").append("<tr id="+(len+1)+"><td>工程师 "+(len+1)+": <input type='text' class='required' name='eng"+len+"' id='"+len+"'><a href='#' οnclick='deltr("+(len+1)+")'>删除</a></td></tr>");
})
});
function deltr(index){//删除文本框
$table=$("#tab tr");
if(index>$table.length)
return;
else{
$("tr[id='"+index+"']").remove();
for(var temp=index+1;temp<=$table.length;temp++){
$("tr[id='"+temp+"']").replaceWith("<tr id="+(temp-1)+"><td>工程师 "+(temp-1)+": <input type='text' class='required' name='eng"+(temp-2)+"' id='"+(temp-2)+"' value='"+document.getElementById(temp-1).value+"'><a href='#' οnclick='deltr("+(temp-1)+")'>删除</a></td></tr>");
}
}
}
</script>
</head>
<body>
<table>
<tr><td>
<table id="tab" border="1" width="300px" align="center"></table>
</td></tr>
<tr><td>
<input type="button" id="but" value="add"/>
</td></tr>
</table>
</div>
</body>
</html>
2.下拉框联动
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript" src="JQuery/jquery-1.3.2.js"></script>
<script>
(function($){
$.fn.selInit = function(){return $(this).html("<option>请选择</option>");};
$.area = function(){
$("#province").selInit();
$("#city").selInit();
$("#county").selInit();
var area = {
北京:{北京:"东城,西城,海淀,宣武,丰台"},
江苏:{南京:"江宁,六合,下关,浦口",无锡:"北塘,滨湖,江阴,宜兴"},
山东:{菏泽:"鄄城,牡丹区",济南:"济南a,济南b"}
//...
};
$.each(area,function(p){$("#province").append("<option>"+p+"</option>");});
$("#province").change(function(){
$("#city").selInit();
$("#county").selInit();
$.each(area,function(p,x){
if($("#province option:selected").text() == p){
$.each(x,function(c,cx){
$("#city").append("<option>"+c+"</option>");
});
$("#city").bind("change",function(){
$("#county").selInit();
$.each(x,function(c,cx){
if($("#city option:selected").text() == c){
$.each(cx.split(","),function(){
$("#county").append("<option>"+this+"</option>");
});
}
});
});
}
});
});
};
})(jQuery);
$(function(){
$("select").css("width","100px");
$.area();
});
</script>
</head>
<body>
<select id="province"><option>请选择</option></select>
<select id="city"><option>请选择</option></select>
<select id="county"><option>请选择</option></select>
</body>
</html>
3.表单验证可以使用jquery.validate,网址是 http://docs.jquery.com/Plugins/Validation.
4.自动填充,可以使用jquery.autocomplete,网址是http://jquery.bassistance.de/autocomplete/demo/.
5.text和textarea的高度自增:
input高度固定，自动增长<br>
<input type="text" style="width:60;overflow-x:visible;overflow-y:visible;">
textarea 宽度固定，自动增高<br>
<textarea type="text" style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>6.CheckBox 复选框成组联动
要使多个复选框成组，在写复选框的 HTML 代码时添加自定义属性 group ，如：
<input type="checkbox" group="groupname"/>
<input type="checkbox" group="groupname"/>
...
这样在页面显示时，group 名称相同的会成为一组。同样，在需要联动的对象的代码里添加自定义属性 forcheckboxgroup，名称为联动复选框组的 group 属性的值。当联动对象为复选框时，将控制全组的复选状态，当联动对象为其它元素时，复选框组将控制其 disabled 属性，规则是组内的复选框至少有一个选中时被联动的元素对象的 disabled 属性为 false，否则为 true。如：
<input type="checkbox" forcheckboxgroup="groupname"/>
<input type="button" value="按钮" forcheckboxgroup="groupname"/>
...
$(function(){
//将所有与组关联的非复选框的元素设为无效
$("[forcheckboxgroup]:not(:checkbox)").attr("disabled",true);
$(":checkbox[forcheckboxgroup]") //选择所有可以控制复选框组状态的复选框
.click(function(){ // 绑定 click 事件
//点击此复选框后只做以下三件事：
// 1. 设置所控制的复选框组内所有复选框的状态
$(":checkbox[group='" + this.getAttribute('forcheckboxgroup') + "']").attr("checked",this.checked);
// 2. 设置与自己具有相同功能的复选框的状态
$(":checkbox[forcheckboxgroup='" + this.getAttribute('forcheckboxgroup') + "']").attr("checked",this.checked).attr("indeterminate",false);
// 3. 设置所有与该复选框组相关联的元素的状态
$("[forcheckboxgroup='" + this.getAttribute('forcheckboxgroup') + "']:not(:checkbox)").attr("disabled",!this.checked);
});
$(":checkbox[group]") //选择所有成组的复选框
.click(function(){ //绑定 click 事件
var blnStat = this.checked; //复选框状态
var blnEqual = true; //该组成员状态是否相同
$(":checkbox[group='" + this.getAttribute('group') + "']") //选择该组成员
.each(function(){
blnEqual = blnStat == this.checked;
return blnEqual ; //有不同状态时停止
});
//设置所有与组关联的非复选框的元素状态
$("[forcheckboxgroup='" + this.getAttribute('group') + "']:not(:checkbox)").attr("disabled",!(blnStat||!blnEqual));
//设置所有可控制该组状态的复选框的状态
$(":checkbox[forcheckboxgroup='" + this.getAttribute('group') + "']").attr("checked",blnStat).attr("indeterminate",!blnEqual);
});
});
7.导航菜单sdMenu，包括纯js版和jquery版
8.只允许输入数字：
isNumber = function (e) {
if ($.browser.msie) {
if ( ((event.keyCode > 47) && (event.keyCode < 58)) ||
(event.keyCode == 8) || (event.keyCode == 46)) {
return true;
} else {
return false;
}
} else {
if ( ((e.which > 47) && (e.which < 58)) ||
(e.which == 8) || (e.which == 46)) {
return true;
} else {
return false;
}
}
}
html里面这样写：
<input type="text" onKeyPress="return isNumber(event);" onKeyUp="return isNumber(event);" >
附件内是源码。
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
