文章目录
引入jQuery文件
方式一：本地引用
通过访问jQuery官方网站：https://jquery.com/
即可下载jQuery的最新版本。点击下载图标就能够跳转到详情页。
可以通过下载到本地的方式引用
<script src="jQuery路径"></script>
<script>
//jquery代码块
</script>
提示：由于页面从上到下加载，请确保jQuery代码块在jQuery库前完成加载。
方式二：在线引用
也可以通过src书写网址引用在线的的jquery：
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//jquery代码块
</script>
jQuery 入口函数
$ (function () {
··· // 页面 DOM 元素加载完成的入口
})
$ (document).ready(function () {
··· // 页面 DOM 加载完成的入口
})
实例解析：
$ 符号是jQuery的别称，虽然我们能够使用jQuery来替代，但是明显的，相比较而言直接使用 $ 符号更加方便。$ 符号也是jQuery的顶级对象，即js中的window，将元素包装成jQuery对象就能够调用jQuery方法了。
提示：原生js获取的对象是dom对象，使用原生的js属性与方法。jQuery获取的元素是jQuery对象，只能使用jQuery方法。但是两者能够互相转换。
<div></div>
<script>
// DOM 对象
var div = document.querySelector("div");
$(div); // 转换成 jQuery 对象
// jQuery 对象
$("div");
$("div")[0]; // 转换成 DOM 对象
</script>
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本专栏接下来的章节，各位读者将学习更多有关选择器的语法。
常用的API
| 名称 | 用法 | 描述 |
|---|---|---|
| ID 选择器 | $(“#id”); | 获取指定 ID 的元素 |
| 全选选择器 | $(“*”); | 匹配所有元素 |
| 类选择器 | $(“.class”); | 获取同一类 class 的元素 |
| 标签选择器 | $(“div”); | 获取同一标签所有元素 |
| 并集选择器 | $(“div, p, li”); | 选取多个元素 |
| 交集选择器 | $(“li.current”); | 交集选择器 |
| 子代选择器 | $(“ul>li”); | 使用 > 号，获取子级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，包括子级、孙级等 |
隐式迭代
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代
简而言之就是说，给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作，方便我们调用。
jQuery 里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式：
$(function () {
// 隐式迭代，给所有的按钮都绑定了点击事件
$("li").click(function () {
// 当前的元素样式改变
$(this).css("background", "pink");
// 其余兄弟去掉背景颜色
$(this).siblings("li").css("background", "");
});
});
