jQuery 笔记 / Basic

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

向您的页面添加 jQuery 库

    
```
举例：点击
时，它会自动隐藏

```

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

• Production version - 用于实际的网站中，已被精简和压缩。
• Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可从 jQuery.com 下载。如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
Google CDN:

```
Microsoft CDN:

```
提示：使用谷歌或微软的 jQuery，有一个很大的优势。许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。

Syntax

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

jQuery中$是什么意思
$就是jQuery的别称
而jQuery就是jQuery库提供的一个函数.
$.ajax(options)这样的使用，等同 jQuery.ajax(options))
$()这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素
比如：
$(document)就是 选取整个文档对象
为了防止命名冲突，我们下面会讲到jQuery的防冲突机制

基础语法：$(selector).action()
说明：

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

实例：
$(this).hide() 隐藏当前的 HTML 元素。
$("#test").hide() 隐藏 id="test" 的元素。
$("p").hide() 隐藏所有

元素。
$(".test").hide() 隐藏所有 class="test" 的元素。

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

$(document).ready(function(){
    --- jQuery functions go here ----
});```
说明：这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。（例如：试图隐藏一个不存在的元素，或者获得未完全加载的图像的大小）

##Selectors
（1）jQuery 元素选择器  （使用 CSS 选择器来选取 HTML 元素）
```$("p")``` 选取 ```
 ```元素。
```$("p.intro")``` 选取所有 class="intro" 的``` 
 ```元素。
```$("p#demo")``` 选取所有 id="demo" 的``` 
 ```元素。

（2）jQuery 属性选择器  （使用 XPath 表达式来选择带有给定属性的元素）
```$("[href]")``` 选取所有带有``` href ```属性的元素。
```$("[href='#']")``` 选取所有带有 ```href``` 值等于 "#" 的元素。
```$("[href!='#']")``` 选取所有带有``` href```值不等于 "#" 的元素。
```$("[href$='.jpg']")``` 选取所有 ```href ```值以 ".jpg" 结尾的元素

（3）jQuery CSS 选择器（可用于改变 HTML 元素的 CSS 属性）
举例：下面的例子把所有 p 元素的背景颜色更改为红色。

$("p").css("background-color","red");```

更多选择器：

selectors

Events

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

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。举例：当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )

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

```

**jQuery 名称冲突**
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。比如：

var jq=jQuery.noConflict(); // 帮助您使用自己的名称（比如 jq）来代替 $ 符号
j("div p").hide(); // Do something with jQuery
$("content").style.display = 'none'; // Do something with another library's $()```

jQuery事件例子

jQuery事件