js-day05-JSON-jQuery初体验
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_']")); });
