JQuery应用

案例一：创建省市二级联动

1.首先要确定事件，所选的事件应该是change事件，并绑定

2.通过JQ的选择器获取这个对象

3.创建二维数组来存储对应省份所涉及的城市

4.通过一层遍历寻找对应的城市，再通过遍历得到该城市的所有节点

5.每次遍历出一个节点就要创建一个城市文本节点，创建一个option元素，并将这个文本节点添加到对应的元素节点中

6.每次在遍历出所有城市之前还要清除之前所加入的所有城市的标签

 

这里涉及了：数组的创建 城市的遍历 JQuery的DOM操作

 

对于数组创建：

var A=new Array();

A[0]=" ";

A[1]=" ";

或var A=new Array("A","B","C");

 

对于所有JQ遍历：

$(传入的数组,function(i,n){

alert(i+" "+n);

}); //i就是索引值，n就是所遍历出来的值

 

JQ的DOM操作：详见实例

实例：

$(function (){
   $("#province").change(function(){
       //获取用户所选择的值
       var val=this.value;
       //创建二维数组用于存储省份和城市
       var cities=new Array(3);
       cities[0]=new Array("A","B","C");
                 cities[1]=new Array("AA","BB","CC");
                 cities[2]=new Array("AAAA","BBBB","CCCC");
                 cities[3]=new Array("AAAAA","BBBBB","CCCCC");
                 $("#city").empty();
      //遍历二维数组中的省份
      $.each(cities,function (i,n){
         //判断用户选择的省份与遍历的省份
         if(val==i){
             //遍历该省份下的所有城市
            $.each(cities[i],function(i,m){
               //创建城市文本节点
               var textNode=document.createTextNode(m);
               //创建元素节点
               var opEle=document.createElement("option");
               //将文本节点添加到option元素节点中
               $(opEle).append(textNode);
               //将元素节点追加到下拉列表中
               $(opEle).appendTo($("#city"));
                         });
         }
                 });
             });
         });

此处只列举出了JS部分代码，HTML部分代码已经在上边列出

 

案例二：使用JQ来完成下拉列表的左右选择

实现步骤：

1，获取事件，鼠标单击事件click

2，获取所选择的下拉框的元素，将它添加到右边下拉框的元素（可以使用appendTo来操作）

 

实例：

   
      
      
      
      
   
   
      

         

            

               分类名称
            
            

               
            
         
         

            

               分类描述
            
            

               手机数码类商品
            
         
         

            

               分类商品
            
            

               
                  已有商品

                  
                     IPhone6s
                     小米4
                     锤子T2
                  
                  
>>
                  
>>>
               
               
                  未有商品

                  
                     三星Note3
                     华为6s
                  
                  
<<
                  
<<<
               
            
         
         

            

               
            
         
      
   

 

案例三：注册页面表单验证

这里要使用到插件validate

validate是一个插件，用来验证提交表单信息的插件，它是基于JQuery开发的，所以在使用时要先导入JQuery，导入它后，还需要导入它的中文版插件

确保他是中文版

    
    
    
    
    
    


    

        用户名：

        密码：

        
    

通过JQ的获取表单属性，再调用函数进行验证，在函数内部书写验证规则，

rules下写的是要求的规则，而messages下写的是出现错误时需要提示的信息