Jquery学习4-1---jquery用法之访问jquery对象

来源：互联网发布：如何学好英语知乎编辑：程序博客网时间：2024/05/01 04:45

首先，我们必须要了解jquery定义的基本方法和属性，特别是jquery对象的方法和属性。

上面记得，jquery对象是javascript数据集合，要访问里面的元素，可以使用索引值，也可以使用jquery对象的方法，下面就是访问jquery对象的常用的几个方法。

第一个：each(callback):

该方法依次遍历jquery对象的所有元素，从0开始，并循环执行指定的函数，在函数体内，this关键字指向当前元素，并且会自动向该函数传递当前元素的索引值。当前元素就是一个dom对象，因此可以调用dom对象的方法和属性来修改样式，同样，若要使想在函数中使用jquery对象，需要将dom对象转换为jquery对象。

例子：

修改当前span元素的内容的大小：

<div><span>文本一</span></div><p><span>文本二</span></p><script language="javascript" type="text/javascript">var span = $("span");span.each(function(n){this.style.fontSize = (n+1)*12+"px";等价于：$(this).css("font-size",(n+1)*12+"px");});</script>

结果如下：

第二：size()方法和length属性

两者都可以被jquery对象使用，返回jquery对象中元素的个数，使用方式一样。

例子：（为了复习以前的jquery构造器四个传递函数的不同，这里使用了两种传递方式，忘了的请看第二节的。）

<div><span>文本一</span></div><p><span>文本二</span></p><script language="javascript" type="text/javascript">var span1 = document.getElementsByTagName("span")[0];var span2 = document.getElementsByTagName("span")[1];alert($(span1).length);alert($(span2).size());alert($("span").length);alert(jQuery("span").size());</script>

输出结果，弹出1,1,2,2

第三：get()和get(n)

get()方法将jquery对象转换为dom对象的集合。get(n)将jquery对象中的指定的元素转换为dom对象。

例子：对于get(),获取span元素，然后转换为dom对象集合，然后调用reverse()方法，颠倒元素位置，最后更改0元素的样式为蓝色。

<span>文本一</span><br /><span>文本二</span><br /><span>文本三</span><script language="javascript" type="text/javascript">var spans = $("span");var span = spans.get().reverse();span[0].style.color="blue";</script>运行结果：

对于get(n);

设置第二个元素的颜色为red：

<span>文本一</span><br /><span>文本二</span><br /><span>文本三</span><script language="javascript" type="text/javascript">var spans = $("span");var span = spans.get(1);span.style.color="red";</script>

运行结果：

第四：index(object);

此方法获取jquery对象中指定元素的索引值并返回，如果检索到了就直接放回此元素的索引值，若检索不到则返回-1；

<body><h1></h1><div></div><span></span><a></a><script language="javascript" type="text/javascript">var jqueryObj = $("body *");//获取body中所有的元素var spanObj = document.getElementsByTagName("span")[0];//获取span标签对象alert(jqueryObj.index(spanObj));//返回span标签对象在jquery对象中的索引</script></body>

返回值是2

若更改代码： var jqueryObj = $(”body h1”);

则返回的就是-1