jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
向您的页面添加 jQuery 库
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>```
举例:点击<p>时,它会自动隐藏
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>```
共有两个版本的 jQuery 可供下载:
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
这两个版本都可从 jQuery.com 下载。如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>```
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>```
提示:使用谷歌或微软的 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() 隐藏所有<p>
元素。
$(".test").hide() 隐藏所有 class="test" 的元素。
注意:您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});```
说明:这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。(例如:试图隐藏一个不存在的元素,或者获得未完全加载的图像的大小)
##Selectors
(1)jQuery 元素选择器 (使用 CSS 选择器来选取 HTML 元素)
```$("p")``` 选取 ```<p> ```元素。
```$("p.intro")``` 选取所有 class="intro" 的``` <p> ```元素。
```$("p#demo")``` 选取所有 id="demo" 的``` <p> ```元素。
(2)jQuery 属性选择器 (使用 XPath 表达式来选择带有给定属性的元素)
```$("[href]")``` 选取所有带有``` href ```属性的元素。
```$("[href='#']")``` 选取所有带有 ```href``` 值等于 "#" 的元素。
```$("[href!='#']")``` 选取所有带有``` href```值不等于 "#" 的元素。
```$("[href$='.jpg']")``` 选取所有 ```href ```值以 ".jpg" 结尾的元素
(3)jQuery CSS 选择器(可用于改变 HTML 元素的 CSS 属性)
举例:下面的例子把所有 p 元素的背景颜色更改为红色。
$("p").css("background-color","red");```
更多选择器:
Events
jQuery 是为事件处理特别设计的。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。举例:当按钮的点击事件被触发时会调用一个函数:
$("button").click(function() {..some code... } )
单独文件中的函数
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。如下:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>```
**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事件例子