jQuery对象初始化的传参方式


Posted in Javascript onFebruary 26, 2015

jQuery对象初始化的传参方式包括:

1.$(DOMElement)
2.$('<h1>...</h1>'), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第二个参数context指定上下文,其中context参数可以为$(...), DOMElement
3.$(function() {}); <===> $(document).ready(function() { });
4.$({selector : '.class', context : context}) <===> $('.class', context)

jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function( selector, context, rootjQuery ) {
    var match, elem, ret, doc;
    // 处理$(""), $(null), $(undefined), $(false)这几种参数,直接返回this
    if ( !selector ) {
      return this;
    }
    // 当传参selector为DOM结点时,将context置为selector
    if ( selector.nodeType ) {
      this.context = this[0] = selector;
      this.length = 1;
      return this;
    }
    // Handle HTML strings
    // 当传入的selector参数为字符串时,
    if ( typeof selector === "string" ) {
      if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
        // Assume that strings that start and end with <> are HTML and skip the regex check
        match = [ null, selector, null ];
      } else {
        match = rquickExpr.exec( selector );
      }
      // Match html or make sure no context is specified for #id
      if ( match && (match[1] || !context) ) {
        // HANDLE: $(html) -> $(array)
        if ( match[1] ) {
          context = context instanceof jQuery ? context[0] : context;
          doc = ( context && context.nodeType ? context.ownerDocument || context : document );
          // scripts is true for back-compat
          selector = jQuery.parseHTML( match[1], doc, true );
          if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
            this.attr.call( selector, context, true );
          }
          return jQuery.merge( this, selector );
        // HANDLE: $(#id)
        } else {
          elem = document.getElementById( match[2] );
          // Check parentNode to catch when Blackberry 4.6 returns
          // nodes that are no longer in the document #6963
          if ( elem && elem.parentNode ) {
            // Handle the case where IE and Opera return items
            // by name instead of ID
            if ( elem.id !== match[2] ) {
              return rootjQuery.find( selector );
            }
            // Otherwise, we inject the element directly into the jQuery object
            this.length = 1;
            this[0] = elem;
          }
          this.context = document;
          this.selector = selector;
          return this;
        }
      // HANDLE: $(expr, $(...))
      } else if ( !context || context.jquery ) {
        return ( context || rootjQuery ).find( selector );
      // HANDLE: $(expr, context)
      // (which is just equivalent to: $(context).find(expr)
      } else {
        return this.constructor( context ).find( selector );
      }
    // HANDLE: $(function)
    // Shortcut for document ready
    // 当selector为function时相当于$(document).ready(selector);
    } else if ( jQuery.isFunction( selector ) ) {
      return rootjQuery.ready( selector );
    }
    // 当selector参数为{selector:'#id', context:document}之类时,重置属性selector和context
    if ( selector.selector !== undefined ) {
      this.selector = selector.selector;
      this.context = selector.context;
    }
    return jQuery.makeArray( selector, this );
  }
};

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
vuex实现简易计数器
Oct 27 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 #Javascript
JS实现很酷的水波文字特效实例
Feb 26 #Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 #Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 #Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 #Javascript
使用jQuery获得内容以及内容的属性
Feb 26 #Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 #Javascript
You might like
杏林同学录(七)
2006/10/09 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Python验证企业工商注册码
2015/10/25 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python zip函数打包元素实例解析
2019/12/11 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
值传递还是引用传递
2015/02/08 面试题
员工培训心得体会
2013/12/30 职场文书
参观考察邀请函范文
2014/01/29 职场文书
交通事故检查书范文
2014/01/30 职场文书
生日宴会策划方案
2014/06/03 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
老兵退伍标语
2014/10/07 职场文书
《秋思》教学反思
2016/02/23 职场文书