jQuery 下部分--头歌（educoder)实训作业题目及答案

目录

点赞👍 收藏❤ 是我最大的创作动力

jQuery动画

第1关jQuery动画效果——隐藏/显示

第2关jQuery动画效果——淡入淡出

第3关jQuery动画效果——滑动

第4关jQuery动画效果——自定义动画

jQuery遍历

第1关jQuery——遍历DOM元素的祖先元素

第2关jQuery——遍历DOM元素的后代元素

第3关jQuery——遍历DOM元素的兄弟元素

第4关jQuery遍历——过滤

点赞👍 收藏❤ 是我最大的创作动力

jQuery动画

第1关jQuery动画效果——隐藏/显示

		<script>
			$(function() {
				//------------begin---------
        $(".hide").click(function(){
      $(".item").hide("slow",function(){alert("我隐藏了");});
       });

        $(".show").click(function(){
      $(".item").show(1000,function(){alert("我显示了");});
       });

       $(".toggle").click(function(){
      $(".item").toggle("fast",function(){alert("隐藏显示的切换");});
       });
        
                //-----------end------------
			})
		</script>

第2关jQuery动画效果——淡入淡出

   <script>
    $(function(){
        
        $(".btn").click(function(){       
        // ---------- Begin -----------
             $(".first").fadeTo(2000,0.5);
             $(".second").delay(2000).fadeTo(2000,0.5);
             $(".first").delay(2000).fadeOut("slow");
            $(".second").fadeOut("slow");
            

        // ---------- End -----------
        })
    })
   </script>

第3关jQuery动画效果——滑动

    <script>
     $(function(){
         
         //-------------- Begin ----------------
        $(".menu").mouseenter(function(){
            
        $(".list").slideDown(1000);
         })
        $(".menu").mouseleave(function(){

            $(".list").slideUp(1000);
        })
         //-------------- End --------------------

     })
    </script>

第4关jQuery动画效果——自定义动画

   <script>
    $(function(){
         $(".btn").click(function(){
            //向contianer里插入DOM元素 img 标签，每点击一次，插入一张图片。
            var dom = '<img class="love" src="https://www.educoder.net/attachments/download/206509" alt="爱心">';
            $(".container").append(dom);

            //--------- Begin ----------
            
        $(".love").show().animate({top:"-=120px",opacity:"0"},1500);
             
            //--------- End ------------
         })
    })

   </script>

jQuery遍历

第1关jQuery——遍历DOM元素的祖先元素

   <script>

    $(function(){        
        //------------ Begin -----------
        $(".item").parents().css("background","#ccc");
        $(".item").parent().css("background", "#fff");
        //------------ End --------------
    })

   </script>

第2关jQuery——遍历DOM元素的后代元素

    <script>
     $(function(){
         
         //----------------- Begin -----------------
         $(".container").children().css("background", "red");
         $(".container").find(".item").css("color","#fff");

         //----------------- End --------------------

     })

    </script>

第3关jQuery——遍历DOM元素的兄弟元素

    <script>
     $(function(){
        $(".item").css("background","yellow");
         
        //------------ Begin --------------

     $(".item").siblings().css("background","cyan");
     $(".item").prevAll().css("background","red");
     $(".item").prev().css("background","orange");
     $(".item").next().css("background","green");

        //-------------- End ---------------

     })
    </script>

第4关jQuery遍历——过滤

    <script>
     $(function(){
      //---------- Begin ------------
      $(".item").first().css("color","red");
      $(".item").filter(".active").css("color","orange");
      $(".item").eq(2).css("color","yellow");
      $(".four").not(".item").css("color","green");
      $(".item").last().css("color","blue");      
      //----------- End -------------
     })
    </script>