根据个人的基础不同,所以在学习看书、编写代码需要关注的侧重点不同。我写博客目的:一是想把自己在这个行业中成长的点滴记录下来;二是希望能够为和我遇到相同问题的人提供一些参考。~~重点是第一条,莫忘初衷 ~~从学渣变成学霸,路漫漫其修远兮唉!!!
...................................................以下是正文...............................................................
因为偶开始研究jQuery源码了,所以有些内容会刨根究底滴!啦啦啦...啦啦啦
jQuery对象是由jQuery()构造函数生成的。jQuery()构造函数里传入不同的参数,在jQuery源码里就会执行不同的逻辑程序。先不管源码是怎样工作的,这里只是介绍jQuery()函数根据传入的参数分类。
jQuery()构造函数传入字符串之后就生成一个jquery对象,即返回一个jQuery对象。
1.$(selectorStr [,context]),接受一个选择器,返回一个jQuery对象
假设传入的是选择器表达式(为什么要假设呢,因为对于传入的参数需要解析,然后你懂得),则需要遍历文档,查找与之对应的,并创建一个包含这些DOM元素引用的jQuery对象;如果没有元素与之匹配,则返回一个空的jQuery对象,其不包含任何元素。
这里的context选择器称为“上下文”,其格式有以下几种:
写法例如:alert($('p','#p_wrap').text()); //在遍历时缩小范围id
alert($('p','div').text()); //DOM元素
alert($('p', $('div')).text()); //jQuery对象
$('domElement', this) //用于当前指定的DOM元素范围内
2. $(html [, ownerDocument]),$(html, props)
如果传入的是html代码,jQuery就会用这些代码创建新的DOM元素,并创建一个包含这个元素引用的jQuery对象。
如果html代码是一个单独的标签,如$('<img/>')等,jQuery源码的实现是使用浏览器原生方法document.creatElement()创建一个DOM元素;
如果是比较复杂的html片段,jQuery源码实现使用浏览器的innerHtml机制创建DOM元素,这个过程由两个方法完成的。
若html代码是一个单独标签,第二个参数可以是props,props是一个包含了属性、事件的普通对象。在调用document.createElement()创建DOM元素后,props会被传给jQuery方法.attr(),然后由attr()负责把参数props中的属性、事件设置到新创建的元素上。
$('body').append($("<div></div>",{
"class":"test",
text:"Click Me",
click:function(){
$(this).toggleClass('test');
}
})
);
3.$(element),$(elementArray)
如果传入一个DOM元素或DOM元素数组,则把DOM元素封装到jQuery对象中并返回。这个功能常见于事件监听函数,即把关键字this引用的DOM元素封装为jQuery对象,然后在该jQuery对象上使用jQuery方法。
$('div.foo').click(function(){
$(this).toggleClass();
});
4. jquery(object)
传入一个普通的JavaScript对象,则把该对象封装到jQuery对象中并返回。
5.jQuery(callback)
如果传入一个函数,则在document上绑定一个ready事件监听函数,当DOM结构加载完成时执行。ready事件触发要早于load事件。ready事件并不是浏览器的原生事件。
6. jQuery (jQuery object)
如果传入一个jQuery对象,则创建该jQuery对象的一个副本并返回,副本与传入的jQuery对象引用完全相同的DOM元素。(这一点在上篇,幻灯片中有用到的哦)
7. jQuery ()
如果不传入任何参数,则返回一个空jQuery对象。