(day06)jquery的事件处理 +jquery动画+jquery的类数组+ajax(用法)+

2019.08.06(day06)

jquery

 

jquery的事件处理 

  使用jquery实现事件绑定:
    语法:
      $obj.bind("事件类型",事件处理函数);
    比如:
      $obj.bind("click",function(e){});
      简写方式:
      $obj.click(function(e){});
      
获取事件对象event
    $obj.click(function(e){});
    方法的参数中的e就是事件对象,但已经经过jquery对底层
    的事件进行了封装
    注意,封装后jquery事件对象e,就已经可以兼容各个浏览器
  
   e.target  事件触发的那个dom对象(在哪个对象上触发了事件)
   e.pageX e.pageY   获取鼠标触发事件时的坐标   
      
事件冒泡:
  在子节点产生的事件会依次向上抛给父节点
  在原生js中终止事件冒泡,需要知道浏览器的差异
  在jquery中不需要了解浏览器差异,只需要e.stopPropagation()
  终止事件传播
  
合成事件:
  hover(mouseenter,mouseleave);模拟鼠标悬停事件
  toggle()  在多个事件响应中切换
  
模拟事件操作:
  语法:
    $obj.trigger(事件类型);
  比如:
    $obj.trigger("focus");
    简写形式:
    $obj.focus();
    
jquery动画:
  
   显示,隐藏的动画效果
   show()/hide()
   通过同时改变元素的宽度和高度来实现显示或隐藏
   语法:
      $obj.show(执行时间,回调函数);
         执行时间:slow,normal,fast ,毫秒数
         回调函数:动画执行完毕后要执行的函数
         
   同理:$obj.hide();
   
       
   上下滑动式的动画实现
     slideDown()/slideUp()
     通过改变高度来实现显示和隐藏的效果
     用法同show方法
     
   淡入,淡出式动画:
     fadeIn()/fadeOut()
     通过改变不透明度opacity样式实现显示和隐藏
     用法同show方法
     
   自定义动画:
     animate()
     语法: 
       animate(js对象,执行时间,回调函数);
     说明:
       js对象:用{}描述动画执行之后元素的样式
       执行时间:毫秒数
       回调函数:动画执行结束后要执行的函数
     比如:
    $("div").click(function(){
        $(this).animate({left:"500px"},4000);
        $(this).animate({top:"300px"},2000).fadeOut("slow");
    });

    
jquery的类数组(重要)
  什么是类数组:jquery封装的多个对象
  类:指的是类似
  具备自己特有的操作方法
 
  类数组的操作:
    length属性
    each(fn)遍历数组,fn用来处理dom对象,
        在fn中this表示正被遍历的那个dom对象,
        fn函数可以添加一个参数 i 用于表示正在遍历
        的dom对象的下标(从0开始)
    eq(index) 将下标等于index的dom对象取出来
    get() 返回一个dom对象组成的数组
    
    
ajax:
    什么是ajax:(Asynchronous javascript and xml)
                异步         JavaScript 和  xml
    ajax是一种用来改善用户体验的技术,其实质上,使用
    XMLHttpRequest对象异步的向服务器发送请求,
    服务器返回部分数据,而不是返回完整页面,以页面
    无刷新的效果更新页面中局部内容
一.原生ajax的用法
   步骤如下:
   1.html页面或jsp页面中触发某个事件调用js方法
   2.编写js方法:
     a.创建XMLHttpRequest对象
        1)ie浏览器
        2)非ie浏览器
     b.调用open方法
       参数1:提交的方式
       参数2:提交到服务器的url
       参数3:true异步,false同步
     c.给XMLHttpRequest对象注册onreadystatechange事件
       判断readyState的值是4,和status值是200,然后获取
       服务端传递回来了xml或json或文本,然后dom编程更改
       html页面或jsp页面的局部内容 
     d.如果post提交,还要添加消息头
     xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");  
     e.调用send方法发送请求
     
 a.如何获取,创建ajax对象(XMLHttpRequest对象)

   var xmlHttpRequest;
   function createXMLHttpRequest(){
    if(window.XMLHttpRequest){
        //非ie浏览器
        xmlHttpRequest=new XMLHttpRequest();
    }else{
        //ie浏览器
        xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }
   }

   等价于:

   function createXMLHttpRequest(){
    if("ActiveXObject" in window || window.ActiveXObject){
        //ie浏览器
        xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        //非ie浏览器
        xmlHttpRequest=new XMLHttpRequest();
    }
   }

xmlHttpRequest对象的属性和方法:
  abort()   取消请求   xmlHttpRequest.abort();
  getAllResponseHeaders();获取响应的所有的http头
  getResponseHeader();获取指定的http头
  open(method,url,异步/同步)    创建请求
  send()    发送请求
  setRequestHeader()   设置请求http头
  onreadystatechange 发生任何状态变化时的事件控制对象
  readyState:  请求的状态
      0:   尚未初始化
      1:   正在发送请求
      2:   请求完成
      3:   请求成功 ,正在接受数据
      4:   接收数据成功
  status:服务器返回的http请求响应回来的状态码
      200:成功
      202:请求被界都,但处理尚未完成
      400:错误的请求
      404:资源未找到
      405:service方法调用错误
      500:服务端java代码异常
      
  responseText  服务器返回的文本
  responseXML   服务器返回的的xml,可以当做dom处理
  
  
b.调用open方法
   1.open请求,请求的方式是get
   xmlHttpRequest.open("get","xxxServlet",true);
     true:异步
     false:同步
   2.open请求,请求的方式是post
   xmlHttpRequest.open("post","xxxServlet",true);
   xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
   注意:
    setRequestHeader的作用:因为http协议要求发送post请求时,
    必须有content-type消息头,但是默认情况ajax对象不会添加
    该消息头,所以需要调用此方法添加消息头
    
发送请求:
  get方式:    xmlHttpRequest.send(null);
  post方式: xmlHttpRequest.send(name=value&name1=value1...);

  注意:post方式传数据到服务器用send方式事项
       get方式传送数据到服务的用法:
    xmlHttpRequest.open("get","xxxServlet?name=value&name1=value1",true);

用ajax对象跟服务器传递数据时,如果参数中带有中文,可能产生乱码
  永远记住:
    只要是post提交,request.setCharacterEncoding("UTF-8");
    只要是get提交,
      方式一:
         汉字=new String(乱码.getBytes("ISO8859-1"),"UTF-8");
         适合tomcat7以及以前
      方式二: 不建议使用
         步骤一:在tomcat主目录中conf/server.xml文件中
           <connector URIEncoding="utf-8" >
           这个配置指定tomcat按照utf-8编码
         步骤二:使用encodeURI方法对请求中的汉字做utf-8编码
                此方法只针对ie浏览器使用,其他浏览器不用此
                方法,
             ie:
             var uri="xxxServlet?name=张三";
             xmlHttpRequest.open("get",encodeURI(uri),true);             
               
     
二,jquery的ajax用法
   
  load()方法:将服务器返回的数据字节添加到符合的节点之上.
    语法:
    $obj.load(请求的地址,请求的参数);
    
      请求的参数:
         方式一:
            "username=tom&age=22"
         方式二:
            {"username":"tom","age":22}
      有请求参数时,load方法发送post请求,否则发送get请求
      
  get()方法:发送get请求
    语法:
      $.get(请求的地址,请求的参数,回调函数,服务器反回的数据类型);
    说明:
      回调函数添加的参数是服务器返回的数据
      服务器返回的数据类型:
        html:html文本
        text:文本
        JSON:josn数据格式对象
        xml:xml文档
        script:javascript脚本
        
  post()方法:发送post请求
    语法:
    $.post(请求的地址,请求的参数,回调函数,服务器反回的数据类型);
    说明:
      回调函数添加的参数是服务器返回的数据
      服务器返回的数据类型:
        html:html文本
        text:文本
        JSON:josn数据格式对象
        xml:xml文档
        script:javascript脚本
  
  
  ajax方法:异步请求服务器
    语法:
      $.ajax({});
    说明:{}内可以设置选项参数
      - url:请求的地址
      - type:请求的方式(get,pot,put,delete)
      - data:请求的参数
      - dataType:服务器返回的数据类型
      - success:服务器处理正常对应的回调函数
      - error:服务器出错对应的回调函数
      - async: true(缺省),当值为false时发送同步请求