jQuery 之（三）事件绑定、动画效果、封闭ajax、三级联动、插件

你的名字 2022-09-26 02:12 274阅读 0赞

# 事件绑定 #

## 事件绑定 ##

jquery事件的简单操作：
    $().事件类型(function事件处理);
    $().事件类型();

### jquery事件绑定 ###

$().bind(事件类型，function事件处理);
    $().bind(类型1 类型2 类型3，事件处理);   //给许多不同类型的事件绑定同一个处理
    $().bind(json对象);      //同时绑定多个不同类型的事件
    (事件类型：click  mouseover  mouseout  focus  blur 等等)
    事件处理：有名函数、匿名函数

### 取消事件绑定 ###

① $().unbind();                    //取消全部事件
    ② $().unbind(事件类型);        //取消指定类型的事件
    ③ $().unbind(事件类型，处理);     //取消指定类型的指定处理事件
    注意：第③种取消事件绑定，事件处理必须是有名函数。

事件绑定是丰富事件操作的形式而已。
    
    从dom2级事件操作开始，同一个对象可以绑定多个同类型的事件，具体如下：
    dvnode.addEventListener(‘click’,fn);
    dvnode.addEventListener(‘click’,fn);
    $(‘div’).click(function);
    $(‘div’).click(function);

## 事件委派 ##

![这里写图片描述][20160916100645274]

## 事件对象、阻止浏览器默认动作、阻止事件冒泡 ##

![这里写图片描述][20160916104305650]  
![这里写图片描述][20160916104340135]

# 动画效果 #

## 基本动画 ##

![这里写图片描述][20160916104748013]  
![这里写图片描述][20160916105206843]

## 垂直动画 ##

## 颜色渐变动画 ##

![这里写图片描述][20160916114228689]  
![这里写图片描述][20160916114254971]

# jquery封装的ajax #

具体操作：
    $.get(url  [,data]  [,fn回调函数]   [, dataType]);
        data:给服务器传递的数据，请求字符串 、json对象 都可以设置
        fn：回调函数，ajax请求完成后调用该函数，可以在此函数完成ajax的后续处理
        dataType：服务器返回数据类型，html、text、xml、json
    (该ajax是异步的get方式请求)
    
    $.post(url[,data][,fn回调函数][, dataType]);
        该方法与$.get()方法使用完全一致，不同的是其为post方式请求
    
    $.ajax({  //json对象
        url:请求地址,
        data:给服务器传递的数据,
        dataType:数据从服务器返回格式html、text、xml、json
        type:get/post请求方式
        success:function(){}  ajax成功请求后的回调函数，可以做后续处理使用
        async:[true]异步/false同步，
        cache:[true]缓存/false不缓存,
    })

![这里写图片描述][20160916115324437]

10.php

<?php
        //echo print_r($_GET);
        echo '{"addr":"北京","weather":"sun"}';

# 地区三级联动 #

技术：jquery + ajax + xml/json

## 省份的获取和显示 ##

xml文件太长了，不贴了

$(function(){ 
                //页面加载完毕立即获得省份信息
                //ajax去服务器端获得省份信息
                $.ajax({
                    url:'./ChinaArea.xml',
                    type:'get',
                    dataType:'xml',
                    success:function(msg){ 
                        //alert(msg);//object XMLDocument
                        $(msg).find('province').each(function(k,v){ 
                            var nm = $(this).attr('province');
                            var id = $(this).attr('provinceID');
                            $('#province').append('<option value="'+id+'">'+nm+'</option>');
                        });
                    }
                });
            });

## 显示对应城市信息 ##

//通过省份显示城市信息
            function showcity(){ 
                //获得选中省份的value值
                var pid = $('#province').val();
                //只保留省份的前两们id
                pid = pid.substr(0,2);
    
                //清空旧的城市信息
                $('#city').empty();
    
                //获得xml地区信息的city标签，条件是id开始内容是pid
                $(xmldom).find('City[CityID^='+pid+']').each(function(){ 
                    var nm = $(this).attr('City');
                    var id = $(this).attr('CityID');
                    $('#city').append('<option value="'+id+'">'+nm+'</option>');
                });
            }

全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>新建网页</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type='text/javascript' src='jquery-3.1.0.js' ></script>
            
            <script type="text/javascript"> var xmldom = null; //声明变量用于存储全部的xml document对象信息 $(function(){ //页面加载完毕立即获得省份信息 //ajax去服务器端获得省份信息 $.ajax({ url:'./ChinaArea.xml', type:'get', dataType:'xml', success:function(msg){ //alert(msg);//object XMLDocument $(msg).find('province').each(function(k,v){ //k代表province下标，v和this分别代表每个province的dom对象 var nm = $(this).attr('province'); var id = $(this).attr('provinceID'); $('#province').append('<option value="'+id+'">'+nm+'</option>'); }); xmldom = msg; } }); }); //通过省份显示城市信息 function showcity(){ //获得选中省份的value值 var pid = $('#province').val(); //只保留省份的前两们id pid = pid.substr(0,2); //清空旧的城市信息 $('#city').empty(); //获得xml地区信息的city标签，条件是id开始内容是pid $(xmldom).find('City[CityID^='+pid+']').each(function(){ var nm = $(this).attr('City'); var id = $(this).attr('CityID'); $('#city').append('<option value="'+id+'">'+nm+'</option>'); }); } function showarea(){ var cid = $('#city').val(); cid = cid.substr(0,4); $('#area').empty(); $(xmldom).find('Piecearea[PieceareaID^='+cid+']').each(function(){ var nm = $(this).attr('Piecearea'); var id = $(this).attr('PieceareaID'); $('#area').append('<option value="'+id+'">'+nm+'</option>'); }); } </script>
        </head>
        <body>
            <h2>地区三级联动</h2>
            省份：
            <select id="province" onchange="showcity()">
                <option value="0">-请选择-</option>
            </select>  
            城市：
            <select id="city" onchange='showarea()'>
                <option value="0">-请选择-</option>
            </select>  
            地区：
            <select id="area">
                <option value="0">-请选择-</option>
            </select>  
        </body>
    </html>

# 迷你版jquery开发 #

选择器：#id、tag标签
    方法：css()、attr()、each()方法
    (在each()方法里边可以清楚知道jquery里边this如何代表dom对象)

![这里写图片描述][20160916133131242]

## 制作选择器 ##

![这里写图片描述][20160916133245174]

## 各种方法的封装 ##

![这里写图片描述][20160916133333995]  
![这里写图片描述][20160916133410113]  
学习”迷你版jquery”要认识到的地方：  
① jquery里边的大部分方法有“遍历机制”  
② jquery方法里边的参数this是代表dom对象

# jquery插件开发 #

## 什么是jquery插件 ##

jquery框架本身给我们提供了一些方法供使用。但是方法的数目是有限的，其不能任意满足我们对各种功能的需求。那么我们自己可以来给jquery框架开发、扩展一些额外功能方法。
    
    开发、扩展jquery框架额外方法的过程就是“插件开发”

## 两种形式丰富方法 ##

①  给$.fn(给jquery对象)丰富
        $.fn.成员 = 值;
        $.fn.extend(json对象);
    ②  给$(给$对象)丰富
        $.成员 = 值;
        $.extend(json对象);

## 开发图片自动切换插件 ##

/* date:2015/4/1 17:09 author:itcast0105 example: html_code: <h2>图片切换插件使用</h2> <img src="./img/1.jpg" alt="" width="300" height="200" /> jquery_code: $(function(){ $.picbofang(); }); */
    //实现picbofang()方法
    $.picbofang = function(){ 
        tihuanpic = function(){ 
            //获得当前图片的序号
            var picid = $('img').attr('src').substr(6,1);
            var nextid = ++picid;
            if(nextid==7)
                nextid=1;
    
            $("img").attr('src',"./img/"+nextid+".jpg");
        }
        setInterval("tihuanpic()",1000);
    }

![这里写图片描述][20160916135330091]

## 使用”成品jquery插件”的步骤 ##

① 引入jquery的插件文件
    ② 引入对应的css样式、img图片、辅助的相关js文件
    ③ 检查jquery插件对本身jquery是否有要求

[20160916100645274]: /images/20220717/76a31ff759d44e509998246ce0c4e924.png
[20160916104305650]: /images/20220717/651068eaa58d47a9a5e9dfc359ea02d0.png
[20160916104340135]: /images/20220717/8c2fd71a1ba54216970ce49d7bb29895.png
[20160916104748013]: /images/20220717/562ba68f30b7488395696ad9d6543bfe.png
[20160916105206843]: /images/20220717/10ec26f7761c4c07ad9c9a3e4a713158.png
[20160916114228689]: /images/20220717/503fcc122cd04b3da5aeb8b54ddea3c8.png
[20160916114254971]: /images/20220717/82451c1ab3b1427cbb073bb66824da71.png
[20160916115324437]: /images/20220717/58f145b6ef194b1f8d773f2389b0ba7d.png
[20160916133131242]: /images/20220717/ed1f059e76864e0c9309c2ce04b58fc8.png
[20160916133245174]: /images/20220717/703531f51ebc4b668f8335b66336acd8.png
[20160916133333995]: /images/20220717/aa8293b1895b4d229fa09c79c436b3e0.png
[20160916133410113]: /images/20220717/9942a4bfeaf143c0939c81f3aa94aa3e.png
[20160916135330091]: /images/20220717/986e8cf0d32d4e86abc2328c79d430e9.png