jquery之对象访问
- each(callback)
- size()和lengths
- get()及get(index)
- index(subject)
一，each（callback）
概述：通俗的讲，相当于各位学编程时用到的循环。
参数说明：callback——>Function。即对于每个匹配元素所要执行的函数。
小示例：
html代码：<img/><img/>
jQuery代码：
$("img").each(function(i){
this.src="test"+i+".jpg";
});
运行的结果为：<img src="test0.jpg"/>,<img src="test1.jpg"/>
综合示例：
<img/><img/>
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div>Stop here</div>
<div></div>
Jquery代码：
1,描述：如果您想得到jQuery对象，就可以使用$(this)函数;
$("img").each(function(){
$(this).toggleClass("example");//toggleClass:如果存在（不存在）就删除（添加）一个类。
});
2，使用return来提前跳出循环
$("button").click(function(){
$("div").each(function(index,domEle){
//domEle==this.
$(domEle).css("background","red");
if($(this).is("#stop")){
$("span“).text("Stopped at div index#"+index);
return false;
}
});
});
小结：由上两个例子我们可看出：
1，在执行循环的过程中，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配元素集合中所处位置的数字值作为参数（注：从0开始的整形）
2，返回值：false，停止循环（相当于break），true则跳至下一个循环（相当于continue）
二，size()和lengths
描述： jQuery 对象中元素的个数。
size函数的返回值与 jQuery 对象的'length' 属性一致。
小例子：
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<title>size和length的用法</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>hello world</title>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<link href="../css/example.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<br/>
<div>[div]0[div]</div>
<div>[div]1[div]</div>
<div>[div]2[div]</div>
<div>[div]3[div]</div>
<input name="" value="点击看div的数量" id="btn1" type="button" />
<input name="" value="点击下看image的数量" id="btn2" type="button" />
<br />
<span></span>
<br />
<img src="../images/test1.jpg" class="example"/> <img src="../images/test2.jpg" class="example"/>
<script type="text/javascript">
jQuery(function($){
$("#btn1").click(function(){
var text=$("div").size();
$("span").text(text);
$("span").css("color","red");
$("span").css("backgroundColor","yellow");
});
$("#btn2").click(function(){
var text=$("img").size();//这里size和length的返回值是相等的。不在举例。
$("span").text(text);
$("span").css("color","blue");
$("span").css("backgroundColor","yellow");
});
});
</script>
</body>
</html>
三，get（）
这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。
如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<title>size和length的用法</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>hello world</title>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<link href="../css/example.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<br/>
<input name="" value="点击我看排序效果" id="btn1" type="button" />
<input name="" value="点击我看效果" id="btn2" type="button" />
<br />
<span></span>
<br />
<img src="../images/test1.jpg" class="example"/> <img src="../images/test2.jpg" class="example"/>
<script type="text/javascript">
jQuery(function($){
$("#btn1").click(function(){
var text=$("img").get().reverse();
$("span").text("======"+text+"======");//返回结果为：======[object HTMLImageElement],[object HTMLImageElement]======
$("span").css("color","blue");
});
$("#btn2").click(function(){
var text=$("img").get(0);
$("span").text("======"+text+"======");//返回结果为：======[object HTMLImageElement]======
$("span").css("color","red");
});
});
</script>
</body>
</html>
疑问1： 而按照API上的返回结果应分别为：
[ <img src="../images/test2.jpg"/> <img src="..images/test1.jpg"/> ]和[ <img src="..images/test1.jpg"/> 四，index（subject）
概述：
搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。
如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。
这里仅帖出关键代码：
HTML：<div id="footbar"><div></div><div id="foo"></div></div>
<script type="text/javascript">
jQuery(function($){
$("#btn1").click(function(){
var one=$("div").index($('#foobar')[0]) // 0
var two=$("div").index($('#foo')[0]) // 2
var three=$("div").index($('#foo')) // 2 API中这里的结果为-1.不知道是不是它的bug
$("#one").text(one);
$("#two").text(two);
$("#three").text(three);
});
});
</script>
疑问2： 其中：在API中，var three=$("div").index($('#foo'))这个返回结果为-1. 如下图：
这里如果有什么说错的地方，请各位高手指出。我及时修改。
因为很少写博客，所以写的很乱。。希望能对你有点帮助。。。见笑了。。。