jQuery常用实例代码(随时更新)

1、全选或者全不选form的Checkbox控件
function checkAll(objChkAll){

//找到表示全选/全不选的Checkbox控件所在的form元素
var frm = jQuery(objChkAll).parents().filter("form,:first");
if(frm != null){

//从form中找到所有的Checkbox控件，并设置checked属性值
jQuery(frm).find(":checkbox").attr("checked", objChkAll.checked);
}
}

2、判断form表单是否有选中的checkbox控件
function hasSelectedCheckbox(frm, _prefix){

//从form中找到所有Checkbox控件，这些控件的name值的前缀和指定值一致，并且这些控件的checked为true
var chkList = jQuery(frm).find(":checkbox[name^='" + _prefix + "']:checked");
if(chkList.length > 0){
return true;
}
return false;
}

3、找到name值以commId_o_开头的所有的input控件，返回一个集合。

var commList = jQuery("input[name^='commId_o_']");

if(commList.length > 0){

alert("找到数据！");

}

4、清空元素内的所有子元素，往元素中添加内容

HTML:

<div id="errorMessage"></div>

JS:

jQuery("#errorMessage").empty(); //删除匹配元素的所有子节点，而匹配的元素不删除

//jQuery("#errorMessage").remove(); //删除匹配的元素（包括其所有的子元素）

jQuery("#errorMessage").append("<p>dd</p>"); //可以增加子元素、文本等内容

jQuery("#errorMessage").text(msg); //增加文本内容

5、显示/隐藏对象

HTML:

<div id="divRule">message</div>

JS:

jQuery("#divRule").toggle();

6、Ajax应用：jQuery and jSON

JS:

var data = "{'details':[{'commId': '111', 'cardTypeId': '100'},{'commId': '111', 'cardTypeId': '200'},{'commId': '111', 'cardTypeId': '300'}]}";

jQuery.post("reqChiefSimSales.do?method=checkData", "det=" + data, function(s){
if(s != null && s.length > 0){
...

}else{
...

}
});

Java:

String det = request.getParameter("det");

JSONObject json = JSONObject.fromObject(det);
JSONArray array = json.getJSONArray("details");

for(int i=0;i<array.size();i++){

JSONObject obj = (JSONObject)array.get(i);
String commId = obj.getString("commId");
String cardTypeId = obj.getLong("cardTypeId");

System.out.println(commId + ", " + cardTypeId);

}

7、动态往select控件中添加option项（一）

jQuery.get("test2.htm", function(data){
jQuery("select[name=sel]").empty();
jQuery("select[name=sel]").append("<option value=''></option>");

var xmlObject = new ActiveXObject("MSXML2.DOMDocument");
xmlObject.async = false;
xmlObject.loadXML(data);

jQuery(xmlObject).find("option").each(function(i, n){
var key = jQuery(n).attr("key");
var value = jQuery(n).attr("description");
var option = "<option value='" + key + "'>" + value + "</option>";
jQuery("select[name=sel]").append("<option value='" + key + "'>" + value + "</option>");
});
});

<options>
<option key='key1' description='desc1'/>
<option key='key2' description='desc2'/>
</options>

8、动态往select控件中添加option项（二）

jQuery.get("test2.htm", function(data){
jQuery("select[name=sel]").empty();
jQuery("select[name=sel]").append("<option value=''></option>");
jQuery("select[name=sel]").append(data);
});

<option value='4'>44444</option>
<option value='5'>55555</option>