JSON数据格式
JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。易于人阅读和编写，同时也易于机器解析和生成(网络传输速度快)
JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
描述一个对象 {属性名:属性值,属性名:属性值}
JSON的规则很简单：
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4） 并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型：string, number, object, array, true, false, null
//JSON:是一种数据格式,主要用来表示描述对象、封装对象的数据
//表示单个对象
//使用{}:Map<String,Object>
var p = {
name:"will",
age:17,
sex:true,
hireDate:new Date(),
hobbys:["java","ACG","book"],
dept:{
id:9527,
name:"管理部"
}
};
//获取对象中的属性值
console.debug(p);
console.debug(p.age);
console.debug(p.sex);
console.debug(p.hobbys);
console.debug(p.dept.name); //表示多个对象
//使用[]:List<Map<String,Object>>
var persons = [p,p,p];
console.debug(persons);
var persons = [{
name:"will",
age:17,
sex:true,
hireDate:new Date(),
hobbys:["java","ACG","book"],
dept:{
id:9527,
name:"管理部"
}
},{
name:"will",
age:17,
sex:true,
hireDate:new Date(),
hobbys:["java","ACG","book"],
dept:{
id:9527,
name:"管理部"
}
},{
name:"will",
age:17,
sex:true,
hireDate:new Date(),
hobbys:["java","ACG","book"],
dept:{
id:9527,
name:"管理部"
}
}
];
注意:
1.JSON数据格式:(注意:标准的JSON的属性也使用引号)
2.字符串转成对象:
3.json对象的toSource方法
------------------------------------------------------------
var str = "{name : 'will',age : 17}";
console.debug(str);
//eval函数,可以把一个字符串转换为JS代码
var p = eval("("+str+")");
console.debug(p.toSource());
------------------------------------------------------------
最好是:在JSON字符串前后,都带有();
使用JSON实现二级联动
使用JSON作为后台和前台的数据交互格式.
--------------------------------------------------------------------
在服务端需要把省份/城市的数据,拼接成一个JSON的字符串,并响应给JS.
JS需要把字符串的JSON数据,转换为JSON对象.-->每一个对象,都创建一个<option>元素,并存放数据.
使用JSON表示省份:
String jsonData = "[{id:1,name:'四川'},{id:2,name:'广东'},{id:3,name:'陕西'}]";
示例代码：
//Ajax二级联动之JSON格式
public class LinkageByJSONAction extends ActionSupport { private static final long serialVersionUID = 1L; private Long pid; public void setPid(Long pid) {
this.pid = pid;
} //获取所有省份
/*
* [
* {id:1,name:'四川'},
* {id:2,name:'广东'},
* {id:3,name:'陕西'}
* ]
*/
public String getProvinces() throws Exception{
StringBuilder sb = new StringBuilder(200);
//获取所有省份
List<Province> provinces = Province.getAllProvince(); sb.append("[");
for(Province p : provinces){
sb.append("{");
sb.append("id:").append(p.getId()).append(",");
sb.append("name:").append("'").append(p.getName()).append("'");
sb.append("}");
sb.append(",");
}
sb.deleteCharAt(sb.length()-1);
sb.append("]");
//System.out.println(sb);
//设置编码,并且打印JSON格式的信息
ServletActionContext.getResponse().setContentType("text/json;charset=utf=8");
ServletActionContext.getResponse().getWriter().print(sb);
return NONE;
} //获取对应id省份的城市
/*
* [
* {id:1,name:'广州'},
* {id:2,name:'深圳'},
* {id:3,name:'东莞'}
* ]
*/
public String getCitys() throws Exception{
StringBuilder sb = new StringBuilder(200);
//获取对应id省份的城市
List<City> citys = City.getCityByProvinceId(pid); sb.append("[");
for(City c : citys){
sb.append("{");
sb.append("id:").append(c.getId()).append(",");
sb.append("name:").append("'").append(c.getName()).append("'");
sb.append("}");
sb.append(",");
}
sb.deleteCharAt(sb.length()-1);
sb.append("]");
//System.out.println(sb);
//设置编码,并且打印JSON格式的信息
ServletActionContext.getResponse().setContentType("text/json;charset=utf=8");
ServletActionContext.getResponse().getWriter().print(sb);
return NONE;
}
}
<body>
<h3>Ajax二级联动,HTML格式</h3><br/>
省份:<select id="province" onchange="getCitys();"><option>请选择</option></select>
市级:<select id="city"><option>请选择</option></select>
</body>
//简单的Ajax,二级联动,JSON格式
//获取省份
window.onload = function(){
//页面加载完毕之后,把所有省份查询出来并显示到页面
var ajax = createAjax();
ajax.open("get","/linkage/json_getProvinces.action",true);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
var jsonArray = eval("("+ajax.responseText+")");
for (var index = 0; index < jsonArray.length; index++) {
var jsonResult = jsonArray[index];//每一个省份对象 //针对每一个省份对象都创建<option>元素
var optionEl = document.createElement("option");
optionEl.value = jsonResult.id;
optionEl.innerHTML = jsonResult.name;
document.getElementById("province").appendChild(optionEl);
}
}
};
ajax.send();
};
//获取市级,根据不同省份
function getCitys(){
//获取省份id
var pid = document.getElementById("province").value;
document.getElementById("city").innerHTML = "<option>请选择</option>";
//alert(pid);
if(!parseInt(pid)){
return;
}
var ajax = createAjax();
ajax.open("get","/linkage/json_getCitys.action?pid="+pid,true);
ajax.onreadystatechange = function(){
if(ajax.readyState ==4 && ajax.status == 200){
var jsonArray = eval("("+ajax.responseText+")");
for (var index = 0; index < jsonArray.length; index++) {
var jsonResult = jsonArray[index];//每一个市级对象 //针对每一个市级对象都创建<option>元素
var optionEl = document.createElement("option");
optionEl.value = jsonResult.id;
optionEl.innerHTML = jsonResult.name;
document.getElementById("city").appendChild(optionEl);
}
}
};
ajax.send();
} //创建Ajax对象,处理W3C和IE6以下版本浏览器的兼容性
function createAjax(){
var ajax = null; try {
ajax = new XMLHttpRequest();
} catch (e) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
return ajax;
}
JSON转换工具(JSON lib和fast JSON)
JSON的转换工具(提供JSON对象和Java对象(JavaBean/集合)的相互转换方法):
1):JSON lib.(最广泛的,需要依赖另外的5个jar).
2):fast json(阿里开发的,号称世界第一,不需要依赖,有一个即可.)
测试代码：
@Test
public void testJSONLib() throws Exception {
List<Province> provinces = Province.getAllProvince();//多个对象s
Province p = provinces.get(0);//单个对象
//把单个对象转化为JSON字符串:JSONObject
//{"id":1,"name":"四川"}
System.out.println(JSONSerializer.toJSON(p)); //把多个对象转化为JSON字符串:JSONArray
//[{"id":1,"name":"四川"},{"id":2,"name":"广东"},{"id":3,"name":"陕西"}]
System.out.println(JSONSerializer.toJSON(provinces)); //支持把map转化为JSON格式
Map<String,Object> map = new HashMap<>();
map.put("id", 17);
map.put("name", "四川");
//{"name":"四川","id":17}
System.out.println(JSONSerializer.toJSON(map));
}
测试代码：
@Test
public void testFastJSON() throws Exception {
List<Province> provinces = Province.getAllProvince();//多个对象s
Province p = provinces.get(0);//单个对象
//把单个对象转化为JSON字符串:JSONObject
String str1 = JSON.toJSONString(p);
//{"id":1,"name":"四川"}
System.out.println(str1); //把多个对象转化为JSON字符串:JSONArray
String str2 = JSON.toJSONString(provinces);
//[{"id":1,"name":"四川"},{"id":2,"name":"广东"},{"id":3,"name":"陕西"}]
System.out.println(str2); //支持把map转化为JSON格式
Map<String,Object> map = new HashMap<>();
map.put("id", 17);
map.put("name", "四川");
//{"name":"四川","id":17}
System.out.println(JSON.toJSONString(map));
}
jQuery简介
1，jQuery简单背景介绍；
jQuery是继prototype之后又一个优秀的Javascript框架,(Extjs)。
jQuery是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
jQuery是免费、开源的。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多).
2，jQuery版本介绍；
jQuery1.x： 经典版本，兼容IE6，7，8；
jQuery2.x：改进版本，及后续版本将不再支持IE6，7，8浏览器。
jQuery能干什么？
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
3，JQuery文件介绍；
jQuery1.x.js：jQuery源文件；学习jQuery或者debug的时候使用；
jQuery1.x.min.js：jQuery压缩之后的文件；正常项目中使用；
jQuery的引入和体验
jQuery引入(安装):
第1步:引入jQuery的库文件:<script type="text/javascript" src="../jquery-1.11.2.min.js"></script>
第2步:引入我们自己的js : <script type="text/javascript" src="index.js"></script>
第3步:在index.js中,alert($),如果输出的是一个函数,说明安装成功!
出错效果如下:
使用不同的jQuery插件,可能依赖的jQuery库的版本不一致,此时请保留插件依赖的jQuery库.
神奇的$:
在jQuery中,$其实就是jQuery对象($ === jQuery).
-------------------------------------------------------------------------------------
案例:模拟Struts2的debu标签.（传统js代码和jQuery代码）
示例代码：
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.11.2.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<h3>模拟Struts2的debug标签</h3>
<a href="#" id="debug1">debug(传统方式)</a><br/>
<a href="#" id="debug2">debug(jQuery方式)</a>
<div id="detail" style="display: none;">
<h3>キセキ~未来へ~</h3>
明日、今日よりも好きになれる 溢れる想いが止まらない<br/>
明天会比今天更喜欢你 满溢的思念无法停止<br/><br/>
今もこんなに好きでいるのに 言葉に出来ない<br/>
现在虽然如此喜欢你 但却无法用语言表述<br/><br/>
君のくれた日々が積み重なり 過ぎ去った日々2人歩いた「軌跡」<br/>
你给予我的岁月沉淀累积 过去的日子里两个人一起前行的「轨迹」<br/><br/>
うまく行かない日だって 2人で居れば晴れだって！<br/>
不顺利的日子 两个人在一起就会放晴<br/><br/>
喜びや悲しみも 全て分け合える<br/>
喜悦或是悲伤 全部一起分享<br/><br/>
君が居るから 生きていけるから！<br/>
正因为有你 我才能活下去<br/><br/>
だからいつも そばに居てよ 「愛しい君へ」最後の一秒まで<br/>
所以一直留在我身边吧 「致可爱的你」直到最后一秒<br/><br/>
明日、今日より笑顔になれる 君が居るだけで そう思えるから<br/>
明天 会比今天有更好的笑颜 只要有你在 我就会这样想<br/><br/>
何十年 何百年 何千年 時を超えよう 君を愛してる<br/>
无论是几十年 几百年 还是几千年 都要超越时光地爱着你<br/><br/>
</div>
</body>
//当页面加载完毕,给id为debug1的超链接绑定点击事件
window.onload = function(){
document.getElementById("debug1").onclick=function(){
var div = document.getElementById("detail").style.display;
if(div){
document.getElementById("detail").style.display = "";
} else {
document.getElementById("detail").style.display = "none";
}
};
}; //使用jQuery完成
$(function(){
$("#debug2").click(function(){
$("#detail").toggle(200);
});
});
$(function(){
//页面加载完毕之后,就执行的代码,相当于window.onload事件
});
---------------------------------------------------------------------------
window.onload=function(){};只能编写一次,后写会覆盖之前写的.
而$(function(){});可以写N次.
--------------------------------------------------
$("#ox"):获取ID属性为ox的元素对象.
jQuery对象
需求:获取和修改某个元素的文本内容.
-----------------------------------------------------------------------------------
引入问题：通过document.getElementById()找到的console内容和通过$();找不到元素console返回的内容不一样；
1，通过jQuery方法获取的页面元素，都是jQuery对象。
2，jQuery对象其实就是对DOM对象进行了包装，增强相关了方法，让开发者使用起来更加便利。
jQuery对象其实是模拟了数组(伪数组),每一个索引对应一个真正的DOM元素.
jQuery对象是不可能为null的,可以根据jQuery的length是否为0来判断,当前是否查询出了DOM元素.
3，虽然jQuery对象包装了DOM对象但是两种不能混用，各位可以理解为jQuery对象与DOM对象是两个不类型的对象，但是我们调用jQuery对象的方法，事实上底层代码还是操作的是DOM对象。
-----------------------------------------------------------------------------------------------------------------------
jQuery对象和DOM对象的关系,是jQuery对象包含了DOM对象.
jQuery对象和DOM对象的获取方式,以及相互的转换问题:
1):使用jQuery方法获取的对象都是jQuery对象.
2):使用document.getElementById/getElementsByTagName/getEelementsByName获取的都是DOM对象.
jQuery对象转换为DOM对象:
jQuery对象[index]或者jQuery对象.get(index):表示当前jQuery对象中包装的第index个DOM元素.
DOM对象转换为jQuery对象: $(DOM对象);
----------------------------------------------------
jQuery对象只能访问jQuery对象的属性和方法,不能访问DOM对象的属性和方法.
DOM对象只能访问DOM对象的属性和方法,不能访问jQuery对象的属性和方法.
//获取id为div1的文本内容
$(function(){
//通过jQuery选择器查询出来的都是jQuery对象
var jQueryObject = $("div");
console.debug(jQueryObject);//jQuery
console.debug(jQueryObject.innerHTML);//innerHTML是DOM对象的方法,jQuery对象不能使用
//jQuery对象转化为DOM对象
console.debug(jQueryObject[0].innerHTML);
console.debug(jQueryObject.get(0).innerHTML); console.debug("===================")
//DOM对象转化为jQuery对象
var domObject = document.getElementById("div1");
console.debug(domObject);
console.debug($(domObject));
console.debug($(domObject).text());
});
/*
jQuery常用方法:<br/>
jquery.size()//获取jquery获取dom的个数.<br/>
jquery.val();//获取表单标签相关的值。<br/>
jquery.html();//获取标签中的HTML代码。<br/>
jquery.text();//获取标签中的纯文本，忽略html代码。<br/>
*/
//<li>问题一：获得username的值； </li>
$(function(){
var username = $("#username").val();
console.debug(username);//圣光啊
});
//<li>问题二：为username设置值；</li>
$(function(){
var username = $("#username").val("那个邪恶看起来值得一战").val();
console.debug(username);//那个邪恶看起来值得一战
});
//<li>问题三：获取h1的html内容和纯文本内容，对结果进行比较；</li>
$(function(){
var html = $("#h1").html();
var text = $("#h1").text();
console.debug(html);
console.debug(text);
});
//<li>问题四：把h1的颜色设置为黄色(attr)；</li>
$(function(){
//$("#h1").attr("style","background:yellow");
$("#h1").css("background","yellow").css("color","gray");
});
//<li>问题五：完成类似struts2的debug效果(toggleClass/toggle)；</li>
$(function(){
$("#debug").click(function(){
$("#question").toggle();
});
});
jQuery选择器概述/如何学习jQuery/jQuery常用方法
文档在手,天下我有!
------------------------------------------------------------------------------------
jQuery选择器是jQuery类库最重要功能之一。
这些选择器的用法和CSS的语法非常相似，结合jQuery类库的方法你可以很方便快速地定位页面中任何元素,并为其添加响应的行为。
-------------------------------------------------
一、什么是选择器？
jQuery提供获取页面元素一种语法。
二、选择器的组成？
选择器一般由“特殊符号”+“字符串”组成。
比如:“#”代表id “mydiv”是一个字符串，那么整体#mydiv代表,id为mydiv的元素对象。
三、使用选择器获取元素?
$(“选择器”) ， $ (“#mydiv”)
注意：如果通过jQuery方法获取页面中元素，没有查找到，返回值不是null,返回值为一个空数组[]，所以判断是否获取到元素，通过jquery.length!=0来判断。
过滤选择器:通过特定的过滤规则来筛选所需要的DOM元素.过滤规则与CSS中的伪类选择器语法相同.
即选择器以一个冒号(:)开头.
按照不同的过滤规则,可分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤选择器.
//基础选择器
//<li>问题一：请得到id为msg的元素的文本内容； </li>
$(function(){
var msg = $("#msg").text();
console.debug(msg);
});
//<li>问题二：请查询所有li元素，并打印出数量；</li>
$(function(){
var length = $("li").length;
console.debug(length);
var size = $("li").size();
console.debug(size);
});
//<li>问题三：得到所有class为selected的元素；</li>
$(function(){
console.debug($(".selected"));
});
//<li>问题四：查询myul下有多少个li，学会使用selector和get方法；</li>
$(function(){
console.debug($("#myul li"));
console.debug($("#myul li")[0]);//DOM对象
console.debug($("#myul li").get(0));//DOM对象
console.debug($("#myul li").selector);//当前使用的选择器类型
});
//层级选择器
//<div>问题一：选择ul下的所有li元素，并分析选择结果； </div>
$(function(){
console.debug($("ul li"));
});
//<div>问题二：选择myul下的所有直接li元素，并分析选择结果； </div>
$(function(){
console.debug($("#myul>li"));
});
//<div>问题三：选择所有label元素后的input元素，并分析选择结果； </div>
$(function(){
console.debug($("label~input").css("background-color","yellow"));
});
//<div>问题四：选择紧跟着label元素的input元素，并分析选择结果； </div>
$(function(){
console.debug($("label+input").css("background-color","gray"));
});
//基础过滤器
//<li>问题一：请得到ul第一个li元素(:first)； </li>
$(function(){
//$("ul li:first").css("background","yellow");
});
//<li>问题二：请得到每一个ul的第一个li元素(:first-child)；</li>
$(function(){
//$("ul li:first-child").css("background","yellow");
}); //<li>问题三：得到ul最后一个li元素；</li>
$(function(){
//$("ul li:last").css("background-color","yellow");
});
//<li>问题四：得到每一个ul元素的最后一个li元素(:last-child)；</li>
$(function(){
//$("ul li:last-child").css("background-color","yellow");
});
//<li>问题五：得到奇数/偶数位li元素(:odd/:even)；</li>
$(function(){
//$("li:odd").css("background-color","yellow");
//$("li:even").css("background-color","yellow");
});
//<li>问题六：得到每一个ul元素的奇数/偶数位li元素(:nth-child)；</li>
$(function(){
//$("ul li:nth-child(3n+1)").css("background-color","yellow");
});
//<li>问题七：表格隔行变色；</li>
$(function(){
//$("#mytable tbody tr:even").css("background-color","yellow");
//$("#mytable tbody tr:odd").css("background-color","gray");
});
//<li>问题八：选择所有id属性值以select_开头的checkbox([attribute^=value])；</li>
$(function(){
console.debug($(":checkbox[id^='select_']"));
});