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秒之后触发。
jquery之$()函数
最新推荐文章于 2022-03-17 18:33:23 发布