Jquery进阶事件

一、事件的切换

toggle()方法，相当于一个加强版的click事件，可以绑定多个function来执行每次点击的操作（在jQuery1.8版本之后已经淘汰了）

hover()方法，这个就相当于mouseover和mouseout事件的结合。

二、jQuery对对象的值进行操作

2.1val()，应用在获取和设置表单中的标签的value属性。（其他的标签不内置value属性）

• val(),获取表单项对象的value属性。

• val("属性值")，设置对象的value属性

2.2html()，应用在获取和设置非空标签的标签体中的html内容

• html(),获取对象标签体中的html内容

• html("html内容")，设置对象的标签体中的html内容，自动解析html标签

2.3text(),应用在获取和设置非空标签的标签体中的文本内容

• text(),获取对象标签体中的文本内容

• text("文本内容")，设置对象标签体中的文本内容，不解析html标签。

三、jQuery遍历(重要)

• $(".class").each(function(i,o){})

  • i表示遍历到的各个对象的下标

  • o表示遍历到的各个对象

• $.each(数组，function(i,o){})

四、文档处理(重要)

• A.append(B):将B插入到A标签的内部的后面

• A.prepend(B):将B插入到A标签内部的前面

• A.appendTo(B):将A插入B标签的内部的后面

• A.prependTo(B):将A插入B标签内部的前面

• A.insertBefore(B):将A添加到B的前面

• A.insertAfter(B):将A添加到B的后面

案例1：二级联动

  <script>
              // 定义二维数组：
              var cities = new Array(4);
              cities[0] = new Array("沈阳市","鞍山市","大连市");
              cities[1] = new Array("长春市","吉林市","松原市","延边市");
              cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
              cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
              cities[4] = new Array("南京市","苏州市","扬州市","无锡市");
              //当文档加载完毕的时候，给省份的下拉选择框绑定一个change事件
              $(function(){
                  //第一种做法
                  /*$("#province").change(function(){
                      //每次改变之前都要清空原来的城市
                      $("#city").html("")
                      //根据当前选中的省份对应的option的value就能找到它对应的城市的数组
                      var items = cities[this.value]
                      //遍历该省份对应的城市数组
                      $(items).each(function(i,e){
                          //i表示遍历出来的每一个元素的下标，e表示遍历出来的每一个元素
                          //每遍历出来一个城市，就要往城市对应的下拉选择框中添加一个option
                          $("#city").append("<option value='"+i+"'>"+e+"</option>")
                      })
                      
                      
                  })*/
                  
                  //第二种做法
                  $("#province").change(function(){
                      //根据当前选中的option的value获取对应的城市数组
                      var items = cities[this.value]
                      var content = ""
                      //遍历城市数组
                      $(items).each(function(i,e){
                          //遍历出每一个城市名
                          //每遍历出来一个城市，就往content字符串后面拼接"<option value='"+i+""'>"+e+"</option>"
                          content += "<option value='"+i+"'>"+e+"</option>"
                      })
                      
                      //将content设置到城市的下拉选择框中，通过html()方法就能设置html文本
                      $("#city").html(content)
                  })
              })
          </script>

案例2：左右选择

  
  <script type="text/javascript">
              $(function(){
                  //当鼠标移入左边select的时候，给左边所有的option绑定双击事件
                  $("#selectLeft").mouseover(function(){
                      //实现第一个功能:双击将左边的标签添加到右边
                      $("#selectLeft option").dblclick(function(){
                          //双击之后，将触发这个事件的当前标签添加到右边
                          $("#selectRight").append(this)
                      })
                  })
                  
                  //实现第二个功能:点击添加按钮，将左边所有选中的标签添加到右边
                  $("#add").click(function(){
                      $("#selectLeft option:selected").appendTo($("#selectRight"))
                  })
                  
                  //实现第三个功能:点击全部添加按钮，将左边所有的标签添加到右边
                  $("#addAll").click(function(){
                      $("#selectLeft option").appendTo($("#selectRight"))
                  })
                  
                  //实现第四个功能:点击右边的全部添加按钮，将右边的所有的option添加到左边
                  $("#removeAll").click(function(){
                      $("#selectLeft").append($("#selectRight option"))
                  })
                  
                  //实现第五个功能：点击右边的添加按钮，将右边所有选中的option添加到左边
                  $("#remove").click(function(){
                      $("#selectLeft").append($("#selectRight option:selected"))
                  })
                  
                  $("#selectRight").mouseover(function(){
                      //实现第六个功能:双击右边的option，将双击的这个option添加到左边
                      $("#selectRight option").dblclick(function(){
                          $("#selectLeft").append(this)
                      })
                  })
              })
          </script>

五、validation校验（使用第三方框架validation进行表单校验）

下载地址

• 官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

• 帮助文档地址：http://jqueryvalidation.org/documentation/

引入

直接拷贝下载好的库文件到js目录中，然后像引入jQuery一样引入

json

• 在Java中我们要描述一个person,就得将Person封装成一个对象，将Person的属性抽取成成员变量。

    
                public class Person{
                    private String name;
                    private int   age;
                    }

• 在js中可以用json来描述一个person

    
                var person = {name:"张三",age:18，address:"深圳"}
                person.name;获取name

json的语法：{key1:value1,key2:value2,key3:value3};

六使用jQuery操作标签的样式

• css()方法

• addClass()添加类名