jQuery 简单入门

本文需要你：

有一定的 JavaScript 基础，了解 JavaScript 的变量、函数、对象、事件绑定等知识点。
具备一定的 HTML 和 CSS 基础，知道标签、选择器。

jQuery 初印象

jQuery 就是 JavaScript 和 Query，它就是辅助 JavaScript 开发的 js 类库，和众多受欢迎的库一样，它开源、免费。

核心思想：

write less, do more.

浅尝 jQuery 的风味

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function (){
            var $btnObj = $("#btnId");
            $btnObj.click(function (){
                alert("hello jQuery!");
            });
        });
    </script>
</head>
<body>
    <button id="btnId">按钮</button>
</body>
</html>

$ 是什么

$ 是 jQuery 的核心函数，能完成 jQuery 的核心功能。

传入参数为「函数」：
相当于调用 $(document).ready(function () {...})
$(function) 和 window.onload = function 有何区别？
- $(function) 相当于 $(document).ready(function () {...})，执行时间在浏览器加载完文档，创建好标签的数据结构后；window.onload = function 是原生的 js 函数，发生在页面加载完后（需要等待图片、iframe 等加载完毕）。因此，jQuery 风格绑定的函数永远在原生 js 风格绑定的函数之前执行。
- 此外，如果出现多次绑定，$(function) 会按顺序执行所有绑定的函数；而 window.onload = function 是赋值操作，会将前面绑定的函数覆盖掉不执行。
传入参数为「HTML字符串」：
会帮我们创建这个标签对象，并且可以调用 jQuery 提供的各种函数，插入某个位置、或进行某种操作。
传入参数为「选择器字符串」：
类似于 CSS 的选择器，例如$("#id")，$("TagName")，$(".ClassName")，可以得到对应 id，标签名，类型名的 jQuery 对象。jQuery 的选择器也允许使用联合选择、层级选择、过滤选择，此外，还可以根据内容、属性等进行过滤，详情参见Category: Selectors。
传入参入为「 DOM 对象」：
会将 DOM 对象转换为 jQuery 对象，可以调用 jQuery 对象的方法。

jQuery 对象和 DOM 对象

到底什么是「jQuery 对象」？

jQuery 对象本质就是 dom 对象数组 + jQuery 函数。

不能直接用 jQuery 对象直接操作 DOM 对象的属性和方法。

jQuery 对象和 DOM 对象的互相转换：

jQuery 对象转为 DOM 对象：使用下标访问
DOM 对象转为 jQuery 对象：使用 $ 函数

用 jQuery 对象函数操作 DOM 对象的属性

$(EXP).html()：操作 jQuery 对象中（所有）DOM 对象的 innerHTML 属性，可读可写，返回值为读取结果，传参为写入内容。
$(EXP).text()：操作 jQuery 对象中（所有）DOM 对象的 innerText 属性，可读可写，返回值为读取结果，传参为写入内容。
$(EXP).val()：操作 jQuery 对象中（所有）表单项 DOM 对象的 value 属性，可读可写，返回值为读取结果，传参为写入内容。
$(EXP).val([value1, value2, ...]) 还可以操作选中值，例如：
```
$(":radio").val(["radio2"]); // 选中 value = radio2 的单选框
$(":checkbox").val(["广州", "深圳"]); // 选中 value = '广州', '深圳' 的复选框
```
$(EXP).attr("属性名, 属性值")：操作 jQuery 对象中（所有）DOM 对象的属性值，可读可写，第一个参数为属性名，第二个参数（可选）为写入参数。不推荐操作 checked、readOnly、selected、disabled 等等，原因是可能返回 undefined。能操作自定义属性。
$(EXP).prop("属性名, 属性值")：操作 jQuery 对象中（所有）DOM 对象的属性值，可读可写，第一个参数为属性名，第二个参数（可选）为写入参数。推荐用于操作 checked、readOnly、selected、disabled 等等，不会返回 undefined，转而返回 false。不能操作自定义属性。

小练习：

实现一个完整的选择功能：

注意：在选择选项都被选中时，「全选/全不选」选择框应该相应地改变。

使用 jQuery 对象实现 DOM 对象的增删改

增

a.appendTo(b)：把 a 插入到 b 子元素末尾，成为 b 的最后一个子元素（如果 b 有多个 DOM 对象，就插入到每一个 DOM 对象的末尾）
a.prependTo(b)：把 a 插入到 b 子元素开头，成为 b 的第一个子元素（如果 b 有多个 DOM 对象，就插入到每一个 DOM 对象的末尾）
a.insertAfter(b)：把 a 插入到 b 子元素后面，成为 b 后第一个兄弟元素（如果 b 有多个 DOM 对象，就插入到每一个 DOM 对象的后面）
a.insertBefore(b)：把 a 插入到 b 子元素前面，成为 b 前第一个兄弟元素（如果 b 有多个 DOM 对象，就插入到每一个 DOM 对象的前面）

改

a.replaceWith(b)：用 b 替换 a（如果 a 有多个 DOM 对象，就替换掉第一个 DOM 对象）。
a.replaceAll(b)：用 a 替换 b（如果 b 有多个 DOM 对象，就替换掉每一个 DOM 对象）。

删

a.remove()：删除整个标签。
a.empty()：删除标签内的文本，保留标签本身。

使用 jQuery 对 CSS 样式进行操作

addClass("样式1 样式2 ...")：添加所给的样式。
removeClass("样式1 样式2 ...")：删除所给的样式（传入空值会删除全部样式）。
toggleClass("样式1 样式2 ...")：有就删除，没有就添加样式。
offset({top: 100, left: 100})：获取和设置元素的坐标。

使用 jQuery 操作 CSS 动画

show()：显示隐藏的元素。
hide()：隐藏显示的元素。
toggle()：显示、隐藏切换。
fadeIn()：淡入。
fadeOut()：淡出。
fadeTo()：淡化到某种程度。
fadeToggle()：切换淡入淡出。

以上函数（除了 fadeTo() ）可选两个参数：

第一个参数是动画执行的时间，单位为毫秒。
第二个参数是一个回调函数，动画执行后会执行这个函数。

fadeTo() 有三个参数，第一个是时间，第二个是动画结束时的透明度，第三个是动画执行后的回调函数。

jQuery 的事件

常用的事件函数

ready(function)：DOM 加载就绪时，绑定操作一个函数。
click(function)：可以绑定和触发（不传参数时）单击事件，类似的函数还有blur()、change()、submit()等等。
mouseover()：鼠标移入时触发。
mouseout()：鼠标移出时触发。
bind("事件1 事件2 ...", function)：可以一次性给元素绑定多个事件。
one("事件1 事件2 ...", function)：和 bind 类似，但是每个事件只能响应一次。
unbind("事件1 事件2 ...", function)：接触元素绑定的事件，传入空就解除所有绑定的事件。
live("事件1 事件2 ...", function)：绑定事件，可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是在绑定后动态创建出来的。

事件冒泡

事件的冒泡现象是指，父子元素同时监听同一个事件，当子元素的事件触发时，同一个事件也被传递到父元素的事件里去。

例如一个 div 里面有一个 span，它们都添加了 click 事件，那么当点击 span 的时候，不仅会触发 span 的事件，还会触发 div 的 click 事件，而这常常是我们不希望发生的。

消除事件冒泡：在子元素的事件末尾，返回 false，就可以消除事件冒泡。

事件参数

在原生 js 中，传入的参数 event 中包含了用户点击传递的各种信息，在 jQuery 中也类似，我们一般把这个参数命名为 event。常常使用 event.type 区分触发的事件类型，从而对不同类型的触发事件使用不同的策略。

$("#submit").click(function (event){
    console.log(event)
});

运行结果：