jQuery 学习笔记（一）——jQuery简介、jQuery语法

来源：互联网发布：国家税务局网络发票编辑：程序博客网时间：2024/05/22 04:36

内容选自w3cschool教程

一句话描述JQuery：jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

一. jQuery简介

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

1. jQuery库的特性

jQuery是一个JavaScript函数库。

jQuery库包含以下特性：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

2. 向页面添加jQuery

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

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

<head><script type="text/javascript" src="jquery.js"></script></head>

请注意，<script> 标签应该位于页面的 <head> 部分。

3. 基础的jQuery实例

下面的例子演示了 jQuery 的 hide() 函数，隐藏了 HTML 文档中所有的 <p> 元素。

实例：

<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

4. 下载 jQuery

共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。

这两个版本都可从 jQuery.com 下载。

5. 库的替代

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

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

使用 Google 的 CDN：

<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script></head>

使用 Microsoft的 CDN：

<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script></head>

二. jQuery语法

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

1. jQuery 语法实例：

（1）$(this).hide() - 隐藏当前元素。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){  $(this).hide();});});</script></head><body><button type="button">Click me</button></body></html>

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

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    $("#test").hide();  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p id="test">This is another paragraph.</p><button type="button">Click me</button></body></html>

（3）$("p").hide() - 隐藏所有 <p> 元素。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

（4）$(".test").hide() - 隐藏所有 class="test" 的段落

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function()  {  $(".test").hide();  });});</script></head><body><h2 class="test">This is a heading</h2><p class="test">This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

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

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

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

2. 文档就绪函数

实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){--- jQuery functions go here ----});

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

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小