第一讲 Jquery 探秘-之基本原理.pptxVIP

第1讲Jquery 探秘 --之基本原理彭仁夔主要内容Jquery简单概述Jquery 原理演变Jquery代码结构主要内容Jquery简单概述Jquery 原理演变Jquery代码结构JQuery概述 jQuery是一个非常优秀的JS库，它剑走偏锋，为开发者提供了优美短小而精悍的类库。其使用简单，文档丰富，能极大地提高web系统的开发效率。但是众多开发者仅知道 jQuery的简单使用，却不明白jQuery的运行原理和内部机制，在项目开发中碰到问题根本得不到解决。Jquery名字解析 名字： jQuery= j + Queryjavascript+查询jQuery是查询的javascript类库查询是Jquery？回忆一下，我们在web开发中如何使用javascript ？1、采用getElementById在Dom文档中查找所需元素。2、对查找的元素取值或设定值，通过innerHTML获得元素内容或设定内容，进行事件的监听，对元素的宽高定位及显示进行操作等。结论： 使用javascript并没有想象中那么复杂，就是做两件事：一、查找Dom元素。二、操作Dom元素。查询和操作之间的关系1、查询是基础，是操作之源2、操作是查询的目的，不进行操作，查询无意义3、查询和操作相辅相成，不应该分离，是连贯的举个例子： Event.Observable(“click”,obj,fuction{}); Obj.beClick(function(){}); Jquery的统一 1、 jQuery从这里出发，一切一统jQuery对象。 2、查询是入口，操作是结果。 3、查询的对象直接进行操作。结论： Jquery高效的开发、简单方便操作和强大的查找功能令所有的框架都黯然失色。主要内容Jquery简单概述Jquery 原理演变Jquery代码结构Jquery原理演变jQuery的口号是最少的代码做最多的事情（Write less , do more），该口号名副其实，开发者使用jQuery选择器（selector），只需编写几行代码就能实现令人惊奇的效果。jQuery已经把JavaScript带到了一个更高的层次。但是这么灵活的框架是怎么框架出来的呢？下面我们通过对常用的间隔行着色进行一步步的扩展来演示当初/wiki/John_ResigJohn /wiki/John_ResigResig是如何去架构jQuery框架。ListView的实例ListView的实例当我们对比④和⑤处，我们会发现为了实现简单的隔行着色，需要堆上10多行雷同的代码，这些代码中真正有效的语句为style=background-color: #EAF1FB;该隔行着色功能，在Listview中，给开发者带来无限烦恼，因为它和④处代码相同，在开发过程，④处代码经常需要进行格式调整（如日期），代码出错调整，这样本来只需要改动一处，而现在需要改动两处。这样就会导致不是忘了④处的调整就是忘记④处的调整，极大地影响开发效率。如何消除这段重复代码呢？答案是采用JavaScript。JavaScript实现交替行着色写成EvenColor函数，把该函数放到模板页，隔行着色只要调用 EvenColor(“ct”)函数。对交替行进行自定义操作需求：对间隔行的字体颜色进行变红色？1、复制函数，修改背景着色的部分成字体着色。2、把两种情况综合作通用函数。（考虑更多情况）我们就得把操作的功能给剥离出来，让开发者自定义实现，需要改进EvenColor函数，来适应新的需求。怎么去实现呢？对于函数而言，自定义的东西通过参数实现。现在的参数是一个功能，功能只有函数才能去表达对交替行进行自定义操作对任意行进行自定义操作需求：列表中过期底色使用红色， 即将过期的字体使用红色？继续分解继续分解继续分解瓶颈所在瓶颈所在问题所在1、自定义的代码大多，没有减化工作量2、采用回调函数麻烦，不符合使用习惯如何解决—理想的方案面向对象的操作方法广为接受，更为自然。FoundEls . action()FoundEls是筛选结果集，action函数是结果集的行为自定义的回调函数如何转化为action函数呢?筛选结果对象化 action函数是对象的行为。前提：筛选结果集如何转化为对象。对象特性： 1、集合或容器。 2、每个行为操作针对集合中所有元素JS类数组的形式JS类数组的形式如何把元素加上集合中去查询或筛选的过程同样需要太烦通过Add函数进行单个或批量增加能不简化查询或筛选，并把结果直接加到集合中呢？直接加入元素简化查找从CSS 选择语法中找到思路简化查找筛选根据元素在集合中序号筛选。如指定序号（eq(n)），小于指定序号的所有元素（lt(n)）,大于指定序号的所有元素（gt(n)）。把集合某些特征的元素排除掉。如使用no