您的位置：首页 > Web前端 > JQuery

JQuery的遍历

2016-07-09 15:59 441 查看

为了能够更好地理解jquery，除了上一部分的基础知识之外，还有一些概念我们需要熟悉，在开发的时候使用jquery，会给我们带来很大便利，所以今天我们就来说说，each的一些用法。

1.each的好处

each()方法能使DOM循环结构简洁，不容易出错

each()函数封装了十分强大的遍历功能，使用也很方便

它可以遍历一维数组、多维数组、DOM, JSON 等等

在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

2.each来遍历数组

用来引入外部js

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>遍历数组</title>
</head>
<body>
<!-- 引入jquery框架-->
<script  src="js/jquery.js">  </script>
<!-- 引入外部js框架-->
<script  src="js/eachtest.js">  </script>
</body>
</html>

eachtest.js

$(function(){
//  一维
var arr1 = [ "张三", "李四", "王五" ];
//  最开始的方式
for( var i in arr1){
//        alert(i+":"+arr1[i]);
}
//    采用each
$.each(arr1,function(i,nameval){
//alert(i);//输出0，1，2
//alert(nameval);//输出  张三,李四,王五
});

//  二维
var arr2 = [[ "张三", "李四", "王五","赵六" ],[ "张三2", "李四2", "王五2" ],[ "张三3", "李四3", "王五3" ]];
//  最开始的方式
for( var i in arr2){
//        alert(i+":"+arr2[i]);
}
//    采用each
$.each(arr2,function(i,arr2item){
//    alert(i);//输出0，1，2
//  alert(arr2item);//输出每一行  "张三", "李四", "王五"   张三2", "李四2", "王五2 ···
});
//    继续向下遍历
$.each(arr2,function(i,arr2item){
$.each(arr2item,function(j,detailperson){
alert(j);////输出0，1，2,3
alert(detailperson);//输出每一行具体的值
});
});

});

3.each来遍历json对象

html也就只是负责两个js文件的引入

其中jsontest.js来去json对象

$(function(){
//json对象
var students={1:"helen",2:"shirley",3:"cindy"};
//用each的方式获取
$.each(students,function(stuid,stuname){
alert(stuid);//key  学生id
alert(stuname);//value 学生name
});
});

4.each来遍历dom对象

方法一：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>遍历json对象</title>
</head>
<body>
<!-- 引入jquery框架-->
<script  src="js/jquery.js">  </script>
<!-- 引入外部js框架-->
<script  src="js/jsontest.js">  </script>
<input name="stu1" value="学生1" type="hidden">
<input name="stu2" value="学生2" type="hidden">
<input name="stu3" value="学生3" type="text">
<input name="hidden" value="学生4" type="checkbox">

</body>
</html>

$(function(){
$.each($("input:hidden"),function(i,val){//选择器，匹配所有不可见hidden元素
alert(i+"--"+val);//val会输出 object HTMLInputElement 这里是一个表单元素
alert(val.name);//input中name
alert(val.value);//input中value
});
});

ps:Jquery选择器input:hidden和input[type=hidden]的区别？

关于选择器:hidden的声明，在jquery文档中是如此说的：匹配所有不成见元素，或者type为hidden的元素。而 [type=hidden]是查找所有type属性是hidden的元素。

两者是有雷同之处和不合之处的。:hidden匹配所有不成见元素，或者 type为hidden的元素，所有样式display是none的元素和子元素以及type=”hidden”的表单元素都在查找的结果中，而 [type=hidden]则只查找type属性为hidden的元素。

所以，input:hidden是查找不成见容器中的input元素，包含，textbox，radio，checkbox，button等和type=”hidden”的表单元素。input[type=hidden]仅仅查找type=”hidden”的表单元素

方法二：

我们也可以采用调用相应的each方法来使用

$(function(){
$("input:hidden").each(function(i,val){
alert(i+"--"+val);//val会输出 object HTMLInputElement 这里是一个表单元素
alert(val.name);//input中name
alert(val.value);//input中value
});
});

其实这种方式是前面的比较类似，只是要看哪种方式更适合自己理解了

采用jquery的基本知识也就这么多，自己多多动手实践一下，感觉那些之前难以理解的函数结构也慢慢清晰了很多。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航