jQuery 设计思想

jQuery作为当今世界上使用量最高的前端库（截止今日，有超过90%的网站使用它），它是如何做到的？

一、非常骚气地获取元素

jQuery如何获取页面元素？$(要获取的元素)就好了，什么document.querySelector(),document.querySelectorAll()之类的通通都靠边站，这么长的单词，驼峰写法，程序员手一抖就会报错，反观jQuery，会CSS就能获取元素，比如说：

$("#test")：获取id为test的元素集

$(".red")：获取class为red的元素集

是不是要方便得多？

二、链式操作，一杆到底

假如PM有一个紧急需求，页面里某个部分加上红色的外边框，另一部分要蓝色的外边框，还有一部分要绿色的字体，一脸懵逼的你还在页面里面找元素，找到之后看着上百行的CSS一筹莫展：改哪里呢？要不要新加三个class？加在哪啊？加了以后会不会影响页面里的其他地方？

jQuery一句话搞定：

$('#sectionA').css('border', '1px solid red').next().css('border','1px solid blue').next().css('color', 'green')

能这么写的根本原因

为什么能这么写？因为jQuery的选取元素函数$()返回的并不是元素本身，而是一个能操作元素的jQuery对象，这个对象封装了各种方法（比如find(),css()等），很多方法返回值是this，也就是jQuery对象，这样就又能进行新的操作。。。这就是jQuery强大的链式操作的根本原因。

三、还有什么常用功能

创建、插入、移动元素

创建元素直接用jQuery构造函数就行了，比如$('<h1>Hello</h1>')

对于插入元素，我们来看下面的例子：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').append('<p>Test</p>'); 
$('<p>Test</p>').appendTo($('.inner')) // 与上一行意思一样，注意跟append()前后顺序的区别，其实就是英语字面意思的区别

在class为inner的元素尾部插入，结果为：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

对于append()和appendTo()除了顺序不同，还有有一点需要特别注意的是

A.append(B) 返回的是操作A的对象

B.append(A) 返回的是操作B的对象

这样对于链式操作来说就是本质的区别了

除了这两对方法之外，另外还有几种方法：

.insertAfter()和.after()：在现存元素的外部，从后面插入元素

.insertBefore()和.before()：在现存元素的外部，从前面插入元素

.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

设置或修改属性

$('#aaa').attr('alt', 'An image');

给id为aaa的元素设置或修改alt属性，属性值为"An image"

$('#bbb').attr({
  alt: 'An image',
  title: 'helloImage'
});

给id为bbb的元素同时设置或修改alt和title属性

设置CSS

$('#ccc').css("color","red");

设置元素颜色

$('#ddd').css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

一次设置多个CSS属性

四、动手实现jQuery

最后附上仿写的jQuery，注释很全，欢迎star✨，源码地址

jQuery设计思想 & 动手实现jQuery