jQuery学习(六)——使用JQ完成省市二级联动，jqueryjq

1、JQ的遍历操作

方式一：

1　　　　　　　$(function(){ 2 //全选/全不选 3 $("#checkallbox").click(function(){ 4 var isChecked=this.checked; 5 //使用对象访问的方式进行遍历，语法$().each(function(){}) 6 $("input[name='hobby']").each(function(){ 7 this.checked=isChecked; 8 }); 9 }); 10 });

$后面的括号里是被遍历的对象，是一个集合。

方式二：

1 $.each( [0,1,2] , function(i , n ){ 2 alert( "Item #" + i + ": " + n ); 3 });

each后面的中括号是被遍历的对象

function后面的i是角标，n是被遍历后的内容。

2、文档处理操作

追加内容

　apend:  A.append(B)  将B追加到A的内容的末尾处

    appendTo: A.appendTo(B)  将A加到B内容的末尾处。

3、步骤分析：

第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步：创建二维数组来存储省份和城市

第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步：接着遍历数组中的城市

第五步：创建一个城市文本节点

第六步：创建option元素节点

第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步：获取第二个下拉列表并将option元素节点添加进去

第九步：清除第二个下拉列表的option内容

4、具体代码实现：

注册页面重新布局(){ ); ); ); ); ); (){ ).empty(); .value; (i,n){ i){ (j,m){ document.createTextNode(m); ); $(opEle).append(textNode); //opEle前加$是为了将DOM对象转换成JQuery对象 ).append($(opEle)); 57 }); 58 } 59 }); 60 }); 61 }); 会员注册 用户名 密码确认密码email姓名籍贯--请选择--湖北湖南河北河南性别男 女 出生日期验证码

在谷歌浏览器内运行，效果如下：