jQuery学习笔记.docx

jQuery学习笔记.docx

《jQuery学习笔记.docx》由会员分享，可在线阅读，更多相关《jQuery学习笔记.docx（147页珍藏版）》请在冰豆网上搜索。

jQuery学习笔记

一、jQuery教程

jQuery是一个JavaScript库。

jQuery极大地简化了JavaScript编程。

jQuery很容易学习。

每一章中用到的实例

$（document）.ready（function（）{

$（"p"）.click（function（）{

$（this）.hide（）;

}）;

}）;

Ifyouclickonme,Iwilldisappear.

亲自试一试

代码：

DOCTYPEhtml>

如果您点击我，我会消失。

点击我，我会消失。

也要点击我哦。

通过点击"TIY"按钮来看看它是如何运行的。

您将学到什么

在本教程中，您将通过教程以及许多在线实例，学到如何通过使用jQuery应用JavaScript效果。

jQuery是一个“写的更少，但做的更多”的轻量级JavaScript库。

基本上，您将学习到如何选取HTML元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

您需要具备的基础知识

在您开始学习jQuery之前，您应该对以下知识有基本的了解：

∙HTML

∙CSS

∙JavaScript

如果您需要首先学习这些科目，请在我们的 首页 查找这些教程。

jQuery实例

jQuery参考手册

二、jQuery简介

jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库-特性

jQuery是一个JavaScript函数库。

jQuery库包含以下特性：

∙HTML元素选取

∙HTML元素操作

∙CSS操作

∙HTML事件函数

∙JavaScript特效和动画

∙HTMLDOM遍历和修改

∙AJAX

∙Utilities

向您的页面添加jQuery库

jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。

可以通过下面的标记把jQuery添加到网页中：

请注意，

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（"p"）.hide（）;

}）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme

亲自试一试

代码：

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（"p"）.hide（）;

}）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme

下载jQuery

共有两个版本的jQuery可供下载：

一份是精简过的，另一份是未压缩的（供调试或阅读）。

这两个版本都可从 jQ 下载。

库的替代

Google和Microsoft对jQuery的支持都很好。

如果您不愿意在自己的计算机上存放jQuery库，那么可以从Google或Microsoft加载CDNjQuery核心文件。

使用Google的CDN

使用Microsoft的CDN

三、jQuery安装

把jQuery添加到您的网页

如需使用jQuery，您需要下载jQuery库（会在下面为您讲解），然后把它包含在希望使用的网页中。

jQuery库是一个JavaScript文件，您可以使用HTML的

请注意，

亲自试一试

代码：

DOCTYPEhtml>

这是标题

这是一个段落。

这是另一个段落。

点击这里

提示：

通过GoogleCDN来获得最新可用的版本：

如果您观察上什么的GoogleURL-在URL中规定了jQuery版本（1.8.0）。

如果您希望使用最新版本的jQuery，也可以从版本字符串的末尾（比如本例1.8）删除一个数字，谷歌会返回1.8系列中最新的可用版本（1.8.0、1.8.1等等），或者也可以只剩第一个数字，那么谷歌会返回1系列中最新的可用版本（从1.1.0到1.9.9）。

MicrosoftCDN:

亲自试一试

代码：

DOCTYPEhtml>

这是标题

这是一个段落。

这是另一个段落。

点击这里

提示：

使用谷歌或微软的jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从谷歌或微软加载过jQuery。

所有结果是，当他们访问您的站点时，会从缓存中加载jQuery，这样可以减少加载时间。

同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

四、jQuery语法

通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。

jQuery语法实例

1、$（this）.hide（）

演示jQueryhide（）函数，隐藏当前的HTML元素。

代码：

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（this）.hide（）;

}）;

}）;

Clickme

2、$（"#test"）.hide（）

演示jQueryhide（）函数，隐藏id="test"的元素。

代码：

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（"#test"）.hide（）;

}）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme

3、$（"p"）.hide（）

演示jQueryhide（）函数，隐藏所有

元素。

代码：

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（"p"）.hide（）;

}）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme

4、$（".test"）.hide（）

演示jQueryhide（）函数，隐藏所有class="test"的元素。

代码：

$（document）.ready（function（）

{

$（"button"）.click（function（）

{

$（".test"）.hide（）;

}）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme

jQuery语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法是：

$（selector）.action（）

∙美元符号定义jQuery

∙选择符（selector）“查询”和“查找”HTML元素

∙jQuery的action（）执行对元素的操作

示例

$（this）.hide（）-隐藏当前元素

$（"p"）.hide（）-隐藏所有段落

$（".test"）.hide（）-隐藏所有class="test"的所有元素

$（"#test"）.hide（）-隐藏所有id="test"的元素

提示：

jQuery使用的语法是XPath与CSS选择器语法的组合。

在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：

$（document）.ready（function（）{

---jQueryfunctionsgohere----

}）;

这是为了防止文档在完全加载（就绪）之前运行jQuery代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

下面是两个具体的例子：

∙试图隐藏一个不存在的元素

∙获得未完全加载的图像的大小

五、jQuery选择器

选择器允许您对元素组或单个元素进行操作。

jQuery选择器

在前面的章节中，我们展示了一些有关如何选取HTML元素的实例。

关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。

jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。

选择器允许您对HTML元素组或单个元素进行操作。

在HTMLDOM术语中：

选择器允许您对DOM元素组或单个DOM节点进行操作。

jQuery元素选择器

jQuery使用CSS选择器来选取HTML元素。

$（"p"）选取

元素。

$（"p.intro"）选取所有class="intro"的

元素。

$（"p#demo"）选取所有id="demo"的

元素。

jQuery属性选择器

jQuery使用XPath表达式来选择带有给定属性的元素。

$（"[href]"）选取所有带有href属性的元素。

$（"[href='#']"）选取所有带有href值等于"#"的元素。

$（"[href!

='#']"）选取所有带有href值不等于"#"的元素。

$（"[href$='.jpg']"）选取所有href值以".jpg"结尾的元素。

jQueryCSS选择器

jQueryCSS选择器可用于改变HTML元素的CSS属性。

下面的例子把所有p元素的背景颜色更改为红色：

实例

$（"p"）.css（"background-color","red"）;

亲自试一试

代码：

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（"p"）.css（"background-color","red"）;

}）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme

更多的选择器实例

语法

描述

$（this）

当前HTML元素

$（"p"）

所有

元素

$（"p.intro"）

所有class="intro"的

元素

$（".intro"）

所有class="intro"的元素

$（"#intro"）

id="intro"的元素

$（"ulli:

first"）

每个

的第一个
• 元素

  $（"[href$='.jpg']"）

  所有带有以".jpg"结尾的属性值的href属性

  $（"div#intro.head"）

  id="intro"的

  元素中的所有class="head"的元素

  六、jQuery事件

  jQuery是为事件处理特别设计的。

  jQuery事件函数

  jQuery事件处理方法是jQuery中的核心函数。

  事件处理程序指的是当HTML中发生某些事件时所调用的方法。

  术语由事件“触发”（或“激发”）经常会被使用。

  通常会把jQuery代码放到部分的事件处理方法中：

  实例

  $（document）.ready（function（）{

  $（"button"）.click（function（）{

  $（"p"）.hide（）;

  }）;

  }）;

  Thisisaheading

  Thisisaparagraph.

  Thisisanotherparagraph.

  Clickme

  亲自试一试

  代码：

  $（document）.ready（function（）{

  $（"button"）.click（function（）{

  $（"p"）.hide（）;

  }）;

  }）;

  Thisisaheading

  Thisisaparagraph.

  Thisisanotherparagraph.

  Clickme

  在上面的例子中，当按钮的点击事件被触发时会调用一个函数：

  $（"button"）.click（function（）{..somecode...}）

  该方法隐藏所有

  元素：

  $（"p"）.hide（）;

  单独文件中的函数

  如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。

  当我们在教程中演示jQuery时，会将函数直接添加到部分中。

  不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：

  实例

  jQuery名称冲突

  jQuery使用$符号作为jQuery的简介方式。

  某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。

  j

  展开阅读全文