您的位置: 首页  >  IT文章  >  JQuery

JQuery

分类: IT文章 • 2025-01-11 23:37:55

　　一、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>
委派　　　　

　　2.3事件切换

　　hover事件：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

$('.body').hover(function () {
    clearInterval(obj)
},function () {
    obj=setInterval(function () {
    GO_R()
},2000);
});
第一个参数为一个函数，当鼠标移动到元素上要触发的函数
第二个参数为一个函数，当鼠标移出元素触发的函数

　　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;  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

　　四、扩展方法

　　JQuery自身带有的方法有限，若有一个方法我们会经常使用它，我们就可以自定义函数放到JQuery里面，下次我们就可以调用了。

　　1，JQuery.extend(object)

　　扩展JQuery对象本身，用来在JQuery命名空间上新增新函数。

<script>
    jQuery.extend({
      min: function(a, b) { return a < b ? a : b; },
      max: function(a, b) { return a > b ? a : b; }
});


    jQuery.min(2,3); // => 2
    jQuery.max(4,5); // => 5
</script>
View Code

　　2，JQuery.fn.extend(object)

　　扩展JQuery元素集来提供新的方法（通常用来制作插件）

<body>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script src="jquery.min.js"></script>
<script>
    jQuery.fn.extend({
      check: function() {
         $(this).attr("checked",true);
      },
      uncheck: function() {
         $(this).attr("checked",false);
      }
    });


    $(":checkbox:gt(0)").check()
</script>

</body>
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>
        .body{
            position: relative;
            margin: 0 auto;
            border: 1px solid black;
            width: 800px;
            height: 600px;
        }
        img{
            position: absolute;
            left: 0;
            top: 0;
            height: 600px;
            width: 800px;
        }
        li{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-left: 33px;
            background-color: grey;
        }
        ul{
            position: absolute;
            top: 550px;
            left: 300px;
        }
        .le_ri{
            position: absolute;
            top: 250px;
            left: 0;
            width: 100%;
            height: 100px;
        }
        .left{
            background-color: grey;
            width: 50px;
            font-size:80px;
            float: left;
            opacity: 0.7;
            border-style: none;
            line-height: 100px;
        }
        .right{
            background-color: grey;
            width: 50px;
            font-size: 80px;
            float: right;
            opacity: 0.7;
            border-style: none;
            line-height: 100px;
        }
        .change{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="body">
        <div>
            <img src="1.jpg" class="c1">
            <img src="2.jpg" class="c2">
            <img src="3.jpg" class="c2">
        </div>
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="le_ri">
            <!--<button class="left">&lt;</button>-->
            <div class="left">&lt;</div>
            <!--<button class="right">&gt;</button>-->
            <div class="right">&gt;</div>
        </div>
    </div>
    <script>
        $('img').eq(0).fadeIn(200).siblings().fadeOut(200);
        $('li').eq(0).addClass('change').siblings().removeClass('change');
        function GO_R() {
            if (num>1){
                num=-1;
            }
            num++;
            $('img').eq(num).fadeIn(200).siblings().fadeOut(200);
            $('li').eq(num).addClass('change').siblings().removeClass('change');
        }
        function GO_L() {
            if (num==0){
                num=3;
            }
            num--;
            $('img').eq(num).fadeIn(200).siblings().fadeOut(200);
            $('li').eq(num).addClass('change').siblings().removeClass('change');
        }

        var num=0;
        obj=setInterval(function () {
            GO_R()
        },2000);
        $('.body').hover(function () {
            clearInterval(obj)
        },function () {
            obj=setInterval(function () {
            GO_R()
        },2000);
        });
        $('.left').click(function () {
           GO_L()
        });
        $('.right').click(function () {
           GO_R()
        })
    </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" class="cc1">
            年龄<input type="text" class="cc1">
            部门<input type="text" class="cc1">
            薪水<input type="text" class="cc1">
            <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=$('tr').length;
            // num=parseInt($('tr:last td:first').html())+1;
            var $td1=$('<td>'+num+'</td>');
            $tr.append($td1);
            $('.cc1').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

相关推荐