JQuery入门

零) js / ajax / json / jQuery

• js: 基于对象, 解释型, 事件驱动, 浏览器交互执行, 弱类型, 必须嵌入到<script>标签中, 脚本语言
• ajax: 是一种客户端与服务器的一种以异步方式通讯的变成模式, 它能让浏览器局部刷新, 动态获取服务器端的相应的结果
• json: JavaScriptObjectNotation, JS对象标记是一种轻量级数据交互技术, 本质上就是用JS语法书写的具有特殊格式的文本字符串
• jQuery: 是第三方开源组织基于js写的一款跨主流浏览器的实用库

一) JSON 简介

• 什么是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
• 具体API :
  • 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简介

• 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 ``divElement = document.getElementById("divID");
• 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）中的任何标签
• 选择器分类 :
  • 基本选择器【参见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() );

• 层次选择器【参见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() );

• 增强基本选择器【参见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() );

• 内容选择器【参见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