jQuery经典小案例

下拉菜单案例

突出展示案例

淘宝精品案例

下拉菜单案例

效果图：

下拉菜单案例

源代码：

鼠标进入事件mouseenter 鼠标离开事件mouseleave

下拉动画slideDown /slideUp

.stop() 停止动画

<script>
$(function(){
var $li=$(".wrap>ul>li")
$li.mouseenter(function () {
$(this).children("ul").stop().slideDown();
})
$li.mouseleave(function () {
$(this).children("ul").stop().slideUp();
})
});
</script>

突出展示案例

效果图：

突出展示案例图

源代码：

兄弟标签 $( ).siblings( )

<script>
$(function () {
$(".wrap>ul>li").mouseenter(function () {
//给li注册鼠标进入事件，让li都变亮
//让li的所有兄弟透明度降低
$(this).css("opacity","1").siblings().css("opacity",".4");
});
$(".wrap").mouseleave(function () {
//离开父盒子时，所有li亮起来
//$(this).children().children("li");
$(this).find('li').css("opacity", 1);
});
});
</script>

淘宝精品案例

效果图：

淘宝精品案例图

淘宝精品案例效果图

源代码：

获取索引用 .index()；

筛选选择器 $().eq(i)；

<script>
$(function () {
$("#left>li").mouseenter(function () {
var index=$(this).index();
$("#center>li").eq(index).show().siblings().hide();
});
$("#right>li").mouseenter(function () {
var index=$(this).index()+9;
$("#center>li").eq(index).show().siblings().hide();
});
});
</script>

京东呼吸灯案例

效果图：点击切换图片

京东呼吸灯案例效果图

源代码：

给左右焦点按钮注册点击事件

右按钮当索引++ 等于图片的个数时，索引跳转到第一张图片（左按钮为-1时，跳转最后一张图片）

下一张图片fadeIn 动画显示，所有兄弟图片 fadeOut 动画渐隐，实现呼吸灯效果

<script>
$(function () {
var $li = $(".slider>ul>li");
var count = 0;
$(".arrow-right").click(function () {
count++;
if(count == $li.length){
count = 0;
}
$li.eq(count).fadeIn(1000).siblings().fadeOut(1000);
});
$(".arrow-left").click(function () {
count--;
if(count == -1){
count = $li.length - 1;
}
$li.eq(count).fadeIn(1000).siblings().fadeOut(1000);
});
});
</script>

tab栏切换案例

效果图：

源代码：

1.给所有tab注册鼠标进入事件

2.给当前tab添加样式addClass（“样式名”），给其他兄弟移除样式【排他功能】

3.获取当前索引，给当前div添加选中（display：block），其他图片隐藏

<script>
$(function () {
$(".tab-item").mouseenter(function () {
$(this).addClass("active").siblings().removeClass("active");
var idx=$(this).index();
$(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
});
});
</script>

手风琴案例

效果图：

源代码：

<script>
$(function () {
var $li = $("#box li");
for (var i = 0; i < $li.length; i++) {
$li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
}
//给所有的li注册鼠标经过事件
$li.mouseenter(function () {
$(this).stop().animate({width:800}).siblings().stop().animate({width:100});
}).mouseleave(function () {
$li.stop().animate({width:240});
});
});
</script>

城市选择案例

效果图：

源代码：

主要考察层级（子代）选择器、筛选选择器、appendTo等

<script>
$(function () {
$("#btn1").click(function () {
$("#src-city>option").appendTo("#tar-city");
});
$("#btn2").click(function () {
$("#src-city").append($("#tar-city>option"));
});
$("#btn3").click(function () {
$("#src-city>option:selected").appendTo("#tar-city");
});
$("#btn4").click(function () {
$("#src-city").append($("#tar-city>option:selected"));
});
});
</script>

微博发布案例

效果图：

源代码：

. val() 获取文本的值 .trim( )；清除空白片段

若输入内容长度不等于0，则将获取到的内容添加到ul中的li里面

再将输入框内的内容清空

<script>
$(function () {
$("#btn").click(function () {
if($("#txt").val().trim().length == 0) {
return;
}
//就是文本框的值
$("<li></li>").text($("#txt").val()).prependTo("#ul");
$("#txt").val("");
})
});
</script>

弹幕效果案例

效果图：

源代码：

1.定义颜色数组，设置弹幕的随机颜色和随机高度

2.创建一个span与输入框内容一致。设置随机颜色和初始位置（x,y），添加到盒子内

3.动画匀速从右到左，执行完以后删除此span（回调函数），删除文本框内容

4.设置e.keyCode==13，即键盘回车键抬起事件时，触发事件

<script>
$(function () {
//注册事件
var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
$("#btn").click(function () {
var randomColor = parseInt(Math.random() * colors.length);
var randomY = parseInt(Math.random() * 400);
$("<span></span>")//创建span
.text($("#text").val())//设置内容
.css("color", colors[randomColor])//设置字体颜色
.css("left", "1400px")//设置left值
.css("top", randomY)//设置top值
.animate({left: -500}, 10000, "linear", function () {
//到了终点，需要删除
$(this).remove();
})//添加动画
.appendTo("#boxDom");
$("#text").val("");
});
$("#text").keyup(function (e) {
if (e.keyCode == 13) {
$("#btn").click();
}
});
});
</script>