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 相关文章推荐
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
angular *Ngif else用法详解
Dec 15 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php远程下载类分享
2016/04/13 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
python输出数学符号实例
2020/05/11 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
终止劳动合同协议书
2014/10/05 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers