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数据缓存系统实现代码
Oct 24 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
js自定义事件代码说明
2011/01/31 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python 写一个水果忍者游戏
2021/01/13 Python
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
讲座主持词
2014/03/20 职场文书
居委会工作总结2015
2015/05/18 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP