jQuery(selector,context)函数参数含义

来源:互联网 发布:宿州煤电集团知乎 编辑:程序博客网 时间:2024/06/10 07:39

jQuery(selector,context)函数参数含义

–回忆一下js编程环境中的对象类型,BOM对象,函数,DOM对象,能转化为falsely值的对象,普通的js对象(其中字符串对象是一个表达式,该表达式可以表示HTML标签,css选择器,正则表达式)

1.selector:可以传入以上js编程环境中存在的对象,主要是其中包含了用于匹配元素集合的 CSS 选择器,用于匹配或者创建对象,请看以下代码;

1.1、falsely值对象:undefined,null,”“;
1.2、字符串:a).HTML标签,创建DOM对象
b).css选择器
c).正则表达式
1.3、普通的js对象
1.4、BOM对象
1.5、DOM对象
1.6、函数

代码:

 <div id="name" class="foo">        <span>1</span>        <span class="demo">2</span>        <span>3</span>        <span id="current">4</span>        <span>5</span>    </div>    <div>        <span class="demo"></span></div><script>    (function(){    /*  1.1、selector为falsely值,返回的是一个只有一个属性指向jQuery.prototype对象的对象 */    console.log($(""));    console.log($(null));    console.log($());    /*init{__proto__: Object[0]}*/    /* 1.2、BOM对象,返回一个jQuery形式的window对象,*/    console.log($(window));    /* [window]*/    /* 1.3、字符串 */    /* 1.3.1、HTML标签,返回一个包含一个DOM对象的jQuery对象 */    console.log($("<div>")); /* [div] */    /* 1.3.2、css选择器,返回一个包含多个DOM对象的jQuery对象*/    console.log($("div")); /* [div#name.foo, div, prevObject: init[1], context: document, selector: "div"]*/    /* 1.3.3、正则表达式  */    /* 1.4、普通js对象,返回一个包含了普通js对象的jQuery对象 */    var object = {        name: "obj",    }    console.log($(object)); /* [Object] */    /* 1.5、DOM对象,返回一个包含该DOM对象的jQuery对象*/    console.log($(document.getElementById("name"))); /*[div#name.foo, context: div#name.foo]*/    /* 1.6、函数,作为文档加载完成的回调函数,*/    $(function(){        console.log("文档加载完毕");    });    /* 2.1不管是DOM还是jQuery对象,都只能是包含一个DOM元素,不然context会是undefined,上下文切换到undefined,不起作用,*/    var divs = document.getElementsByTagName("div");    console.log(divs);    console.log($(".demo",$(divs)[0])); /* [span.demo, prevObject: init[1], context: div#name.foo, selector: ".demo"] */    console.log($(".demo",divs[0])); /* [span.demo, prevObject: init[1], context: div#name.foo, selector: ".demo"]*/    console.log($(".demo",divs)); /* [span.demo, span.demo, prevObject: init[2], context: undefined, selector: ".demo"]*/    console.log($(".demo",$(divs))); /* [span.demo, span.demo, prevObject: init[2], context: undefined, selector: ".demo"]*/    /* 2.3 普通js对象,对创建的对象进行扩展,以下是创建一个 <input> 元素,同时设定 type 属性、属性值,以及一些事件*/    $("<input>", {      type: "text",      val: "Test",      focusin: function() {        $(this).val("focusin");      },      focusout: function() {        $(this).val("focusout");      }    }).appendTo("form");    })();</script>

## 2.context:功能为主要用来限定第一个参数的查找范围,请看以上代码;
2.1、DOM对象
2.2、jQuery对象
2.3、普通js对象

后续会有jQuery.fn.init()函数源码的理解

0 0