脚本宝典收集整理的这篇文章主要介绍了初识jQuery，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
一、前言
jQuery 是继 PRototyPE 之后又一个优秀的 JavaScript 库，顾名思议，也就是 JavaScript 和查询（Query），即是辅助 JavaScript 开发的库。它是轻量级的 JS 库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, opera 9.0+），jquery2.0 及后续版本将不再支持 IE6/7/8 浏览器。
jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目，随着被人们熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，如今已发展成为集 JavaScript、CSS、DOM、Ajax 于一体的强大框架体系。它的主旨是：已更少的代码，实现更多的功能（WrITe less, do more）。
二、jQuery基本功能
2.1 访问和操作DOM元素
使用 jQuery 库，可以很方便地获取和修改页面中的某元素，无论是删除，移动还是复制某元素，jQuery 都提供了一整套方便，快捷的方法，既减少了代码的编写,又大大提高了用户对页面的体验度。
2.2 控制页面样式
通过引入 jQuery，程序开发人员可以很便捷地控制页面的 CSS 文件，浏览器对页面文件的兼容性，一直以来都是页面开发者最为头痛的事,而使用 jQuery 操作页面的样式却可以很好地兼容各种浏览器。
2.3 对页面事件的处理
引入 jQuery 库后，可以使页面的表现层与功能开发分享，开发者更多地专注于程序的逻辑与功效，页面设计者侧重于页面的优化与用户体验。然后，通过事件绑定机制，可以很轻松地实现二者的结合。
2.4 大量插件在页面中的运用
在引入 jQuery 库后，还可以使用大量的插件来完善页面的功能和效果，如表单插件、UI 插件，这些插件的使用极大地丰富了页的展示效果，使原来使用 JavaScript 代码遥不可及的功能通过插件的引入而轻松地实现。
2.5 与Ajax技术的完美结合
Ajax 的异步读取服务器数据的方法，极大地方便了程序的开发，加深了用户的页面体验度；而引入了 jQuery 库后，不仅仅完善了的原有的功能，而且减少了代码的书写，通过其内部对象或函数，加上几行代码就可以实现复杂的功能。
三、引入jQuery库方法
由于 jQuery 是一个完整的 JavaScript 文件库，因此，搭建 jQuery 开发环境十分简单，无须安装任何文件，只需要先在 jQuery 官方网站下载 最新的文件库，然后将该文件库引入页面中的 <head> 元素间即可。
<script src="js/jquery-2.1.4.min.js"></script>如果不希望下载并存放 jQuery 类库，那么也可以使用 CDN （全称：Content Delivery Network，内容分发网络）加载它，加速你的网站 。例如：jQuery CDN、Google CDN、Microsoft CDN、CDNJS CDN、jsDelivr CDN、百度 CDN、新浪 CDN、360 CDN 等等。
jQuery CDN 加载 jQuery：
<script src="//code.jquery.COM/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>百度 CDN 加载 jQury：
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>四、版本介绍
jQuery 有两个版本：jQuery 1.x 和 jQuery 2.x。
jQuery 1.x 对 IE6，7，8 还支持，而 jQuery 2.x 不再对 IE8 或更早的浏览器支持。
五、jQuery API
我们可以在 jQuery API Documentation 中查看一些预先定义的函数，深入了解并掌握其用法。英文看不懂的同学可以翻译一下或者直接访问一些 jQuery API 中文网站。例如：jQuery API 中文文档 — jQuery 中文网
六、jQuery程序的代码风格
6.1 “$”美元符的使用
在 jQuery 程序中，使用最多的莫过于“$”美元符了，无论是页面元素的选择、功能函数的前缀，都必须使用该符号，可以说它是 jQuery 程序的标志。
6.2 事件操作链接式写法
在编写页面某元素事件时，jQuery 程序可以使用链接式的方式编写该元素的所有事件。例如：
<script>
$(document).ready(function(){
$("#button").click(function(){
$("#content").show().html("您好，欢迎来到jQuery世界！").append('<a href="#">开始学习</a>');
});
});
</script>七、jQuery注意点
7.1 $(document).ready 和 window.onload 的区别
7.1.1 执行时间不同
$(document).ready 在页面框架下载完毕后（即页面的 DOM 模型加载完毕后）就执行；而 window.onload 必须在页面全部加载完毕（包含图片下载）后才能执行。很明显，前者的执行效率高于后者。
7.1.2 执行数量不同
$(document).ready 可以重复写多个，并且每次执行结果不同；而 window.onload 尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。
7.1.3 $(document).ready 可简写
$(document).ready(function(){}) 可以简写成 $(function(){})。另外，“$”可以写成“jQuery”。因此，ready() 方法有四种写法。
$(document).ready(function(){//第一种写法
//代码部分
});
$(function(){//第二种写法
//代码部分
});
jQuery(document).ready(function(){//第三种写法
//代码部分
});
jQuery(function(){//第四种写法
//代码部分
});7.2 jQuery选择器
jQuery 选择器可谓之强大无比。jQuery 选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。而过滤选择器又可分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。
7.3 jQuery操作DOM
DOM（Document Object Model，文档对象模型）为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式。在实际运用中，DOM 更像是桥梁，通过它可以实现跨平台、跨语言的标准访问。在 jQuery 中可以操作或控制 DOM 中的各种元素或对象。
7.4 遍历元素
在 DOM 元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的 JavaScript 中，先获取元素的总长度，然后，以 for 循环语句，递减总长度，访问其中的某个，代码相对复杂；而在 jQuery 中，可以直接使用 each() 方法实现元素的遍历。
其语法格式如下：each(callback)
其中，参数 callback 是一个 function 函数，该函数还可以接受一个形参 index，此形参为遍历元素的序号（从 0 开始）；如果需要访问元素中的属性，可以借助形参 index，配合 this 关键字来实现元素属性的设置或获取。
7.5 jQuery事件
众所周知，页面在加载时，会触发 load 事件。当用户单击某个按钮时，触发该按钮 click 事件，通过种种事件实现各项功能或执行某项操作。严格来说，事件在触发后被分为两个阶段，一个是捕获，另一个是冒泡。遗憾的是大多数浏览器并不都支持捕获阶段，jQuery 也不支持。因此在事件触发后，往往执行冒泡过程。
7.5.1 阻止冒泡过程
事件在执行的过程中存在冒泡现象。而在实际需要中，我们并不希望事件的冒泡现象发生，比如单击按钮就执行单一的单击事件，并不触发其他外围的事件。
在 jQuery 中，可以通过 stopPropagation() 方法来阻止事件的冒泡过程或者通过语句 return false; 停止事件的冒泡过程。
7.5.2 绑定事件
jQuery 有四种事件绑定方式，分别是 bind() 方法、live() 方法、delegate() 方法和 on() 方法。建议使用 on() 方法绑定。
① bind() 方法
为每个匹配元素的特定事件绑定事件处理函数。其语法格式为：bind(type,[data],fn)
例如：
$("a").bind("click",function(){alert("OK");});② live() 方法
给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的。其语法格式为：live(type,[data],fn)
例如：
$("a").live("click",function(){alert("OK");});③ delegate() 方法
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。其语法格式为：delegate(selector,[type],[data],fn)
例如：
$("#main").delegate("a","click",function(){alert("OK");})④ on() 方法
在选择元素上绑定一个或多个事件的事件处理函数。其语法格式为：on(events,[selector],[data],fn)
例如：
$("#main").on("click","a",function(){alert("OK");})差别：
bind() 方法是直接绑定在元素上；
live() 方法则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到 document DOM 节点上。和 bind() 方法的优势是支持动态数据；
delegate() 方法则是更精确的小范围使用事件代理，性能优于 live() 方法；
on() 方法则是最新的 1.9 版本整合了之前的三种方式的新事件绑定机制。
7.6 jQuery动画方法
show() 与 hide() 方法，元素以动画效果实现显示与隐藏。可以同时改变元素的多个属性，如宽度、高度、透明度；
toggle() 方法，可以替代 show() 和与 hide() 两个方法，因此，其改变的元素属性也与 show() 与 hide() 方法一样；
fadein() 与 fadeOut() 方法，元素以动画的效果淡入与淡出，仅改变元素的透明度；
fadeTo() 方法，元素按照指定的透明度进行渐进式调整，从而达到一种动画效果，该方法改变的是元素的透明度，宽度和高度都不发生变化；
slideUp() 和 slideDown() 方法，元素以“卷窗帘”的动画效果显示与隐藏，仅改变元素的透明度，其他属性不发生变化；
slideToggle() 方法，可以替代 slideUp() 和 slideDown() 两个方法，改变的元素也与 slideUp() 和 slideDown() 方法一样；
aniMATE() 方法，自定义元素的动画效果，可以实现改变上述方法中全部属性的功能。同时，还可以用动画的效果，改变其他的元素属性，该方法是上述方法的核心。
以上是脚本宝典为你收集整理的初识jQuery全部内容，希望文章能够帮你解决初识jQuery所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。