Jquery 系列 基本认识
Posted 刀鋒偏冷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 系列 基本认识相关的知识，希望对你有一定的参考价值。
本系列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的最大优势
- 支持扩展
- 抽象浏览器不一致性
- 总是面向集合
- 将多重操作集于一行
- 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() 更好用。
以上是关于Jquery 系列 基本认识的主要内容，如果未能解决你的问题，请参考以下文章
[jQuery学习系列二 ]2-JQuery学习二-数组操作
[jQuery学习系列三 ]3-JQuery学习二-字典操作