jQuery是JavaScript的一个库，极大的简化了JavaScript编程，很容易学习
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
需要对HTML、CSS、JavaScript有了解
安装jQuery
共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。
这两个版本都可从 jQuery.com 下载。两个版本有所区别
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
库的替代
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>```
简单示例$("p").hide()方法
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){<!-- jQuery方法一般放在 document ready 函数中，防止在页面未加载完成时允许jQuery代码，可能会操作失败，如隐藏一个未加载出来的对象 -->
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>点我，我就死给你看</p>
<p>点我，我也死给你看</p>
<p>我不想死5555</p>
</body>
</html>
常用语法
| 方法名 | 用法 |
|---|---|
| $(this).hide() | 隐藏当前的HTML元素 |
| $("p").hide() | 隐藏所有的< p >元素 |
| $("test").hide() | 隐藏所有的class = "test"的元素 |
| $("#test").hide() | 隐藏所有ID为test的元素 |
特性
HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX、utilites
向需要的页面添加jQuery库
<head>
<script type="text/javaScript" src ="jquer.js"></script> <!--注意script标签应该位于<head>标签之中,
在 HTML5 中，不必在 <script> 标签中使用 type="text/javascript" 。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言。 -->
</head>
jQuery选择器
| 名称 | 作用 |
|---|---|
| jQuery选择器 | 通过标签名、属性名或内容对 HTML 元素进行选择。 |
| jQuery元素选择器 | 使用CSS选择器来选取HTML元素，$("p") 选取 <p> 元素，$("p.intro") 选取所有 class="intro" < p> 元素$("p#demo") 选取所有 id="demo" 的 < p > 元素。 |
| jQuery属性选择器 | 使用 XPath 表达式来选择带有给定属性的元素，$("[href]") 选取所有带有 href 属性的元素，$("[href='#']") 选取所有带有 href 值等于 "#" 的元素，$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素，$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 |
| jQuery CSS选择器 | 可用于改变 HTML 元素的 CSS 属性 |
常用选择器实例
| 名称 | 作用 |
|---|---|
| $(this) | 当前的HTML元素 |
| $("p") | 所有的< p>元素 |
| $("p.test") | 所有的class=test的< p>元素 |
| $(".test") | 所有的class=test的元素 |
| $("#test") | 所有的ID=test的元素 |
| $("ul li:first") | 每个ul元素的第一个< li>元素 |
| $("[href$='.jpg']" | 所有带有.jpg结尾的属性值的href属性 |
| $("div#test.head") | 所有ID=test的<div>元素中class=head的元素 |
jQuery事件函数
** 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中**
<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>Click me</button>
</body>
</html>
单独文件中的函数
一般在开发中，将函数单独放在一个单独的文件中
- 实例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
名称冲突问题
** jQuery使用$符号作为jQuery的简介方式，在其他JavaScript库中的函数（比如prototype）同样使用$符号，此时使用noConfilict()方法来解决问题
如 var jq=jQquery.noConfilict()，来代替$符号**
结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护
把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突，则重命名 jQuery 库
事件函数
| 事件函数 | 绑定函数至事件触发 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
网友评论