首先是从现实出发理清现实，在写代码之前先从实际分析，然后就开始写代码，写代码时要区分出不变的代码和会变化的代码，会变得代码会怎么变，使用者如何隔绝这种变化，所谓的隔绝这种变化就是不让调用者感知到内部的变化，只需要很简单的方式就能使用不必关心内部的逻辑，这样的话就要用到各种设计模式。不同的变化方式对应不同的设计模式。
那么设计模式又是什么呢？
设计模式（Design pattern） 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好。我们使用设计模式最终的目的是实现代码的 高内聚 和 低耦合。通俗一点讲的话 打比方面试官经常会问你如何让代码有健壮性。其实把代码中的变与不变分离，确保变化的部分灵活、不变的部分稳定，这样的封装变化就是代码健壮性的关键。而设计模式的出现，就是帮我们写出这样的代码。 设计模式就是解决编程里某类问题的通用模板，总结出来的代码套路就是设计模式。
用简单的话来说：
设计思想一般是指【为什么要这么做】
设计模式就是固定指23种大佬们总结出来的代码写法
而 jQuery 就是通过这样的思想来封装原生的DOM
『获取元素』
表达式可以是CSS选择器：
$(document)选择整个文档对象$('#myId')选择ID为myId的网页元素$('div.myClass')选择class为myClass的div元素$('input[name=first]')选择name属性等于first的input元素
也可以是jQuery特有的表达式
$('a:first')选择网页中第一个a元素$('tr:odd')选择表格的奇数行$('#myForm :input')选择表单中的input元素$('div:visible')选择可见的div元素$(ul).find('li:not(.name)')找到ul下面的所有li除了.name
『链式操作』
jq 的链式操作的原理 就是内部实例在调用方法的时候， 返回当前调用这个方法的实例对象this就可以了， 返回当前的this就可以继续访问自己的原型了，所返回的都是同一个对象
$(ul).find('li:not(.name)').addClass('red')
『创建元素』
DOM 原生方法：
- 创建元素：document.createElement
- 设置属性：setAttribute
- 添加文本：innerHTML
- 加入文档：appendChild 创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：
$('<p>Hello</p>');
append()方法在被选元素的结尾（仍然在内部）插入指定内容
$('ul').append('<li>list item</li>');
if (typeof selectorOrArrayOrTemplateOrDom === 'string' && selectorOrArrayOrTemplateOrDom.trim()[0] === "<") {
const template = document.createElement('template');
template.innerHTML = selectorOrArrayOrTemplateOrDom.trim();
elements = [template.content.firstChild] //创建的的元素
}
『移动元素』
.insertAfter()和.after()在现存元素的外部，从后面插入元素.insertBefore()和.before()在现存元素的外部，从前面插入元素.appendTo()和.append()在现存元素的内部，从后面插入元素.prependTo()和.prepend()在现存元素的内部，从前面插入元素
『修改元素的属性』
.addClass();//添加class
.hasClass();//确定节点是否拥有该clss
.removeClass();//移除所选的class
.css('conor','red');//获取/设置 集合第一个元素的css
.html();//获取/设置第一个节点的HTML内容
.attr('src','main.js');//获取/设置节点属性的值
.prop();//匹配第一个元素的属性;设置元素属性的值
『删除元素的属性』
.detach();//适用于节点移除后，还需要在重新插入原来的位置的功能
.remove();//适用于永久移除节点，同时会移除绑定的事件
.empty();//移除所有子节点
.unwrap();//移除父节点，不移除本身和兄弟节点
总结
jQuery的设计：
链式调用：每次都能返回操作中的元素API，让你再次直接 .addClass 方法使用
而且你使用 jQuery 的时候也不需要再去 new 就能创建一个对象
以及非常的方便的操作DOM方法
