Jquery 应用积累

1、控制div显隐

$("#id").show()表示display:block, 
$("#id").hide()表示display:none; 
$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
 
$("#id").css('display','none'); 
$("#id").css('display','block'); 
或 
$("#id")[0].style.display = 'none';

2、设置span的文本

$("#id").html("aaaaaaaa"); 
$("#id").text("aaaaaaaa");

3、判断<input type="checkbox" id="id"/>是否选中

$("#id").attr("checked") == "checked"

4、从后台获取在前台输出Html，以下为自己应用实例（$("#id").append(data)）

HTML代码
<tr>
            <td style="15%">筛选原料：</td>
            <td><span>验收日期段：</span>
                <input type="text" name="model.Plan_dateFrom" value="<%:ViewData.Eval("dateStart") %>" id="Text1"/>
                <span class="star">至</span>
                <input type="text" name="model.Plan_dateTo" value="<%:ViewData.Eval("dateEnd") %>" id="Text2"/>
                <input type="button" value="筛选" onclick="StuffQuery()"/> </td>
        </tr>
        <tr>
              <td>原料信息：</td>
              <td><div id="stuffContent"></div></td>
          </tr>

JQuery代码
//筛选原料
    function StuffQuery() {
        var dateStart = $("#dateStart").val();
        var dateEnd = $("#dateEnd").val();
        $.post("<%=path%>/ProdAndProc/SemiPlanStuff/GetStuffList",
              { "dateStart": dateStart,
                  "dateEnd": dateEnd
              },
              function (responseText) {
                  var checkbox = responseText.checkbox;
                  $("#stuffContent").append(checkbox);
              }, "json");
    }

后台代码
public ActionResult GeStuffList(string dateStart, string dateEnd)
        {
            string strResult = "";
            string strCheckBox = "";
            Hashtable result = new Hashtable();
            dateStart = dateStart == "" ? null : dateStart;
            dateEnd = dateEnd == "" ? null : dateEnd;

            if (dateStart == "" || dateEnd == null)
            {
                strResult = "请选择验收时间段";
                result.Add("message", strResult);
                return Json(result);
            }
            else
            {
                FoodStuffDetailBLL stbll = new FoodStuffDetailBLL();
                DataTable dt = new DataTable();
                dt = stbll.GetList(Session["CorpID"].ToString(), "", dateStart, dateEnd).Tables[0];
                int count = 1;
                foreach (DataRow row in dt.Rows)
                {
                    string Code_ID = row["ID"].ToString();
                    string Code = row["stuff_batchNO"].ToString();
                    string Name = row["stuff_provider"].ToString();
                    strCheckBox = "<input type='checkbox' checked='checked' name='stuff' id='stuff" + count
                                + "' value=" + Code + "_" + Name + "/><label class='hand' for='stuff" + count
                                + "'>" + Code_ID + "</label>";
                    count++;
                }
            }
            result.Add("message", strResult);
            result.Add("checkbox", strCheckBox);
            return Json(result);
        }

View Code

小结：$("#id").append(data)；// 添加Html内容，不能用Text 或 Val

当然用 after()：会在该div中不断追加信息；

如果用Text：显示加载的文本内容；

如果用Val：点击链接第一次为空窗口，再点击才出现数据显示。

5、删除元素中的内容

（1）删除元素：$("#div1").remove(); （2）删除元素中内容jQuery empty();

6、刷新页面

（1）常用局部刷新方法：$.get方法，$.post方法，$.getJson方法，$.ajax方法

$.get(”Default.aspx”, {id:”1″, page: “2″ }, function(data){ //这里是回调方法。返回data数据。});

$.getScript(”http://jqueryajax.com/jquery.js”, function(){ $(”#go”).click(function(){//回调方法 }); });

$.getJson(”Default.aspx”, {id:”1″, page: “2″ }, function(data){ //注意，这里返回的JSON数据引用方法为"data.info"});

$.ajax({ type: "POST", url: "Default.aspx", data: "name=123",success: function(msg){ //回调方法 } });

（2）刷新全页面

       window.location.reload(); 刷新当前页面.
       parent.location.reload();   刷新父亲对象（用于框架）
       opener.location.reload();   刷新父窗口对象（用于单开窗口）
       top.location.reload();        刷新最顶端对象（用于多开窗口）

7、获取失去焦点：对于元素的焦点事件，使用jQuery的焦点函数focus(),blur()。

8、对样式的操作

[1]获取和设置class属性：$("#id").attr("class")获取class属性 $("#id").attr("class","divClass")设置class属性。

    $('input').attr("readonly",true)//将input元素设置为readonly
[2]追加样式： $("#id").addClass("divClass2")
[3]移除样式：$("#id").removeClass("divClass")单个移除   $(#id).removeClass("divClass divClass2")移除多个样式。
[4]切换类名：$("#id").toggleClass("anotherClass") //重复切换anotherClass样式
[5]判断是否含有某项样式：$("#id").hasClass("another") 等同于 $("#id").is(".another");
[6]获取css样式中的样式：$("div").css("color") 设置color属性值. $(element).css(style)
[7]设置单个样式：$("div").css("color","red")
[8]设置多个样式：$("div").css({fontSize:"30px",color:"red"})     $("div").css("height","30px")==$("div").height("30px")
     $("div").css("width","30px")==$("div").width("30px")
[9]offset()方法（只对可见元素有效）：作用是获取元素在当前视窗的相对偏移，其中返回对象包含两个属性,即top和left 。
    var offset=$("div").offset(); var left=offset.left;  //获取左偏移     var top=offset.top; //获取右偏移
[10]position()方法：:作获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性即top和left。
[11]scrollTop()和scrollLeft()：$("div").scrollTop();  //获取元素的滚动条距顶端的距离。 $("div").scrollLeft();  //获取元素的滚动条距左侧的距离。
[11]jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。

区别是：toggle：动态效果为从右至左，横向动作；slideToggle：动态效果从下至上，竖向动作。比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。

9、JQuery、JS动态修改JS改变img的src属性无效

出现问题：Chrom、FireFox和IE下无效果

<img src="<%=path%>/ValidateCode/ValidateCodeIndex" id="LoI_ValidateCodeImage"/>

var url = "<%=path%>/ValidateCode/ValidateCodeIndex";

$("#img").attr("src", url);

解决方法：给图片路径加个参数如：t=Date() 或 t=Math.random() 或保证src属性与现在的src不重复

$("#img").attr("src", url+" ?t="+Date() );