JQuery 遍历
目录
1 DOM对象的遍历
2 数组的遍历
3 对象的遍历
json 对象
input对象text check
option对象select
一、dom对象的遍历
<%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <p>a</p> <p>b</p> <p>c</p> <p>d</p> </body> <script type="text/javascript"> $.each($('p'), function() { alert($(this).html()); });</script> </html>
二、数组的遍历
<script type="text/javascript">var arr = [ 1, 2, 3, 4, 5 ] $.each(arr, function(i, n) { alert(i + " " + n); });</script>
三、对象的遍历
<script type="text/javascript"> var names= {A : "a" ,B : "b"}; $.each(names, function(i, n) { alert( i + " " + n); }); </script>
option对象的遍历
<%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <select name="test"> <option value="AAA">aaa</option> <option value="BBB">bbb</option> </select > <select name="test2"> <option value="EEE">eee</option> <option value="FFF">fff</option> </select > <input type="button" id="but1" value="click me"> <input type="button" id="but2" value="click me"> </body> <script type="text/javascript"> $('#but1').click(function(){ var $obj1 = $("[name=test] option:selected"); $.each($obj1, function(i, n) { alert($(n).val()); }); }); $('#but2').click(function(){ var $obj2 = $("select option:selected"); $.each($obj2, function(i, n) { alert($(n).val()); }); }); </script> </html>
input对象的遍历
checkbox
<%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <input type="checkbox" value="AA"/>aa <input type="checkbox" value="BB"/>bb <input type="checkbox" value="CC"/>cc <input type="button" id="but1" value="click me"> </body> <script type="text/javascript"> $('#but1').click(function(){ var $obj1 = $("input[type='checkbox']:checked"); $.each($obj1, function(i, n) { alert($(n).val()); }); }); </script> </html>
text
<%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <input type="text" value="AA"/> <input type="text" value="BB"/> <input type="checkbox" value="CC"/> <input type="button" id="but1" value="click me"> </body> <script type="text/javascript"> $('#but1').click(function(){ var $obj1 = $("input[type='text']"); $.each($obj1, function(i, n) { alert($(n).val()); }); }); </script> </html>
