第 1 章 jQ起步
1.1 认识jQuery
1.2 jQuery初步体验
1.3 jQuery核心特性
第 2 章 jQ解密技术
2.1 jQuery框架设计概述
1 设计目标
选择和操作：选择什么、如何选择、怎么操作、操作什么
学习榜样：css选择器，XPath（很多高级XML应用的基础）
2 目标实现
属性、元素、内容、样式、事件、通信
选择、操作、扩展
执行效率、可用性、兼容性、实用性
2.2 jQuery原型技术分解
1 起源——原型继承
var $=jQuery=function(){}
jQuery.fn=jQuery.prototype={
jquery:"1.3.2",
siez:funciton(){}
}
// INCLUDE:2.2_.html
2 生命——返回实例
3 学步——分隔作用域
4 生长——跨域访问
5 成熟——选择器
6 延续——迭代器
7 延续——功能扩展
jQuery.extend=jQuery.fn.extend=function(obj){
for(var prop in obj){
this[prop]=obj[prop]
}
return this;
}
8 延续——参数处理
9 涅槃——名字空间
;(function(){
var
window=this,
undefined,
_jQuery=window.jQuery,
_$=window.$,
jQuery=window.jQuery=window.$=function(){},
isSimple=/^.[^:#\[\.,]*$/;
jQuery.fn=jQuery.prototype={
init:function () {
}
}
})()
23：23
2018.1.9 二 22：16
2.3 破解jQuery选择器接口
1 简单但很复杂的黑洞
2 盘根错节的逻辑关系
3 jquery构造器
init:function(selector,context){
selector=selector||document
if(selector.nodeType){
}
if(typeof selector=='string'){
//quickExpr=/ /
var match=quickExpr.exec(selector)
if(){}else if(){}
//6
return this.setArray()
}
}
4 生成DOM元素
jQuery.extend({
clean:function(element,context,fragment){
}
})
5 引用DOM元素
jQuery.each({
parent:function(elem){ return elem.parentNode},
parents:function(elem){return jQuery.dir(elem,"parentNode")},
next:function(elem){return jQuery.nth(elem,2,"nextSibling")},
prev:function(elem){return jQuery.nth(elem,2,"previousSibling")},
nextAll:function(elem){return jQuery.(elem,"nextSibling")},
prevAll:function(elem){return jQuery.(elem,)},
sibling:function(elem){return jQuery.(elem,)},
children:function(elem){return jQuery.sibling(elem.firstChild)},
contents:function(elem){return jQuery.(elem,)},
},function(name,fn){
jQuery.fn[name]=function(selector){
return this.pushStack(jQuery.unique(ret),name,selector)
}
})
jQuery.dir=funciton(elem,dir){}
jQuery.nth=funciton(elem,dir){}
jQuery.sibling=funciton(elem,dir){}
2.4 解析jQuery选择器引擎Sizzle
1 回顾css的选择器
2 解析jQuery选择器引擎的设计思路
3 选择器和过滤器
$(“div.red:nth-child(odd)[title=bar]#wrap p”)
p,div,.red,nth,title,#wrap
4 Sizzle引擎结构
1000，jQuery框架的1/4,独立空间，外界无法访问
一个构造器Sizzle;三个核心函数matches,find,filter;一个表达对象selectors
jQuery.find=Sizzle
jQuery.filter=Sizzle.filter
jQuery.expr=Sizzle.selectors
jQuery.expr[“:”]=jQuery.expr.filters
5 Sizzle 构造器
6 Sizzle 选择器
7 Sizzle 过滤器
主要两部分：过滤函数-jQuery.filter；过滤表达式对象
8 jquery 选择器应用优化
id>tag>class 但，实际开发中class频率最高
- 多用id
- 少直接用class 用复合tag.class(当然应摒除冗余部分，对不必要的复合表达式简化：#id2#id1、tag#id1
- 多用父子，少用嵌套 parent>child代替parent child
- 缓存jQuery对象
2.5 类数组
1 定义类数组
makeArray：把类数组对象的元素全部推进数组对象
setArray：把类数组对象的元素全部推进当前jQuery对象中
pushStack：把类数组对象的元素全部推进当前jQuery对象中(新建了一个jQuery对象，有保存了对原对象的引用)2 操作类数组
定位、查找、复制、删除等。注意：由于类数组的操作对象是集合，所以这与类数组包含的DOM元素操作是两个不同的概念 - 定位元素
get(),index();get(index),eq(index)
其他函数：inArray - 复制元素
slice()
其他函数：merge(first,second) - 添加元素
add() - 过滤元素
filter(selector),not(selector)
filter:jQuery.grep(elems,callback,inv)+jQuery.multiFilter(expr,elemes,not)
not建立在filter之上，执行效率更高 - 映射元素
each(),map()
