jquery+json
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.st{
color:#FF0000;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
/**
*把json数据添充到页面中去
*/
function initJson(){
var data=[{a:'张三',b:20,c:'男'},{a:'李四',b:50,c:'男'},{a:'王',b:18,c:'女'}];//数组中放的对象;
var tb=$("table[id=mytable11]")[0];//得到id="mytable11" 的ul
$("tr",tb).each(function(){
$(this).remove();//循环删除原来table下的tr;
})
//添加表头
$("<tr><td>姓名</td><td>年龄</td><td>性别</td></tr>").css("background-color","#0099ee").click(function(){
alert("这是表头");
}).appendTo(tb);//把tr添加到tb中。
//添值
$(data).each(function(i){
var d=this;//this指当前对象.
if(i%2==0){//显示样式
$("<tr><td>"+d.a+"</td><td>"+d.b+"</td><td>"+d.c+"</td></tr>").addClass("st").click(function(){//添加鼠标点击事件
alert(d.b);
}).appendTo(tb);//把tr添加到table中。
}else{
$("<tr><td>"+d.a+"</td><td>"+d.b+"</td><td>"+d.c+"</td></tr>").click(function(){
alert(d.b);
}).appendTo(tb);//把tr添加到tb中。
}
})
}
</script>
</head>
<body onload="initJson();">
<table id="mytable11" align="center">
<tr id="myheader">
</tr>
</table></body>
</html>
JavaScript 与 Jquery 写循环的对比
var jsonStr='[{name:"aaaa",sex:"1111"},{name:"bbbb",sex:"22222"}]';//模拟后台返回的Json字符串
/**
*用js写循环
*/
function test(){
var jsObj=eval('('+jsonStr+')');
for(var i=0;i<jsObj.length;i++){
alert(jsObj[i].name);
}
}
/**
*用jquery 写循环
*/
function test2(){
var jsObj=eval('('+jsonStr+')');
$(jsObj).each(function(i){
alert(this.name);
});
}
jquery ajax 向后台传需要的值。
/**
* 通用的提交修改。
* @param e：表示哪个div下面的input
*/
function doSubmit(e) {
// var $input = $("#" + e + " input");//指定div 下面的所有input 对象。
var obj = {};//定义一个存放参数的对象。
var mpid = $("#mpid").val();//页面上的某个input 的value
obj['id'] = mpid;//存放key:value 数据。
$(" input", $("#" + e)).each(function() {//遍历 某id='?' 下的所有input .
var key = this.name;
var value = this.value;
obj[key] = value;
});
$(" textarea", $("#" + e)).each(function() {//遍历 某id='?' 下的所有textarea .
var key = this.name;
var value = this.value;
obj[key] = value;
});
var url = "/mp/updateMP";
$.ajax({
async : false,
url : url,
type : "post",
dataType : "json",
data : obj,
success : function(respStr) {
alert(JSON.stringify(respStr));
},
error : function(respStr) {
alert(JSON.stringify(respStr));
}
});
}
jquery 操作 select 页面控件。
http://www.cnblogs.com/joboxs/p/3557436.html
$(function(){
$("#mp_select").change(function(){
// alert($(this).val());//选中的option value 值;
});
});
$(":input+span", $("#regist")).each(function() {//遍历 id=? 下的所有input相邻的下一个 <span> 元素 .
$(this).remove();//将span 元素清除。
});
动态获取json 对象的key 和value
for ( var key in respStr.val) {
// alert("Key是:" + key + ";对应的值是:" + respStr.val[key]);
$("#" + key + "").remove();//清空
$("[name='" + key + "']").after(
"<span id='"+key+"' style='color:red;'>"
+ respStr.val[key] + "</span>");
}