jQuery()可以传的参数有:
1.空(直接返回空对象)
2.字符串
3.原生dom
4.函数
5.其他
传入空
若传入了$(""), $(null), $(undefined), $(false)
中任何一个,均返回空对象
传入字符串
jQuery()可以匹配以下字符串情况:
//选择dom元素
$('#id') $('.className') $('div') $('ul > li') $('ul li')
$('li', 'ul')//匹配的是ul下的li,ul外的li不被匹配
$('li:eq(0)')
//创建dom元素
$('<li>asdf</li>') $('<p>') $('<img/>') $('<li>asdf')
区分字符串,获取匹配暂存量
字符串又分为几种情况,将不同的结果暂存在match中之后再区分处理:
1.标准html标签,如:<li>asdf</li>
,<p>
,<img />
匹配规则:以"<"开头,以 “>” 结尾,并且字符串总长度不少于3;
匹配暂存中间量:match = [ null, selector, null ];
2.非标准html标签或id选择器,如:<li>asdf
或者#demo
匹配规则: /^(?: \s* (<[\w\W]+>) [^>]* | #([\w-]+))$/,
- \s*:零个或多个空字符
- (<[\w\W]+>):<任意字符>
- [^>]*:不是”>“的零个或多个字符
- | :或者
- #([\w-]+)):#(单词/字母/-中的一个或多个),代表匹配id选择器
2.1 不标准html标签,以<li>asdf
为例子,
匹配暂存变量:match = ["<li>asdf", "<li>", undefined]
2.2 id选择器,以#demo
为例子,
匹配暂存变量:match= ["#demo", undefined, "demo"]
第一种和第2.1种属于创建标签,第2.2种属于寻找标签3.如果不是标准html标签,正则表达式又匹配不到的字符串,如:$('li:eq(0)')
匹配暂存:match = null
如传入:.demo
以暂存量为基础进一步处理
从上一小节获得的match,在这一步骤做处理,分成几种情况,分别处理不同字符串
1.match第一种处理的匹配条件:( match && ( match[ 1 ] || !context ) )
- match不为空
- match[1]不为空 或 match[1]和context均为空
匹配前两种字符串,”match[1]不为空“匹配第一种和第2.1种;”match[1]和context均为空“匹配第2.2种
在非标准html情况中,match[1]不为空代表正则表达式的第一个子表达式被匹配;
match[1]为空代表正则表达式的第一个子表达式没有匹配到,第二个子表达式才被匹配,即匹配的是id选择器(id命名默认使用唯一命名,不需要上下文)
1.1 当match不为空时
生成原生dom并封装成jQuery对象:parseHTML将标签字符串转成包裹了dom对象的类数组,不完整的标签中非标签部分,如<li>asdf
中的asdf不予理会,再由merge函数将这些对象合并,并返回
如:将<li></li>
转成类数组对象,再合并到this中返回
或者,如果用户传入的不仅仅是html标签,还传入了属性,如:
在match[1]是单独一个标签(不是<li></li><li></li>
),第二个参数是对象的情况下(默认这个对象存的是属性及属性值),遍历这个对象,当jQuery有添加这个属性的方法时,执行这个方法,如果没有,就用attr的方式添加到dom上去
this[match]的理解:this是当前jQuery对象,match是第二个参数传进来的对象中的某一个key值,相当于上一个截图里的html
{name: 'ccy', age:18, 'fn':function(){}}
this[‘fn’]即是执行这个函数
context[ match ]就是当前match对应的值,相当于上一个截图里的’asdf123’
为节约资源不另外多创建变量,match变量被复用,不是之前说的match的含义,仅是该循环里的局部变量
用在添加类名上,倒是挺好的
1.2 当match[1]为空时,是id选择器
用js获取这个dom,包裹成jQuery对象返回
2. match第二种处理操作,则是针对查找元素的
如果jQuery()的第二个参数传入的是空或不传,就直接在全局find这个标签;如果传入的是jQuery对象,就在这个对象下find
如果传入的是原生dom,就包裹成jQuery对象,然后在这个元素下find这个标签
jQuery源码中封装了sizzle,来实现find的功能
传入原生dom
包装成jQuery对象返回,把原生dom存在索引下,并有length属性
另:只有当selector为原生dom对象,selector.nodeType才为true
传入函数
立即执行这个函数(有ready用ready执行,没有ready直接执行)
传入其他
如用选择器选中了很多个标签(此时传入jQuery函数的是类数组,其中每一个元素是原生dom对象)、传入数组、传入对象
makeArray不仅能够将类数组转成数组,还可以合并类数组,将selector合并到this中并return this