jQuery入门（一）--jQuery介绍
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
1配置环境
<head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head>
2基础语法是：
$(selector).action()
- 美元符号 $ 定义 jQuery。
- 选择符（selector）“查询”和“查找” HTML 元素。
- jQuery 的 action() 执行对元素的操作。
另外需要注意的是：在 jQuery 库中 $ 符号就是 jQuery 的一个简写形式，例如'$("#syl")' 和'jQuery("#syl")' 是等价的，$.ajax 和 jQuery.ajax 是等价的，如果没有特别说明，程序中的 $ 符号都是 jQuery 的一个简写形式。
3 文档就绪函数
所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
});
// 可以简写成
$(funciton(){
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。
上面的这段代码其实有点类似于传统 JavaScript 中的 window.onload 方法，不过它们还是有一些区别的，简单对比如下所示：
| window.onload | $(doucment).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后才能执行（包括图片） | 网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完 |
| 编写个数 | 不能同时编写多个 | 能同时编写多个 |
4例子
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#">春天</a>
<ul class="level2">
<li>春意盎然</li>
<li>春意盎然</li>
<li>春意盎然</li>
<li>春意盎然</li>
</ul>
</li>
<li class="level1">
<a href="#">夏天</a>
<ul class="level2">
<li>夏日炎炎</li>
<li>夏日炎炎</li>
<li>夏日炎炎</li>
<li>夏日炎炎</li>
</ul>
</li>
<li class="level1">
<a href="#">秋天</a>
<ul class="level2">
<li>秋高气爽</li>
<li>秋高气爽</li>
<li>秋高气爽</li>
<li>秋高气爽</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
//等待dom元素加载完毕
$(document).ready(function() {
$(".level1>a").click(function() {
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
})
});
</script>
</body>
</html>
简单解释一下这段代码，当鼠标点击到 a 标签的时候给其添加一个名为 current 的 class，然后调用 next() 和 show() 将其后面的元素显示出来，然后调用 parent()、siblings()、children("a") 将它的父辈的同辈元素的内部的子元素 a 都去掉一个名为 current 的 class (removeClass("current"))，并且将紧邻它们后面的元素都隐藏。
这就是 jQUery 的强大的链式操作，但为了进一步改善代码的可读性和可维护性，推荐一种写法：
$(document).ready(function() {
$(".level1>a").click(function() {
$(this).addClass("current")//给当前元素添加"current"样式
.next().show()//下一个元素显示
.parent().siblings().children("a").removeClass("current")//父元素的同辈元素的子元素a移除"current"样式
.next().hide();//它们的下一个元素隐藏
return false;
})
});
5jQuery对象和dom对象
DOM （Document Object Model）对象，也就是我们经常说的文档对象模型，每一份 DOM 都可以表示成一棵 DOM 树：h1,p,ul 以及 li 标签都是 DOM 元素节点，我们可以通过 JavaScript 中的 document.getElementById()，document.getElementsByTagName() 等来获取元素节点，像这样获取的 DOM 元素就是 DOM 对象，DOM 对象可以使用 JavaScript 中的方法，比如：
document.getElementById("syl").innerHTML;
jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法，比如
$("#syl").html();//获取id为syl的元素内的html代码，html()是jQuery中的方法
我们一定要从开始就树立这样的一个观念：jQuery 对象和 DOM 对象是有区别的，它们并不是等价的。 jQuery 对象中无法使用 DOM 对象中的任何方法，反之亦然。
jQuery 对象和 DOM 对象之间的相互转换
1.jQuery 对象转换为 DOM 对象
- [index]:jQuery 对象是一个类似数组的对象，可以通过 [index] 的方法得到对应的 DOM 对象，比如：
var $cr = $("#cr");//jQuery 对象
var cr = $cr[0];//DOM 对象
- 通过 get(index) 方法得到相应的 DOM 对象，比如：
var $cr = $("#cr");//jQuery 对象
var cr = $cr.get(0);//DOM 对象
2.DOM 对象转换为 jQuery 对象
- 对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了，比如：
var cr = document.getElementById("cr");//DOM 对象
var $cr = $(cr);//jQuery 对象
我们平时用到的 jQuery 对象都是通过 () 函数制造出来的，()函数制造出来的，() 函数就是一个 jQuery 对象的制造工厂。
DOM 方式判断复选框是否被选中：
if(cr.checked){//DOM方式判断
alert('你已同意本协议');
}
jQuery 方式判断复选框是否被选中：
if($cr.is(":checked")){
alert('你已同意本协议');
}