认识jQuery

jQuery是一套开放原始代码的javascript函数库，它简化了DOM文件的操作，使我们轻松选择对象，更加简洁的完成想要完成的事情。jQuery指定CSS属性值，达到想要的特性与动画效果。jQuery加强了异步传输及事件功能。

jQuery使用

1.引用jQuery函数库

引用方式有两种，一种是直接下载JS文件引用，另一种是使用CDN来加载链接库。

1.1下载jQuery

1.下载网址为：http://jquery.com

2.将JS文件加入网页HTML的标记之间，代码如下；

1.2使用CDN加载jQuery

CDN是内容分发服务网络，也就是将要加载的内容通过这个网络系统进行分发。当浏览器你的网页之前可能已经在同一个CDN下载过jQuery，浏览器就已经缓存过这个文件，因此不需要重新下载，浏览速度会快很多。

1.在http://jquery.com网页最下方，找到提供CDN的网址

2.在HTML的标签中加入

例：

2.jQuery基本架构

jQuery必须等待浏览器加载HTML的DOM对象之后才能执行，可以通过.read()方法来确认DOM是否已经全部加载。

jQuery(document).ready(function(){

//程序代码

})

jQuery可以使用$来代替

$(document).ready(function(){

//程序代码

})

$()函数内的参数是指定想要选用哪一个对象，接着是想要jQuery执行什么方法或者处理事件，例如ready()方法。ready方法括号内是事件处理的函数程序代码，多数情况下，我们会把事件处理函数定义为匿名函数，也就是上面事例中的function(){}。

由于document ready是常用方法，jQuery提供了更简洁的写法便于我们使用

$(function(){

//程序代码

})

jQuery基本语法

jQuery的使用非常简单，只要指定作用的DOM组件及执行的操作即可：

$(选择器).操作()

例如：

$("p").hide();

表示找出HTML中所有的
对象并隐藏

jQuery选择器

jQuery选择器用来选择HTML组件，我们可以通过HTML标记名称、id属性、class属性来取得组件。

1.标记名称选择器

标记名称选择器是直接使用HTML标记，例如想要选择所有的

组件，可以写成：

$("p")

2.id选择器

id选择器通过组件的id属性来的取得组件，只要在id属性前面加上"#"号即可，例如，想要选择id属性test的组件，可以写成：

$("#test")

3.class选择器

class选择器通过组件的class属性来取得组件，只要在class属性前加上"."号即可。例如，想要选择class属性为test的组件，可以写成：

$(".test")

综合使用

使用上述3种选择器，例如：要找出

标记class属性为test的组件，可以写成：

$("p.test")

常用的选择和搜索法

表示法说明

$("*") 选择所有组件

$(this) 选择目前作用中的组件

$("p:first") 选择第一个

组件

$("[href]") 选择含有href属性的组件

$("tr:even") 选择偶数组件

$("tr:odd") 选择奇数组件

$("div p") 选择

组件中包含

的组件

$("div").find("p") 搜索

组件中的

组件

$("div").next("p") 搜索

组件之后的第一个

组件

$("li").eq(2) 搜索第3个

组件的eq()中是输入组件的位置，只能输入整数，最小为0

4.设置CSS样式属性

学会选择器用法之后，除了可以操控HTML组件之外，还可以使用css()方法来改变css样式，例如，指定

组件背景色为红色，可以写成下面代码：

Title

跑步

游泳

篮球

棒球

台球

#代码表示，将第3个
组件的背景颜色改为红色

顶顶顶