jquery前端基础知识

jquery前端基础知识Jquery前端培训材料 1. Jquery介绍 1.1简介 Jquery是一款革命性的JavaScript库，秉承着“以用为本”的设计理念。倡导“写更少的代码，做更多的事”（write less,do more），极大的提升了JavaScript开发体验。 jquery的核心特性可以总结为: 口兼容主流浏览器.支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+等，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。口具有独...

Jquery前端培训材料 1. Jquery介绍 1.1简介 Jquery是一款革命性的JavaScript库，秉承着“以用为本”的设计理念。倡导“写更少的代码，做更多的事”（write less,do more），极大的提升了JavaScript开发体验。 jquery的核心特性可以总结为: 口兼容主流浏览器.支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+等，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。口具有独特的链式语法和短小清晰的多功能接口。口具有高效灵活的CSS选择器。并且可对CSS选择器进行扩展口拥有便捷的插件扩展机制和丰富的插件 1.2总体架构 Jquery的模块可以分为3部分:入口模块、底层支持模块和功能模块，如图所示，在构造Jquery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jquery对象。选择器Sizzle是一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合。工具方法模块提供了一些编程辅助方法，用于简化对jquery对象. DOM元素数组对象字符串等的操作。 Jquery代码整体结构代码如下: (function (window, undefined) { //构建jQuery对象 var document = window.document, navigator = window.navigator, location = window.location; var jQuery = (function () { var jQuery = function (selector, context) { return new jQuery.fn.init(selector, context, rootjQuery); }, _jQuery = window.jQuery; //............................ //............................ return jQuery; //981行 })(); //工具方法:Utilities; //回调函数列表 Callbacks //异步队列 Deferred //浏览器功能测试 Support //数据缓存 Cache //属性操作 Attributes //队列 Queue //事件系统 Event //选择器 Sizzle //Dom遍历 Traversing //Dom操作 Manipulation //样式操作 CSS //异步请求 Ajax //动画 Effects //坐标 Offset. 尺寸Dimensions window.jQuery = window.$ = jQuery; })(window); 2. 核心模块 2.1 jquery对象从上面的代码中可以看出，jquery的所有代码都被包裹在一个立即执行的匿名表达式中，这种代码结构称为“自调用匿名函数”。当浏览器加载完jquery文件后，自调用匿名函数会立即开始执行，初始化jquery的各个模块。代码如下所示：代码如下: (function (window, undefined) { //构建jQuery对象 var jQuery = ...... .... ...... ..... window.jQuery = window.$ = jQuery; })(window); Jquery对象是一个类数组对象，含有连续的整型属性 length属性和大量的jquery方法。 Jquery对象由构造函数jquery()创建，$()是jquery()的缩写。 2.2构造函数jquery() 如果调用构造函数jquery()时传入的参数不同，创建jquery对象的逻辑也会不同。构造函数jquery()有7种用法，如图所示 Jquery构造方法代码：代码如下: var jQuery = (function() { //创建jQuery对象,给所有的jQuery方法提供统一的入口,避免繁琐难记 var jQuery = function( selector, context ) { //jQuery的构造对象,调用了jQuery.fn.init方法 //最后返回jQuery.fn.init的对象 return new jQuery.fn.init( selector, context, rootjQuery ); }, //定义jQuery的原型,jQuery.fn指向jQuery.prototype对象 jQuery.fn = jQuery.prototype = { //重新指定构造函数属性,因为默认指向jQuery.fn.init constructor: jQuery, init: function( selector, context, rootjQuery ) {.....}, ...... } ...... //返回jQuery变量,同时定义将全局变量window.jQuery和window.$指向jQuery return (window.jQuery = window.$ = jQuery); })(); 从以上jQuery的主体结构，我们可以看出，当首次执行完毕后，全局变量$和jQuery，都是指向了var jQuery=function（selector，context）{}这个函数，这里，就可以下个结论，$就是jQuery的别名，实际调用jQuery.fn.init。 var jQuery=function（selector，context）{}这个构造函数，为什么里面不直接返回jQuery的对象？而是调用另外一个方法呢？假如直接返回对象的话，每次使用jQuery对象，都要new jQuery() 这样的话，十分不方便，直接将new 这个操作封装在jQuery构造函数里面，简化了实例化的操作，同时，jQuery通过了jQuery或者$符号，统一了接口，方便代码的编写，化繁为简，提高效率。 jQuery.fn.init 方法代码： /*所有查找或生成元素的结果，封装为jQuery对象数组返回. */ init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // 1)处理 $(""), $(null), or $(undefined) //this指向jQuery对象 if ( !selector ) { return this; } // 2)处理 $(DOMElement) //selector.nodeType得知为DOM元素,如果是DOM元素直接放进jQuery对象数组中 if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } //3)body元素只出现一次, 优化查找 if ( selector === "body" && !context && document.body ) { this.context = document; this[0] = document.body; this.selector = "body"; this.length = 1; return this; } //4)如果是字符串,有六种情况, /* *(1)单个html元素不带属性对象字面量：createElement + merge *(2)单个html元素带属性对象字面量：createElement + attr + merge *(3)多个html元素：buildFragment + merge *(4)#id 不带context ：getElementById或者getElementById + Sizzle *(5)#id 带context ：Sizzle *(6)experession string ：Sizzle *(7)标签选择器：Sizzle（内置getElementByTagName） */ if ( typeof selector === "string" ) { // 判断是否为HTML string 还是 ID //如果是HTML strings match[1] 非空 //如果是ID strings match[1] 空 //quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/, match = quickExpr.exec( selector ); // 分析匹配结果，且当#id没有context参数，例如不是$('#xxx',xxx) if ( match && (match[1] || !context) ) { // 处理HTML字符 $(html) -> $(array) if ( match[1] ) { //如果context为jQuery对象，则取用第一个元素，即是context[0] context = context instanceof jQuery ? context[0] : context; //取得document文档 doc = (context ? context.ownerDocument || context : document); //判断是否为单个元素字符串 ret = rsingleTag.exec( selector ); //单个元素 if ( ret ) { //带对象属性字面量 //检查context是否为对象字面量,适用场景 //例如$('

', { 'id': 'test', 'class': 'test' }); if ( jQuery.isPlainObject( context ) ) { selector = [ document.createElement( ret[1] ) ]; jQuery.fn.attr.call( selector, context, true ); } else { //不带对象字面量 //例如$('

') selector = [ doc.createElement( ret[1] ) ]; } } else { //如果是多个元素字符串，例如$('

') ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes; } //将生成结果selector 合并到jQuery对象中 return jQuery.merge( this, selector ); // 处理$("#id"),例如$("#xxx"); } else { elem = document.getElementById( match[2] ); if ( elem && elem.parentNode ) { //处理IE和Opera ID 与 Name 混淆的bug,使用Sizzle查找 if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // 否则，简单插入jQuery对象数组 this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // 处理 $(expr, $(...))，使用Sizzle查找，例如$("div"),$('div > a'),$('div,a'),$('div:first') } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); // 处理: $(expr, context),例如$('div a');或者$('a','div')或者$('div').find('a'); } else { return this.constructor( context ).find( selector ); } //5)处理: $(function),设置DOM载的时候绑定的函数,等同于$().ready(){foo} } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } //6)处理：$($(...))，完成克隆jQuery对象的简单参数，具体由makeArray完成 if (selector.selector !== undefined) 完成加{ this.selector = selector.selector; this.context = selector.context; } //使用makeArray，为jQuery对象添加元素,例如$([1,2]); return jQuery.makeArray( selector, this ); }, 从源码可以看出，jQuery 通过各种条件判断和正则表达式，实现了各种参数的调用。 2.3 方法链式调用的实现 jQuery的核心理念是Write less,Do more(写的更少,做的更多)，那么链式方法的设计与这个核心理念不谋而合。那么从深层次考虑这种设计其实就是一种Internal DSL。 DSL是指Domain Specific Language，也就是用于描述和解决特定领域问题的语言。我们看一段链式代码： $('input[type="button"]') .eq(0).click(function() { alert('点击我!'); }).end().eq(1) .click(function() { $('input[type="button"]:eq(0)').trigger('click'); }).end().eq(2) .toggle(function() { $('.aa').hide('slow'); }, function() { $('.aa').show('slow'); }); 看这个代码的结构，我们或多或少都能猜到其含义： ? 找出type类型为button的input元素 ? 找到第一个按钮，并绑定click事件处理函数 ? 返回所有按钮，再找到第二个 ? 为第二个按钮绑定click事件处理函数 ? 为第三个按钮绑定toggle事件处理函数那么可见jQuery的Internal DSL形式带来的好处——编写代码时，让代码更贴近作者的思维模式；阅读代码时，让读者更容易理解代码的含义；应用DSL可以有效的提高系统的可维护性（缩小了实现模型和领域模型的距离，提高了实现的可读性）和灵活性，并且提供开发的效率。 jQuery的这种管道风格的DSL链式代码，总的来说： ? 节约JS代码； ? 所返回的都是同一个对象，可以提高代码的效率。通过简单扩展原型方法并通过return this的形式来实现跨浏览器的链式调用。利用JS下的简单工厂方法模式，来将所有对于同一个DOM对象的操作指定同一个实例。这个原理就超简单了,如下代码： aQuery().init().name() 分解： a = aQuery(); a.init() a.name() 把代码分解一下，很明显实现链式的基本条件就是要实例对象先创建好，调用自己的方法。 aQuery.prototype = { init: function() { return this; }, name: function() { return this } } 所以我们如果需要链式的处理，只需要在方法内部方法当前的这个实例对象this就可以了，因为返回当前实例的this，从而又可以访问自己的原型了，这样的就节省代码量，提高代码的效率，代码看起来更优雅。 2.4 jQuery的each迭代器 jQuery的each方法从使用上就要分2种情况： ? $.each()函数 ? $(selector).each() $.each()函数和$(selector).each()是不一样的，后者是专门用来遍历一个jQuery对象的，是为jQuery内部服务的。 $.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。（该值也可以通过访问this关键字得到，但是JavaScript始终将this值作为一个Object，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是迭代的对象。 jQuery的实例方法最终也是调用的静态方法，我们在之前就解释过jQuery的实例与原型方法共享的设计。其中each的实例方法如下：可见内部是直接调用的静态方法： each: function(callback, args) { return jQuery.each(this, callback, args); }, jQuery.each静态方法： each: function(obj, callback, args) { var value, i = 0, length = obj.length, isArray = isArraylike(obj); if (args) { if (isArray) { for (; i < length; i++) { value = callback.apply(obj[i], args); if (value === false) { break; } } } else { for (i in obj) { value = callback.apply(obj[i], args); if (value === false) { break; } } } 实现原理几乎一致，只是增加了对于参数的判断。对象用for in遍历，数组用for遍历。 jQuery可以是多个合集数组DOM，所以在处理的时候经常就针对每一个DOM都要单独处理，所以一般都需要调用this.each 方法，如下代码： dequeue: function( type ) { return this.each(function() { jQuery.dequeue( this, type ); }); }, 迭代器除了单纯的遍历，在jQuery内部的运用最多的就是接口的抽象合并，相同功能的代码功能合并处理：例如一： jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) { class2type[ "[object " + name + "]" ] = name.toLowerCase(); }); 例如二： jQuery.each({ mouseenter: "mouseover", mouseleave: "mouseout", pointerenter: "pointerover", pointerleave: "pointerout" }, function( orig, fix ) { //处理的代码 }); 可以看出上面代码方法，针对相同的功能，节约了大量的代码空间。 3. 选择器 3.1理解CSS选择器 jQuery的选择器和CSS的选择器非常相似，所以先从CSS选择器入手，了解下选择器的分类。CSS1-CSS3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际CSS开发中很少用到 CSS1-CSS3提供了非常多的选择器，总的来说我们可以分几大类：群组选择器：逗号“,” 简单选择器：ID、标签、类、属性、通配符关系选择器：孩子、后代、相邻、兄弟伪类选择器：动作伪类、目标伪类、语言伪类、状态伪类、结构伪类、取反伪类群组选择器用于分组合并多个处理的结构 selector1, selector2, selectorN 简单选择器"#" "." "[" "*" ，这些都有内置原生API的支持，不过存在兼容问题。属性选择器在CSS2.1中只有四种 [att] [att=val] [att~=val] [att|=val] 在CSS3中又增加了三种： [attr^=val] [attr$=val] [attr*=val] 当然除此之外jQuery还实现了自定义的属性选择器： [attribute!='value'] [attributeFilter1][attributeFilter2][attributeFilterN] 关系选择器关系选择器存在着关联，不能是单独存在的。 ancestor descendant parent > child prev + next prev ~ siblings 伪类这个细分就很多了，jQuery把这些伪类加工并扩展成几个大块：基本筛选器： eq get first lang It not odd root... 内容筛选器： contains empty has parent... 可见筛选器： hidden visible 子元素筛选器： first-child nth-child only-child... 表单： bottom checkbox foucs input text... 具体请查阅jQuery的API， 3.2 CSS的解析原理我们必须了解一个真相：为什么排版引擎解析 CSS 选择器时一定要从右往左析？ 1. HTML 经过解析生成 DOM Tree（这个我们比较熟悉）；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。Render Tree 中的元素（WebKit 中称为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。 2. 在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。 3. 因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。 4. 如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。 5. 逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。 6. 但因为匹配的情况远远低于不匹配的情况，所以逆向匹配带来的优势是巨大的。同时我们也能够看出，在选择器结尾加上「*」就大大降低了这种优势，这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因。简单的来说浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素

CSS选择器 div > div.Aaron p span.red{ color:red; } 而如果按从左到右的方式进行查找： 1. 先找到所有div节点 2. 第一个div节点内找到所有的子div,并且是 3. 然后再一次匹配p span.red等情况 4. 遇到不匹配的情况，就必须回溯到一开始搜索的div或者p节点，然后去搜索下个节点，重复这样的过程。这样的搜索过程对于一个只是匹配很少节点的选择器来说，效率是极低的，因为我们花费了大量的时间在回溯匹配不符合规则的节点。如果换个思路，我们一开始过滤出跟目标节点最符合的集合出来，再在这个集合进行搜索，大大降低了搜索空间。从右到左来解析选择器：则首先就查找到的元素。 Firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。紧接着我们判断这些节点中的前兄弟节点是否符合p这个规则，这样就又减少了集合的元素，只有符合当前的子规则才会匹配再上一条子规则。要知道DOM树是一个什么样的结构，一个元素可能有若干子元素，如果每一个都去判断一下显然性能太差。而一个子元素只有一个父元素，所以找起来非常方便。你可以看看CSS的选择器的设计，完全是为了优化从子元素找父元素而决定的。打个比如 p span.showing 你认为从一个p元素下面找到所有的span元素并判断是否有class showing快，还是找到所有的span元素判断是否有class showing并且包括一个p父元素快？所以浏览器解析CSS的引擎就是用这样的算法。 4.Sizzle引擎 4.1 Sizzle选择器 jQuery的定位就是一个DOM的操作库，那么可想而知选择器是一个至关重要的模块。Sizzle，作为一个独立全新的选择器引擎，出现在jQuery 1.3版本之后，并被John Resig作为一个开源的项目，可以用于其他框架：Mool、Dojo、YUI等。 jQuery是总入口，选择器支持6种方式的处理： 1.$(document) 2.$('

’) 3.$(function(){}) 4.$('input', $('div')) 5.$() 6.$($('.test')) jQuery这个选择器重构了几次后，现在逻辑结构相当的清晰了，一看大概就知道，不能不说jQuery的反模式非职责单一深受开发者喜欢，一个接口承载的职责越多内部处理就越复杂了，jQuery查询的对象是dom元素，查询到目标元素后，如何存储？ ? 查询的到结果储存到jQuery对象内部，由于查询的dom可能是单一元素，也可能是合集 ? jQuery内部应该要定义一个合集数组，用于存在选择后的dom元素 ? 当然啦，根据API，jQuery构建的不仅仅只是DOM元素，还有HTML字符串、Object、[] 等等… 看看入口的构造函数，如右侧代码： init: function(selector, context, rootjQuery) { //如右侧代码 } 源码缩进后的结构： ? 处理""、null、undefined、false、返回this、增加程序的健壮性 ? 处理字符串 ? 处理DOMElement，返回修改过后的实例对象this ? 处理$(function(){}) 4.2 Sizzle设计思路 sizzle受欢迎的原因有以下几点： 1.几乎支持大部分的css，还支持CSS3新的属性，同时又很高效。一般选择器的匹配模式（包括老版本的jQuery），都是一个顺序的思维方式: 在需要递进式匹配时，比如$("div a") 这样的匹配时，执行的操纵都是先匹配页面中div然后再匹配它的节点下的a标签，之后返回结果。我们知道CSS的匹配规则是从右边向左筛选，jQuery在Sizzle中延续了这样的算法，先搜寻页面中所有的a标签，在之后的操纵中再往后判定它的父节点（包括父节点以上）是否为div，一层一层往上过滤，最后返回该操纵序列。 sizzle只能说是大体如此，此外在1.8中引入了编译的概念，大大提高了重复的选择的效率。浏览器渲染原理：浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成，所以我们知道浏览器最终会将HTML文档（或者说页面）解析成一棵DOM树，如下代码将会翻译成以下的DOM：

Sizzle

如果想要操作到当中那个checkbox，我们需要有一种表述方式，使得通过这个表达式让浏览器知道我们是想要操作哪个DOM节点。这个表述方式就是CSS选择器，它是这样表示的： div > p + .aaron input[type="checkbox"] 表达的意思是：div底下的p的兄弟节点，该节点的class为aaron ，并且其属性type为checkbox。常见的选择器： #test表示id为test的DOM节点 .aaron 表示class为aaron的DOM节点 input表示节点名为input的DOM节点 div > p表示div底下的p的DOM节点 div + p表示div的兄弟DOM节点p 其实最终都是通过浏览器提供的接口实现的，由于低级浏览器并未提供这些高级点的接口，所以才有了Sizzle这个CSS选择器引擎。Sizzle引擎提供的接口跟document.querySelectorAll是一样的，其输入是一串选择器字符串，输出则是一个符合这个选择器规则的DOM节点列表，因此第一步骤是要分析这个输入的选择器。通过sizzle与高级API获取的结果是一致的： $('div > div.aaron input[name=ttt]') document.querySelectorAll(' div > div.aaron input[name=ttt]') 这个是相对复杂的CSS的组合了，涉及到了几种不同类型的选择器，除去querySelectorAll这种高级API，我们是无法直接获取到对应的节点引用的，因为Sizzle要实现这种查找也是非常复杂的，这里面就要涉及一系列的概念。 1．拆分选择器，把每一个选择器组成能够处理的最小化单元。 div.aaron这行代码原生的API不认识，但是div与.aaron都是有API能直接获取到的，所以拆分出后提供后面进行关联匹配筛选等等。这里sizzle就引入了词法分析器与种子合集。 2．Sizzle也是遵循从右到左开始查找，但是不仅仅是这样。浏览器提供的查找接口，基本靠谱的就只有三个： Expr.find = { 'ID' : context.getElementById, 'CLASS' : context.getElementsByClassName, 'TAG' : context.getElementsByTagName } 所以我们开始第一查找，从右到左边依次取出最小的单元选择器，通过ID、CLASS.TAG去查找，如果能找到就放到结果集中，这样第一时间定位到了最终的元素必须会存在的合集。 3．这样只能找出可能存在的合集，但是没有精确到具体的选择器上，所以还需要一个筛选的过程，这个过程也是最复杂的。 Sizzle从1.8后引入的“编译”的概念，用于提高性能。 4.3 Sizzle解析原理如何解析复杂的选择器？ div > div.Aaron input[name=ttt] 组合后的意思大概就是： 1. 选择所有div节点 2. 选择div的子元素之后的所有

并且的所有元素 3. 之后选择 div.Aaron元素内部的所有input并且属性[name=ttt]的元素就针对这个简单的结构，描述出整个解析的流程我们用组合语句，在高级浏览器上jquery都是通过querySelectorAll处理的，所以我们讨论的都是在低版本上的实现，伪类选择器，XML要放到最后，本文暂不涉及这方便的处理。需要用到的几个知识点: 1: CSS选择器的位置关系 2: CSS的浏览器实现的基本接口 3: CSS选择器从右到左扫描匹配 CSS选择器的位置关系其实不难发现，一个节点跟另一个节点有以下几种关系：祖宗和后代父亲和儿子临近兄弟普通兄弟在CSS选择器里边分别是用：空格、>、+、~。（其实还有一种关系：div.Aaron，中间没有空格表示了选取一个class为Aaron的div节点）

爷爷grandfather与孙子child1属于祖宗与后代关系（空格表达）父亲father与儿子child1属于父子关系，也算是祖先与后代关系（>表达）哥哥child1与弟弟child2属于临近兄弟关系（+表达）哥哥child1与弟弟child2，弟弟child3都属于普通兄弟关系（~表达）在Sizzle里有一个对象是记录跟选择器相关的属性以及操作：Expr。它有以下属性： relative = { ">": { dir: "parentNode", first: true }, " ": { dir: "parentNode" }, "+": { dir: "previousSibling", first: true }, "~": { dir: "previousSibling" } } 所以在Expr.relative里边定义了一个first属性，用来标识两个节点的“紧密”程度，例如父子关系和临近兄弟关系就是紧密的。在创建位置匹配器时，会根据first属性来匹配合适的节点 CSS的浏览器实现的基本接口除去querySelector,querySelectorAll HTML文档一共有这么四个API： 1、getElementById，上下文只能是HTML文档。 2、getElementsByName，上下文只能是HTML文档。 3、getElementsByTagName，上下文可以是HTML文档，XML文档及元素节点。 4、getElementsByClassName，上下文可以是HTML文档及元素节点。IE8还没有支持。所以要兼容的话sizzle最终只会有三种完全靠谱的可用 Expr.find = { 'ID' : context.getElementById, 'CLASS' : context.getElementsByClassName, 'TAG' : context.getElementsByTagName } 所以最终总的原理： 1、支持高级API 直接调用querySelectorAll 2、降级通过sizzle处理，那么内部会有一个规则把选择器分组groups，然后通过从右边往左边查找，加入编译函数的方式节约重复查找的性能问题 5. AJAX 介绍 5.1 Ajax简介 AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。 AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 可使因特网应用程序更小、更快，更友好。 AJAX 是一种独立于 Web 服务器软件的浏览器技术。AJAX 基于下列 Web 标准： JavaScript XML 在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。 5.2 XMLHttpRequest 对象 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。对象的创建 function createHttpRequest() { var httpRequest = null; //针对IE7,火狐,谷歌等其他浏览器 if (window.XMLHttpRequest) { httpRequest = new XMLHttpRequest(); //针对某些特定版本的mozillar浏览器的BUG进行修正 /* 如果来自服务器的响应没有 XML mime-type 头部，则一些版本的 Mozilla 浏览器不能正常运行。对于这种情况，httpRequest.overrideMimeType('text/xml'); 语句将覆盖发送给服务器的头部，强制 text/xml 作为 mime-type。 */ if (httpRequest.overrideMimeType) { httpRequest.overrideMimeType("text/xml"); } return httpRequest; } //针对IE5,IE6浏览器 if (window.ActiveXObject) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (ex) { alert("创建XMLHttpRequest对象失败!"); } } } return httpRequest; } 属性方法 5.3 ajax使用例子页面代码：

脚本代码：后台代码： @WebServlet("/Ajax") public class Ajax extends HttpServlet { private static final long serialVersionUID = 1L; public Ajax() { // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String useNmae = request.getParameter("useNmae"); String usePwd = request.getParameter("usePwd"); response.getWriter().write(useNmae +" : " + usePwd); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub } } 6. Ajax4JSF 6.1 介绍 Ajax4jsf 是一个添加Ajax功能到JSF项目中的开源框架,使用该框架不用写JS代码。Ajax4jsf 充分利用了JSF框架的优点,如: 生命周期, 验证, 转换的灵活性和受管理的静态和动态资源. 使用Ajax4jsf, 具有Ajax支持的富组件和高度可自定义的外观感觉可以很容易的与JSF结合起来. 工作原理 6.2 Ajax4JSF 组件库 a4j:support 在 UIComponent-based组件上添加ajax功能,使他们有JavaScript事件属性. 属性 a4j:commandLink 呈现一个Html 元素,当点击时的动作就象一个form提交一样. 属性 a4j:commandLink 是一个具有AJAX 支持的HTML 元素. 包含所有的a4j:support的主要功能, 还有它自己的onclick事件的Ajax请求和所有与a4j:Support组合的CommandLink特性. 其他组件请查看帮助手册！ 7. PrimeFaces PrimeFaces是一套开源的JSF组件套装，共有100多个支持AJAX的JSF组件。另外一个TouchFaces模块提供了用于移动web应用开发的UI工具。PrimeFaces的主要目标是为JSF创建终级组件集。 7.1 PrimeFaces使用声明性的AJAX Ajax 更新 Ajax化，使标准的JSF组件支持ajax 在任意DOM事件上的触发器 blur,keyup,click,change Ajax化远程调用通过JavaScript调用Java方法具体使用请查看帮助手册！

                    本文档为【jquery前端基础知识】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

jquery前端基础知识

你可能还喜欢