[JavaScript知识库]jQuery 简介

目录

1、什么是jQuery

2、jQuery 的特点

3、在页面中引用jQuery

4、jQuery的$(document)处理器

5、jQuery的基本选择器

6、jQuery的过滤选择器

1、什么是jQuery

jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。

2、jQuery 的特点

?快速获取文档元素

? jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

? 提供漂亮的页面动态效果

? jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

? 创建AJAX无刷新网页

? AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

? 提供对JavaScript语言的增强

? jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

? 增强的事件处理

? jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

? 更改网页内容

? jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。
?

3、在页面中引用jQuery

? ? 在使用jQuery之前，我们需要在页面里引用它，主要的方式有两种，详情如下。

下载jQuery

? ? 可以从官方站点中下载 http://docs.jquery.com/download/

? ? 下载后，把下载的jquery.js文件放到与页面相同的文件夹中，

<script src="jquery.js"></script>

4、jQuery的$(document)处理器

? ? 类似于window.onload处理器，jQuery具有自己相应的方法:

?'$'是jQuery的全局对象,代表的是jQuery? ? ?

• 原生写法

? ? $(document).ready(function(){undefined

? ? ? ? ? ? //jquery代码

? ? ? ? });

• 简写

$(function(){
?? ??? ??? ? ? ?jQuery代码;
?? ??? ??? ?})

? ? 一般情况下，我们编写的很多代码会从类似这样的语句里执行。

? ? 与window.onload一样，它完成两件事情:

确保在DOM可用之后，也就是确保代码中可能访问的元素都已经存在了，在执行代码，从而避免产生错误。
把语义层(HTML)和表现层(CSS)分离开，让代码更加清晰。
? ? jQuery相比winodw.onload有个优点，不是一定要等到页面加载完成才运行代码，在使用jQuery的$(document).ready时，只要DOM树构造完成，代码就会开始运行，而不会在等到图像和其他资源都加载完毕，这对改善性能略有帮助。
?

5、jQuery的基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素

改变 id 为 one 的元素的背景色为 红色

$("#one").css("backgroundColor","red"); 

改变元素名为 <p> 的所有元素的背景色为 # bbffaa，字体颜色为红色

$("p").css({color:"red",backgroundColor:"#bbffaa"});

改变第一个<p>元素的背景色为红色

$("p").eq(0).css("backgroundColor","red"); 

改变所有<h1>元素和 id 为 one 的元素的背景色为 # bbffaa

$("h1,#one").css("backgroundColor","#bbffaa");

6、jQuery的过滤选择器

? ?改变第一个 div 元素的背景色为 # bbffaa

$("div:first").css("backgroundColor","#bbffaa");

改变id不为 one 的所有p元素的背景色为 # bbffaa

$("p:not('#one')").css("backgroundColor","#bbffaa");

改变索引值为偶数的 tr元素的背景色为 # bbffaa

$(“tr:even").css("backgroundColor","#bbffaa");

改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa

$(“p:gt(3):odd").css("backgroundColor","#bbffaa");

改变所有的标题元素的背景色为 # bbffaa

$(":header").css("backgroundColor","#bbffaa");

改变当前正在执行动画的所有元素的背景色为 # bbffaa

$(':animated').css("backgroundColor","#bbffaa");