jQuery基础——高级技巧

首先，恭喜啊，看到这里，就说明你已经看完了整本jQuery入门了。

写在前面

参考文献：莫振杰《从0到1：jQuery快速上手》

这期主要讲讲一些高级技巧，其实很多内容都是对前面的补充而已。

因为是高级技巧，所以说本身内容是比较散的，下面叙述也是这样。

OK，咱们开始。

index()方法

index是啥？

在算法里，通常都是代指下标。

有下标的，通常都是数组，或者是伪数组。

所以说，这个index()方法其实就是获取当前JQ对象集合中的“指定元素”的索引值。

语法：$().index()

index()方法可以接受一个“JQ对象”或“DOM对象”作为参数。

不过，一般我们很少这么使用。

学习一个方法，第一个要想到的就是这个方法的使用场景是啥？

index()方法更多的是用在Tab选项卡，和图片轮播效果中的。

Tab选项卡中，怎么使用呢？

一般来说，我们都是给的当前选项卡加入一个特别的类名（Class类）——一般都是active，你也可以取名为current。

因为Tab栏和内容栏的位置是相对应的，所以说，我们一般都是给Tab栏添加上点击事件；接着在回调函数内部写逻辑方法：

let n = $(this).index()
$(".content li").removeClass("active").eq(n).addClass("active")

这句代码是啥意思呢？

先获取点击的Tab栏的位置，赋值给n（上面加粗内容）。

其中，content类表示内容栏，li表示其中的每一项。

removeClass()就是去掉active类名，让内容栏变为默认样式。

eq()作用就是获取索引为n的某个li元素。

addClass()就是给这个前面eq()选取到的li元素添加上类名。

是不是特别简单？

要是换成JS，该怎么实现？

链式调用

前面我们有讲过链式调用，不过没有细说。

其实链式调用在很多算法语言中都能见到，这算是一个非常基础的技巧了。

JS中也是可以的，比如说：

str.split().join()

这个就是JS中的链式调用了。

在JQ中，也是支持这种语法的。

使用链式调用有什么优势呢？

其实就几个：简化一点代码量，提高一下性能，以及看着更高级。

不过，我们也可以把链式调用分散到几行写，这样看着更加规整：

$()
  .removeClass("active")
  .eq(n)
  .addClass("active")

这么一看是不是很高级，不愧是高级技巧呢。

JQ对象与DOM对象

其实在一开始的时候，我就有说过JQ对象和DOM对象的区别了。

因为不说的话，很容易混淆，DOM对象和JQ对象完全是不一样的概念。

在同一句代码中，我们不能混用DOM对象和JQ对象。

换而言之，在同一句代码中，我们不能同时用JQ和JS。

但是在一个文件中，我们可以同时使用JQ和JS。

错误示例：

$('div').innerHTML = "这是一句话。"

这个就是很经典的混用。

$('div')这个获取到的是JQ对象，div是DOM对象不假，但是通过$()获取的是JQ对象。

innerHTML则是DOM对象的操作。

要是我硬要用DOM的方法呢？要怎么做？

将JQ对象转化为DOM对象，方式有两种：

下标和get()方法

语法：$()[n] $().get(n)

这两个方法其实核心都是一个——通过下标来选中某个DOM元素。

选中之后，就能够使用DOM对象的方法或属性了。

当然啦，这里面的参数n可以省略，表示转换为DOM元素的集合。

JQ CDN

CDN是啥？就不细说了，感兴趣的自己去看看。

CDN全称“Connect Delivery Network”，中文“内容分发网络”。

你可以理解为多主机，比如说华南区、华东区、华中区这些，就是不同的区域，每个区域都对应着不同的地区服务器。

比如说，你住上海，那你访问的一般都是华东区。

为什么要铺设这么多服务器？

就是为了让你的体验更好。

通常来说，我们在本地开发的时候，用的是JQ库文件，但是项目上线的时候，我们不可能用这种模式的，因此CDN就显得很重要了。

因为每多一个文件，就多一次HTTP访问，服务器压力就多一次。

要是访问人流量很大，那岂不是G了？

所以说，我们通常是使用CDN来配置JQ库文件的。

具体路径可以查看jQuery的官方网站，里面就提供了CDN的配置路径。

写在最后

书读百遍，其义自见。

我觉得，多读是有用的，但是还要多思考。

只有思考，你多读才是有效果的。

下次再见。