在学习jQuery前,先要弄明白DOM对象与jQuery对象的区别:简单通俗理解的话可以认为DOM对象就是页面中的某一个具体的文本标签,而jQuery对象是基于DOM对象之上的,我们可以把某个DOM对象转化为jQuery对象。只有是jQuery对象才能使用jQuery中的方法以及属性。
例:document.getElementById("xx")得到的是一个 id为的DOM对象。
$("#xx")得到的是一个 jQuery对象。
一.jQuery工厂函数的语法
我们一般会使用通配符“$”来调用jQuery工厂函数如:
jQuery("#xx")<==>$("#xx")<==>$(document.getElementById("xx"));
二.jQuery对象访问
使用工厂函数可将DOM元素包装成jQuery对象,从而可使用jQuery属性和方法对其进行操作。但是有时候可能需要从jQuery对象中获取或搜索所需要的DOM元素,以便直接使用JavaScript脚本来操作这些DOM元素。所以在jQuery中提供了丰富的对象访问方法。
(1).get()、.get([index]) //用于获取所有陪陪的DOM元素集合,其中index参数可选,用于指定元素在集合中的位置索引从0开始,若指定的索引为负数则从匹配集合的末尾开始计数。
例:$("li").get(1) //获取所有li标签中的第二个li标签。
(2).index()、index(selector)、index(element) //用于在匹配的元素中搜索指定元素并范围其索引值。
selector是一个选择器,表示在其中查找元素的jQuery集合;
element表示在DOM元素或在jQuery对象中查找的第一个元素。
若没有参数则返回的值指的是第一个元素在jQuery对象中相对于其同辈元素的位置。
例:$("li").index(document.getElementById("xx")); //查找XX在 所有li中的索引
$("li").index($("#xx")); //查找xx在所有li中的索引
$("#xx").index("li");//查找xx在所有li中的索引
$("#xx").index();//查找xx在同辈中的索引
(3).each(function(){}) //遍历一个jQuery对象,以每个匹配元素做为上下文来执行一个行数。
例:$("li").each(function(){
alert($(this).text());
});
(4).selector 和context
selector 该属性值为一个字符串,表示使用什么选择器来找到这个元素的。
context 返回一个HTML对象,表示传给$()的原始的DOM 节点内容.
例子:$("<ul></ul>").appendTo(document.body);
$("ul").context 将得到:[object HTMLDocument]
$("ul",document.body).context.nodeName.toLowerCase() 将得到body
$("ul").selector 将得到ul
三、jQuery与其他库共存
在Web开发中可能会同事使用多个JavaScript库。除了jQuery之外,其他Javascript库也会使用$别名来创建对象。那么如何解决这一冲突就是一个必须考虑并加以解决的问题。由此jQuery便提供了noConflict方法用于专门解决这一问题。
jQuery.noConflict()//将变量$的控制权让渡给第一个实现它的那个JavaScript库。
介绍如何在局部使用$
例:jQuery.noConflict();
(function($){
$(function(){
alert($("#XX").text());//使用$作为jQuery的别名代码
});
})(jQuery);
在下一章节中会讲到jQuery的常用基本选择器,敬请期待。