版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_17503037/article/details/81186193
一)什么是JSON
(1)JSON(Java Script Object Notation(记号,标记))是一种轻量级的数据交换语言,
以文本字符串为基础,且易于让人阅读
注意:XML就是一个重量级的数据交换语言
(2)JSON采用完全独立于任何程序语言的文本格式,使JSON成为理想的数据交换语言
二)JSON的作用
(1)简化创建自定义对象的方式
注意:JSON就是用JS语法来书写,所以必须放在<script>标签中
在用JS语法书写JSON时,最外面不要用""双引号
var p = {
id:1,
name:"哈哈",
tel:[
{
no:"135",
type:"中移动"
},
{
no:"133",
type:"中联通"
}
],
show:function(username){
alert("你的姓名是:" + p.name+":"+username);
},
isSingle:false
};
var p = {'city':['北京','上海','广州','深圳']};
for(var i=0;i<p.city.length;i++){
document.write(p.city[i]+"<br/>");
}
(2)在AJAX中,作为数据载体之一
注意:JS可以直接解析JSON格式的文本,前提是:该JSON必须采用JS格式书写的才行,如果该JSON是采用Java格式写的,必须使用eval()函数转换后,方可被JS解析,该eval("")函数接收一个字符串格式的内容。
(3)省份-城市-区域三级联动【Struts2 + JSON版】
切记:将来JSON是不能完完全全替代XML的,只能在定义对象和数据交换语言方面替代
action:
/**
* 根据省份查询城市
*/
public String findCityByProvinceMethod() throws Exception{
cityList = new ArrayList<String>();
if("湖北".equals(province)){
cityList.add("武汉");
cityList.add("黄岗");
}else if("湖南".equals(province)){
cityList.add("岳阳");
cityList.add("张家界");
}else if("广东".equals(province)){
cityList.add("韶关");
cityList.add("东莞");
}
return "ok";
}
/**
* 根据城市查询区域
*/
public String findAreaByCityMethod() throws Exception{
areaList = new ArrayList<String>();
if("武汉".equals(city)){
areaList.add("AA");
areaList.add("BB");
}else if("黄岗".equals(city)){
areaList.add("CC");
areaList.add("DD");
}else if("岳阳".equals(city)){
areaList.add("EE");
areaList.add("FF");
}else if("张家界".equals(city)){
areaList.add("GG");
areaList.add("HH");
}else if("韶关".equals(city)){
areaList.add("II");
areaList.add("JJ");
}else if("东莞".equals(city)){
areaList.add("KK");
areaList.add("LL");
}
return "ok";
}
private List<String> cityList;
private List<String> areaList;
public List<String> getCityList() {
return cityList;
}
public List<String> getAreaList() {
return areaList;
}
struts.xml
<package name="provinceCityAreaPackage" extends="json-default" namespace="/">
<action
name="findCityByProvinceRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findCityByProvinceMethod">
<result name="ok" type="json">
</result>
</action>
</package>
导入:
struts2-json-plugin-2.3.1.1.jar
三)使用第三方工具,将JavaBean对象/List或Set或Map对象转成JSON
准备导入第三方jar包:
》commons-beanutils-1.7.0.jar
》commons-collections-3.1.jar
》commons-lang-2.5.jar
》commons-logging-1.1.1.jar
》ezmorph-1.0.3.jar
》json-lib-2.1-jdk15.jar
(1)JavaBean----->JSON
》JSONArray jsonArray = JSONArray.fromObject(city);
》String jsonJAVA = jsonArray.toString();
(2)List<JavaBean>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(cityList);
》String jsonJAVA = jsonArray.toString();
(3)List<String>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(stringList);
》String jsonJAVA = jsonArray.toString();
(4)Set<JavaBean>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(citySet);
》String jsonJAVA = jsonArray.toString();
(5)Map<String,Object>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(map);
》String jsonJAVA = jsonArray.toString();
最后一个例子切记,将来jQuery-EasyUI-DataGrid组件时我们还要用到
将来,在企业中,就算脱离struts2的环境,也能用第三方工具,将Java类型转成JSON文本
四)总结JSON的特点
(1)在客户端(特指PC浏览器),直接使用JavaScript语言解析JSON,无需第三方jar包
(2)本质上,就是一个文本,只是该文本有特定的书写格式
(3)可以使用第三方工具,将JavaBean对象或者List/Set/Map<JavaBean>对象转成JSON
(4)优点:JSON与XML很相似,但是它更加轻巧,服务器只需发送一个html普通字符串,不用发送复杂的xml格式文档了
(5)缺点:语法过于严谨,初学者可能觉得代码不易读,写错一点都不行
(6)JSON本质上,就是用JS语法写的特殊文本记号,用JS可以直接解析
五)模拟jQuery库,体验使用第三方实用库的特点【图片隐藏与显示】
学会:JS的封装思想
学会:创建自定义对象和优化方法
学会:引用第三方实用的库,该库中预定义大量实用的对象和函数
学会:查阅第三方实用的库提供的API手册
//定义一个Photo函数,看作是一个类
function Photo(){
//属性
var imgElement = document.images[0];
//方法
this.show = function(){
imgElement.style.visibility = "visible";
}
this.hide = function(){
imgElement.style.visibility = "hidden";
}
}
//定义一个$()函数,用来定位标签
function $(str){
//如果str变量是字符串类型
if( typeof(str) == "string" ){
//获取str变量中的第一个字符
var init = str.substring(0,1);
//如果第一个字符是#的话
if("#" == init){
//获取str变量中除第一个字符外的其它字符
var other = str.substring(1,str.length);
//通过ID定位节点
var element = document.getElementById(other);
//如果找到了节点
if(element != null){
//返回
return element;
}else{
//返回
return null;
}
}else{
//继续判断
}
}else{
alert("参数必须为string类型");
}
}
<script type="text/javascript">
//创建一个Photo对象
var p = new Photo();
//定位隐藏按钮,同时添加单击事件
$("#hide").onclick = function(){
//调用Photo对象的方法
p.hide();
}
//定位显示按钮,同时添加单击事件
$("#show").onclick = function(){
//调用Photo对象的方法
p.show();
}
</script>
六)jQuery是什么
John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作
参见<<什么是jQuery.JPG>>
七)为什么要使用jQuery
(1)写少代码,做多事情【write less do more】
(2)免费,开源且轻量级的js库,容量很小
注意:项目中,提倡引用min版的js库
(3)兼容市面上主流浏览器,例如 IE,Firefox,Chrome
注意:jQuery不是将所有JS全部封装,只是有选择的封装
(4)能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步AJAX功能
(5)文档手册很全,很详细
(6)成熟的插件可供选择
(7)提倡对主要的html标签提供一个id属性,但不是必须的
(8)出错后,有一定的提示信息
(9)不用再在html里面通过<script>标签插入一大堆js来调用命令了
八)jQuery开发步骤
(1)引用第三方js库文件,<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
(2)查阅并使用api手册,$("#divID").html()/val()/text()/css("color","red")/....
//var divElement = document.getElementById("divID");
var $div = $("#divID");
//var html = divElement.innerHTML;
var html = $div.html();
alert(html);
九)js对象和jQuery对象相互转换
(1)什么是js对象及代码规则
就是使用js-API,即Node接口中的API或是传统JS语法定义的对象,叫做js对象
js代码规则----divElement
var divElement = document.getElementById("divID");
var nameArray = new Array(3);
(2)什么是jQuery对象及代码规则
就是使用jQuery-API,返回的对象就叫做jQuery对象
jQuery代码规则----$div
var $div = $("#divID")
(3)js对象转成jQuery对象【重点】
语法:$(js对象)---->jQuery对象
例如:$(divElement)---->$div
例如:$(this)---->$this
注意:jQuery对象将js对象做了封装,js对象二边无引号
var inputElement = document.getElementById("inputID");//js对象
var $input = $(inputElement);//jquery对象
var txt = $input.val();
alert(txt);
(4)jQuery对象转成js对象
语法1:jQuery对象[下标,从0开始]
语法2:jQuery对象.get(下标,从0开始)
例如:$div[0]---->divElement
注意:不同的对象只能调用对应的api方法,即jQuery对象不能调用js对象的api,反之亦然
$div.innerHTML(错)
divElement.html(错)
var $div = $("#divID");//jquery对象
var divElement = $div[0];//js对象(方式一)
//var divElement = $div.get(0);//js对象(方式二)
var txt = divElement.innerHTML;
alert(txt);
十)js对象和jQuery对象的区别
(1)js对象的三种基本定位方式
(A)通过ID属性:document.getElementById()
(B)通过NAME属性:document.getElementsByName()
(C)通过标签名:document.getElementsByTagName()
(2)jQuery对象的三种基本定位方式
(A)通过ID属性:$("#id属性值")
(B)通过标签名:$("标签名")
(C)通过CLASS属性:$(".样式名")
(3)js对象出错的显示
没有合理的提示信息
例如:alert(document.getElementById("usernameIDD").value)
(4)jQuery对象出错的显示
有合理的提示信息,例如:undefined
例如:alert($("#usernameIDD").val())
十一)jQuery九类选择器(上)【参见jQueryAPI.chm手册】
目的:通过选择器,能定位web页面(HTML/JSP/XML)中的任何标签
(1) 基本选择器【参见selector_1.html】
//1)查找ID为"div1ID"的元素个数
alert( $("#div1ID").size() );
//2)查找DIV元素的个数
alert( $("div").size() );
//3)查找所有样式是"myClass"的元素的个数
alert( $(".myClass").size() );
//4)查找所有DIV,SPAN,P元素的个数
alert( $("div,span,p").size() );
//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
alert( $('#div1ID,.myClass,p').size() );
(2) 层次选择器【参见selector_2.html】
//1)找到表单form里所有的input元素的个数
alert( $("form input").size() );
//2)找到表单form里所有的子级input元素个数
alert( $("form > input").size() );
//3)找到表单form同级第一个input元素的value属性值
alert( $("form + input").val() );
//4)找到所有与表单form同级的input元素个数
alert( $("form ~ input").size() );
(3) 增强基本选择器【参见selector_3.html】
//1)查找UL中第一个元素的内容
alert( $("ul li:first").text() );
//2)查找UL中最后个元素的内容
alert( $("ul li:last").text() );
//4)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
alert( $("table tr:odd").size() );
//5)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
alert( $("table tr:even").size() );
//6)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
alert( $("table tr td:eq(1)").text() );
//7)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
alert( $("table tr:gt(0)").size() );
//8)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
alert( $("table tr:lt(2)").size() );
//9)给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加蓝色
$(":header").css("background-color","red").css("color","blue");
//3)查找所有未选中的input为checkbox的元素个数
alert( $(":checkbox:NOT(:checked)").size() );
(4) 内容选择器【参见selector_4.html】
//1)查找所有包含文本"John"的div元素的个数
alert( $("div:contains('John')").size() );
//2)查找所有p元素为空的元素个数
alert( $("p:empty").size() );
//3)给所有包含p元素的div元素添加一个myClass样式
$("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
alert( $("p:parent").size() );
。。。
十二)jQuery中常用方法(上) #
目的:通过方法,能操作web页面(HTML/JSP)中的任何标签
(1)val():获取标签的value属性值,前提是该标签有value属性
(2)html():获取标签之间的内容,不能用运于xml文件
(3)text():获取标签之间的内容,可以用运于html/jsp和xml文件,(提倡)
(4)css():加key-value形成的css样式
(5)addClass():加已经定义好的一个css样式
(6)size():获取jQuery对象/数组中元素的个数,提倡
(7)length:获取jQuery对象/数组中元素的个数
注意:在写jQuery代码时,不光可以使用jQuery的API,还能使用传统JS的API