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图片自动或手动切换示例附演示源码
Sep 04 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
javascript常用方法总结
2015/05/14 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JS实现普通轮播图特效
2020/01/01 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
Django实现简单的分页功能
2021/02/22 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
酒店员工检讨书
2014/02/18 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技