jQuery 基本用法

1）页面加载完成后开始运行do stuff when DOM is ready　中的语句!

 　　　$(document).ready(function() {
        // do stuff when DOM is ready
        });

　　实际工作的javascript的代码是这样的：

         window.onload=function(){
             document.getElementById("clickme").onclick=function(){
             var parDom = this.parentElement;
         }

2）选择器

　　　选择一类元素

　　　$("a")是一个jquery的选择器（selector）
　　　$("")其中的字段就是元素的标记。比如$("div")就是<div></div>
　　　click是函数对象的一个方法。方法为点击鼠标事件！

 $(document).ready(function() {
      $("a").click(function() {
         alert("Hello world!");
          });
        });

　　$("div").click $("div")就是页面中所有的 div标签 这句话就是给所有的标签为div的元素 绑定了一个click事件 即当所有div 被鼠标单　　　　

　　击的时候 执行 alert("Hello World!");

3）选择器(selector)和事件(events)

　　选择DOM元素
　　选择一个ID为orderedlist的元素,相当于javascript中的document.getElementById("orderedlist"),jquery中只需要$("#id")其中的id为元素的ID,元素为任意元素！

　　addClass为把这个元素的css的class改为red

 　　　$(document).ready(function() {
 　 　　$("#orderedlist").addClass("red");
 　　　});

　　$("#id > xx") 这种表示ID的元素下的所有元素标记为xx的元素设置CSS的Class, id为元素的id xx为元素的标记例<div><li><a>等！

    $(document).ready(function() {
          $("#orderedlist > li").addClass("blue");
         });

4）循环each

　　1.这个代码只是ID为form的表单执行reset()方法。

1 $(document).ready(function() {
2     // use this to reset a single form
3     $("#reset").click(function() {
4            $("#form")[0].reset();
5     });
6     }); 

　　但是万一你有很多个表单需要执行呢？那么你可以这样写：

 $(document).ready(function() {
     // use this to reset several forms at once
     $("#reset").click(function() {
            $("form").each(function() {
              this.reset();
            });
     });
     });

　　2.选取 class 为 "checkbox2" 的所有选中元素，由多个<input type="checkbox" name="checkbox" value="<c:out value="${quote[0]}" />" class="checkbox2"/>组成：

            var str="";
             $(".checkbox2:checked").each(function(){
                 str+=$(this).val()+",";
             });

　　3.选取所有radio，判断是否选中状

             $(":radio").each(function () {
                 if ($(this).attr("checked")) {
                     alert("选中");
                 }
                 else {
                     alert("未选中");
                 }
             })

5）属性操作attr() 方法

　　1.改变图像的 width 属性：

            $("button").click(function(){
                $("img").attr("width","180");
              });

　　2.通过全选Checkbox,改变子Checkbox的选择：

            if($("#checkbox1").attr("checked")==true){
                  $(".checkbox2").attr("checked",'true');//全选
                 }else{
                  $(".checkbox2").removeAttr("checked");//取消全选
             }

　  3.设置某一元素的隐藏和可见属性:

 　　$("#Zhongzhi").hide();
 　　$("#Zhongzhi").show();

　　4.设置CheckBox的checked(选中)属性：

        $(function () {
            // 全选
            $("#btnCheckAll").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", true);
            });

            // 全不选
            $("#btnCheckNone").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", false);
            });

            // 反选
            $("#btnCheckReverse").bind("click", function () {
                $("[name = chkItem]:checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });

            // 提交
            $("#btnSubmit").bind("click", function () {
                var result = new Array();
                $("[name = chkItem]:checkbox").each(function () {
                    if ($(this).is(":checked")) {
                        result.push($(this).attr("value"));
                    }
                });
                alert(result.join(","));
            });
        });

　　5.在按钮提交前和提交后改变按钮的disabled(不可用)属性

             $("#exportData").unbind("click");
              $("#exportData").bind("click",function() {
                  $("#exportData").attr("disabled","disabled");
                  var url = "reportView.do?method=exportReportData&dataDate=<c:out value='${dataDate}'/>&reportId=<c:out value='${reportId}'/>&organId=<c:out value='${organId}'/>&levelFlag=<c:out value='${levelFlag}'/>&canEdit=<c:out value='${canEdit}'/>";
                 $.post(url,'',function(data){
                     if(data=="ok") { $("#exportData").removeAttr("disabled");
                         window.location.href = "reportView.do?method=downloadExcel&dataDate=<c:out value='${dataDate}'/>&reportId=<c:out value='${reportId}'/>&organId=<c:out value='${organId}'/>&levelFlag=<c:out value='${levelFlag}'/>";
                     }
                 });
                              });

6）取值操作val()和html()

　　val()常用来操作标准的表单组件对象，如button,text,hidden

　　html()取得第一个匹配元素的内容，简单来说就是所取得的标签所包含的所有东西。

 function alldaochu(){
        var str="";
         $(".checkbox2:checked").each(function(){
         str+=$(this).val()+",";
         });
         if(str==""||str==","){
             alert("请选择后导出");
         }else{
             $("#daochuinp").val(str);
             $("#daochu").submit();//表单提交
         }
     } 

7）Ajax局部刷新

         $.ajax({
              type: "POST",
              url: "xxxAction.do?method=xxMethod",
              data: "pkid=" + pkid,
              success: function(jsondata){
                  if(jsondata.msg=="success"){
                          $("#status"+pkid).val(jsondata.status);
                          $("#totime"+pkid).val(jsondata.sendtime);
                          $("#fromtime"+pkid).val(jsondata.receivetime);
                          $("#send"+pkid).attr("disabled","disabled");
                 } else if (jsondata.msg=="failed")
                 {
                     $("#status"+pkid).val(jsondata.status);
                      $("#totime"+pkid).val(jsondata.sendtime);
                      $("#send"+pkid).removeAttr("disabled");
                 }
             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
                 alert(XMLHttpRequest.status);
                 alert(XMLHttpRequest.readyState);
                 alert(textStatus);
             }
          })

　　发送一个AJAX请求，其中ACTION中这样响应：

     JSONObject jo = new JSONObject();
     jo.put("msg", "success");
     jo.put("status", "发送完成");
 responseJson(response, jo);
     protected void responseJson(HttpServletResponse response, JSONObject jo)
             throws IOException {
         response.setContentType("application/json; charset=UTF-8");
         response.getWriter().print(jo.toString());
         response.getWriter().flush();
         response.getWriter().close();

　　也可以这样写：

 function ajaxaccount(ratetype,deptid){
  $.post("mainAction.do?method=accountlist", {
         ratetype:ratetype,
         deptid:deptid
     }, function(data[accountlist方法返回值]) {
                var accountlist=data.accountlist;
                var oppaccountlist=data.oppaccountlist;
                var yuee=data.yuee;
                if(ratetype=='1'||ratetype=='2'){
                    toacccountval("account",accountlist);
                    toacccountval("oppaccount",oppaccountlist);

                }else{
                  toacccountval("account2",accountlist);
                  toacccountval("oppaccount2",oppaccountlist);
                  $("#huoqiyuee2").html(yuee);
                }
         },'json');
 }

　　下面这个例子是，用ajax实现，动态填充下拉列表<select></select>

     function identitychange() {
         var Identity = $("#Identity").val();
         if (Identity != 0) {
             $.post("rateListAction.do?method=getdeptlist", {
                 Identity : Identity
             }, function(data) {
                 var searchlist = data.deptlist;
                 var stemp = "<option value='0'>全部</option>";
                 if (typeof (searchlist) != undefined) {
                     for (var i = 0; i < searchlist.length; i++) {
                         stemp += "<option value='"+searchlist[i].deptid+"' >"
                                 + searchlist[i].deptname + "</option>";
                     }
                 }
                 $("#dept").html(stemp);
             }, 'json');
         } else {
             $("#dept").html("<option value='0'>全部</option>");
         }
     }

　　不过$.post方法最终实现还是$.ajax:

 post: function( url, data, callback, type ) {
     if ( jQuery.isFunction( data ) ) {
         callback = data;
         data = {};
     }

     return jQuery.ajax({
         type: "POST",
         url: url,
         data: data,
         success: callback,
         dataType: type
     });
 },