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选择器	$('#id属性名')
全选选择器	$('*') 表示选择所有的元素
类选择器	$('.class属性名')
标签名选择器	$('标签名')

改变 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的过滤选择器

:first	选取第一个元素
:last	选取最后一个元素
:not(选择器)	选择不是给定选择器的元素
:even	选择偶数元素
:odd	选择奇数元素
:eq(index)	选择索引等于index的元素
:gt(index)	选择索引大于index的元素
:lt(index)	选择索引小于index的元素
:header	选择所有标题元素，如h1，h2
:animated	选择当前正在执行动画的所有元素

   改变第一个 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");