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 相关文章推荐
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
js post提交调用方法
Feb 12 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
JavaScript流程控制(分支)
Dec 06 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 google或baidu分页代码
2009/11/26 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
node.js实现端口转发
2016/04/14 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python实现简单ftp客户端的方法
2015/06/28 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
拉丁舞学习者的自我评价
2013/10/27 职场文书
学院领导推荐信
2013/10/30 职场文书
大学生创业计划书的用途
2014/01/08 职场文书
面试后的英文感谢信
2014/02/01 职场文书
企业出纳岗位职责
2014/03/12 职场文书
明信片寄语大全
2014/04/08 职场文书
产假请假条
2014/04/10 职场文书
心理学专业求职信
2014/06/16 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书