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同时提交多个Web表单的方法
Dec 26 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
React如何创建组件
Jun 27 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
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php实现图片缩略图的方法
2016/03/29 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
在Python中COM口的调用方法
2019/07/03 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python3.9新特性详解
2020/10/10 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
大学活动总结范文
2014/04/29 职场文书
李敖北大演讲稿
2014/05/24 职场文书
本科毕业生自荐信
2014/05/26 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL