jQuery实战小知识

一.基础篇

1.jQuery通常对任何需要执行操作（除了那些微不足道的JavaScript操作）的页面都非常有用，而且也高度关注如何帮助页面开发者在页面中使用不唐突的JavaScript。采用jQuery的解决方案，把行为从结构中分离出来，正如把样式从结构中分离出来一样，他能使我们更好地组织页面，增加代码的灵活性。

         尽管事实上jQuery仅仅向JavaScript命名空间引入了两个新的命名（jQuery函数和其别名$），它却通过使jQuery函数高度多功能化，以及根据传入的参数调整执行的操作来提供大量的实用功能。

2.jQuery（）有如下用途：

        □通过包装器方法选择和包装将要操作的DOM元素；

        □为全局实用函数提供命名空间；

        □从HTML标记创建DOM元素；

        □创建在DOM就绪后执行的代码。

3.jQuery在页面上表现出色，它不仅尽量减少了对全局JavaScript命名空间的占用，而且提供了官方方法，以尽可能减少当冲突依然存在时对命名空间的占用问题，也就是当页面上另一个库（比如Protorpe）也要求使用$名称的时候。

 

二.选择要操作的元素篇

1. jQuery提供了通用而强大的选择器集合（模拟CSS选择器），以便使用简洁而强大的语法来识别页面文档中的元素。这些选择器包含目前大多数现代浏览器都支持的CSS3语法。

2.jQuery提供的另一个重要功能是，使用HTML片段动态地创建新元素，以便创建或扩大包装集。可以将这些孤立的元素连同包装集中的其他元素一起操作，最终添加到页面文档的某些部分中。

3.jQuery提供了一组健壮的方法用来调整包装集，以提炼集合的内容，可以在创建之后立即应用这些方法，也可以中途在一组方法链中应用这些方法。对现有包装集应用过滤条件也可以轻松地创建新的包装集。

4.jQuery提供了大量工具来确保你可以轻松而精确地找出期望操作的页面元素。

 

三.用jQuery为页面添加活力篇

1.自定义特性与HTML

           在HTML4中，使用非标准的特性名称（比如data-custom）虽然是一个常用的技巧，但是却会导致标记是无效的，并且不会通过官方的验证测试。如果你比较关注验证的结果，那就要谨慎行事了。

           另一方面，HTML5正式承认并允许这样的自定义特性，只要自定义特性的名称以字符串data-为前缀即可。根据HTML5的规则，任何遵循此命名约定的特性都是有效的；而不遵循此约定的还是无效的。attr（name, value）

2.$(whatever).attr("disabled",  "enabled");使用这种方式来禁用提交按钮（或多个按钮）不能免除服务器端代码的职责：防止双重提交或执行任何其他类型的验证。为客户端代码添加这种功能可以提高页面对最终用户的友好度，而且能帮助阻止正常情况下的双重提交问题。但是这不能阻止攻击或者其他黑客行为，因此服务器端代码必须继续保持警惕。

3.position(),元素的偏移父元素是拥有显示定位规则relative或absolute的最近的祖先元素。

 

四.事件处理篇

1.在DOM第0级事件模型中，事件处理器中的几乎每个步骤都需要使用浏览器特定检测，目的是为了确定下一步的动作。

2.DOM第0级事件模型有一个严重的缺点，因为存储在属性上的函数引用充当了事件处理器，所以对于任意指定的事件模型，一个元素的每次只能注册一个事件处理器。

3.DOM第2级事件模型被设计来处理这类问题。DOM第2级事件处理器（也称为监听器）是通过元素方法创建的，而不是把函数引用赋值给元素属性。每个元素都定义有一个名为addEvenListener()的方法，用来附加事件处理器（监听器）到元素上。addEvenListener（eventType，listener，useCapture）。

4.在DOM第2级事件处理模型中，当触发一个事件时，事件首先从DOM树的根部向下传播到目标元素，然后再次从目标元素向上传播到DOM树根部。前一阶段（根到目标）称为捕获阶段，后一个阶段（目标到根）称为冒泡阶段。

        无论何种原因，都可以通过Event实例提供的机制来阻止事件向更高层传播。对于标准兼容的浏览器，可以调用Event实例的stopPropagation（）方法来阻止事件向更高层的祖先元素传播。

5.jQuery中自定义事件能力是观察者模式的一个有限制的示例，有时也被称为发布/订阅模式。通过在元素上创建特定事件的处理器来订阅元素的该事件，然后当该事件发布（被触发）时，在事件层次结构中，任何已订阅的元素都会自动调用它们的处理器。这样就可以通过减少必要的耦合来大大降低代码的复杂度。之所以称其为观察者模式的有限制的示例，是因为订阅者局限于发布者祖先层次结构中的元素（而不是DOM中的任意元素）。

6.传统的基本事件模型，也被非正式地称为DOM第0级事件模型，在声明事件监听器时享有某种程度上独立于浏览器的操作，但是监听器函数的实现需要依赖于浏览器的不同代码来处理Even实例中的差异。这个事件模型可能是页面开发者最熟悉的，它通过将监听器函数的引用赋值给元素的属性（例如onclick属性）来创建DOM元素的事件监听器。使用这个模型虽然简单，但是却限制了在特定的DOM元素上的任何一个事件类型都只能有一个监听器。

7.使用更加先进和标准化的DOM第2级事件模型可以来避免这方面的不足，在这个模型中我们使用一个API将处理器绑定到其事件类型和DOM元素上。尽管这个模型很通用，但是它仅支持标准兼容的浏览器，例如：Firefox，Safari，Camino以及Opera。

8.对于IE浏览器，即使直到IE8还是使用基于API的专有事件模型，它提供了DOM第2级事件模型的功能的子集。

9.jQuery提供了通用的bind()方法用来在元素上建立任意类型的事件监听器，以及特定事件的便捷方法，例如change()和click()。这些方法以独立于浏览器的方式运行，并且使用在事件监听事件中最常用的标准属性和方法来标准化传入的Even示例。

10.jQuery也提供了删除事件处理器或者在脚本控制下触发这些处理器的方法，并且还定义了一些更高级的方法来尽可能简单地实现普通的事件处理任务。

11.jQuery还提供了live()方法，为可能还尚不存在的元素预先指定处理器，而且允许我们指定自定义方法来轻松地注册将会在自定义事件发布时调用的处理器。

 

五.用动画和特效装扮页面篇

1.当说到某个元素被从显示器中删除时（在这里，以及其余关于特效的讨论中），意思是该元素不再被浏览器的布局管理器考虑在内，这是通过设置该元素的CSS的display样式属性为none来实现的。这并不意味着元素从DOM树中删除，没有哪个特效可以将元素从DOM中删除。

2.jQuery创建自定义动画的animate()方法。

3.当不带参数调用show()和hide（）方法时，会立即从显示器上显示或隐藏元素，没有任何动画。可以通过向这些方法传入控制动画速度的参数以及提供一个可选的，在动画完成时执行的回调来执行显示或隐藏元素的动画版本。toggle（）方法用来切换元素的隐藏或显示状态。

4.另外一组包装器方法（fadeOut（）和fadeIn（））通过调整元素的不透明度来隐藏或显示元素，从而在显示器上删除或显示元素。第三者方法（fadeTo（））以动画方式改变包装元素的不透明度，但不会从显示器上删除元素。

5.最后一组内置的3个特性动画通过调整包装元素的垂直高度来隐藏或显示它们：slideUp（），slideDown（）以及slideToggle（）。

6.jQuery提供了animate（）方法以便我们创建自定义动画。可以使用这个方法对任何接受数字值的CSS样式属性应用动画，最常用的是元素的不透明度，位置和尺寸。

 

 六.DOM无关的jQuery实用函数

1.$.trim(value)删除传入的字符串开头和结尾处的空白字符，并返回修改后的结果。

2.可以使用each()方法来遍历数组，但是相比each()方法，$.each()函数有略微的性能优势。记住，如果你非常关心性能问题，那就需要使用老式的for循环来获得最佳的性能。

3.$.map(array, callback)遍历传入的数组，为数组的每一项调用回调函数，并将函数调用的返回值收集到一个新的数组中。

4.$.makeArray（object）将传入的类似数组的对象转换为JavaScript数组。

5.$.unique（array）向其传入DOM元素的数组，则返回由原始数组中不重复的元素组成的数组。

6.$.merge（array1，array2）将第二个数组中的值合并到第一个数组中并返回结果。这个操作会修改第一个数组并将其作为结果返回。

7.如果你是“面向对象JavaScript"的发烧友，那就毫无疑问你不仅熟悉如何扩展对象的实例，而且熟悉如何通过对象构造器的prototype属性来扩展创建对象的类。$.extend（）可以用来扩展prototype以实现基于构造器的继承，也可以用来扩展现有的对象实例从而实现基于对象的继承（jQuery在其内部也是这样实现的）。

8.$.contains(container，containee)测试一个元素是否在DOM层次结构中包含在另一个元素内部。

9.$.noop()什么都不做

10.由于大部分的JSON也是有效的JavaScript表达式语法，于是JavaScript的eval（）函数早就被用来将JSON字符串转换为等价的JavaScript对象。现代浏览器提供了JSON.parse()来解释JSON，但是并非每个开发者都能奢望他们的所有用户都在使用最新的浏览器。jQuery深知这一点，为此提供了$.parseJSON()实用函数。$.parseJSON(json)解析传入的JSON字符串，返回其计算值。

11.我们看到jQuery如何通过$.support对象上的各种标志来告诉我们当前浏览器的功能。当需要求助于浏览器检测来了解$.support无法提供的，浏览器在功能和运行上的差异时，$.browser提供的一组标志能够帮助我们确定当前显示页面的浏览器家族。当不可能按照独立于浏览器的方式编写代码时，并且首选的特征检测方法行不通时，才应该考虑浏览器检测这个最后的手段。

12.jQuery认识到网页开发者有时可能需要同时使用jQuery和其他库，为此提供了$.noConflict()用来允许其他库使用$别名。在调用此函数后，所有的jQuery操作必须使用jQuery名称而不能使用$。

13.$.trim()的存在是为了填补原生JavaScript的String类的一个空白，它用来修剪字符串开始和结尾处的空白字符。

14.jQuery也提供了一组非常有用的函数用来操作数组中的数据集。$.array()可以很方便地遍历数组中的每一项。$.grep()允许我们使用任何筛选条件来筛选源数组中的数据，从而创建新的数组。$.map（）允许我们在源数组上轻松使用自定义的转换函数，从而产生包含转换后的值的新数组。

15.我们可以使用$.makeArray()将NodeList实例转换为JavaScript数组，可以使用$.inArray()来测试一个值是否在数组中，甚至可以通过$.isArray()来测试某个值是否是数组，可以使用$.isFunction()来测试一个值是否为函数。

16.jQuery通过$.param()来创建正确格式化和编码的查询字符串。

17.jQuery提供了$.extend()函数用来合并对象，甚至可以用来模拟某种继承架构。这个函数可以将多个源对象的属性合并到目标对象中。

18.$.proxy()方法用来预绑定一个对象，随后用于事件处理器调用的函数上下文，$.noop()函数什么也不做。

19.当我们需要动态加载脚本文件的时候，可以使用jQuery定义的$.getScript()来在页面生命周期的任何时候加载和执行脚本文件，甚至是在页面所在域之外其他域的脚本。

 

七.扩展jQuery篇

1.为实用函数添加命名空间

           如果想确保自己的实用函数不会和其他人的实用函数冲突，可以通过在$上创建命名空间对象来为函数添加命名空间，反过来说这个命名空间充当了函数的拥有者。例如：如果我们想将所有的日期格式化函数放在名为jQiaDateFormater的命名空间中，可以这么做：$.jQiaDateFormatter = { }; $.jQiaDateFormatter.toFixedWidth = function( value, length, fill )  {...};这确保了像toFixedWidth()这样的函数永远不会和另一个名字类似的函数冲突。

2.把自己的代码编写为jQuery扩展有许多优点。这不仅可以在Web应用中保持代码的一致性（无论使用的是jQuery  API还是自定义API），还可以使我们的代码充分利用jQuery提供的所有强大功能。

3.遵循一些命名规则可以帮助避免文件名之间的命名冲突，也可以避免页面重新指定$时可能会产生的问题。

4.创建新的实用函数就像在$上创建新的函数属性一样简单，而新的包装器方法可以简单地创建为$.fn的属性。

 

八.使用Ajax与服务器通信篇

1.jQuery的Ajax实现没有使用IE浏览器的包装器，因为不正确的实现会导致引用问题。相反，jQuery在ActiveX对象可用的时候使用它。这对我们来说是好消息。通过使用jQuery来满足对Ajax需求，就可以知道最好的实践已经被研究出来并将被应用到实际。

2.GET请求-----意图是幂等的：相同的GET操作无论进行一次，两次还是三次操作，返回的结果应该是完全相同的（假设没有其他的力量在起作用来改变服务器的状态）。

3.POST请求-----可以是非幂等的：发送到服务器的数据可以用来改变应用程序的模型状态。例如，添加或者更新数据库中的记录或者从服务器删除信息。

4.浏览器会根据使用的HTTP方法来决定是否缓存，GET请求非常容易被缓存。请使用正确的HTTP方法以确保不会违背浏览器或者服务器对请求意图的期望。这只是对REST式理论领域的一个初探，在REST式理论中也可以使用其他的HTTP方法，比如PUT和DELECT。

5.当XML文档从服务器返回时，它会被自动解析并且使结果DOM可供回调函数使用。当XML显得大材小用或者不适合作为数据传输机制时，一般会使用JSON来代替它。这样选择的一个原因是JSON非常容易融入客户端脚本。jQuery可以使这个操作更容易。如果我们知道响应主体将会是JSON的时候，调用$.getJSON()实用函数可以自动地解析返回的JSON字符串，使结果JavaScript数据项可供该函数的回调函数使用。

6.对于加载HTML内容到DOM元素，load()方法提供了一种简单的方式来从服务器获取内容并使之成为任意包装集元素的内容。使用GET还是使用POST方法取决于如何提供传递到服务器的参数数据。

7.当需要GET方法时，jQuery提供了实用函数$.get()和$.getJSON()；如果从服务器返回JSON数据，那后者会很有用。为了强制发起POST方法，可以使用$.post()实用函数。

8.如果需要最大的灵活性，那么可以使用带有丰富分类选项的$.ajax()实用函数，它允许我们控制Ajax请求的大部分细节。jQuery中所有其他的Ajax特征都使用这个函数的服务来提供自己的功能。

9.为了使得管理大量的选项不那么繁琐，jQuery提供了$.ajaxSetup()实用函数，允许为$.ajax（）函数（包括使用$.ajax()服务的所有其他的Ajax函数）的任何常用选项设置默认值。

10.为了完善Ajax工具集，jQuery也允许我们通过在各个阶段触发Ajax事件来监听Ajax请求的过程，并允许建立处理器来监听这些事件。我们可以对这些处理器使用bind()方法，也可以使用以下便捷方法：ajaxStart(),   ajaxSend(),    ajaxSuccess(),    ajaxError(),     ajaxComplete()    以及ajaxStop()。

 

九.jQuery UI篇

 

十.JavaScript必知知识篇

1.大多数面向对象（简称OO）语言都定义了某种基本的Object对象类型，其他所有的对象都源于这个对象类型。在JavaScript中，基本的Object对象确实是作为所有其他对象的基础，但是这种比较也仅此而已。从基本层面上看，JavaScript的Object对象与其他大部分的OO语言所定义的基本对象毫无相通之处。

2.新的对象由new操作符和与其相配的Object构造器来产生。如：var shinyAndNew = new Object();

3.就像服务器端对象那样，JavaScript对象也可以包含数据和方法。不同于那些服务器端的对象，这些元素不是为对象预先声明的，我们可以在需要的时候动态地创建它们。如：var  ride = new  Object();

        ride.make = "Yamaba";

        ride.model = "V-Star  Silverrado  1100";

        ride.year = 2015;

        ride.purchased = new Date( 2015, 6, 1);

在这里我们创建了一个新的Object实例，并且把它赋值给ride变量。然后用一些不同类型的属性来填充这个变量。我们知道JavaScript  Object的实例就是一组属性集，每个属性都由名称和值构成。属性的名称是字符串，属性值可以是任何JavaScript对象，可以是Number，String，Date，Array，基本的Object，也可以是任何其他的JavaScript对象类型（包括函数）。属性不局限于String或Number的类型。一个对象属性可以是另一个Object实例，这个实例又包含其自己的属性集，而属性集中也可以包含拥有属性的对象，以此类推。

4.通用的属性引用操作符的格式：object[propertyNameExpression]，如下面的等价引用

         ride.make

         ride['make']

         ride['m'+'a'+'k'+'e']

         var p = 'make';   ride[p];

5.从技术上而言，JSON无法表示日期值，主要是因为JavaScript本身没有任何一种日期字面值。当在脚本中使用JSON时，通常会使用Date构造器来表示日期值。如果用作交换格式使用时，日期常常被表示为包含ISO 8601格式的字符串或表示日期值的数字（Date.getTime()返回的毫秒数）。同样也要注意，当把JSON用作交换格式使用时，必须遵守一些严格的规则，比如引用属性的名称。

6.在JavaScript中的闭包，其创建方式都是隐式的，而不像其他一些支持闭包的语言那样需要显示的语法。这是一把双刃剑，一方面使得创建闭包很容易，但另一方面这使得很难在代码中发现闭包。无意创建的闭包可能会带来意料之外的结果。例如，循环引用可能导致内存泄露。内存泄露的典型示例就是创建向后引用闭包中变量的DOM元素，这会阻止那些变量的回收。

7.函数在JavaScript中是一等公民，能够以类似于其他对象类型的方式来进行声明和引用。可以使用字面值表示法来声明函数，将它们保存在变量和对象属性中，甚至还可以将它们作为回调函数，将它们作为参数来传入其他函数。

8.函数上下文这个术语描述的是在函数调用中this指针所引用的对象。尽管通过将对象设置为函数上下文，就可以像操作对象方法那样来操作函数，的是函数并没有被声明为任何单个对象的方法。调用方式（可由调用者显示地控制）决定了调用的函数上下文。

9.函数声明及其环境形成闭包的方式。在后续调用函数时，这个闭包允许函数访问成为闭包一部分的局部变量。