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_']"));
});