jQuery学习笔记

2016.05.09

幂等 （idempotent、idempotence）是一个数学或计算机学概念，常见于抽象代数中。 　　 幂等有以下几种定义：
对于单目运算，如果一个运算对于在范围内的所有的一个数多次进行该运算所得的结果和进行一次该运算所得的结果是一样的，那么我们就称该运算是幂等的。比如绝对值运算就是一个例子，在实数集中，有abs(a) =abs(abs(a)) 。 　　对于双目运算，则要求当参与运算的两个值是等值的情况下，如果满足运算结果与参与运算的两个值相等，则称该运算幂等，如求两个数的最大值的函数，有在在实数集中幂等，即max(x,x)
= x 。
MVC：MVC本来是存在于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。
jQuery
          先说

DOM对象

，这个很简单，它定义了访问HTML文档对象的一套属性、方法和事件，没有JQuery前，我们通常直接操作DOM，比较熟悉的API有

getElementById

、

GetElementByTagName

等。

     
JQuery

，它在JQuery中有个别名

$

。通过上面章节的模拟代码（对应模拟代码中的JQuery)可知，其实就是一个函数，说得更细致点就是JQuery对象的工厂方法，它可以根据不同的入参来构造JQuery对象，如：

字符串表达式。如

$('span') 、$('span .class')、$('#id')

等

HTML 代码片段。如

$('<span>text</span>')

等

DOM元素。 如$(dom) //假设

var dom = document.getElementById('id');

JS Function 。 如

$(function(...) { ... } );

一般对象或数组。如

{ ｝

、

[ ... ]

等

          

JQuery对象

，非常重要的一个概念，类似于模拟代码中的JClass实例，通常是通过JQuery构造出的实例。在JQuery中，我们常常见到    
的JQuery对象是这样的：

$('#id') 、$('div')

等。关于JQuery对象我们要明白以下几点：

JQuery对象

继承了

JQuery原型

(

prototype

）的所有属性和方法

JQuery对象不是数组，但是采用了类似数组的结构来存储元素，而且存储的元素是通过选择器获取得到的DOM对象。参照上面章节的模拟代码(

JClass

实例对象），JQuery对象有个

length

属性，表示当前对象里存储DOM对象的个数，而这些通过选择获得的DOM对象，是采用下标为

0、1、2、3 ...

作为属性名来进行存储的。

          综合来说，

JQuery

、

JQuery对象

、

DOM对象

三者之间的关系是：

JQuery

是个工厂方法，用来构造

JQuery对象

； JQuery对象是个类数组对象，里面存储了

DOM对象

；
          个人理解：jQuery之所以能够使用链式操作，是因为jQuery对象是由jQuery来构造的，而其在jQuery内是用类似于数组的形式来存储元素，所谓的存储元素就是通过选择器获取到的DOM对象。因此使用链式操作的时候，也就是相当于调用类似于数组的index来进行定位。
                    它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。
　.insertAfter()和.after()：在现存元素的外部，从后面插入元素

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

　.appendTo()和.append()：在现存元素的内部，从后面插入元素

　.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
         
上面的每对方法，虽然最终显示的效果是一样的，但两者间最大的差别在于其所返回的值不一样。
删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用
jQuery设计思想

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"；
提供各种强大的过滤器，对结果集进行筛选，缩小选择结果；
就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来；
就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定；
提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置；
除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法；
把事件直接绑定在网页元素之上；

选择器性能对比：

最快的选择器：id选择器和元素标签选择器： $('#id')、 $('form')、 $('input')
较慢的选择器：class选择器（ Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。）
最慢的选择器：伪类选择器和属性选择器

父元素中选择子元素的速度排名：

$parent.find('.child')： .find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快；
$('.child', $parent)： 这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child')，这会导致一定的性能损失。它比最快的形式慢了5%-10%；
$('.child', $('#parent'))： jQuery内部会将这条语句转成$('#parent').find('.child')，比最快的形式慢了23%。
$parent.children('.child')： 这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%；
$('#parent > .child')： jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%；
$('#parent .child')： 这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%；

事件的委托处理（Event Delegation）： javascript的事件模型，采用"冒泡"模式，也就是说，子元素的事件会逐级向上"冒泡"，成为父元素的事件。