前端——jquery

Posted 鵬程萬裏

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端——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;*/
            width: 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;
            width: 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;
            width: 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;
            width: 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" ></a></li>
                <li class="img"><a href=""><img id="img2" src="//img1.360buyimg.com/da/jfs/t6838/58/1188598350/101456/93ca512d/597e7d28N65750c3d.jpg" ></a></li>
                <li class="img"><a href=""><img id="img3" src="//img12.360buyimg.com/da/jfs/t5614/73/8258277091/129172/cd6b7ea5/59793d03N8173f093.jpg" ></a></li>
                <li class="img"><a href=""><img id="img4" src="//img11.360buyimg.com/da/jfs/t5728/157/8872231321/301637/86d6fc6a/597fdcf3N78181b6c.jpg" ></a></li>
                <li class="img"><a href=""><img id="img5" src="//img12.360buyimg.com/da/jfs/t5839/154/8380421091/51117/6f3d50fb/5979ad9dN277885bf.jpg" ></a></li>
                <li class="img"><a href=""><img id="img6" src="//img11.360buyimg.com/da/jfs/t7027/263/1474527209/100106/e209db17/598165beNf30e7083.jpg" ></a></li>
                <li class="img"><a href=""><img id="img7" src="//img10.360buyimg.com/da/jfs/t6040/352/7744875341/73277/88588ea2/59814f5fN4746e6f0.jpg" ></a></li>
                <li class="img"><a href=""><img id="img8" src="//img11.360buyimg.com/babel/jfs/t6886/165/1330183705/71170/e069d1e5/59802506N0c042758.jpg" ></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{
            width: 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;
            width: 100%;
            height: 50px;
            background-color: #272425;
        }
        .left_menu{
            float: left;
            width: 20%;
            margin-left: -1px;
            height: 500px;
            border-right: 1px solid;
        }
        .right_content{
            position: relative;
            top: 0;
            left: 0;
            float: left;
            width: 77%;
            height: 500px;
            padding-left: 40px;
            margin-right: -1px;
        }
        .operation{
            margin-top: 20px;
            color: white;
            width: 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{
            width: 100%;
            font-size: 14px;
        }
        td{
            width: 50px;
            height: 40px;
            border-top: 1px solid #e1e1e1;
        }
        .search_box{
            width: 100%;
            height: 100px;
        }

        #search_bar{
            padding: 10px;
            position: absolute;
            right: 144px;
            top: 36px;
            width: 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{
            width: 500px;
            height: 400px;
            background-color:white;
            position: fixed;
            top: 50%;
            left:50%;
            margin-top: -200px;
            margin-left: -250px;
        }
        .btn{
            width: 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{
            width: 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>

以上是关于前端——jquery的主要内容,如果未能解决你的问题,请参考以下文章

12个用得着的 JQuery 代码片段

[vscode]--HTML代码片段(基础版,reactvuejquery)

前端面试题之手写promise

25个可遇不可求的jQuery插件

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。