jquery的each用法以及表单选择的自动响应。

来源：互联网发布：手机文字制作软件编辑：程序博客网时间：2024/05/22 01:46

each以及他的回调函数在jquery里面有强大的功能，下面自己先是用了百度文库里面的一些东西然后自己写了一个主动选择省市的函数［纯jquery］

通过它，你可以遍历对象、数组的属性值并进行处理。使用说明each函数根据参数的类型实现的效果不完全一致：1、遍历对象(有附加参数)$.each(Object, function(p1, p2) {     this;       //这里的this指向每次遍历中Object的当前属性值     p1; p2;     //访问附加参数}, ['参数1', '参数2']);2、遍历数组(有附件参数)$.each(Array, function(p1, p2){     this;       //这里的this指向每次遍历中Array的当前元素     p1; p2;     //访问附加参数}, ['参数1', '参数2']);3、遍历对象(没有附加参数)$.each(Object, function(name, value) {     this;      //this指向当前属性的值     name;      //name表示Object当前属性的名称     value;     //value表示Object当前属性的值});4、遍历数组(没有附加参数)$.each(Array, function(i, value) {     this;      //this指向当前元素     i;         //i表示Array当前下标     value;     //value表示Array当前元素});下面提一下jQuery的each方法的几种常用的用法Js代码 var arr = [ "one", "two", "three", "four"];      $.each(arr, function(){         alert(this);      });     //上面这个each输出的结果分别为：one,two,three,four    var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     $.each(arr1, function(i, item){        alert(item[0]);     });     //其实arr1为一个二维数组，item相当于取每一个一维数组，   //item[0]相对于取每一个一维数组里的第一个值   //所以上面这个each输出分别为：1   4   7     var obj = { one:1, two:2, three:3, four:4};     $.each(obj, function(key, val) {         alert(obj[key]);           });   //这个each就有更厉害了，能循环每一个属性     //输出结果为：1   2  3  4

然后自己写了一个可以自主选择省市的，当然还可以添一个环节反正原理差不多这里自己就不过多地考虑了。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="jquery-2.1.3.min.js"></script></head><body><form>    请选择你的省市    <select name="selectp" id="selectp">        <option>请选择</option>    </select>    <select name="selectc" id="selectc">        <option>请选择</option>    </select></form><script>    $(document).ready(function(){        function init(obj){            return $(obj).html("<option>请选择</option>");        }        var data={            "河北省":"衡水,邢台,唐山,保定,石家庄",            "河南省":"杭州,宁波,桂林"        };        $.each(data,function(pp){            $("#selectp").append("<option>"+pp+"</option>");        });        $("#selectp").change(function(){            init("#selectc");            $.each(data,function(pp,ps){                if($("#selectp option:selected").text()==pp){                    $.each(ps.split(","),function(){                        $("#selectc").append("<option>"+this+"</option>");                    });                }            });        });    });</script></body></html>

0 0