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>