Jquery 系列（1） 基本认识

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

最新的jquery包可以从官网下载请参照http://jquery.com/ 

Jquery在官网上的版本分为两种：

• Uncompressed  非压缩版本

一般用于调试、开发。

• Compressed     压缩版本

在系统稳定后一般用压缩版本来提高效率。

Jquery不需要安装，在WEB项目中只需要引用下JS的文件位置就可以了

eg: 

Jquery从2.0版本开始便不再支持IE6\IE7\IE8

一、Jquery能做哪些工作

• 取得文档中的元素。
• 修改页面的外观。
• 改娈文档的内容。
• 响应用户的交互操作。
• 为页面添加动态效果。
• 无需刷新页面从服务器端获取信息
• 简化常用的JavaScript任务

二、JQuery出色的地方

• 可以发挥CSS的最大优势
• 支持扩展
• 抽象浏览器不一致性
• 总是面向集合
• 将多重操作集于一行

三、jQuery的操作

HTML 文档包括如下几点信息

HTML Jquery的操作步骤（原DEMO文件下面提供下载）

按照上面的JS引用内容:

1) 

官方定义的脚本，必须在引用自己定义的脚本之前引用，否则自己定义的脚本就会报错。

2) 

为写的自己定义的所有脚本存放位置。

区分开自己定义的脚本更方便管理。

编写 Jquery引用 脚本文件后便可以再01.js中编写自己定义的脚本了。

EG：

• 第一种匿名加载

$(document).ready(

function ()

{

       $('div.poem-stanza').addClass('highlight');

    }

);

• 第二种加载方式

分析上面的代码：

①　查找诗歌的文本

通过$()函数来完成的，参数中包括任何CSS选择符表达式。在这里是希望找到所有poem-stanza类的Div元素,$()函数会返回一个新的JQuery对象实例，我们希望改变诗歌中的类就需要这样去选择。

②　加入新类

addClass()方法的作用是不言而喻的，它会将一个CSS类应用到我们选择的页面元素中去。与.addClass方法相反的是 .removeClass(),为我们探索JQuery支持各种选择表达式提供了便利。highlight定义了一个带边框和灰色背景斜文本样式。

③　执行代码

$(document).ready()方法，Jquery支持我们预定在Dom加载完毕后调用某个函数，而不必等页面中的图像加载。

jQuery调试工具

  1、IE Developer Tools   

  2、Chrome Developer Tools      

  3、FireFox  FireBug

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() 更好用。

更多参与了解请加入群【QQ】373833228.