jQuery常用实例代码

最新推荐文章于 2023-10-01 02:05:27 发布

yue2008

最新推荐文章于 2023-10-01 02:05:27 发布

阅读量529

点赞数

分类专栏： jquery 文章标签： jQuery json Ajax HTML ViewUI

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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:

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>");
         });
    });

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);
     });