javascript与jquery基础

Posted 大数据的未来

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript与jquery基础相关的知识,希望对你有一定的参考价值。


培训要求

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("黄岗");

       elseif("湖南".equals(province))

           cityList.add("岳阳");

           cityList.add("张家界");

       elseif("广东".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");

       elseif("黄岗".equals(city))

           areaList.add("CC");

           areaList.add("DD");

       elseif("岳阳".equals(city))

           areaList.add("EE");

           areaList.add("FF");

       elseif("张家界".equals(city))

           areaList.add("GG");

           areaList.add("HH");

       elseif("韶关".equals(city))

           areaList.add("II");

           areaList.add("JJ");

       elseif("东莞".equals(city))

           areaList.add("KK");

           areaList.add("LL");

      

       return"ok";

   

private List<String> cityList;

    private List<String> areaList;

    public List<String> getCityList()

       returncityList;

   

    public List<String> getAreaList()

       returnareaList;

   

       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)查找所有IDdiv1ID,CLASSmyClass,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)查找表格的索引号为135...奇数行个数,索引号从0开始

           alert( $("table tr:odd").size() );

 

        //5)查找表格的索引号为246...偶数行个数,索引号从0开始

           alert( $("table tr:even").size() );

 

        //6)查找表格中第二行的内容,从索引号0开始,这是一种祖先后代的变化形式

            alert( $("table tr td:eq(1)").text() );

 

        //7)查找表格中第二第三行的个数,即索引值是12,也就是比0

           alert( $("table tr:gt(0)").size() );

 

        //8)查找表格中第一第二行的个数,即索引值是01,也就是比2

           alert( $("table tr:lt(2)").size() );

 

        //9)给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加蓝色

           $(":header").css("background-color","red").css("color","blue");

          

        //3)查找所有未选中的inputcheckbox的元素个数

           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

 

 

 

 

作业:

1)基于struts2的json插件包,完成省份->城市->区域三级下拉联动

2)完成exe目录中的内容[暂不做]


以上是关于javascript与jquery基础的主要内容,如果未能解决你的问题,请参考以下文章

jQuery基础与JavaScript与CSS交互-第五章

javascript与jquery基础

《算法设计与分析》期末不挂科

jQuery中国各个省份地图分部代码

jquery与js的区别与基础操作

JavaScript学习总结——jQuery插件开发与发布