时间戳

首页 > 技术文章 > jQuery 基本用法

jQuery 基本用法

hehongtao 2016-01-06 11:20 原文

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

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

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

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

2）选择器

　　　选择一类元素

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

1 $(document).ready(function() {
2      $("a").click(function() {
3         alert("Hello world!");
4          });
5        });

　　$("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

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

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

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

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

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

1 $(document).ready(function() {
2     // use this to reset several forms at once
3     $("#reset").click(function() {
4            $("form").each(function() {
5              this.reset();
6            });
7     });
8     });

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

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

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

1             $(":radio").each(function () {
2                 if ($(this).attr("checked")) {
3                     alert("选中"); 
4                 }
5                 else {
6                     alert("未选中"); 
7                 }
8             })

5）属性操作attr() 方法

　　1.改变图像的 width 属性：

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

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

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

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

1 　　$("#Zhongzhi").hide();
2 　　$("#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(不可用)属性

 1             $("#exportData").unbind("click");
 2              $("#exportData").bind("click",function() {
 3                  $("#exportData").attr("disabled","disabled");
 4                  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}'/>";
 5                 $.post(url,'',function(data){
 6                     if(data=="ok") { $("#exportData").removeAttr("disabled");
 7                         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}'/>";
 8                     }
 9                 }); 
10                 11             });

 

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

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

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

 1 function alldaochu(){
 2        var str=""; 
 3         $(".checkbox2:checked").each(function(){ 
 4         str+=$(this).val()+","; 
 5         });
 6         if(str==""||str==","){
 7             alert("请选择后导出");
 8         }else{
 9             $("#daochuinp").val(str);
10             $("#daochu").submit();//表单提交
11         }  
12     }

7）Ajax局部刷新

 1         $.ajax({
 2              type: "POST",
 3              url: "xxxAction.do?method=xxMethod",
 4              data: "pkid=" + pkid,
 5              success: function(jsondata){
 6                  if(jsondata.msg=="success"){
 7                          $("#status"+pkid).val(jsondata.status);
 8                          $("#totime"+pkid).val(jsondata.sendtime);
 9                          $("#fromtime"+pkid).val(jsondata.receivetime);
10                          $("#send"+pkid).attr("disabled","disabled");
11                 } else if (jsondata.msg=="failed")
12                 {
13                     $("#status"+pkid).val(jsondata.status);
14                      $("#totime"+pkid).val(jsondata.sendtime);
15                      $("#send"+pkid).removeAttr("disabled");
16                 }
17             },
18             error: function(XMLHttpRequest, textStatus, errorThrown) {
19                 alert(XMLHttpRequest.status);
20                 alert(XMLHttpRequest.readyState);
21                 alert(textStatus);
22             }
23          })

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

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

　　也可以这样写：

 1 function ajaxaccount(ratetype,deptid){
 2  $.post("mainAction.do?method=accountlist", {
 3         ratetype:ratetype,
 4         deptid:deptid
 5     }, function(data[accountlist方法返回值]) {
 6                var accountlist=data.accountlist;
 7                var oppaccountlist=data.oppaccountlist;
 8                var yuee=data.yuee;
 9                if(ratetype=='1'||ratetype=='2'){
10                    toacccountval("account",accountlist);
11                    toacccountval("oppaccount",oppaccountlist);
12                    
13                }else{
14                  toacccountval("account2",accountlist);
15                  toacccountval("oppaccount2",oppaccountlist);
16                  $("#huoqiyuee2").html(yuee);
17                }
18         },'json');
19 }

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

 1     function identitychange() {
 2         var Identity = $("#Identity").val();
 3         if (Identity != 0) {
 4             $.post("rateListAction.do?method=getdeptlist", {
 5                 Identity : Identity
 6             }, function(data) {
 7                 var searchlist = data.deptlist;
 8                 var stemp = "<option value='0'>全部</option>";
 9                 if (typeof (searchlist) != undefined) {
10                     for (var i = 0; i < searchlist.length; i++) {
11                         stemp += "<option value='"+searchlist[i].deptid+"' >"
12                                 + searchlist[i].deptname + "</option>";
13                     }
14                 }
15                 $("#dept").html(stemp);
16             }, 'json');
17         } else {
18             $("#dept").html("<option value='0'>全部</option>");
19         }
20     }

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

 1 post: function( url, data, callback, type ) {
 2     if ( jQuery.isFunction( data ) ) {
 3         callback = data;
 4         data = {};
 5     }
 6  
 7     return jQuery.ajax({
 8         type: "POST",
 9         url: url,
10         data: data,
11         success: callback,
12         dataType: type
13     });
14 },

 


   

 

推荐阅读