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

     });

 },

巴特西

jQuery 基本用法

最新文章

热门文章