【前端】jQuery

一、jQuery是什么？

　　1.jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多JavaScript高手加入其team

　　2.jQuery是继prototype之后有一个优秀的JavaScript框架。其宗旨是——WRITE LESS.DO MORE!

　　3.它是轻量级的js库（压缩后只有21k），这是其他的js库所不及的，它兼容CSS3，还兼容各种浏览器

　　4.jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTMLdocuments、event、实现动画效果，并且方便地为网站提供AJAX交互。

　　5.jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用说得很详细，同时还有许多成熟的插件可供选择。

二、什么是jQuery对象？

　　jQuery对象就是通过包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象。那么它就可以使用jQuery里的方法：

$("#p1") -------> jQuery对象
var ele=document.getElementById("p1") ele------>DOM对象

jQuery与DOM对象下的方法和属性不能混用

jquery对象：
     jQuery.方法====$.方法
     基础语法：$（selector）.action（）

selector：查找想操作的标签

三、寻找元素（选择器和筛选器）

　3.1：选择器

1 基本选择器
$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

2 层级选择器
$(".outer div")：后代选择器
$(".outer>div")：子代选择器 
$(".outer+div")：毗邻选择器
$(".outer~div")：普通兄弟选择器

3 基本筛选器
$("li:last")：最后一个     $("li:first")：第一个     
$("li:eq(2)")：索引为2 
$("li:odd")：奇数     $("li:even")：偶数  
$("li:gt(1)")：大于     $("li:lt(5)")：小于

4 属性选择器
$('[id="div1"]')：id为div1的标签   $('["alex="sb"][id]')：alex属性为sb并且有id属性

5 表单选择器
$("[type='text']")
简写：$(":text")    注意只适用于input标签  :$("input:checked")

　 3.2：筛选器

　　3.2.1：过滤筛选器

$("li").eq(2)：推荐写法  
$("li").first()：第一个
$("li").last()：最后一个
$("ul li").hasclass("test")：有class的值是test

　　3.2.2：查找筛选器

1.查找子标签：
$("div").children(".test")：所有子代中的.test标签
$("div").find(".test")：所有后代中的.test标签

2.向下查找兄弟标签：
$(".test").next():下一个兄弟标签
$(".test").nextAll()：找到下面所有的兄弟标签
$(".test").nextUntil(条件)：直到条件成立停止，同样顾头不顾尾，最后一个取不到

3.向上查找兄弟标签：
$("div").prev()：上一个兄弟标签
$("div").prevAll()：找到上面所有的兄弟标签
$("div").prevUntil(条件)：直到条件成立停止，顾头不顾尾

4.查找所有兄弟标签：
$("div").siblings()
 
5.查找父标签：
$(".test").parent()：找父标签
$(".test").parents()：找多个父标签，父标签的父标签也是父标签，一直找到body层
$(".test").parentUntil(条件)：找所有的父标签直到条件成立停止，顾头不顾尾

注意：jQuery支持链式操作，比如：
$("#d1").next().css("color","red").next().css("color","green");

四、操作元素（属性，css，文档处理）

　4.1：事件

　　4.1.1：页面载入

　　当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

　　写法：

$(document).read(function(){
  // 在这里写你的JS代码...
})

　　简写：

$(function(){
  // 你在这里写你的代码
})

　　4.1.2：事件绑定

//语法:  标签对象.事件(函数)    
eg: $("p").click(function(){})

　　4.1.3：事件委派（父标签把方法委派给子标签）

　　on方法：事件绑定不再给指定的标签绑定，而是绑定给父标签

语法：$("父级标签").on(eve,[selector],[data],fn)  
// 在选择元素上绑定一个或多个事件的事件处理函数。

off：解除事件（绑定谁解除谁）

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

　4.2：属性操作

--------------------------CSS类
$("").addClass(class名)：添加类
$("").removeClass([class名])：删除类
--------------------------属性
$("").attr();：
$("").attr("属性")：取值
$("").attr(“属性”，“值”)：赋值
$("").removeAttr();：删除属性
 
$("").prop()：用于checked、selected属性
$("").prop("属性")：取值
$("").prop(“属性”，“值”)：赋值
$("").removeProp();
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})

 　4.3：each循环

　　jQuery支持两种循环方式，方式一（类下的方法）：

格式：$each（obj，callback）

li=[10,20,30,40];
$.each(li,function(i,x){
    console.log(i,x)
});
在这里i是索引，x是值

　　方式二（实例下的方法）：

格式：$("").each(fn)

$("tr").each(function(){
    console.log($(this).html())
})

在这里,$(this)代指当前循环标签。

　　扩展

li=[11,22,33,44];
    $.each(li,function(i,v){

        if (v==33){
                return ;   
            }
            console.log(v)
    });

//each的参数function内如果出现return 结束档次循环，类似于continue；
                     如果出现return false，结束的是整个each循环，类似break。
//结果是11,22,44；因为这里每次循环都执行一个函数，当v==33的时候只是结束了一次函数

　4.4：文档节点处理

//创建一个标签对象，用变量名拿对象时要加$，表示这是一个jquery对象
    $("<p>")

//内部插入
    $("").append(content|fn)：追加到最后一个位置     
                                   ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)：子标签添加到父标签里面的最后
                                   ----->$("p").appendTo("div");
    $("").prepend(content|fn)：添加到第一个位置
                                   ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)：子标签添加到父标签里面的首尾
                                   ----->$("p").prependTo("#foo");

//外部插入
    $("").after(content|fn)：添加兄弟标签到后面
                                ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)：添加兄弟标签到前面
                                ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)：标签添加到某个兄弟标签的后面
                                ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)：标签添加到某个兄弟标签的前面
                                ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn)：直接oldnode替换成newnode
                    ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除
    $("").empty()：清空节点内容
    $("").remove([expr])：删除节点（删谁谁调用）

//复制
    $("").clone([Even[,deepEven]])

　4.5：动画效果

　　1.基本

.show([speed, [easing], [fn]])：显示 //显示隐藏的匹配元素。
.hide([speed, [easing], [fn]])：隐藏 //隐藏显示的匹配元素。
.toggle([speed], [easing], [fn]) //如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

参数介绍：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”。

fn:在动画完成时执行的函数，每个元素执行一次。

　　2.滑动

.slideDown([speed, [easing], [fn]])：显示 //通过高度变化（向下增大）来动态地显示所有匹配的元素。

.slideUp([speed, [easing], [fn]])：隐藏 //通过高度变化（向下减小）来动态地隐藏所有匹配的元素。

.slideToggle([speed, [easing], [fn]]) //通过高度变化来切换所有匹配元素的可见性。

参数同上

　　3.淡入淡出

.fadeIn([speed, [easing], [fn]])：显示 //通过不透明度的变化来实现所有匹配元素的淡入效果。
.fadeOut([speed, [easing], [fn]])：隐藏 //通过不透明度的变化来实现所有匹配元素的淡出效果。
.fadeTo([speed, [easing], [fn]]) //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。
.fadeToggle([speed, [easing], [fn]]) //通过不透明度的变化来切换所有匹配元素的淡入和淡出效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图片轮播</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .image_carousel{
            position: relative;
            left: 0;
            top:0;
            /*border: 1px solid;*/
             790px;
            height: 340px;
            margin: 138px auto;
            overflow: hidden;
        }
        .image_list li{
            list-style: none;
            position: absolute;
            left: 0;
            top:0;
        }
        .cut_button{
            position: absolute;
            /*z-index: 1;*/
            left: 37%;
            bottom: 22px;
             194px;
            height: 12px;
            background-color: hsla(0,0%,100%,.3);
            padding: 5px 10px;
            border-radius: 12px;
            line-height: 12px;
            text-align: center;

        }
        .cut_button_list li{
            display:inline-block;
             12px;
            height: 12px;
            background-color: #fff;
            list-style: none;
            margin-left: 4px;
            margin-right: 4px;
            border-radius: 100%;
        }
        .cut_button_list li:hover{
            background-color: #db192a;
        }

        .btn a{
            font-size: 25px;
            color: white;
            position: absolute;
            bottom: 141px;
             30px;
            height: 60px;
            background-color: RGBA(0,0,0,0.3);
            line-height: 60px;
            text-align: center;
            text-decoration: none;
        }
        .last a{
            left: 0;
        }
        .next a{
            right: 0;
        }
        a:hover{
            background-color: RGBA(0,0,0,0.7);
        }

    </style>
</head>
<body>
    <div class="image_carousel">
        <div class="image">
            <ul class="image_list">
                <li class="img"><a href=""><img id="img1" src="//img12.360buyimg.com/da/jfs/t6946/30/363119663/215517/327addf9/597594f1N6d4f6f9a.jpg" alt=""></a></li>
                <li class="img"><a href=""><img id="img2" src="//img1.360buyimg.com/da/jfs/t6838/58/1188598350/101456/93ca512d/597e7d28N65750c3d.jpg" alt=""></a></li>
                <li class="img"><a href=""><img id="img3" src="//img12.360buyimg.com/da/jfs/t5614/73/8258277091/129172/cd6b7ea5/59793d03N8173f093.jpg" alt=""></a></li>
                <li class="img"><a href=""><img id="img4" src="//img11.360buyimg.com/da/jfs/t5728/157/8872231321/301637/86d6fc6a/597fdcf3N78181b6c.jpg" alt=""></a></li>
                <li class="img"><a href=""><img id="img5" src="//img12.360buyimg.com/da/jfs/t5839/154/8380421091/51117/6f3d50fb/5979ad9dN277885bf.jpg" alt=""></a></li>
                <li class="img"><a href=""><img id="img6" src="//img11.360buyimg.com/da/jfs/t7027/263/1474527209/100106/e209db17/598165beNf30e7083.jpg" alt=""></a></li>
                <li class="img"><a href=""><img id="img7" src="//img10.360buyimg.com/da/jfs/t6040/352/7744875341/73277/88588ea2/59814f5fN4746e6f0.jpg" alt=""></a></li>
                <li class="img"><a href=""><img id="img8" src="//img11.360buyimg.com/babel/jfs/t6886/165/1330183705/71170/e069d1e5/59802506N0c042758.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="cut_button">
            <ul class="cut_button_list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="last btn"><a> < </a></div>
        <div class="next btn"><a> > </a></div>
    </div>


    <script src="jquery-3.2.1.js"></script>
    <script>
        var x=0;   //定义全局变量用来标识两轮播图位置
        //轮播图切换函数
        function cut_img() {
            $(".cut_button_list li").eq(x).css("background-color","#db192a").siblings().css("background-color","#fff");
            $(".image_list li").eq(x).fadeIn(1000).siblings().fadeOut(1000);
        }

        //自动切换图片函数
        function auto_cut_img() {
            if (x!==$(".img").length-1){
                x++;
            }
            else {
                x=0;
            }
            cut_img()
        }

        var ID;
        cut_img();
        ID=setInterval(auto_cut_img,2000); //启动定时器
        $(".cut_button_list li").mouseover(function () {
            x=$(this).index();
            cut_img()
        });

        $(".image_carousel").hover(function () {
            clearInterval(ID);
        },function () {
            ID=setInterval(auto_cut_img,2000);
        });

        //上一张图按钮
        $(".last").click(function () {
            if (x!==0){
                x--;
            }
            else {
                x=$(".img").length-1;
            }
            cut_img()
        });
        //下一张图按钮
        $(".next").click(function () {
            auto_cut_img()
        })
    </script>
</body>
</html>

　　4.自定义

.animate(params, [speed], [easing], [fn]) //用于创建自定义动画的函数。

参数介绍：
params:一组包含作为动画属性和终值的样式属性和及其值的集合。

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”。

fn:在动画完成时执行的函数，每个元素执行一次。

　4.6：CSS操作

　　1.CSS位置操作

$("").offset([coordinates])：偏移，有两个属性，分别是top和left，位置是以左上角的位置来判断的（针对整个窗口去拿位置）
赋值方式：$("").offset({left:200,top:200})

$("").position()：定位，也有一个top值和left值（针对父级已定位标签去拿位置）
$("").scroll：滚动条滚动时触发的事件
$("").scrollTop([val])：调上下的滚动条
返回顶部，要给整个窗口加，$(window).scrolltop（0），可以取值可以赋值
$("").scrollLeft([val])：调左右的滚动条
$("").css("cursor","move")：cursor改变鼠标样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../day45jQuery/jquery-3.2.1.js"></script>
    <style>
        *{
            margin: 0;
        }
        .s1{
             200px;
            height: 200px;
            background-color: #396bb3;
        }
    </style>
</head>
<body>
<div class="s1"></div>
<script>
    var mouse_x=0;
    var mouse_y=0;
    $(".s1").mouseover(function () {
        $(this).css("cursor","move")
    });
    $(".s1").mousedown(function (e) {
        mouse_x=e.clientX;
        mouse_y=e.clientY;
        var $box_top=$(".s1").offset().top;
        var $box_left=$(".s1").offset().left;

        $(document).mousemove(function (e) {
            var new_mouse_x=e.clientX;
            var new_mouse_y=e.clientY;
            $(".s1").offset({"left":$box_left+new_mouse_x-mouse_x,"top":$box_top+new_mouse_y-mouse_y})
        })
    });
    $(document).mouseup(function () {
        $(this).off("mousemove")
    })

</script>
</body>
</html>

　　状态事件对象：event

event对象是保存事件触发状态的对象，由操作系统发送

ele.onkeydown=function (e) {
    e=e||window.event;
    console.log(String.fromCharCode(e.keyCode));

e.keyCode拿到的是键盘按下键的asc码，然后用String.fromCharCode方法拿到用户按下的键

e.clientX：拿到鼠标的X轴坐标
e.clientY：拿到鼠标的Y轴坐标

　　2.尺寸操作

$("").height([val|fn])：拿的是文本框的高
$("").width([val|fn])：拿的是文本框的宽
$("").innerHeight()：加上padding的高
$("").innerWidth()：加上padding的宽
$("").outerHeight([soptions])：再加上border的高，如果里面的参数加上ture，会连Maggin都算上
$("").outerWidth([options])：加上border的宽，同上

 练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .navbar{
            float: left;
             100%;
            height: 50px;
            background-color: #272425;
        }
        .left_menu{
            float: left;
             20%;
            margin-left: -1px;
            height: 500px;
            border-right: 1px solid;
        }
        .right_content{
            position: relative;
            top: 0;
            left: 0;
            float: left;
             77%;
            height: 500px;
            padding-left: 40px;
            margin-right: -1px;
        }
        .operation{
            margin-top: 20px;
            color: white;
             100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #396bb3;
        }
        .operation_list{
            list-style: none;
        }
        .operation_list li{
            margin: 10px;
            font-size: 14px;
        }
        .operation_list li a{
            color: #396bb3;
            text-decoration: none;
        }
        .book_info{
             100%;
            font-size: 14px;
        }
        td{
             50px;
            height: 40px;
            border-top: 1px solid #e1e1e1;
        }
        .search_box{
             100%;
            height: 100px;
        }

        #search_bar{
            padding: 10px;
            position: absolute;
            right: 144px;
            top: 36px;
             200px;
            border-radius: 7px;
            border: 1px solid #e1e1e1;
        }
        .search_btn{
            color: white;
            border-radius: 5px;
            padding: 9px;
            background-color: #396bb3;
            position: absolute;
            right: 93px;
            top: 34px;
        }
        .hide{
            display: none;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.4;
        }
        .model,.model2{
             500px;
            height: 400px;
            background-color:white;
            position: fixed;
            top: 50%;
            left:50%;
            margin-top: -200px;
            margin-left: -250px;
        }
        .btn{
             50px;
            height: 30px;
            border-radius: 5px;
            color: white;
        }
        .del_btn{
            background-color: #ff1732;
        }
        .btn2{
            background-color: #396bb3;
        }
        .btn3{
            background-color: #4cff82;
        }
        .edit_btn{
            background-color: #ffdd3f;
        }
        .cancel_btn{
            background-color: #ff1732;
        }
        .input_field{
            height: 30px;
            border-radius: 5px;
            margin: 10px;
        }
        .model{
            padding-left: 150px;
        }
        #put_info{
            margin-left: 100px;
        }
        #cancle{
            margin-left: 50px;
        }
        .head{
             80%;
            height: 100%;
            margin: 0 auto;
        }
        .title{
            float: left;
            color: white;
            font-size: 28px;
            line-height: 100%;
            margin-top: 8px;
        }
        .index_link{
            float: left;
            color: #e1e1e1;
            font-size: 15px;
            margin-top: 15px;
            margin-left: 80px;
            text-decoration: none;

        }
        .copyright{
            line-height: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="navbar">
        <div class="head">
            <div class="title">图书管理系统</div>
            <div ><a href="" class="index_link">首页</a></div>

        </div>
    </div>
    <div class="left_menu">
        <div class="operation">操作</div>
        <ul class="operation_list">
            <!--<li><a href="" >>>>添加书籍</a></li>-->
            <li><a href="" >>>>草稿箱</a></li>
            <li><a href="" >>>>设置默认编辑器</a></li>
            <li><a href="" >>>>备份书籍</a></li>
        </ul>
    </div>

    <div class="right_content">

        <div class="search_box">

            <form action="">
                <input type="text" placeholder="Title" id="search_bar">
            </form>
            <button class="search_btn">查找</button>
        </div>
        <button class="btn2 btn" id="add_info">添加</button>
        <table class="book_info">
            <tr>
                <td>图书编号</td>
                <td>书名</td>
                <td>作者</td>
                <td>价格</td>
                <td>分类</td>
                <td>上架时间</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td>囚徒健身</td>
                <td>保罗·威德(美)</td>
                <td>79￥</td>
                <td>健身</td>
                <td>2013年10月</td>
                <td>
                    <button class="edit_btn btn">编辑</button>
                    <button class="del_btn btn">删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>万历十五年</td>
                <td>黄仁宇</td>
                <td>18￥</td>
                <td>历史</td>
                <td>1990年1月1日</td>
                <td>
                    <button class="edit_btn btn">编辑</button>
                    <button class="del_btn btn">删除</button>
                </td>
            </tr>
        </table>
    </div>
    <div class="shade hide"></div>
    <div class="model hide">
        <div>图书编号：<input type="text" class="input_field" value=""></div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;书名：<input type="text" class="input_field" value=""></div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作者：<input type="text" class="input_field" value=""></div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格：<input type="text" class="input_field" value=""></div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分类：<input type="text" class="input_field" value=""></div>
        <div>上架时间：<input type="text" class="input_field" value=""></div>
        <button class="btn3 btn" id="put_info">提交</button>
        <button class="cancel_btn btn" id="cancle">取消</button>
    </div>
    <div class="copyright">
        <p>&copy;All rights reserved</p>
        <p><b>Powered by</b> Amos</p>
    </div>
</div>
<script>
    var x; //用来判断是添加还是编辑
    //点击添加信息，弹出空对话框
    $("#add_info").click(function () {
        $(".shade,.model").removeClass("hide");
        $(":text").val("")

    });

    //点击取消，收回对话框
    $("#cancle").click(function () {
        $(".shade,.model").addClass("hide");
    });

    //点击提交信息，
    $("#put_info").click(function () {
        //添加页面
        if (x==undefined){
            var $tr=$("<tr>");
            $(".model :text").each(function () {
                var $td=$("<td>");
                $td.text($(this).val());
                $tr.append($td);
            });
            var $td=$("<td>");
            var $edit_btn=$("<button>");
            var $del_btn=$("<button>");
            $td.append($edit_btn.text("编辑").addClass("edit_btn").addClass("btn"));
            $td.append($del_btn.text("删除").addClass("del_btn").addClass("btn"));
            $tr.append($td);
            $(".book_info").append($tr);
            $(".shade,.model").addClass("hide");
        }
        //编辑页面
        else {
            //创建新的tr节点，添加td节点
            var $tr=$("<tr>");
            $(".model :text").each(function () {
                var $td=$("<td>");
                $td.text($(this).val());
                $tr.append($td);
            });
            //拿新建的tr内容去替换旧的tr内容
            $tr.children().each(function () {
                var $index_val=$(this).index();//拿到索引
                $(edit_obj[$index_val]).text($(this).text())
            });
            x=undefined;//把x恢复成原装
            $(".shade,.model").addClass("hide"); //关闭对话框

        }
    });
    //点击删除按钮
    $(".book_info").on("click",".del_btn",function () {
        $(this).parent().parent().remove()
    });
    //点击编辑按钮
    $(".book_info").on("click",".edit_btn",function () {
        x=1;
        edit_obj=$(this).parent().siblings();//定义全局变量让上面知道在操作哪行
        $(this).parent().siblings().each(function () {
            var $input_field=$(".model :text");
            var index_val=$(this).index(); //拿到每个格子的索引值
            //把每个框的value值换成表格里的值
            $($input_field[index_val]).val($(this).text());
        });
        $(".shade,.model").removeClass("hide"); //弹出对话框
    })
</script>
</body>
</html>