jquery简写形式_关于 jQuery 的功能

简述jQuery的核心思想：它提供一个函数，这个函数可以接受一个CSS的选择器selector，它就能获取这些元素，但是它不会返回这些元素给你；而是返回一个对象(jquery构造出来的对象，口头约定叫“api”），对象里面可能有些方法（函数），这些函数会操作你的元素。

一、jQuery 如何获取元素

jQuery获取元素的方法分为两种：jQuery选择器、jQuery遍历函数。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

二、jQuery 的链式操作是怎样的

当我们获得这些元素后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

const api1 = jQuery('.test')
api1.addClass('blue')
const api2 = api1.find('.child').addClass('red')
api1.addClass('green')

因为每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起，以上的代码就可以变成：

jQuery('.test')
    .find('.child')
    .addClass('red')
    .addClass('blue')

值得注意的是，为了节省内存，上文说到的“api”里分别有一个__proto__，链接到jQuery对象的prototype，变成共有属性。像javascript原生函数那样，可以直接使用就行了。

官方为prototype作了别名 jQuery.fn = Jquery.prototype 就是把api的原型指向$.fn，所以可以简写成：

$('.test')
    .find('.child')
    .addClass('red')
    .addClass('blue')

三、jQuery 如何移动元素

jQuery提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

　　$('div').insertAfter($('p'));

第二种方法是使用.after()，把p元素加到div元素前面：

　　$('p').after($('div'));

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

参考：阮一峰的jQuery设计思想