码迷,mamicode.com
首页 > Web开发 > 详细

JQuery

时间:2018-12-27 22:58:41      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:nextall   sed   first   就会   循环函数   1.4   现实生活   close   ret   

  一、JQuery对象

  不管是JavaScript还是css,还是JQuery都是对标签进行操作,所以我们的总体步骤都是先找到标签,然后再对标签进行操作。对于JavaScript来说,用id找到只有一个,用class找到的不管你存在几个,得到永远是一个数组,JavaScript的方法是在DOM对象的基础上进行的,而且只能对DOM对象进行操作;对于JQuery来说,不管你用什么方法找的,得到的永远就是一个数组,意味着JQuery对象就是一个数组,这个数组是由DOM对象组成,JQuery的方法只能对JQuery对象进行操作。DOM对象和JQuery对象是可以切换的。

ss为JQuery对象,ss1为DOM对象。
ss[索引] #现在JQuery对象就转换成DOM对象了,就可以用DOM对象的方法来对它进行操作
$(DOM) #现在DOM对象就转换成JQuery对象了,也就可以用JQuery对象的方法来对它进行操作

  二、寻找元素

  1,选择器查找,语法:$(‘选择器‘),选择器的用法和css一样

基本选择器
    $(‘*‘)所有标签  $(‘.class‘)类选择器  $(‘#id‘)id选择器  $(‘p‘)标签选择器  $(‘.class,p,#id‘)并集选择器  $(‘p.class‘)交集选择器
层级选择器 $(‘.class p‘)后代选择器 $(‘.class>p‘)儿子选择器 $(‘.class+p‘)兄弟选择器 $(‘.class~p‘)毗邻选择器
基本筛选器 $(‘li:first‘)li标签选出来的第一个 $(‘li:eq(3)‘)第三个 $(‘li:even‘)偶数个0,2,4 $(‘li:odd‘)奇数个1,3,5 $(‘li:gt(1)‘)大于1 $(‘li:lt(3)‘)小于3
属性选择器 $(‘[属性名]‘)有这属性的所有标签 $(‘[属性名=值]‘)找到属性名=值的标签
表单选择器 $(‘[type="text"]‘)可以写成$(‘:text‘) 只适用于input标签

  2,筛选器

  2.1 过滤筛选器

$(‘li‘).eq(3)    相当于于$(‘li:eq(3)‘)
$(‘li‘).first() 等等都是一样的
而且这种用法比基本选择器好用

  2.2 查找选择器

查找子标签:         $("div").children(".test")只在儿子中找      $("div").find(".test")后代都找  
                               
向下查找兄弟标签:    $(".test").next()后一个兄弟               $(".test").nextAll()后面的所有兄弟     $(".test").nextUntil(#id)后面在id之前的兄弟
                           
向上查找兄弟标签:    $("div").prev()前一个兄弟                  $("div").prevAll()前面所有兄弟        $("div").prevUntil(#id)前面在id之后的兄弟 
查找所有兄弟标签: $("div").siblings()所有的兄弟 查找父标签: $(".test").parent()父级 $(".test").parents()所有的父级 $(".test").parentUntil(#id)在#id级下的父级

  三、操作元素

  1,文本操作

$(‘选择器‘).html()     相当于js中的DOM对象的innerHTML,拿到文本
$(‘选择器‘).text() 相当于js中的DOM对象的innerText,y也是拿到文本,
$(‘选择器‘).html(‘nihao‘) 相当于js中的DOM对象的innerHTML=‘nihao‘,进行赋值操作
$(‘选择器‘).text(‘nihao‘) 相当于js中的DOM对象的innerText=‘nihao’,进行赋值操作
html()和text()两者的区别和js中是一样的

  2,事件

  2.1 绑定

$(‘选择器‘).click(function(){})
对比于js,去掉了‘on’,去掉了‘=’号;而且JQuery对象是一个数组,里面放了n个DOM对象,事件绑定是为每个DOM对象都绑定上了事件,相当于内部自带一个for循环

  2.2 委派

$(‘选择器‘).on(‘click‘,‘选择器‘,function(){})
如$(‘ul‘).on(‘click‘,‘li‘,function(){}) 为ul标签下的每个li标签绑定click事件
委派的用处在于:我们在为ul标签里添加li标签之后,添加的li也会具有click事件;但如果使用绑定事件,只会在最开始绑定的li标签才会有事件,后面添加的li就没有事件
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="dd">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
    </ul>
    <button id="d1">添加li标签</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(#dd).on(click,li,function () {
        alert(123)
    });
    $(#d1).click(function () {
        $(#dd).append(<li>666</li>)
    })
</script>
</body>
</html>
委派

  3,属性操作

属性
$(‘选择器‘).attr(‘属性名‘)    #得到属性名对应的值
$(‘选择器‘).attr(‘属性名‘,‘值‘) #设置属性
$(‘选择器‘).removeAttr(‘属性名‘) #删除属性名对应的属性

class属性
$(‘选择器‘).addclass(‘类名‘) #为class属性再添加一个类
$(‘选择器‘).removeclass(‘类名‘) #把class属性的一个类删除

css控制
$(‘选择器‘).css(‘属性名’,‘值‘) 用css样式控制
$(‘选择器‘).css({‘color‘:‘red‘,‘fontSize‘:‘35px‘})

  4,each循环

  我们拿到的JQuery对象是一个数组,后面加上方法就是对数组里的每个DOM对象加上方法。但不是JQuery并没有提供我们想要的所有方法,所有我们手动加for循环也很重要,JQuery提供了一个each()方法,这就相当于for循环。

  4.1 方式一 

$.each(obj,fn)    obj只能为数组或键值对象,相当于遍历数组
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
    console.log(i,x)   i为索引,x为值
});
$.each(dic,function(i,x){
    console.log(i,x)   i为键,x为值
});

  4.2 方式二

$(‘选择器‘).each(function(){
    this就是每一个DOM对象,$(this)就变成JQuery对象了
  在这里就可以对每一个加上方法 })

  4.3 扩展

        function f(){

        for(var i=0;i<4;i++){

            if (i==2){
                return     相当于continue
            }
            console.log(i)
        }
    }
----------------------------------------------------------------------- for(var i in obj){ ret=func(i,obj[i]) ; if(ret==false){ return False ; 相当于break } } // 这样就很灵活了: // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false

  5,节点操作

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");在p标签里的最后面插入b标签
    $("").appendTo(content)       ----->$("p").appendTo("div");     把p标签插入div标签里的最后面
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");在p标签里的最前面插入b标签
    $("").prependTo(content)      ----->$("p").prependTo("#foo");  把p标签插在foo标签的最前面

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>"); 在p标签的后面插入b标签
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>"); 在p标签的前面插入b标签
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");   把p标签换成b标签

//删除

    $("").empty()     把里面包含的内容清空,但标签还在
    $("").remove([expr])  直接把标签给删除

//复制

    $("").clone([Even[,deepEven]])

  6,动画效果

  6.1 hide()隐藏,show()显示,toggle()相反的

技术分享图片显示隐藏

  6.2 fadeIn()淡入,fadeOut()淡出,fadeToggle相反的,fadeTo()可以设置透明度

技术分享图片淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

  7,css操作

  7.1 css位置操作

 $("").offset([coordinates])
 $("").position()
 $("").scrollTop([val])
 $("").scrollLeft([val])

示例

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1{
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>


<h1>this is offset</h1>
<div class="test1"></div>
<p></p>
<button>change</button>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    var $offset=$(".test1").offset();
    var lefts=$offset.left;
    var tops=$offset.top;

    $("p").text("Top:"+tops+" Left:"+lefts);
    $("button").click(function(){

        $(".test1").offset({left:200,top:400})
    })
</script>
</html>
View Code
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: darkcyan;
        }
        .parent_box{
             position: relative;
        }
    </style>
</head>
<body>




<div class="box1"></div>
<div class="parent_box">
    <div class="box2"></div>
</div>
<p></p>


<script src="jquery-3.1.1.js"></script>
<script>
    var $position=$(".box2").position();
    var $left=$position.left;
    var $top=$position.top;

    $("p").text("TOP:"+$top+"LEFT"+$left)
</script>
</body>
</html>
View Code
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: peru;
            position: fixed;
            right: 0;
            bottom: 0;
            color: white;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: wheat;
            font-size: 5px;
            overflow: auto;
            width: 500px;
            height: 200px;
        }
        .div2{
            background-color: darkgrey;
            height: 2400px;
        }


        .hide{
            display: none;
        }
    </style>
</head>
<body>
     <div class="div1 div">
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
     </div>
     <div class="div2 div"></div>
     <div class="returnTop hide">返回顶部</div>

 <script src="jquery-3.1.1.js"></script>
    <script>
         $(window).scroll(function(){
             var current=$(window).scrollTop();
              console.log(current);
              if (current>100){

                  $(".returnTop").removeClass("hide")
              }
              else {
              $(".returnTop").addClass("hide")
          }
         });


            $(".returnTop").click(function(){
                $(window).scrollTop(0)
            });


    </script>
</body>
</html>
View Code

  7.2 尺寸操作

 $("").height([val|fn])
 $("").width([val|fn])
 $("").innerHeight()
 $("").innerWidth()
 $("").outerHeight([soptions])
 $("").outerWidth([options])

示例

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: wheat;
            padding: 50px;
            border: 50px solid rebeccapurple;
            margin: 50px;
        }

    </style>
</head>
<body>




<div class="box1">
    DIVDIDVIDIV
</div>


<p></p>

<script src="jquery-3.1.1.js"></script>
<script>
    var $height=$(".box1").height();
    var $innerHeight=$(".box1").innerHeight();
    var $outerHeight=$(".box1").outerHeight();
    var $margin=$(".box1").outerHeight(true);

    $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
</script>
</body>
</html>
View Code

实例

  1,tab切换

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100%;
            background-color: grey;
            color: blue;
            font-size: 30px;
        }
        .c2{
            width: 1000px;
            margin: 0 auto;
        }
        .c2 span{
            margin-left: 175px;
        }
        .c3{
            border: 1px solid black;
            height: 500px;
            margin: 0 auto;
            width: 1000px;
        }
        .hide{
            display: none;
        }
        .cc{
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">
            <span class="c4" id="i1">栏目一</span>
            <span class="c4" id="i2">栏目二</span>
            <span class="c4" id="i3">栏目三</span>
        </div>
    </div>
    <div>
        <div class="c3">
            <span class="hide i1">生命来来往往,来日并不方长。时光如水流逝,岁月无声催老。每一天,都过得忙忙碌碌,每一天,都有不同的精彩。春花秋月,夏雨冬雪,走过了一程又一程,蓦然回首,便已是上有老下有小的年纪。曾经年少,不解父母辛劳,一路成长,一路依靠。所谓养儿方知父母恩,为人父母之后,自己如何操劳,如何不易,唯有经历过后,才知其中艰辛。这世上,从来就没有什么感同身受,唯有亲身经历,才能深解其味。人生,就是一场轮回,年轻的时候,谁不为子女奔波劳累,待到子女羽翼已丰,不再需要护佑之时,自己已是夕阳暮景。而那些曾经的子女,也会成为新的父母,一如自己的父母那般,勤勤恳恳,为自己的子女操劳负累,待到子女再次长成,自己便也老去。谁都有年迈之时。幼时,父母耐心教导,周全照料,待到父母暮年,我们是否也能如同曾经他们对待我们那般,不嫌不怪,周全仔细,用心侍奉。人生,总是吃过生活的苦,才知道幸福有多甜蜜;走过太多弯路,才明白自己要怎么活。衡量幸福的标准,不是你得到了多少,而是要看你当下拥有多少,并且,要懂得珍视。在这个世界上,父母,是唯一尽心付出却不求回报的人,也是最不愿意给我们添麻烦的人。都说,做父母是有有效期的,其实,做儿女又何尝不是?子欲养而亲尚待,绝对是上天给予的最大恩赐。趁父母还年轻,趁父母还健在,多陪陪他们吧。不要整天只知道在朋友圈说什么父母在,人生尚有来处,父母去,人生只剩归途。多拿出些实际行动,去做,去实现。</span>
            <span class="hide i2">心像是个口袋,什么都不装的叫心灵,装一点的叫心眼,装多了的的叫心计,装更多的叫心机,装得太多了最后那些负累就只能被当作心事了。人活在世往往过于在意近在咫尺的功名利禄,我们的生活是否如与朋友说起时一般绚烂夺目,现实生活中亦有很多人深陷进没有结果的爱情里,明知是错的,还要迂回前进。那些口口声声说着为了生活的衣食无忧、为了孩子不得不继续维持的婚姻。很多人拿不起又放不下,任由空白的生活在自己的眼中周而复始、慢慢的这种负累侵蚀的我们身心不堪重负。试着放下吧,放下你的疲惫、放下那些没有结果的执念、清醒时看到的你和他的未来若是并不理想,不如劝自己趁早放下,长痛不如短痛。再试着看开些,有钱就会拥有快乐么?就像你耗尽心力换得了工作场上的升职机会,而就在你即将上任时被查出了重症,钱能换回健康么?再多的钱能换回你的生命,换回勃勃生机的青春么?钱固然重要,可是与生命、与亲情、爱情比起来,钱真的没有那么重要。有形的财富无法与无价的情感、生命相提并论,何来取舍一说呢。人一定要想清三个问题,第一你有什么,第二你要什么,第三你能放弃什么。对于多数人而言:有什么,我们往往很轻易的就评价出自己的现状;那要什么,大多数人内心也有明确的想法;那么问题来了,现在你告诉我你能放弃什么,几乎没有人可以做到不放弃就轻易获得了全部你想要的东西。人生不会每一件事都会让自己称心如意,常言道:人为财死,鸟为食亡。但有多少人为了事业有成,最后倒在了工作岗位上,那些口耳相传的过劳案例并非偶然意外、就像疾病的发展也是有一个循序渐进的过程。外在的过劳加上心里的过度忧思,外因内因从不分离。那些远赴千里外的地方工作的子女,其家中病重老母为不让远方的儿过于掂念,不忍心在孩子耳边传递生病讯息,弥留之际也未能见上最后一面。我并不赞成那些抛家舍业的一颗心思完全放在工作上的做法,工作一时的,即便离开这,你仍有再次获得的机会。而家庭、健康却要陪伴你很久,且一旦失去就是永远。或许你是为财而死,但是不值得。生活中很多人喜欢就一件事左右摇摆,举棋不定。轻易落子怕输了,一子不落怕错过。于是他们一直纠结于细微得不值得一提的小事,让自己始终活在紧张的泥潭不能自拔。在自己短暂的一生中,谨小慎微,防微杜渐,也许别人的一句话,一个眼神,一个表情,都会不断揣摩,别人随口一说的话却始终放在心里耿耿于怀,凡事有一点端倪便以偏概全,杞人忧天。所以这些人总是活得很累,舒心二字与他们完全绝缘。其实人生有一种心态叫放下,。不必凡事都争个明白,我们生活的这个社会本就很复杂,然而很多人把这个本来就复杂的社会弄得更加复杂,复杂的无章可循。贪婪的人容易受到打击。欲望越少,生活越幸福。</span>
            <span class="hide i3">“感恩之心,幻化成蝶”雅而不失原本滋色,其实这八个字传递的是一种高度,人生在世因为懂得感恩,所以不再抱怨生活艰辛,因为懂得感恩,所以不去计较过多的利益得失,因为懂得感恩,所以不再在乎快乐或是悲伤,伤或不伤的这段过程本身就是一种幸福。曾看过这样一段话,其出自哈佛大学图书馆馆训:“你所浪费的今天,是昨天死去的人奢望的明天。你所厌恶的现在,是未来的你回不去的曾经。”自己就算再不堪,你还拥有大把的生命去挥霍,你还可以尽情享受生活,张开双手拥抱明早初生的太阳。感恩生命,活着就是最宝贵的拥有。感恩生活说到感恩,首先对自己说上一句谢谢,谢谢你始终默默坚守,谢谢你无论越过多少沟壑,通往前方的路是曲折是坎坷你都从未放弃行走。英国作家萨克雷说:“生活就是一面镜子,你笑,它也笑;你哭,它也哭。”“人有悲欢离合,月有阴晴圆缺。”就如同这诗句一般,人生在世,不如意事十有八九。难过、失落、彷徨注定贯穿在我们的生命线中的,若你过度在意、纠结那你就会始终陷入困顿的沼泽再无法自拔。没有一帆风顺的人生,有的只是内心的波澜不惊,从容不迫。如你抱怨,那你看到的世界处处不顺心意。你若感恩,很多事便化作是过眼烟云。内心保持一份安宁是我们对生命最好的感谢。生活中的幸事教会你微笑、自信。顺境是心情,逆境是心态,更是眼界和格局。生活中的各种坎坷教会了你成长。以积极心态勇敢的面对生活中那些困顿的人更坚强、更懂得挑战和突破自我,从而实现生命的价值,让生命不虚度。“塞翁失马,焉知非福”、“祸兮,福之所倚,福兮,祸之所伏。”不执着问题表象,保持头脑的清醒,静看人生,那么得失也亦不必在短时间内拍下定论,问题中或许还潜藏着陷阱和转机。 古诗中说:“山穷水尽疑无路,柳暗花明又一村。”日常生活当中,许多人经常以个人的利益得失来衡量事情的好坏,有些人每天都为蝇头小利或喜或忧。然由于人们看到的只是事情表象,得到未必是福,失去也不一定是祸。“物极必反,否极泰来。”没有挫折就不会有智慧,没有付出就难以有收获。一失败就是一次假期,乐观豁达之人都懂得享受假期而不会怨天尤人,反而会利用这种机会休养好自己的身心,冷静的思考人生、总结经验,在假期过后重踏人生旅途时就会出现新的转机。即使是遇到了最坏的状况时,也应该看到人生处处隐藏着令人意想不到的机会,坦然面对人生中的挫折,百折不挠,就必能走向光明的彼岸。</span>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(.c4).click(function () {
            var ss=`.${this.id}`;
            $(ss).removeClass(hide);
            $(ss).siblings().addClass(hide);
            $(this).addClass(cc);
            $(this).siblings().removeClass(cc);
        })
    </script>
</body>
</html>
View Code

   2,轮播图

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        .c1{
            margin: 0 auto;
            width: 1000px;
            height: 500px;
            border: 1px black solid;
        }
        img{
            width: 1000px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="c1">
        <img src="1.jpg" class=‘c2‘ alt="">
        <img src="2.jpg" class="c3" style="display: none" alt="">
        <img src="3.jpg" class="c4" style="display: none" alt="">
    </div>
    <script>
        setInterval(function () {
                $(.c2).show().siblings().hide()
            },6000);
        setTimeout(function () {
            $(.c3).show().siblings().hide();
            setInterval(function () {
                $(.c3).show().siblings().hide()
            },6000)
        },2000);
        setTimeout(function () {
            $(.c4).show().siblings().hide();
           setInterval(function () {
               $(.c4).show().siblings().hide()
           },6000)
        },4000)
    </script>
</body>
</html>
View Code

  3,表格增删改查

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <button class="btn btn-info btn-sm col-md-offset-2" id="add">添加</button>
    </div>
     <div class="hide form2 container">
        姓名<input type="text" class="cc">
        年龄<input type="text" class="cc">
        部门<input type="text" class="cc">
        薪水<input type="text" class="cc">
        <button class="btn btn-success certain btn-sm">确定</button>
        <button class="btn btn-success quxiao btn-sm">取消</button>
    </div>
    <div class="container hide form1" >
            姓名<input type="text">
            年龄<input type="text">
            部门<input type="text">
            薪水<input type="text">
            <button class="btn btn-success" id="submit">提交</button>
            <button class="btn btn-success quxiao" >取消</button>
    </div>
    <div class="container">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>部门</th>
                <th>薪水</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr>
                <td>1</td>
                <td>王小兵</td>
                <td>24</td>
                <td>js</td>
                <td>7000</td>
                <td><button class="btn btn-danger del btn-sm">删除</button><button class="btn btn-warning edit btn-sm">编辑</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>李浩</td>
                <td>26</td>
                <td>前端</td>
                <td>10000</td>
                <td><button class="btn btn-danger del btn-sm">删除</button><button class="btn btn-warning edit btn-sm">编辑</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>况波</td>
                <td>25</td>
                <td>python</td>
                <td>9000</td>
                <td><button class="btn btn-danger del btn-sm">删除</button><button class="btn btn-warning edit btn-sm">编辑</button></td>
            </tr>
            </tbody>
        </table>
    </div>


    <script>
        $(#add).click(function () {
            $(.form1).removeClass(hide);
        });
        $(#submit).click(function () {
            var $tr=$(<tr></tr>);
            var num=parseInt($(tr:last td:first).html())+1;
            var $td1=$(<td>+num+</td>);
            $tr.append($td1);
            $(input).each(function () {
                var $td=$(<td>+this.value+</td>);
                $tr.append($td);
            });
            var $td2=$(<td><button class="btn btn-danger del btn-sm">删除</button><button class="btn btn-warning edit btn-sm">编辑</button></td>);
            $tr.append($td2);
            $(tbody).append($tr);
            $(.form1).addClass(hide);
        });
        $(#tbody).on(click,.del,function () {
            $(this).parent().parent().nextAll().each(function () {
                $(this).children().first().html(parseInt($(this).children().first().html())-1);
            });
            $(this).parent().parent().remove();

        });
        var father;
        $(#tbody).on(click,.edit,function () {
            $(.form2).removeClass(hide);
            father=$(this).parent().parent().children(td);
        });
        $(.certain).click(function () {
            var zz=$(.cc);
            for (var i=0;i<4;i++){
                father.eq(i+1).html(zz.eq(i).val());
            }
             $(.form2).addClass(hide);
        });
        $(.quxiao).click(function () {
            $(.form2).addClass(hide);
            $(.form1).addClass(hide);
        })
    </script>
</body>
</html>
View Code

 

JQuery

标签:nextall   sed   first   就会   循环函数   1.4   现实生活   close   ret   

原文地址:https://www.cnblogs.com/12345huangchun/p/10181045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!