浅谈Jquery核心函数
在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作。
所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为工厂函数。
jquery核心函数有7个重载,分别如下:
jquery() 该函数返回一个空的jquery对象。
jquery(elements) 该函数将一个或多个DOM元素转化为Jquery对象(或jquery集合)
jquery(callback) 该函数是jquery(document).ready(callback)的简写。该函数将绑定一个在DOM文档载入完成后执行的函数。页面中所有需要在DOM加载完成时,执行的jquery操作,都需要包含在这个函数中。这个函数,可以在页面中,出现多次。
jquery(expression,[context])
jquery(html)
jquery(html,props)
jquery(html,[ownerDocument])
我们详细来看下其中的
jQuery(expression,[context])
这个函数接收一个包含CSS选择器的字符串,然后用这个字符串去匹配一组元素。
通过doc[0]、doc[1]可以分别取出一个DOM对象,其它的则是一些jQuery对象特有的属性和方法;实际上jQuery对象包装了DOM对象,同时还包含了一些操作DOM元素的jQuery方法。
在使用jQuery的过程中,大部分情况下第一步工作同时也是最重要的一步工作,就是取得包装了要操作DOM对象的jQuery对象;然后通过调用取得的jQuery对象的方法来完成对DOM对象的操作。
forexample
1.查找#firstcontext中节点为p的搜有元素,并循环显示对应的值。
$(function(){ varitems=$("p","#first"); $.each(items,function(i,n){ alert(i); }); });
i为对应的index,n对应的节点
2.找到所有p元素,并且这些元素都必须是div元素的子元素。
HTML代码:
<p>one</p><div><p>two</p></div><p>three</p>
jQuery代码:
$("div>p");<br>
结果:
[<p>two</p>]
3.在文档的第一个表单中,查找所有的单选按钮(即:type值为radio的input元素)。
jQuery代码:
$("input:radio",document.forms[0]);
jQuery(html,[ownerDocument])
根据提供的原始HTML标记字符串,动态创建由jQuery对象包装的DOM元素。
你可以传递一个手写的HTML字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过AJAX加载过来的字符串。
jQuery(html,props)
根据提供的原始HTML标记字符串,动态创建由jQuery对象包装的DOM元素。同时设置一系列的属性、事件等。
参数
htmlString
用于动态创建DOM元素的HTML标记字符串
propsMap
用于附加到新创建元素上的属性、事件和方法
示例
描述:
动态创建一个div元素(以及其中的所有内容),并将它追加到body元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的innerHTML属性设置为给定的标记字符串,来实现标记到DOM元素转换的。所以,这个函数既有灵活性,也有局限性。
jQuery代码:
$("<div>",{ "class":"test", text:"Clickme!", click:function(){ $(this).toggleClass("test"); } }).appendTo("body");
$(document).ready()的简写。
当DOM加载完成后,执行其中的函数。
jQuery代码:
$(function(){ //文档就绪 });
以上所述就是本文的全部内容了,希望大家能够喜欢。