jQuery()可以传的参数有:

1.空(直接返回空对象)

2.字符串

3.原生dom

4.函数

5.其他

jquery获取路由 jquery获取ul li的值_jquery获取路由

传入空

若传入了$(""), $(null), $(undefined), $(false)中任何一个,均返回空对象

jquery获取路由 jquery获取ul li的值_jquery_02

jquery获取路由 jquery获取ul li的值_jquery获取路由_03

传入字符串

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"]

jquery获取路由 jquery获取ul li的值_jQuery_04


jquery获取路由 jquery获取ul li的值_数组_05


第一种和第2.1种属于创建标签,第2.2种属于寻找标签3.如果不是标准html标签,正则表达式又匹配不到的字符串,如:$('li:eq(0)') 匹配暂存:match = null

如传入:.demo

jquery获取路由 jquery获取ul li的值_jquery_06

以暂存量为基础进一步处理

从上一小节获得的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函数将这些对象合并,并返回

jquery获取路由 jquery获取ul li的值_jquery获取路由_07


如:将<li></li>转成类数组对象,再合并到this中返回

jquery获取路由 jquery获取ul li的值_字符串_08

或者,如果用户传入的不仅仅是html标签,还传入了属性,如:

jquery获取路由 jquery获取ul li的值_jquery_09


在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的含义,仅是该循环里的局部变量

jquery获取路由 jquery获取ul li的值_jquery获取路由_10

jquery获取路由 jquery获取ul li的值_jquery获取路由_11


jquery获取路由 jquery获取ul li的值_数组_12


用在添加类名上,倒是挺好的

jquery获取路由 jquery获取ul li的值_jQuery_13


jquery获取路由 jquery获取ul li的值_字符串_14

1.2 当match[1]为空时,是id选择器

用js获取这个dom,包裹成jQuery对象返回

jquery获取路由 jquery获取ul li的值_jquery获取路由_15


2. match第二种处理操作,则是针对查找元素的

jquery获取路由 jquery获取ul li的值_jquery_16


如果jQuery()的第二个参数传入的是空或不传,就直接在全局find这个标签;如果传入的是jQuery对象,就在这个对象下find

如果传入的是原生dom,就包裹成jQuery对象,然后在这个元素下find这个标签

jQuery源码中封装了sizzle,来实现find的功能

jquery获取路由 jquery获取ul li的值_jQuery_17

传入原生dom

包装成jQuery对象返回,把原生dom存在索引下,并有length属性

jquery获取路由 jquery获取ul li的值_数组_18


另:只有当selector为原生dom对象,selector.nodeType才为true

传入函数

立即执行这个函数(有ready用ready执行,没有ready直接执行)

jquery获取路由 jquery获取ul li的值_数组_19

传入其他

如用选择器选中了很多个标签(此时传入jQuery函数的是类数组,其中每一个元素是原生dom对象)、传入数组、传入对象

jquery获取路由 jquery获取ul li的值_jquery_20


makeArray不仅能够将类数组转成数组,还可以合并类数组,将selector合并到this中并return this

jquery获取路由 jquery获取ul li的值_字符串_21