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

最新推荐文章于 2022-11-09 10:02:23 发布

lishiyuzuji

最新推荐文章于 2022-11-09 10:02:23 发布

阅读量2.3k

点赞数

分类专栏： JQuery 文章标签： jquery javascript callback function object each

本文链接：https://blog.csdn.net/lishiyuzuji/article/details/7227733

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先，我们必须要了解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

lishiyuzuji

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery学习4-1---jquery用法之访问jquery对象

首先，我们必须要了解jquery定义的基本方法和属性，特别是jquery对象的方法和属性。上面记得，jquery对象是javascript数据集合，要访问里面的元素，可以使用索引值，也可以使用jquery对象的方法，下面就是访问jquery对象的常用的几个方法。第一个：each(callback): 该方法依次遍历jquery对象的所有元素，从0开始，并循环执行指定的
复制链接

扫一扫

专栏目录