JQuery学习总结

这几天，学习了一下被称为前端最长寿的JS库，在学习了其原理之后，我更加佩服能写出JQ的人，其简单但又高效的特性让其成为了占有率最高的JS库，虽然其已经在时代的潮流中被逐渐替代，但是其优秀的理念还是值得我们学习的

​

当然在看了其源码之后，我心中只剩下深深的敬佩，感叹程序员先辈们的智慧。它的代码是那种看似很简单但是实际让你去写，或许你这辈子可能都没法优化的那么简洁高效。

下面是我对jQuery的总结👇。

---

1.jQuery 如何获取元素

jQuery的思想其实就是”选择网页中的某个元素，然后对其进行操作“。

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

$(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素

2.jQuery 的链式操作是怎样的

所谓链式操作就是在网页中选中元素后可以连续多次对其进行操作，并且将所有的操作都连写在一起，就像一个链条一样，例如:

　　$('div').find('h3').eq(2).html('Nature');

换个行他就是这个样子的👇

       $('div') .find('h3') .eq(2) .html('Nature');

由于JQuery所返回的都是jQuery对象所以，不同的操作可以连接起来，这也是jQuery最方便的地方

3.jQuery 如何创建元素

创建元素其实很简单，只要把新元素直接传入jQuery的构造函数就行了

代码如下：

　　$('<p>Hello</p>'); 　　$('<li class="new">new list item</li>'); 　　$('ul').append('<li>list item</li>');

4.jQuery 如何移动元素

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

假设我们选中了一个div元素，我们接下来需要把div元素放到p元素后面

第一种方法是insertAfter()，把div元素放到p元素后面：

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

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

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

5.jQuery 如何修改元素的属性

操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。

jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

　　$('h1').html(); //html()没有参数，表示取出h1的值 　　$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

 

jQuery 用到了哪些设计模式

不用new的构造函数，这个模式叫做重载

$（支持多种参数），这个模式叫做重载

用闭包隐藏细节，这个模式没有专门的名字

$div.text()即可读也可写，getter/setter

$.fn是$.prototype的别名，这叫别名

jQuery针对不同浏览器使用不同代码，这叫做适配器