jquery之$()函数

                    jquery之$()函数

在jQuery中,jQuery等价于$,所以alert(jQuery== $);返回布尔值true。注意Q要大写。

一、    jQuery(selector,[context])

这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。

比如selector传递一个id值为box的元素。

如：$(“#box”);

没有传第二个参数，默认jQuery会遍历整个html的节点树，然后找到拥有这个id的标签。

<form>        <input type="text" /> </form> <input type="checkbox" />

对于上述html结构，如果我这样写：$(“input”).length;返回的长度是2，因为遍历整个DOM结构。

如果我这样写：$(“input”,document.querySelector(“form”)).length;那么返回长度是1，指向的是form内的input。

所以第二个参数其实就是指定了查找范围在form内。上诉例子第二个参数传递的是DOM集合，其实也可以传递jQuery集合，如：$("input",$("form")).length;返回的也是1。

context参数可以是DOM集合、jQuery集合或者文档(比如ajax返回一个xml文档，可以指定在这个文档中查找某些内容);

二、    jQuery(html,[ownerDocument])

根据提供的原始 HTML 标记字符串，动态创建由jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

html:用于动态创建DOM元素的HTML标记字符串

ownerDocument:创建DOM元素所在的文档

如：$(“<span/>”);则动态创建了一个span标签。注意写法必须是闭合标签，而非$(“<span>”)，不闭合的写法虽然照样能执行，但是不符合规范。正确的写法是$(“<span/>”)或者$(“<span></span>”);

ownerDocument参数可以指定其它的参数。如下：

$("<input/>",{               value:"我是文本框",               type:"text",               focusin:function(){                      $(this).val("光标移入了");               },               focusout:function(){                      $(this).val("光标移出了");               },               click:function(){                      $(this).css('background','red');               }        }).appendTo($("form"));

上述代码动态生成一个input标签，第二个参数以键值对的形式添加了属性，绑定了事件，然后插入到一个form标签内。

有意思的是，事件的绑定比如点击事件，不能写onclick而要写click，否则如果第一个事件的绑定有前缀on，那么这个事件会默认触发，目前我还不知道原因。

三、    jQuery(callback)

基本写法：$(function(){});

当页面结构加载完成后执行此方法。

此方法等价于$(document).ready(function(){});

当一个项目引入多个js框架的时候，直接用$可能会造成冲突问题。所以会这样写：

jQuery(function($){

});

这样的话，在内部使用$仍然指向的是jQuery，而不是其他框架。

四、    jQuery.holdReady(hold)

该方法实现$(document).ready()的延迟执行。

hold传参true、false。true表示开始延迟，false表示结束延迟。

$.holdReady(true);        $(document).ready(function(){               alert($("#box").text());        });        setTimeout(function(){               $.holdReady(false);        },3000);

上述代码，弹窗会在3秒之后才会弹出。holdReady实现了延迟操作。

该方法通常实现动态脚本的加载。如：

$.holdReady(true);

$.getScript(“xxx.js”,function(){

 $.holdReady(false);

});

如果在后边继续添加holdReady(true),紧随一个ready事件，该事件执行并没有被挂起。

$.holdReady(true);        $(document).ready(function(){               alert("1");        });        setTimeout(function(){               $.holdReady(false);        },3000);               $.holdReady(true);        $(function(){               alert("2");        });        setTimeout(function(){               $.holdReady(false);        },6000);

俩个弹窗都会在3秒之后触发。