JQuery基础案例

1. 排行榜

效果:（显示隐藏排行榜具体内容）

• 方法一
• mouseenter
• mouseleave

<script>
    $(function () {
        // 编写jQuery相关代码
        
        // 1.监听li的移入事件
        $("li").mouseenter(function () {
            $(this).addClass("current");
        });
        // 2.监听li的移出事件
        $("li").mouseleave(function () {
            $(this).removeClass("current");
        });
        
    });
    script>

• 方法二
• hover

<script>
    $(function () {
        // 编写jQuery相关代码
        $("li").hover(function () {
            $(this).addClass("current");
        }, function () {
            $(this).removeClass("current");
        });
    });
    script>

2. Tap选项卡

效果:（切换到选中的Tap图片）

• siblings 方法
  • 获取除被选中元素之外所有的同级元素节点
  • 可以添加条件

<script>
	$(function () {
	    // 1.监听选项卡的移入事件
	    $(".nav>li").mouseenter(function () {
	        // 1.1修改被移入选项卡的背景颜色
	        $(this).addClass("current");
	        // 1.2还原其它兄弟选项卡的背景颜色
	        $(this).siblings().removeClass("current");
	        // 1.3获取当前移出选项卡的索引
	        var index = $(this).index();
	        // 1.4根据索引找到对应的图片
	        var $li = $(".content>li").eq(index);
	        // 1.5隐藏非当前的其它图片
	        $li.siblings().removeClass("show");
	        // 1.6显示对应的图片
	        $li.addClass("show");
	    });
	});
script>

3. 对联广告

效果:（浏览器滚动到一定程度显示广告）

• scroll 方法
  • 当用户滚动指定的元素时，会发生 scroll 事件
  • scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)

<script>
     $(function () {
         // 1.监听网页的滚动
         $(window).scroll(function () {
             // 1.1获取网页滚动的偏移位
             var offset = $("html,body").scrollTop();
             // 1.2判断网页是否滚动到了指定的位置
             if(offset >= 500){
                 // 1.3显示广告
                 $("img").show(1000);
             }else{
                 // 1.4隐藏广告
                 $("img").hide(1000);
             }
         });
     });
script>

4. 折叠菜单

效果:（一级菜单点击展开收起）

• children 方法
  • children() 方法返回被选元素的所有直接子元素

<script>
    $(function () {

        // 1.监听一级菜单的点击事件
        $(".nav>li").click(function () {

            // 1.1拿到二级菜单
            var $sub = $(this).children(".sub");
            // 1.2让二级菜单展开
            $sub.slideDown(1000);
            // 1.3拿到所有非当前的二级菜单
            var otherSub = $(this).siblings().children(".sub");
            // 1.4让所有非当前的二级菜单收起
            otherSub.slideUp(1000);
            // 1.5让被点击的一级菜单箭头旋转
            $(this).addClass("current");
            // 1.6让所有非被点击的一级菜单箭头还原
            $(this).siblings().removeClass("current");

        });

    });
script>

5. 下拉菜单

效果:（鼠标移入下拉出二级菜单）

• stop 方法
  • 停止所有在指定元素上正在运行的动画

<script>
    $(function () {
        /*
        在jQuery中如果需要执行动画, 建议在执行动画之前先调用stop方法,然后再执行动画
        */
        // 1.监听一级菜单的移入事件
        $(".nav>li").mouseenter(function () {
            // 1.1拿到二级菜单
            var $sub = $(this).children(".sub");
            // 停止当前正在运行的动画：
            $sub.stop();
            // 1.2让二级菜单展开
            $sub.slideDown(1000);
        });
        // 2.监听一级菜单的移出事件
        $(".nav>li").mouseleave(function () {
            // 1.1拿到二级菜单
            var $sub = $(this).children(".sub");
            // 停止当前正在运行的动画：
            $sub.stop();
            // 1.2让二级菜单收起
            $sub.slideUp(1000);
        });

    });
    script>

6. 弹窗广告

效果:（右下角淡出广告）

• fade 方法
  • 动画的淡入淡出等效果

<script>
   $(function () {
       // 1.监听span的点击事件
       $("span").click(function () {
           $(".ad").remove();
       });

       // 2.执行广告动画
       /* 方法一（不推荐）
       $(".ad").slideDown(1000, function () {
           $(".ad").fadeOut(1000, function () {
               $(".ad").fadeIn(1000);
           });
       });
       */
       
	   // 方法二（推荐）
       $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);

   });
script>

7. 图标特效

效果:（图标上滑一周）

<script>
    $(function () {
        // 1.遍历所有的li
        $("li").each(function (index, ele) {
            // 1.1生成新的图片位置
            var $url = "url(\"images/bg.png\") no-repeat 0 "+(index * -24)+"px"
            // 1.2设置新的图片位置
            $(this).children("span").css("background", $url);
        });
        
        // 2.监听li移入事件
        $("li").mouseenter(function () {
            // 2.1将图标往上移动
            $(this).children("span").animate({
                top: -50
            }, 1000, function () {
                // 2.2将图片往下移动
                $(this).css("top", "50px");
                // 2.3将图片复位
                $(this).animate({
                    top: 0
                }, 1000);
            });
        });
    });
script>

8. 无限循环滚动

效果:（图片无限轮播）

<script>
   $(function () {
       // 0.定义变量保存偏移位
       var offset = 0;
       // 1.让图片滚动起来
       var timer;
       function autoPlay(){
           timer = setInterval(function () {
               offset += -10;
               if(offset <= -1200){
                   offset = 0;
               }
               $("ul").css("marginLeft", offset);
           }, 50);
       }
       autoPlay();

      // 2.监听li的移入和移出事件
       $("li").hover(function () {
           // 停止滚动
           clearInterval(timer);
           // 给非当前选中添加蒙版
           $(this).siblings().fadeTo(100, 0.5);
           // 去除当前选中的蒙版
           $(this).fadeTo(100, 1);
       }, function () {
           // 继续滚动
           autoPlay();
           // 去除所有的蒙版
           $("li").fadeTo(100, 1);
       });
   });
script>

9. 微博

效果：（实时发布评论，点赞，点踩，删除评论）

$(function () {
    // 0.监听内容的时时输入
    $("body").delegate(".comment","propertychange input", function () {
        // 判断是否输入了内容
        if($(this).val().length > 0){
            // 让按钮可用
            $(".send").prop("disabled", false);
        }else{
            // 让按钮不可用
            $(".send").prop("disabled", true);
        }
    });
    // 1.监听发布按钮的点击
    $(".send").click(function () {
        // 拿到用户输入的内容
        var $text = $(".comment").val();
        // 根据内容创建节点
        var $weibo = createEle($text);
        // 插入微博
        $(".messageList").prepend($weibo);
    });

    // 2.监听顶点击
    $("body").delegate(".infoTop", "click", function () {
        $(this).text(parseInt($(this).text()) + 1);
    });
    // 3.监听踩点击
    $("body").delegate(".infoDown", "click", function () {
        $(this).text(parseInt($(this).text()) + 1);
    });
    // 4.监听删除点击
    $("body").delegate(".infoDel", "click", function () {
        $(this).parents(".info").remove();
    });

    // 创建节点方法
    function createEle(text) {
        var $weibo = $("
\n" +
            "            
"+text+"
\n" +
            "            
\n" +
            "                "+formartDate()+"\n" +
            "                \n" +
            "                    0\n" +
            "                    0\n" +
            "                    删除\n" +
            "                \n" +
            "            
\n" +
            "        
");
        return $weibo;
    }

    // 生成时间方法
    function formartDate() {
        var date = new Date();
        // 2018-4-3 21:30:23
        var arr = [date.getFullYear() + "-",
            date.getMonth() + 1 + "-",
            date.getDate() + " ",
            date.getHours() + ":",
            date.getMinutes() + ":",
            date.getSeconds()];
        return arr.join("");

    }
});