js day02

培训要求

1）掌握JSON及其应用

2）了解jQuery的背景和特点

3）理解js对象和jQuery对象的区别

4）掌握jQuery九类选择器及应用（上）

 

声明：今天服务端我们使用Struts2技术

 

 

一）什么是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

一）jQuery九类选择器【参见jQueryAPI.chm手册】

    目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签

   （1）基本选择器【参见01_selector.html】

   （2）层次选择器【参见02_selector.html】

   （3）增强基本选择器【参见03_selector.html】

   （4）内容选择器【参见04_selector.html】

   （5）可见性选择器【参见05_selector.html】

   （6）属性选择器【参见06_selector.html】

   （7）子元素选择器【参见07_selector.html】

   （8）表单选择器【参见08_selector.html】

   （9）表单对象属性选择器【参见09_selector.html】

        注意：项目中，通常是多种选择器一起使用

 

 

二）jQuery常用Method-API

    目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查

   （1）DOM简述与分类

       （A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)

       （B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，

跨浏览器(ie/firefox/Chrome)的标准规则    

       （C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程

       （D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS

       （E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等

 

   （2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用

        each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象

            append()：追加到父元素之后

        prepend()：追加到父元素之前

after()：追加到兄弟元素之后

        before()：追加到兄弟元素之前

attr(name)：获取属性值

        attr(name,value)：给符合条件的标签添加key-value属性对

$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本   

        remove()：删除自已及其后代节点 

val()：获取value属性的值

            val("")：设置value属性值为""空串，相当于清空

            text()：获取HTML或XML标签之间的值

            text("")：设置HTML或XML标签之间的值为""空串

clone()：只复制样式，不复制行为

        clone(true)：既复制样式，又复制行为

replaceWith()：替代原来的节点

        removeAttr()：删除已存在的属性

addClass()：增加已存在的样式

        removeClass()：删除已存在的样式

        hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式

        toggleClass()：如果标签有样式就删除，否则增加样式

offset()：获取对象的left和top坐标

        offset({top:100,left:200})：将对象直接定位到指定的left和top坐标

width()：获取对象的宽

        width(300)：设置对象的宽

        height()：获取对象的高

        height(500)：设置对象的高

children()：只查询子节点，不含后代节点

        next()：下一下兄弟节点

        prev()：上一下兄弟节点

        siblings()：上下兄弟节点

show()：显示对象

        hide()：隐藏对象

fadeIn()：淡入显示对象

        fadeOut()：淡出隐藏对象

slideUp()：向上滑动

        slideDown()：向下滑动

        slideToggle()：上下切换滑动，速度快点

面试题--find("9类选择器")：查询指定的节点和多重each()迭代

       

//使用jquery弹出奇数的tr标签下的td里的值

var $tr = $("table tr:lt(4):even");

$tr.each(function(){

//tr中查找td标签,$(this)表示tr

var $td = $(this).find("td");

$td.each(function(){

      //$(this)表示td

      var txt = $(this).text();

alert(txt);

});

});

 

 

三）jQuery常用Event-API

    目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理

    window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者

    ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化

               ready和onload同时存在时，二者都会触发执行，ready快于onload

    change：当内容改变时触发

    focus：焦点获取

    select：选中所有的文本值

    keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同

    mousemove：在指定区域中不断移动触发

    mouseover：鼠标移入时触发

    mouseout：鼠标移出时触发

    submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台

    click：单击触发

    dblclick：双击触发

    blur：焦点失去

 

https://jquery.com/download/   下载最新源码jar包