首页 > 技术文章 > jQuery构造函数7种参数

wjh0916 2015-11-26 14:27 原文

 根据个人的基础不同,所以在学习看书、编写代码需要关注的侧重点不同。我写博客目的:一是想把自己在这个行业中成长的点滴记录下来;二是希望能够为和我遇到相同问题的人提供一些参考。~~重点是第一条,莫忘初衷 ­­~~从学渣变成学霸,路漫漫其修远兮唉!!!

...................................................以下是正文...............................................................

  

   因为偶开始研究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对象。

推荐阅读