码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 基本用法

时间:2016-01-06 13:34:27      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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 $(document).ready(function() {
2     // use this to reset a single form
3     $("#reset").click(function() {
4            $("#form")[0].reset();
5     });
6     }); 

  这个代码只是ID为form的表单执行reset()方法。但是万一你有很多个表单需要执行呢?那么你可以这样写:

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

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

5)属性操作attr() 方法

  改变图像的 width 属性:

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

  通过全选Checkbox,改变子Checkbox的选择:

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

6)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:

 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 },

 


   

 

jQuery 基本用法

标签:

原文地址:http://www.cnblogs.com/hehongtao/p/5104888.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!