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="width: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() );