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 urldecode URL解码的问题
Jan 08 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
javascript填充默认头像方法
Feb 22 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
php post换行的方法
2020/02/03 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python 登录网站详解及实例
2017/04/11 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
外科实习自我鉴定
2013/10/06 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
单位承诺书格式
2014/05/21 职场文书
群众路线个人整改措施
2014/10/24 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
公司开业致辞
2015/07/29 职场文书
《落花生》教学反思
2016/02/16 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
Nginx配置根据url参数重定向
2022/04/11 Servers