你的位置:首页 > Java教程

[Java教程]Jquery 系列(1) 基本认识


本系列Jquery所用测试Demo版本是《 uncompressed, development jQuery 1.11.3 》

最新的jquery包可以从官网下载, 请参照 http://jquery.com/ 
Jquery在官网上的版本分为两种:
  • uncompressed  非压缩版本

    一般用于调试、开发

  • Compressed     压缩版本

        在系统稳定后一般用压缩版本来提高效率。
Jquery不需要安装,在WEB项目中只需要引用下Js的文件位置就可以了
    eg: 
    <script src="Jquery/jquery-1.11.3.js"></script>
    <script src="Jquery/ClientJS/01.js"></script>
 Jquery从2.0版本开始便不再支持IE6\IE7\IE8
     Jquery能做哪些工作
  • 取得文档中的元素。
  • 修改页面的外观。
  • 改娈文档的内容。
  • 响应用户的交互操作。
  • 为页面添加动态效果。
  • 无需刷新页面从服务器端获取信息
  • 简化常用的JavaScript任务

    jQuery出色的地方

  • 可以发挥CSS的最大优势
  • 支持扩展
  • 抽象浏览器不一致性
  • 总是面向集合
  • 将多重操作集于一行
  1. jQuery的操作
  • HTML 文档包括如下几点信息
         <!DOCTYPE html>                                                                 Html5格式的文档
           <html lang="en">                                                               网页主体
            <head></head>                                                                               头信息  
            <meta charset="utf-8">                                                                  编码格式
            <title>Through the Looking-Glass</title>                                     网页标题
            <link rel="stylesheet" href="Css/01.css" type="text/css" />     CSS
            <script src="jquery-1.11.3.js"></script>                                      jquery   JS         


            <script src="01.js"></script>                                                        自定义    JS
            <body>……</body>                                                                         内容信息
  • HTML Jquery的操作步骤(原DEMO文件下面提供下载)
        按照上面的JS引用内容
         <script src="Jquery/jquery-1.11.3.js"></script>官方定义的脚本,必须在引用自己定义的脚本之前引用,否则自己定义的脚本就会报错。

         <script src="Jquery/ClientJS/01.js"></script>为写的自己定义的所有脚本存放位置。
        区分开自己定义的脚本更方便管理。
  • 编写 Jquery
      引用 <script src="Jquery/ClientJS/01.js"></script>脚本文件后便可以再01.js中编写自己定义的脚本了。

      EG:
 
       //第一种匿名加载
      $(document).ready(
        function ()
        {
            $('div.poem-stanza').addClass('highlight');
        } );

 
        //第二种加载方式
     <script type="text/javascript">
        function addHighlightClass()
        {
            $('div.poem-stanza').addClass('highlight');
        }
        $(document).ready(addHighlightClass);
    </script>
       分析上面的代码:
        1、查找诗歌的文本
             通过$()函数来完成的,参数中包括任何CSS选择符表达式。在这里是希望找到所有poem-stanza类的Div元素
             $()函数会返回一个新的JQuery对象实例,我们希望改变诗歌中的类就需要这样去选择。
        2、加入新类
            addClass()方法的作用是不言而喻的,它会将一个CSS类应用到我们选择的页面元素中去。与.addClass方法相反的是
            .removeClass(),为我们探索JQuery支持各种选择表达式提供了便利。
            highlight定义了一个带边框和灰色背景斜文本样式。
        3、执行代码
            $(document).ready()方法,Jquery支持我们预定在Dom加载完毕后调用某个函数,而不必等页面中的图像加载。
 
   jQuery调试工具



          1、IE Developer Tools   
          2、Chrome Developer Tools      
          3、FireFox  FireBug
 
    2. Chrome Developer Tools  使用
        F12打开 Chrome Developer Tools 调试面板 ,
        1.在面板中默认的是Elements(元素)标签页, 左侧显示的是页面结构。通过放大镜找页面元素的位置。
        2.[ Sources ] 资源标签页中显示的是页面中加载的所有脚本。右键单击行号可能设置普通断点和条件断点,标签页的右侧,
            可以观察监控的值。可以监控的变量和表达式。
        3.控制台
            可以在控制台查看Jquery对象。
            在这里可以填入你用的Jquery 非常好用,并用很方便您的调试。
             eg:
                   $(document).ready(function()
                 {
                  console.log('Hello');
                  console.log('World');
                  console.log($('div.poem-stanza'));
                });
        可以向console.log传入任何表达式,比alert() 更好用。