JQuery学习（二）--遍历和操作文档

1.省市联动案例

    籍贯
    
    
        
                --请选择--
                    湖北
                湖南
                河北
                河南
        
        
        
    

（1）步骤
<1>确定事件（change），在绑定的函数里面获取用户选择的省份、
<2>创建二维数组来存储省份和城市
<3>遍历二维数组中的省份，与用户选择的省份进行比较（使用JQ的遍历操作）
<4>遍历数组中的城市
<5>创建一个文本节点
<6>创建option元素节点
<7>将文本节点添加到元素节点中（使用JQ的文档操作方法）
<8>获取第二下拉列表，将option元素节点添加进入（使用JQ添加操作）
<9>清除第二个下拉列表option内容
（2）重点
<1>JQ的遍历操作
方法一：each（callback）； 链接：http://jquery.cuishifeng.cn/each.html
callback：指的是对于每个匹配的元素所要执行的函数
示例：

    
        
        
        
        
    
    
        请选择您的爱好

         全选/全不选 

         足球
         篮球
         游泳
         唱歌 

    

说明：
$("input[name='hobby']")是被遍历的对象（一个集合）
方法二：$.each(object,[callback]) ； 链接：http://jquery.cuishifeng.cn/jQuery.each.html
object:需要遍历的对象或数组。
callback:每个成员/元素执行的回调函数。

    
        
        
        
        
    
    
        请选择您的爱好

         全选/全不选 

         足球
         篮球
         游泳
         唱歌 

    

说明：使用工具类遍历方式，语法：$.each(array，function(i,j){}) 其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
<2>使用JQ进行文档操作
---append(content):向每个匹配的元素内部追加内容
content:要追加到目标中的内容 链接：http://jquery.cuishifeng.cn/append.html
说明： A.append(B) ：将B追加到A的内容末尾处
---appendTo(content)：
content：用于被追加的内容； 链接：http://jquery.cuishifeng.cn/appendTo.html
说明：A.appendTo(B) ：将A追加到B的内容末尾处
---empty() ：删除匹配的元素集合中所有的子节点。（不会删除标签）
链接：http://jquery.cuishifeng.cn/empty.html
---remove([expr])：从DOM中删除所有匹配的元素。（会删除标签）
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
[expr]：JQ的表达式 链接：http://jquery.cuishifeng.cn/remove.html
JS代码示例：