版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
JQuery基础案例（仅提供js代码）
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 = $("<div class=\"info\">\n" +
" <p class=\"infoText\">"+text+"</p>\n" +
" <p class=\"infoOperation\">\n" +
" <span class=\"infoTime\">"+formartDate()+"</span>\n" +
" <span class=\"infoHandle\">\n" +
" <a href=\"javascript:;\" class='infoTop'>0</a>\n" +
" <a href=\"javascript:;\" class='infoDown'>0</a>\n" +
" <a href=\"javascript:;\" class='infoDel'>删除</a>\n" +
" </span>\n" +
" </p>\n" +
" </div>");
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("");
}
});