一、jQuery的安装
1.jQuery下载地址：jquery.com 中下载。
2.jQuery语法。
2.1jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
★美元符号定义jQuery
★现在器（selector）"查询"和"查找"HTML元素
★jQuery的action执行对元素的操作
实例：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
也许你已经注意到我们实例中的所有jQuery函数位于一个document ready函数中：
$(document).ready(function(){
//从这里你可以开始写jQuery代码了....
});
上例是为了防止文档在完全加载（就绪）之前运行代码。
当然我们也有简介的写法（与上面的写法效果相同）：
$(function(){
//你可以从这里开始写jQuery代码了....
});
以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。
$();//当然这种我们也可以称作为工厂函数
二、jQuery选择器
Query 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
1.1、元素选择器
jQuery 元素选择器基于元素名选取元素。在页面中选取所有 <p> 元素:
如下：$("p");
1.2、#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：
$("#test");
1.3、.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下： $(".test");
更多实例如下：
| 语法 | 描述 |
| $("*"); | 选取所有元素 |
| $("this"); | 选取当前HTML |
| $("p.intro"); | 选取class为intro的<P>元素 |
| $("p:first"); | 选取第一个 <p> 元素 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
| $("[href]") | 选取带有 href 属性的元素 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 |
三、jQuery事件
常用的jQuery事件方法：
1.click()方法是当按钮点击事件被触发是会调用一个函数。
如：
$("p").click(function(){
$(this).hide();//隐藏当前<p>元素
});
2. dblclick()方法是当双击元素时，会发生dblclick事件。
如：
$().dblclick(function(){
$().hide();
});
3.mouseenter()方法是当鼠标指针移动到元素上方时，触发mouseenter事件。
$("#p1").mouseenter(function(){
alert("鼠标移动到 id="p1" 的元素上面了");
});
4.mouseleave()方法是当前鼠标指针离开元素上方时，触发mouseleave事件。
5.mousedown()方法是当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
6.mouseup()方法是当在元素上松开鼠标按钮时，会发生 mouseup 事件。
7.hover()方法是用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素 时，会触发指定的第二个函数(mouseleave)。
8.focus()方法是当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
9.blur()方法是当元素失去焦点时，发生 blur 事件。
四、jQuery CSS()方法
css的理解与使用方法
<script type="text/javascript">
$(function(){
$("#a01").click(function(){
//$(a b)
//form里面的input
$("form input")
.css("border","3px solid blue")
.css("background","yellow")
.val("ok");
});
$("#a02").click(function(){
//$(a>b)
//form里面的input
$("form>input")
.css("border","3px solid blue")
.css("background","red")
.val("子元素");
});
//$(span+input) [同辈，注意返回的是input]
$("#a03").click(function(){
$("span+input").css("background","yellow");
});
$("#a04").click(function(){
$("span~input").css("background","yellow")
.hide();
});
});
</script>
<body>
<form id="frm">
<span>姓名：</span>
<input type="text" value="1">
<div>
<input type="text" value="2">
</div>
<input type="text" value="3">
<input type="text" value="4">
</form>
<input type="text" value="5">
<div id="a01">层次选择器__$(a b) [后代元素，不管层次]</div>
<div id="a02">层次选择器__$(a>b) [子元素]</div>
<div id="a03">
层次选择器__$(a+b)
[紧邻同辈,注意别看到a+b就认为返回内容是包含a和b2个，返回的是b]
</div>
<div id="a04">
层次选择器__$(a~b)
[相邻同辈,同辈就行，不需要紧邻]
</div>
</body>